@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

package/dist/components/feedback/ActionSheet.d.ts

@@ -0,0 +1,4 @@
+export default ActionSheet;
+declare const ActionSheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=ActionSheet.d.ts.map

package/dist/components/feedback/ActionSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ActionSheet.jsx"],"names":[],"mappings":";AAcA,qFAwCE;kBAtDgB,OAAO"}

package/dist/components/feedback/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AASA,+EA0FG;kBAnGe,OAAO"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AAoDA,+EAmEG;kBAvHe,OAAO"}

package/dist/components/feedback/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAUA,gFA6GG;kBAvH6C,OAAO"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AA2DA,gFAkJG;kBA7MoE,OAAO"}

package/dist/components/feedback/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AAqCA,gFAqHG;kBA1JkC,OAAO"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AA8DA,gFA8EG;kBA5I+B,OAAO"}

package/dist/components/feedback/Sheet.d.ts

@@ -0,0 +1,4 @@
+export default Sheet;
+declare const Sheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=Sheet.d.ts.map

package/dist/components/feedback/Sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Sheet.jsx"],"names":[],"mappings":";AAkBA,+EA+CE;kBAjEgC,OAAO"}

package/dist/components/feedback/Toast.d.ts

@@ -1,7 +1,8 @@
 export default Toast;
-export const Toast: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import Toast from './ToastItem';
 export function ToastContainer(props: any): import("react/jsx-runtime").JSX.Element | null;
-export function ToastProvider({ children, position, className, }: {
+export function ToastProvider({ children, position, className, ...stackProps }: {
+    [x: string]: any;
     children: any;
     position?: string | undefined;
     className?: string | undefined;
@@ -22,5 +23,5 @@ export function useToast(): {
     clearToasts: () => void;
     addToast: (toastOptions: any) => any;
 };
-import React from 'react';
+export { Toast };
 //# sourceMappingURL=Toast.d.ts.map

package/dist/components/feedback/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";AA4DA,8EAgOG;AA+CH,2FAOC;AA6CD;;;;4CAkBC;;;;AAMD;;;;;;;;;;;;EAIC;kBA3Z+G,OAAO"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";kBACkB,aAAa;AAW/B,2FAOC;AA6CD;;;;;4CAoBC;;;;AAMD;;;;;;;;;;;;EAIC"}

package/dist/components/feedback/ToastItem.d.ts

@@ -0,0 +1,47 @@
+export namespace STATUS_CONFIG {
+    export namespace success {
+        export { CheckCircle2 as icon };
+        export let iconClass: string;
+        export let progressClass: string;
+    }
+    export namespace error {
+        export { XCircle as icon };
+        let iconClass_1: string;
+        export { iconClass_1 as iconClass };
+        let progressClass_1: string;
+        export { progressClass_1 as progressClass };
+    }
+    export namespace warning {
+        export { AlertTriangle as icon };
+        let iconClass_2: string;
+        export { iconClass_2 as iconClass };
+        let progressClass_2: string;
+        export { progressClass_2 as progressClass };
+    }
+    export namespace info {
+        export { Info as icon };
+        let iconClass_3: string;
+        export { iconClass_3 as iconClass };
+        let progressClass_3: string;
+        export { progressClass_3 as progressClass };
+    }
+    namespace _default {
+        export { Bell as icon };
+        let iconClass_4: string;
+        export { iconClass_4 as iconClass };
+        let progressClass_4: string;
+        export { progressClass_4 as progressClass };
+    }
+    export { _default as default };
+}
+export const MOBILE_OFFSET_VAR: "--dt-toast-mobile-offset";
+export function toCssLength(value: any): any;
+export default Toast;
+import { CheckCircle2 } from 'lucide-react';
+import { XCircle } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react';
+import { Info } from 'lucide-react';
+import { Bell } from 'lucide-react';
+declare const Toast: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';
+//# sourceMappingURL=ToastItem.d.ts.map

package/dist/components/feedback/ToastItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastItem.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,gCAAiC,0BAA0B,CAAC;AAGrD,6CAAiF;;6BAjDpB,cAAc;wBAAd,cAAc;8BAAd,cAAc;qBAAd,cAAc;qBAAd,cAAc;AAsFlF,+EA4QG;kBArWyE,OAAO"}

package/dist/components/feedback/ToastStack.d.ts

@@ -0,0 +1,20 @@
+/** Inline transform for a collapsed toast `depth` steps behind the front one. */
+export function collapsedStyle(depth: any, fromBottom: any, visibleToasts: any): {
+    transform: string;
+    transformOrigin: string;
+    zIndex: number;
+    opacity: number;
+};
+export default ToastStack;
+declare function ToastStack({ toasts, position, onRemove, className, expand, visibleToasts, mobilePosition, mobileOffset, }: {
+    toasts?: never[] | undefined;
+    position?: string | undefined;
+    onRemove: any;
+    className?: string | undefined;
+    expand: any;
+    visibleToasts?: number | undefined;
+    mobilePosition?: string | undefined;
+    mobileOffset: any;
+}): React.ReactPortal | null;
+import React from 'react';
+//# sourceMappingURL=ToastStack.d.ts.map

package/dist/components/feedback/ToastStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastStack.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastStack.jsx"],"names":[],"mappings":"AA+BA,iFAAiF;AACjF;;;;;EAOC;;AAED;;;;;;;;;6BA+FC;kBAxIuC,OAAO"}

package/dist/components/feedback/ToastSwipe.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @param {{ enabled?: boolean, onDismiss: (direction: 1 | -1) => void }} options
+ * @returns {{
+ *   offset: number,       // px to translate the toast by (0 at rest)
+ *   dragging: boolean,
+ *   swipedOut: 0 | 1 | -1, // direction the toast left in, 0 while it stays
+ *   dragProps: object,     // pointer handlers for the toast root
+ * }}
+ */
+export function useToastSwipe({ enabled, onDismiss }: {
+    enabled?: boolean;
+    onDismiss: (direction: 1 | -1) => void;
+}): {
+    offset: number;
+    dragging: boolean;
+    swipedOut: 0 | 1 | -1;
+    dragProps: object;
+};
+export const SWIPE_DISTANCE: 64;
+export const SWIPE_FLICK_VELOCITY: 0.5;
+export default useToastSwipe;
+//# sourceMappingURL=ToastSwipe.d.ts.map

package/dist/components/feedback/ToastSwipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastSwipe.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastSwipe.js"],"names":[],"mappings":"AAYA;;;;;;;;GAQG;AACH,sDARW;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAA;CAAE,GAC3D;IACR,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB,CAqBH;AAhCD,6BAA8B,EAAE,CAAC;AACjC,mCAAoC,GAAG,CAAC"}

package/dist/components/feedback/Tour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Tour.jsx"],"names":[],"mappings":";AAsBA,8EAoIG;kBA1JoF,OAAO"}
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Tour.jsx"],"names":[],"mappings":";AAwCA,8EA+LG;kBAvOoF,OAAO"}

package/dist/components/feedback/sheetCore.d.ts

@@ -0,0 +1,30 @@
+/** Calls the consumer's handler first, then ours. */
+export function mergeHandlers(ours: any, theirs: any): {};
+export const SHEET_PLACEMENTS: string[];
+/**
+ * Context for parts rendered inside the core: drag handlers for the grab zone
+ * (header) and the scrolling body, ids, and `requestClose(reason)`.
+ */
+export const SheetContext: React.Context<null>;
+/**
+ * The shared sheet core. Internal: `Sheet` and `Drawer` wrap it.
+ *
+ * Beyond Sheet's own props it takes the chrome its wrappers vary:
+ * - `dragEnabled` (default true): turns the drag gesture on.
+ * - `hasTitle` / `hasDescription`: wire `aria-labelledby` / `aria-describedby`.
+ * - `idPrefix`, `testIdPrefix`: ids (`<prefix>-title-…`) and test ids
+ *   (`<prefix>-backdrop`, `<prefix>-handle`).
+ * - `panelClassName`: base + placement + size classes for the panel.
+ * - `handleBarClassName`: the grab handle's bar.
+ * - `renderHeader({ titleId, descriptionId, requestClose, showHandle, side })`:
+ *   rendered before `children`, inside the context.
+ */
+export const SheetCore: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export function SheetCloseButton({ onClick, label, className }: {
+    onClick: any;
+    label: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default SheetCore;
+import React from "react";
+//# sourceMappingURL=sheetCore.d.ts.map

package/dist/components/feedback/sheetCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheetCore.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/sheetCore.jsx"],"names":[],"mappings":"AA0HA,qDAAqD;AACrD,0DASC;AAjHD,wCAAmE;AAmHnE;;;GAGG;AACH,+CAAgD;AAEhD;;;;;;;;;;;;GAYG;AACH,kFAwSE;AAKK;;;;4CAcN;;kBApdoH,OAAO"}

package/dist/components/navigation/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAiMA,+EAwSG;;kBAxeqD,OAAO"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAiYG;;kBAnoBmF,OAAO"}

package/dist/components/navigation/Sidebar.d.ts

@@ -1,3 +1,4 @@
+export const SIDEBAR_DESKTOP_QUERY: "(min-width: 768px)";
 export default Sidebar;
 /**
  * Sidebar component with custom tooltip for collapsed mode.
@@ -16,6 +17,11 @@ export default Sidebar;
  * - 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.
  */
 declare const Sidebar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

package/dist/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":";AAkFA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFAohBG;kBAhnBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iFA0kBG;kBAlwBI,OAAO"}

package/dist/components/rich-text/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextEditor.jsx"],"names":[],"mappings":";AA2BA,wFAsLE;kBAjN+E,OAAO"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextEditor.jsx"],"names":[],"mappings":";AA2BA,wFA2LE;kBAtN+E,OAAO"}

package/dist/components/rich-text/RichTextToolbar.d.ts

@@ -18,17 +18,21 @@ export function selectToolbarState(editor: any): {
 } | null;
 /** Normalises a typed URL; returns null for schemes we refuse (javascript:, data:, …). */
 export function normalizeUrl(raw: any): string | null;
+/** `top` offset for a sticky toolbar: `true` → 0, a number → px, a string → any CSS length. */
+export function stickyTop(sticky: any): string;
 /**
  * A WAI-ARIA toolbar: one tab stop, arrow keys / Home / End move between the
- * buttons (roving tabindex), toggles report `aria-pressed`.
+ * buttons (roving tabindex), toggles report `aria-pressed`. With `sticky` it
+ * stays pinned to the top of the scrolling page while the content scrolls.
  */
-export function RichTextToolbar({ editor, state, items, disabled, controlsId, label }: {
+export function RichTextToolbar({ editor, state, items, disabled, controlsId, label, sticky }: {
     editor: any;
     state: any;
     items: any;
     disabled: any;
     controlsId: any;
     label?: string | undefined;
+    sticky?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace TOOLBAR_ITEMS {
     namespace bold {

package/dist/components/rich-text/RichTextToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextToolbar.jsx"],"names":[],"mappings":"AAuDA,uFAAuF;AACvF;;;;;;;;;;;;;;;;SAmBC;AAKD,0FAA0F;AAC1F,sDAMC;AAsFD;;;GAGG;AACH;;;;;;;4CAkFC;;;;;;;;QA3O0F,iCAAqB;;;;;;;;;;;;QACf,mCAAuB;;;;;;;;;;;;;QACH,mCAAuB;;;;;;;;;;;;;QAC1C,mCAAqB;;;;;;;;;;;;;QACV,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QAChC,mCAA2B;;;;;;;;;;;;;QACnB,mCAA4B;;;;;;;;;;;;;QAC3C,mCAA2B;;;;;;;;;;;;;QACpB,oCAA0B;;;;;;;;;;;;;;;;;;;;QAE5D,oCAAe;;;;;;;;;;;QACT,oCAAe;;;;AAGpG,uCAaE;qBArCK,cAAc;uBAAd,cAAc;8BAAd,cAAc;qBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;qBAAd,cAAc;4BAAd,cAAc;sBAAd,cAAc;2BAAd,cAAc;iCAAd,cAAc;qBAAd,cAAc;qBAAd,cAAc"}
+{"version":3,"file":"RichTextToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextToolbar.jsx"],"names":[],"mappings":"AAwDA,uFAAuF;AACvF;;;;;;;;;;;;;;;;SAmBC;AAKD,0FAA0F;AAC1F,sDAMC;AA4FD,+FAA+F;AAC/F,+CAIC;AAED;;;;GAIG;AACH;;;;;;;;4CAyFC;;;;;;;;QAhQ0F,iCAAqB;;;;;;;;;;;;QACf,mCAAuB;;;;;;;;;;;;;QACH,mCAAuB;;;;;;;;;;;;;QAC1C,mCAAqB;;;;;;;;;;;;;QACV,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QAChC,mCAA2B;;;;;;;;;;;;;QACnB,mCAA4B;;;;;;;;;;;;;QAC3C,mCAA2B;;;;;;;;;;;;;QACpB,oCAA0B;;;;;;;;;;;;;;;;;;;;QAE5D,oCAAe;;;;;;;;;;;QACT,oCAAe;;;;AAGpG,uCAaE;qBAtCK,cAAc;uBAAd,cAAc;8BAAd,cAAc;qBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;qBAAd,cAAc;4BAAd,cAAc;sBAAd,cAAc;2BAAd,cAAc;iCAAd,cAAc;qBAAd,cAAc;qBAAd,cAAc"}

package/dist/components/utility/PullToRefresh.d.ts

@@ -0,0 +1,5 @@
+export function resist(distance: any, max: any): number;
+export default PullToRefresh;
+declare const PullToRefresh: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=PullToRefresh.d.ts.map

package/dist/components/utility/PullToRefresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/utility/PullToRefresh.jsx"],"names":[],"mappings":"AAeA,wDAGC;;AAED,uFAkMG;kBAtN4D,OAAO"}

package/dist/esm/components/blocks/AppShell.js

@@ -1,16 +1,18 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback } from 'react';
-import { X, Menu } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { useFocusTrap } from '../../hooks/useFocusTrap.js';
-import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import Sheet from '../feedback/Sheet.js';
+import FootNav from '../navigation/FootNav.js';
 
-var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "linkAs", "children", "className"];
+var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "bottomNav", "linkAs", "children", "className"];
 // Extracted from procurementpro/components/app-shell.tsx (12 of 13 products hand-roll a shell).
-// Sidebar on lg+, top bar + drawer below. Colours come from the shell role tokens, so a brand file
-// restyles it. Nav items render with `linkAs` (pass Next.js Link) so links prefetch and open in new tabs.
+// Sidebar on lg+, top bar + drawer below, optional bottom nav on phones. Colours come from the
+// shell / role tokens, so a brand file restyles it and dark mode needs no extra classes. Nav items
+// render with `linkAs` (pass Next.js Link) so links prefetch and open in new tabs.
 var NavList = function NavList(_ref) {
   var nav = _ref.nav,
     Link = _ref.Link,
@@ -41,7 +43,7 @@ var NavList = function NavList(_ref) {
   }
   return jsx("nav", {
     "aria-label": "Main navigation",
-    className: "flex-1 overflow-y-auto px-3 pb-4",
+    className: "flex-1 overflow-y-auto overscroll-contain px-3 pb-4",
     children: groups.map(function (g) {
       return jsxs("div", {
         className: "mb-3",
@@ -60,11 +62,11 @@ var NavList = function NavList(_ref) {
                 className: "flex-1 truncate",
                 children: item.label
               }), item.count > 0 && jsx("span", {
-                className: "rounded-full bg-white/15 px-2 py-0.5 text-xs font-semibold text-white",
+                className: "rounded-full bg-shell-foreground/15 px-2 py-0.5 text-xs font-semibold text-shell-foreground",
                 children: item.count
               })]
             });
-            var cls = cn('flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary-400', item.active ? 'bg-shell-active font-semibold text-white' : 'text-shell-foreground hover:bg-white/5 hover:text-white');
+            var cls = cn('flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm transition-colors duration-fast motion-reduce:transition-none', '[@media(pointer:coarse)]:h-11', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400', item.active ? 'bg-shell-active font-semibold text-shell-foreground' : 'text-shell-foreground/85 hover:bg-shell-active/60 hover:text-shell-foreground');
             var handle = function handle() {
               var _item$onClick;
               (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
@@ -97,6 +99,7 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     sidebarFooter = _ref2.sidebarFooter,
     topbar = _ref2.topbar,
     pageTitle = _ref2.pageTitle,
+    bottomNav = _ref2.bottomNav,
     _ref2$linkAs = _ref2.linkAs,
     Link = _ref2$linkAs === void 0 ? 'a' : _ref2$linkAs,
     children = _ref2.children,
@@ -107,102 +110,106 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     open = _useState2[0],
     setOpen = _useState2[1];
   var menuButton = useRef(null);
-  var drawer = useRef(null);
   var close = useCallback(function () {
     return setOpen(false);
   }, []);
-  // Mobile drawer is a modal dialog: focus moves in, Tab is trapped, Escape
-  // closes, focus returns to the menu button, and the page behind is locked.
-  useScrollLock(open);
-  useFocusTrap(drawer, {
-    active: open,
-    onEscape: function onEscape() {
-      var _menuButton$current;
-      close();
-      // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
-      (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
-    }
-  });
-  var sidebar = jsxs(Fragment, {
-    children: [jsxs("div", {
-      className: "flex items-center justify-between px-5 pb-4 pt-5 text-white",
-      children: [jsx("div", {
-        className: "min-w-0",
-        children: brand
-      }), jsx("button", {
-        type: "button",
-        className: "rounded-control p-1.5 text-shell-foreground hover:bg-white/10 lg:hidden",
-        onClick: close,
-        "aria-label": "Close navigation",
-        children: jsx(X, {
-          className: "h-5 w-5",
-          "aria-hidden": "true"
-        })
+  // The mobile drawer is a left Sheet: a modal dialog that moves focus in, traps
+  // Tab, closes on Escape / backdrop / drag, locks the page behind and returns
+  // focus to the menu button.
+  var onDrawerClose = function onDrawerClose(reason) {
+    var _menuButton$current;
+    close();
+    // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
+    if (reason === 'escape') (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
+  };
+  var sidebar = function sidebar(inDrawer) {
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: "flex items-center justify-between px-5 pb-4 pt-5 text-shell-foreground",
+        children: [jsx("div", {
+          className: "min-w-0",
+          children: brand
+        }), inDrawer && jsx("button", {
+          type: "button",
+          className: cn('inline-flex items-center justify-center rounded-control p-1.5 text-shell-foreground hover:bg-shell-active', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400', TOUCH_TARGET),
+          onClick: close,
+          "aria-label": "Close navigation",
+          children: jsx(X, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
+        })]
+      }), jsx(NavList, {
+        nav: nav,
+        Link: Link,
+        onNavigate: close
+      }), sidebarFooter && jsx("div", {
+        className: "border-t border-shell-active p-3",
+        children: sidebarFooter
       })]
-    }), jsx(NavList, {
-      nav: nav,
-      Link: Link,
-      onNavigate: close
-    }), sidebarFooter && jsx("div", {
-      className: "border-t border-white/10 p-3",
-      children: sidebarFooter
-    })]
-  });
+    });
+  };
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('min-h-screen bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]', className)
+    className: cn('min-h-dvh bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]', className)
   }, props), {}, {
     children: [jsx("a", {
       href: "#main",
-      className: "sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-control focus:bg-surface focus:px-3 focus:py-2",
+      className: "sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-toast focus:rounded-control focus:bg-surface focus:px-3 focus:py-2 focus:text-foreground focus-visible:ring-2 focus-visible:ring-primary-500",
       children: "Skip to content"
     }), jsx("aside", {
-      className: "sticky top-0 hidden h-screen flex-col bg-shell lg:flex",
+      className: "sticky top-0 hidden h-dvh flex-col bg-shell pb-safe pl-safe pt-safe lg:flex",
       "aria-label": "Sidebar",
-      children: sidebar
-    }), open && jsxs("div", {
-      className: "fixed inset-0 z-40 lg:hidden",
-      children: [jsx("div", {
-        className: "absolute inset-0 bg-secondary-900/50",
-        onClick: close,
-        "aria-hidden": "true"
-      }), jsx("aside", {
-        ref: drawer,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Navigation",
-        tabIndex: -1,
-        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell focus:outline-none",
-        children: sidebar
-      })]
+      children: sidebar(false)
+    }), jsx(Sheet, {
+      open: open,
+      onClose: onDrawerClose,
+      placement: "left",
+      "aria-label": "Navigation",
+      className: "w-72 max-w-[85%] border-shell-active bg-shell text-shell-foreground",
+      children: sidebar(true)
     }), jsxs("div", {
       className: "flex min-w-0 flex-col",
-      children: [jsxs("header", {
-        className: "sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-line bg-surface px-4 lg:px-6",
-        children: [jsx("button", {
-          ref: menuButton,
-          type: "button",
-          className: "-ml-1 rounded-control p-2 text-muted hover:bg-secondary-100 lg:hidden",
-          onClick: function onClick() {
-            return setOpen(true);
-          },
-          "aria-label": "Open navigation",
-          "aria-expanded": open,
-          children: jsx(Menu, {
-            className: "h-5 w-5"
-          })
-        }), pageTitle && jsx("span", {
-          className: "truncate text-sm font-semibold lg:hidden",
-          children: pageTitle
-        }), jsx("div", {
-          className: "ml-auto flex items-center gap-3",
-          children: topbar
+      children: [jsx("header", {
+        className: "sticky top-0 z-sticky border-b border-line bg-surface pt-safe px-safe",
+        children: jsxs("div", {
+          className: "flex h-14 items-center gap-3 px-4 lg:px-6",
+          children: [jsx("button", {
+            ref: menuButton,
+            type: "button",
+            className: cn('-ml-1 inline-flex items-center justify-center rounded-control p-2 text-muted hover:bg-muted/10 hover:text-foreground lg:hidden', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
+            onClick: function onClick() {
+              return setOpen(true);
+            },
+            "aria-label": "Open navigation",
+            "aria-expanded": open,
+            "aria-haspopup": "dialog",
+            children: jsx(Menu, {
+              className: "h-5 w-5",
+              "aria-hidden": "true"
+            })
+          }), pageTitle && jsx("span", {
+            className: "truncate text-sm font-semibold text-foreground lg:hidden",
+            children: pageTitle
+          }), jsx("div", {
+            className: "ml-auto flex items-center gap-3",
+            children: topbar
+          })]
+        })
+      }), jsxs("div", {
+        className: "flex flex-1 flex-col px-safe",
+        children: [jsx("main", {
+          id: "main",
+          className: "mx-auto w-full max-w-7xl flex-1 px-4 py-6 md:px-8 md:py-8",
+          children: children
+        }), bottomNav && jsx(FootNav.Spacer, {
+          "data-slot": "bottom-nav-spacer"
         })]
-      }), jsx("main", {
-        id: "main",
-        className: "mx-auto w-full max-w-7xl flex-1 px-4 py-6 md:px-8 md:py-8",
-        children: children
       })]
+    }), bottomNav && jsx("div", {
+      className: "md:hidden",
+      "data-slot": "bottom-nav",
+      children: bottomNav
     })]
   }));
 });