@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/navigation/Sidebar.js

@@ -1,6 +1,6 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useState, useEffect, useId, useRef, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 import { ChevronRight, ChevronLeft, ChevronDown } from 'lucide-react';
@@ -8,8 +8,109 @@ import Tooltip from '../core/Tooltip.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useSheetDrag, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
 
-var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange"];
+var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
+// From `md` up the sidebar is an in-flow sticky column; below it, the same
+// tree becomes an off-canvas drawer (modal dialog while open).
+var SIDEBAR_DESKTOP_QUERY = "(min-width: 768px)";
+// Swipe gestures (phones). The drawer closes past CLOSE_DISTANCE or on a
+// flick; an edge swipe opens it past OPEN_DISTANCE.
+var EDGE_WIDTH = 20; // px from the screen edge where an open swipe may start
+var OPEN_DISTANCE = 56; // px
+var CLOSE_DISTANCE = 80; // px
+var FLICK_MIN_DISTANCE = 16; // px
+var SWIPE_SLOP = 6; // px before the edge gesture picks an axis
+/**
+ * Edge swipe to open (touch only). Window-level listeners, so nothing covers
+ * the page edge and taps there still land. Returns the live drag distance
+ * (px toward open) while a swipe is in progress, else 0.
+ */
+function useEdgeSwipe(_ref) {
+  var enabled = _ref.enabled,
+    fromRight = _ref.fromRight,
+    onOpen = _ref.onOpen;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    distance = _useState2[0],
+    setDistance = _useState2[1];
+  var onOpenRef = useLatestRef(onOpen);
+  useEffect(function () {
+    if (!enabled || typeof window === "undefined") return undefined;
+    var g = null;
+    var point = function point(e) {
+      var _e$touches, _e$changedTouches;
+      return ((_e$touches = e.touches) === null || _e$touches === void 0 ? void 0 : _e$touches[0]) || ((_e$changedTouches = e.changedTouches) === null || _e$changedTouches === void 0 ? void 0 : _e$changedTouches[0]);
+    };
+    var towardOpen = function towardOpen(origin, p) {
+      return fromRight ? origin.x - p.clientX : p.clientX - origin.x;
+    };
+    var onStart = function onStart(e) {
+      var p = point(e);
+      if (!p || e.touches && e.touches.length > 1) return;
+      var width = window.innerWidth || 0;
+      var atEdge = fromRight ? p.clientX >= width - EDGE_WIDTH : p.clientX <= EDGE_WIDTH;
+      g = atEdge ? {
+        x: p.clientX,
+        y: p.clientY,
+        t: Date.now(),
+        active: false
+      } : null;
+    };
+    var onMove = function onMove(e) {
+      if (!g) return;
+      var p = point(e);
+      if (!p) return;
+      var d = towardOpen(g, p);
+      var cross = p.clientY - g.y;
+      if (!g.active) {
+        if (Math.max(Math.abs(d), Math.abs(cross)) < SWIPE_SLOP) return;
+        if (d <= 0 || Math.abs(d) < Math.abs(cross)) {
+          g = null; // a vertical scroll, or away from the drawer
+          return;
+        }
+        g.active = true;
+      }
+      if (e.cancelable) e.preventDefault();
+      setDistance(Math.max(0, d));
+    };
+    var onEnd = function onEnd(e) {
+      if (!g) return;
+      var gesture = g;
+      g = null;
+      if (!gesture.active) return;
+      setDistance(0);
+      var p = point(e);
+      var d = p ? towardOpen(gesture, p) : 0;
+      var velocity = d / Math.max(1, Date.now() - gesture.t);
+      if (d >= OPEN_DISTANCE || velocity >= FLICK_VELOCITY && d > FLICK_MIN_DISTANCE) {
+        var _onOpenRef$current;
+        (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef);
+      }
+    };
+    var onCancel = function onCancel() {
+      var _g;
+      if ((_g = g) !== null && _g !== void 0 && _g.active) setDistance(0);
+      g = null;
+    };
+    window.addEventListener("touchstart", onStart, {
+      passive: true
+    });
+    window.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    window.addEventListener("touchend", onEnd);
+    window.addEventListener("touchcancel", onCancel);
+    return function () {
+      window.removeEventListener("touchstart", onStart);
+      window.removeEventListener("touchmove", onMove);
+      window.removeEventListener("touchend", onEnd);
+      window.removeEventListener("touchcancel", onCancel);
+    };
+  }, [enabled, fromRight, onOpenRef]);
+  return enabled ? distance : 0;
+}
 // useLayoutEffect warns during SSR; fall back to useEffect on the server.
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 // Ctrl/Cmd/Shift/Alt-click or a non-primary button: the browser opens the
@@ -82,51 +183,58 @@ var hasBadge = function hasBadge(item) {
  * - drawerPosition: 'left' | 'right'
  * - isMobileOpen, setIsMobileOpen
  * - showCollapsedTooltips: boolean (default true)
+ * - swipeable: boolean (default true) — phones: swipe in from the screen edge
+ *   to open the drawer, swipe it back toward its edge to close
+ *
+ * The content renders once: a sticky column from `md` up, an off-canvas
+ * drawer (modal dialog while open) below.
  */
-var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
-    onToggle = _ref.onToggle,
-    className = _ref.className,
-    containerClassName = _ref.containerClassName,
-    stickyOffset = _ref.stickyOffset,
-    logo = _ref.logo,
-    footer = _ref.footer,
-    user = _ref.user,
-    onUserClick = _ref.onUserClick,
-    _ref$drawerPosition = _ref.drawerPosition,
-    drawerPosition = _ref$drawerPosition === void 0 ? "left" : _ref$drawerPosition,
-    _ref$isMobileOpen = _ref.isMobileOpen,
-    isMobileOpen = _ref$isMobileOpen === void 0 ? false : _ref$isMobileOpen,
-    setIsMobileOpen = _ref.setIsMobileOpen,
-    _ref$showCollapsedToo = _ref.showCollapsedTooltips,
-    showCollapsedTooltips = _ref$showCollapsedToo === void 0 ? true : _ref$showCollapsedToo,
-    tooltipOptions = _ref.tooltipOptions,
-    _ref$linkAs = _ref.linkAs,
-    Link = _ref$linkAs === void 0 ? "a" : _ref$linkAs,
-    expandedIds = _ref.expandedIds,
-    defaultExpandedIds = _ref.defaultExpandedIds,
-    onExpandedChange = _ref.onExpandedChange,
-    props = _objectWithoutProperties(_ref, _excluded);
+var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$collapsed = _ref2.collapsed,
+    collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    onToggle = _ref2.onToggle,
+    className = _ref2.className,
+    containerClassName = _ref2.containerClassName,
+    stickyOffset = _ref2.stickyOffset,
+    logo = _ref2.logo,
+    footer = _ref2.footer,
+    user = _ref2.user,
+    onUserClick = _ref2.onUserClick,
+    _ref2$drawerPosition = _ref2.drawerPosition,
+    drawerPosition = _ref2$drawerPosition === void 0 ? "left" : _ref2$drawerPosition,
+    _ref2$isMobileOpen = _ref2.isMobileOpen,
+    isMobileOpen = _ref2$isMobileOpen === void 0 ? false : _ref2$isMobileOpen,
+    setIsMobileOpen = _ref2.setIsMobileOpen,
+    _ref2$showCollapsedTo = _ref2.showCollapsedTooltips,
+    showCollapsedTooltips = _ref2$showCollapsedTo === void 0 ? true : _ref2$showCollapsedTo,
+    tooltipOptions = _ref2.tooltipOptions,
+    _ref2$linkAs = _ref2.linkAs,
+    Link = _ref2$linkAs === void 0 ? "a" : _ref2$linkAs,
+    expandedIds = _ref2.expandedIds,
+    defaultExpandedIds = _ref2.defaultExpandedIds,
+    onExpandedChange = _ref2.onExpandedChange,
+    _ref2$swipeable = _ref2.swipeable,
+    swipeable = _ref2$swipeable === void 0 ? true : _ref2$swipeable,
+    props = _objectWithoutProperties(_ref2, _excluded);
   // -- expansion (controlled via `expandedIds`, else internal) ----------------
   var isExpansionControlled = expandedIds !== undefined;
   var activeAncestors = useMemo(function () {
     return findActiveAncestors(items);
   }, [items]);
   var activeKey = activeAncestors.join("\0");
-  var _useState = useState(function () {
+  var _useState3 = useState(function () {
       return mergeIds(Array.isArray(defaultExpandedIds) ? defaultExpandedIds : [], activeAncestors);
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalExpanded = _useState2[0],
-    setInternalExpanded = _useState2[1];
-  // Open the groups holding a newly-active item (adjust-during-render).
-  var _useState3 = useState(activeKey),
     _useState4 = _slicedToArray(_useState3, 2),
-    prevActiveKey = _useState4[0],
-    setPrevActiveKey = _useState4[1];
+    internalExpanded = _useState4[0],
+    setInternalExpanded = _useState4[1];
+  // Open the groups holding a newly-active item (adjust-during-render).
+  var _useState5 = useState(activeKey),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevActiveKey = _useState6[0],
+    setPrevActiveKey = _useState6[1];
   if (activeKey !== prevActiveKey) {
     setPrevActiveKey(activeKey);
     if (!isExpansionControlled) {
@@ -155,36 +263,66 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (!isExpansionControlled) setInternalExpanded(next);
     onExpandedChange === null || onExpandedChange === void 0 || onExpandedChange(next);
   };
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    activeItemId = _useState6[0],
-    setActiveItemId = _useState6[1];
-  // Content is rendered twice (desktop pane + mobile drawer), so DOM ids are
-  // scoped per instance and per pane.
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeItemId = _useState8[0],
+    setActiveItemId = _useState8[1];
+  // DOM ids are scoped per instance.
   var instanceId = useId();
   var drawerRef = useRef(null);
   var setIsMobileOpenRef = useLatestRef(setIsMobileOpen);
-  var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
-  var effectiveCollapsed = mobileOpen ? false : collapsed;
+  // One tree for every viewport: an in-flow column from `md` up, an
+  // off-canvas drawer below. Desktop on the server and while hydrating.
+  var isDesktop = useMediaQuery(SIDEBAR_DESKTOP_QUERY, {
+    defaultValue: true
+  });
+  var drawerMode = !isDesktop;
+  var mobileOpen = Boolean(isMobileOpen);
+  var drawerOpen = drawerMode && mobileOpen;
+  var effectiveCollapsed = drawerMode ? false : collapsed;
+  var isRight = drawerPosition === "right";
   // Ref-counted, so a Dialog/Drawer stacked on top never unlocks the page early.
-  useScrollLock(mobileOpen);
+  useScrollLock(drawerOpen);
   // The drawer stays mounted (it slides in/out), so when it is shut it must
   // leave the tab order and the a11y tree. `inert` is set imperatively: React
   // 18 does not know the attribute and React 19 treats `inert=""` as false.
   useIsomorphicLayoutEffect(function () {
     var drawer = drawerRef.current;
     if (!drawer) return;
-    if (mobileOpen) drawer.removeAttribute("inert");else drawer.setAttribute("inert", "");
-  }, [mobileOpen]);
-  // Open drawer = modal dialog: initial focus inside, Tab trapped (skipped
-  // while md:hidden hides it), Escape closes, focus returns to the opener.
+    if (drawerMode && !mobileOpen) drawer.setAttribute("inert", "");else drawer.removeAttribute("inert");
+  }, [drawerMode, mobileOpen]);
+  // Open drawer = modal dialog: initial focus inside, Tab trapped, Escape
+  // closes, focus returns to the opener. Never on md+ (in-flow column).
   useFocusTrap(drawerRef, {
-    active: mobileOpen,
+    active: drawerOpen,
     onEscape: function onEscape() {
       var _setIsMobileOpenRef$c;
       return (_setIsMobileOpenRef$c = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c === void 0 ? void 0 : _setIsMobileOpenRef$c.call(setIsMobileOpenRef, false);
     }
   });
+  // Swipe toward the drawer's edge to close it (pointer drag, reusing the
+  // Sheet gesture core). `touch-pan-y` on the panel keeps vertical scrolling native.
+  var canSwipe = swipeable && drawerMode && typeof setIsMobileOpen === "function";
+  var closeDrag = useSheetDrag({
+    edge: isRight ? "right" : "left",
+    enabled: canSwipe && mobileOpen,
+    onRelease: function onRelease(_ref3) {
+      var _setIsMobileOpenRef$c2;
+      var delta = _ref3.delta,
+        velocity = _ref3.velocity;
+      var flick = velocity >= FLICK_VELOCITY && delta > FLICK_MIN_DISTANCE;
+      if (flick || delta >= CLOSE_DISTANCE) (_setIsMobileOpenRef$c2 = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c2 === void 0 || _setIsMobileOpenRef$c2.call(setIsMobileOpenRef, false);
+    }
+  });
+  // Swipe in from the screen edge to open it.
+  var openDistance = useEdgeSwipe({
+    enabled: canSwipe && !mobileOpen,
+    fromRight: isRight,
+    onOpen: function onOpen() {
+      var _setIsMobileOpenRef$c3;
+      return (_setIsMobileOpenRef$c3 = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c3 === void 0 ? void 0 : _setIsMobileOpenRef$c3.call(setIsMobileOpenRef, true);
+    }
+  });
   var closeMobile = function closeMobile() {
     if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
   };
@@ -239,7 +377,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onUserClick === null || onUserClick === void 0 || onUserClick(user);
     closeMobile();
   };
-  var _renderMenuItem = function renderMenuItem(item, level, pane) {
+  var _renderMenuItem = function renderMenuItem(item, level) {
     var _item$badgeLabel, _item$rel;
     var hasChildren = hasChildItems(item);
     var isExpanded = isExpandedId(item.id);
@@ -248,7 +386,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var labelHidden = effectiveCollapsed && level === 0;
     var hasHref = Boolean(item.href) && !item.disabled;
     var ItemTag = hasHref ? Link : "a";
-    var groupId = hasChildren ? "".concat(instanceId, "-").concat(pane, "-group-").concat(item.id) : undefined;
+    var groupId = hasChildren ? "".concat(instanceId, "-group-").concat(item.id) : undefined;
     var showBadge = hasBadge(item);
     var badgeText = showBadge ? String((_item$badgeLabel = item.badgeLabel) !== null && _item$badgeLabel !== void 0 ? _item$badgeLabel : item.badge) : undefined;
     // Collapsed: the badge shrinks onto the icon.
@@ -341,23 +479,23 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         id: groupId,
         className: "mt-1 space-y-1 ml-2",
         children: item.children.map(function (child) {
-          return _renderMenuItem(child, level + 1, pane);
+          return _renderMenuItem(child, level + 1);
         })
       })]
     }, item.id);
   };
   // Section headings (items with `group`). Collapsed: the heading becomes a
   // divider and stays available to screen readers.
-  var renderNavContent = function renderNavContent(pane) {
+  var renderNavContent = function renderNavContent() {
     if (!items.some(function (item) {
       return item && item.group;
     })) {
       return items.map(function (item) {
-        return _renderMenuItem(item, 0, pane);
+        return _renderMenuItem(item, 0);
       });
     }
     return groupItems(items).map(function (section, idx) {
-      var headingId = "".concat(instanceId, "-").concat(pane, "-section-").concat(idx);
+      var headingId = "".concat(instanceId, "-section-").concat(idx);
       return jsxs("div", {
         role: section.key ? "group" : undefined,
         "aria-labelledby": section.key ? headingId : undefined,
@@ -377,14 +515,27 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           className: "px-3 pb-1 pt-2 text-micro font-semibold uppercase tracking-wide text-muted",
           children: section.key
         })), section.items.map(function (item) {
-          return _renderMenuItem(item, 0, pane);
+          return _renderMenuItem(item, 0);
         })]
       }, section.key || "__ungrouped");
     });
   };
+  // In the drawer the button closes it; on md+ it collapses / expands.
   var handleToggleClick = function handleToggleClick() {
-    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
+    if (drawerMode && mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
+  var toggleLabel = drawerMode ? "Close navigation" : effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  var CloseChevron = isRight ? ChevronRight : ChevronLeft;
+  var toggleIcon = drawerMode ? jsx(CloseChevron, {
+    className: "h-5 w-5",
+    "aria-hidden": "true"
+  }) : effectiveCollapsed ? jsx(ChevronRight, {
+    className: "h-5 w-5",
+    "aria-hidden": "true"
+  }) : jsx(ChevronLeft, {
+    className: "h-5 w-5",
+    "aria-hidden": "true"
+  });
   var renderUserBlock = function renderUserBlock() {
     var content = jsxs(Fragment, {
       children: [user.avatar && jsx("img", {
@@ -418,11 +569,11 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: content
     });
   };
-  var renderFooter = function renderFooter(pane) {
+  var renderFooter = function renderFooter() {
     if (footer === undefined || footer === null || footer === false) return null;
     var content = typeof footer === "function" ? footer({
       collapsed: effectiveCollapsed,
-      isMobile: pane === "mobile",
+      isMobile: drawerMode,
       closeMobile: closeMobile
     }) : footer;
     if (content === undefined || content === null || content === false) return null;
@@ -432,32 +583,26 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: content
     });
   };
-  var renderSidebarContent = function renderSidebarContent(pane) {
+  var renderSidebarContent = function renderSidebarContent() {
     return jsxs("div", {
-      className: cn("flex h-full flex-col bg-surface text-foreground border-r border-line shadow-sm", "w-64 transition-all duration-200", {
-        "w-16": effectiveCollapsed,
-        "w-64": !effectiveCollapsed
-      }),
+      className: cn("flex h-full flex-col bg-surface text-foreground border-line shadow-sm", isRight ? "border-l" : "border-r", "transition-[width] duration-200 motion-reduce:transition-none", effectiveCollapsed ? "w-16" : "w-64"),
       children: [jsxs("div", {
-        className: "flex h-16 items-center justify-between border-b border-line px-4",
+        className: cn("flex h-16 shrink-0 items-center border-b border-line", effectiveCollapsed ? "justify-center px-2" : "justify-between px-4"),
         children: [!effectiveCollapsed && logo && jsx("div", {
-          className: "flex items-center",
+          className: "flex min-w-0 items-center",
           children: logo
         }), jsx("button", {
           type: "button",
           onClick: handleToggleClick,
-          className: "rounded-md p-1 hover:bg-gray-100 dark:hover:bg-gray-800",
-          "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          children: effectiveCollapsed ? jsx(ChevronRight, {
-            className: "h-5 w-5"
-          }) : jsx(ChevronLeft, {
-            className: "h-5 w-5"
-          })
+          className: cn("inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md", "hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
+          "aria-label": toggleLabel,
+          "data-sidebar-toggle": "",
+          children: toggleIcon
         })]
       }), jsx("nav", {
-        className: "flex-1 space-y-1 overflow-y-auto p-4 [&::-webkit-scrollbar]:w-2\n  [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-800\n  [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700\n  hover:[&::-webkit-scrollbar-thumb]:bg-gray-400",
-        children: renderNavContent(pane)
-      }), renderFooter(pane), user && jsx("div", {
+        className: "flex-1 space-y-1 overflow-y-auto overscroll-contain p-4 [&::-webkit-scrollbar]:w-2\n  [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-800\n  [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700\n  hover:[&::-webkit-scrollbar-thumb]:bg-gray-400",
+        children: renderNavContent()
+      }), renderFooter(), user && jsx("div", {
         className: "border-t border-line p-4",
         children: jsx("div", {
           className: "relative",
@@ -466,54 +611,61 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })]
     });
   };
-  var isRight = drawerPosition === "right";
-  var mobileDrawerClasses = cn("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out motion-reduce:transition-none md:hidden", {
-    "left-0": !isRight,
-    "right-0": isRight
-  }, {
-    "translate-x-0": mobileOpen,
-    "-translate-x-full": !mobileOpen && !isRight,
-    "translate-x-full": !mobileOpen && isRight
-  });
-  var desktopPlacementClass = isRight ? "md:order-last" : "";
+  // Where the drawer sits while a swipe is in progress (phones only).
+  var drawerTransform;
+  if (drawerMode && closeDrag.dragging && closeDrag.delta > 0) {
+    drawerTransform = "translateX(".concat(isRight ? "" : "-").concat(closeDrag.delta, "px)");
+  } else if (drawerMode && openDistance > 0) {
+    drawerTransform = isRight ? "translateX(max(0px, calc(100% - ".concat(openDistance, "px)))") : "translateX(min(0px, calc(-100% + ".concat(openDistance, "px)))");
+  }
+  var tracking = drawerTransform !== undefined;
+  var drawerClasses = cn(
+  // Phones: an off-canvas drawer above the backdrop, padded by the safe area.
+  "fixed inset-y-0 z-modal h-dvh bg-surface pt-safe pb-safe focus:outline-none", isRight ? "right-0 pr-safe" : "left-0 pl-safe", "transition-transform duration-300 ease-in-out motion-reduce:transition-none", mobileOpen ? "translate-x-0" : isRight ? "translate-x-full" : "-translate-x-full", tracking && "transition-none", canSwipe && "touch-pan-y",
+  // md+: an in-flow column inside the sticky wrapper.
+  "md:static md:z-auto md:h-full md:translate-x-0 md:transition-none md:touch-auto");
   // A top bar above the sidebar: stick below it and shrink to fit.
   var offset = typeof stickyOffset === "number" ? "".concat(stickyOffset, "px") : stickyOffset;
   var containerStyle = offset ? {
     top: offset,
     height: "calc(100dvh - ".concat(offset, ")")
   } : undefined;
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      className: cn("hidden md:flex sticky top-0 h-screen", containerClassName),
-      style: containerStyle,
-      "data-sidebar-container": "",
-      children: jsx("div", _objectSpread2(_objectSpread2({
-        ref: ref,
-        className: cn(desktopPlacementClass, className)
-      }, props), {}, {
-        children: renderSidebarContent("desktop")
-      }))
-    }), mobileOpen && jsx("div", {
-      className: "fixed inset-0 bg-black/30 z-40 md:hidden",
+  return jsxs("div", {
+    // `contents` below md: the wrapper adds no box, the drawer is fixed.
+    className: cn("contents md:flex sticky top-0 h-[100dvh]", isRight && "md:order-last", containerClassName),
+    style: containerStyle,
+    "data-sidebar-container": "",
+    children: [drawerOpen && jsx("div", {
+      className: "fixed inset-0 z-overlay bg-black/30 animate-fade-in motion-reduce:animate-none md:hidden",
       onClick: function onClick() {
         return setIsMobileOpen === null || setIsMobileOpen === void 0 ? void 0 : setIsMobileOpen(false);
       },
-      "aria-hidden": "true"
-    }), jsx("aside", {
+      "aria-hidden": "true",
+      "data-sidebar-backdrop": ""
+    }), jsx("aside", _objectSpread2(_objectSpread2(_objectSpread2({
       ref: drawerRef,
-      className: mobileDrawerClasses,
+      className: drawerClasses,
+      style: drawerTransform ? {
+        transform: drawerTransform
+      } : undefined,
+      "data-presentation": drawerMode ? "drawer" : "column",
+      "data-dragging": tracking ? "" : undefined
+    }, drawerMode ? {
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Navigation",
       "aria-hidden": mobileOpen ? undefined : true,
-      tabIndex: -1,
-      style: {
-        zIndex: 50
-      },
-      children: renderSidebarContent("mobile")
-    })]
+      tabIndex: -1
+    } : {}), closeDrag.bodyDragProps), {}, {
+      children: jsx("div", _objectSpread2(_objectSpread2({
+        ref: ref,
+        className: cn("h-full", className)
+      }, props), {}, {
+        children: renderSidebarContent()
+      }))
+    }))]
   });
 });
 Sidebar.displayName = "Sidebar";
 
-export { Sidebar as default };
+export { SIDEBAR_DESKTOP_QUERY, Sidebar as default };

package/dist/esm/components/rich-text/RichTextEditor.js

@@ -9,7 +9,7 @@ import { cn } from '../../utils/cn.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
 import { selectToolbarState, DEFAULT_TOOLBAR, RichTextToolbar } from './RichTextToolbar.js';
 
-var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
+var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "stickyToolbar", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
 // Tailwind's preflight strips list bullets, heading sizes, etc. These arbitrary
 // variants restore readable defaults inside the editable area only.
 var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-gray-900 focus:outline-none dark:text-gray-100", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
@@ -46,6 +46,8 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     toolbar = _ref$toolbar === void 0 ? DEFAULT_TOOLBAR : _ref$toolbar,
     _ref$toolbarLabel = _ref.toolbarLabel,
     toolbarLabel = _ref$toolbarLabel === void 0 ? "Formatting" : _ref$toolbarLabel,
+    _ref$stickyToolbar = _ref.stickyToolbar,
+    stickyToolbar = _ref$stickyToolbar === void 0 ? false : _ref$stickyToolbar,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 120 : _ref$minHeight,
     maxHeight = _ref.maxHeight,
@@ -196,14 +198,18 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
         children: "*"
       })]
     }), jsxs("div", {
-      className: cn("overflow-hidden rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
+      className: cn(
+      // overflow-clip (not hidden) keeps the rounded corners without
+      // creating a scroll container, so a sticky toolbar can stick to the page.
+      stickyToolbar ? "overflow-clip" : "overflow-hidden", "rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
       children: [showToolbar && jsx(RichTextToolbar, {
         editor: editor,
         state: state,
         items: items,
         disabled: disabled,
         controlsId: editorId,
-        label: toolbarLabel
+        label: toolbarLabel,
+        sticky: stickyToolbar
       }), jsxs("div", {
         className: cn("relative overflow-y-auto focus-within:ring-2 focus-within:ring-inset", error ? "focus-within:ring-error-500" : "focus-within:ring-primary-500"),
         style: {