@astryxdesign/lab 0.2.0-canary.e424a04 → 0.2.0-canary.e6beddb

package/dist/BottomSheet/BottomSheet.d.ts

@@ -5,7 +5,7 @@
  * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
  *
  * A mobile touch surface that rises from the bottom edge: grab handle, snap
- * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
  * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
  * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
  * heavier overlay component — so it controls its own sizing and can render a
@@ -13,6 +13,12 @@
  * That shell is what lets the sheet translate freely (including a little past
  * fully-open) without clipping against a fixed dialog edge.
  *
+ * `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
+ * layer, focus trap, scrim, scroll lock, background inert); `false` uses
+ * `show()` for a non-modal sheet with no scrim, leaving the page behind
+ * interactive and scrollable (the transparent shell is pointer-events:none so
+ * taps pass through).
+ *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
  * to BottomSheet and not exported from the lab entry point.
@@ -71,16 +77,32 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
      * @default 'capped'
      */
     height?: BottomSheetHeight | number | string;
+    /**
+     * Whether to render a modal scrim behind the sheet.
+     * - `true` (default) — `showModal()`: renders in the top layer with a focus
+     *   trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
+     *   The background is inert. Use for focused tasks (filters, forms).
+     * - `false` — `show()`: a non-modal sheet with **no scrim**. The page behind
+     *   stays interactive and scrollable (like Material's *standard* bottom
+     *   sheet, or an iOS undimmed detent). Escape still closes while focus is
+     *   inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
+     *   surface that coexists with the page (e.g. a panel over a live map).
+     * @default true
+     */
+    hasScrim?: boolean;
     /** Test ID for the root element. */
     'data-testid'?: string;
 }
 /**
  * A mobile touch sheet that rises from the bottom edge, with a grab handle,
- * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
- * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
- * while open; a slow drag settles to the nearest snap point, a flick down
- * dismisses, and Escape closes — so the swipe always has a keyboard
- * equivalent.
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native
+ * `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
+ * trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
+ * nearest snap point, a flick down dismisses, and Escape closes — so the swipe
+ * always has a keyboard equivalent.
+ *
+ * With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
+ * the page behind interactive and scrollable.
  *
  * @example
  * ```
@@ -93,7 +115,7 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
  * </BottomSheet>
  * ```
  */
-export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, hasScrim, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
 export declare namespace BottomSheet {
     var displayName: string;
 }

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAqBlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAyJ5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyKlB;yBAlLe,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAiL5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0LlB;yBApMe,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -9,7 +9,7 @@
  * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
  *
  * A mobile touch surface that rises from the bottom edge: grab handle, snap
- * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
  * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
  * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
  * heavier overlay component — so it controls its own sizing and can render a
@@ -17,6 +17,12 @@
  * That shell is what lets the sheet translate freely (including a little past
  * fully-open) without clipping against a fixed dialog edge.
  *
+ * `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
+ * layer, focus trap, scrim, scroll lock, background inert); `false` uses
+ * `show()` for a non-modal sheet with no scrim, leaving the page behind
+ * interactive and scrollable (the transparent shell is pointer-events:none so
+ * taps pass through).
+ *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
  * to BottomSheet and not exported from the lab entry point.
@@ -35,12 +41,18 @@ import { useDevWarning, useScrollLock } from '@astryxdesign/core/hooks';
 import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { useSheetGestures } from "./useSheetGestures.js";
 
+// A non-modal sheet (hasScrim={false}) uses show() instead of showModal(), so
+// it isn't in the native top layer and needs an explicit z-index to sit above
+// page content. No z-index token exists in the theme; 1000 matches the Drawer
+// / app-level overlay convention.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NON_MODAL_Z = 1000;
+
 // Detent fractions of the viewport, ascending (peek / mid / full). Detents
 // that land within DETENT_DEDUP_PX of each other (e.g. a hug height next to a
 // snap) are de-duped in the gesture hook, and any taller than the sheet are
 // dropped, so a full set is safe to offer. The shortest is a glance "peek";
 // the scrim hides as the sheet collapses onto it (see onScrimOpacity).
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SNAP_FRACTIONS = [0.14, 0.5, 0.92];
 
 /**
@@ -116,11 +128,14 @@ const styles = {
 };
 /**
  * A mobile touch sheet that rises from the bottom edge, with a grab handle,
- * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
- * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
- * while open; a slow drag settles to the nearest snap point, a flick down
- * dismisses, and Escape closes — so the swipe always has a keyboard
- * equivalent.
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native
+ * `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
+ * trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
+ * nearest snap point, a flick down dismisses, and Escape closes — so the swipe
+ * always has a keyboard equivalent.
+ *
+ * With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
+ * the page behind interactive and scrollable.
  *
  * @example
  * ```
@@ -140,6 +155,7 @@ export function BottomSheet({
   label,
   children,
   height = 'capped',
+  hasScrim = true,
   xstyle,
   ...props
 }) {
@@ -149,7 +165,7 @@ export function BottomSheet({
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   // Set imperatively (not via state) so a 60fps drag doesn't re-render. The
-  // hook reports the scrim opacity for the current detent (hidden at the peek).
+  // hook reports the scrim opacity for the current detent (a faint floor at the peek).
   const handleScrimOpacity = useCallback(opacity => {
     dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
   }, []);
@@ -165,24 +181,32 @@ export function BottomSheet({
     onScrimOpacity: handleScrimOpacity
   });
 
-  // showModal() enters the top layer with a focus trap + ::backdrop; on close
-  // we animate out (below) then restore focus to the opener.
+  // Modal: showModal() enters the top layer with a focus trap + ::backdrop and
+  // we restore focus to the opener on close. Standard: show() is non-modal, so
+  // we neither trap nor steal focus (the background stays interactive) — we
+  // only honor an explicit data-autofocus.
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) {
       return;
     }
     if (isOpen) {
-      triggerRef.current = document.activeElement;
       dialog.style.setProperty('--_sheet-scrim-opacity', '1');
       if (!dialog.open) {
-        dialog.showModal();
-        // Override showModal()'s default (first tabbable) to land on the panel,
-        // so AT reads from the label — unless a descendant sets data-autofocus.
+        // Only remember/restore focus for modal sheets; a non-modal sheet must
+        // not yank focus back from whatever the user does in the live page.
+        if (hasScrim) {
+          triggerRef.current = document.activeElement;
+          dialog.showModal();
+        } else {
+          dialog.show();
+        }
+        // Land on the panel (so AT reads from the label) for modal sheets;
+        // otherwise only honor a descendant data-autofocus.
         const autofocus = dialog.querySelector('[data-autofocus]');
         if (autofocus) {
           autofocus.focus();
-        } else {
+        } else if (hasScrim) {
           sheetNodeRef.current?.focus();
         }
       }
@@ -219,8 +243,11 @@ export function BottomSheet({
         sheet?.removeEventListener('transitionend', onEnd);
       };
     }
-  }, [isOpen]);
-  useScrollLock(isOpen);
+  }, [isOpen, hasScrim]);
+
+  // Only a modal sheet locks body scroll; a non-modal sheet leaves the page
+  // scrollable behind it.
+  useScrollLock(isOpen && hasScrim);
 
   // Enforce an accessible name: label is required by types, but a JS caller
   // can still pass an empty string, leaving the sheet unnamed.
@@ -230,33 +257,55 @@ export function BottomSheet({
     close();
   }, [close]);
   // Explicit Escape handler in addition to the native `cancel` event, for
-  // environments that don't synthesize `cancel`.
+  // environments that don't synthesize `cancel` (and the show() path, which
+  // never fires `cancel`). Only fires when focus is inside the sheet.
   const handleKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
       event.preventDefault();
       close();
     }
   }, [close]);
+  // Tap-outside-to-dismiss only applies to modal sheets (the scrim). A non-modal
+  // sheet has no scrim and its transparent shell is pointer-events:none, so taps
+  // pass through to the page rather than dismissing.
   const handleClick = useCallback(event => {
-    if (event.target === event.currentTarget) {
+    if (hasScrim && event.target === event.currentTarget) {
       close();
     }
-  }, [close]);
+  }, [close, hasScrim]);
   const isNamed = typeof height === 'string' && height in HEIGHT_BUDGETS;
   const budget = isNamed ? HEIGHT_BUDGETS[height] : typeof height === 'number' ? `${height}px` : height;
   const isHug = height === 'hug';
   return /*#__PURE__*/_jsx("dialog", {
     ...{
       0: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
+      },
+      4: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
+      },
+      2: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      },
+      6: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
       },
       1: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      5: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      3: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      7: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
       }
-    }[!!isOpen << 0],
+    }[!!isOpen << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
     ref: mergeRefs(ref, dialogRef),
     "aria-label": label,
-    "aria-modal": "true",
+    "aria-modal": hasScrim ? 'true' : undefined,
     onCancel: handleCancel,
     onClick: handleClick,
     onKeyDown: handleKeyDown,

package/dist/BottomSheet/snapOffsets.d.ts

@@ -36,12 +36,20 @@ export declare function computeDetentOffsets(sheetHeight: number, detentHeights:
 /** Nearest value in `offsets` to `value` (offsets must be non-empty). */
 export declare function nearestOffset(value: number, offsets: readonly number[]): number;
 /**
- * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * Minimum scrim opacity at the peek detent. The scrim thins to a glance state
+ * but never fully vanishes, because a modal sheet keeps the background inert —
+ * a fully clear backdrop would read as "interactive" when it isn't. (For a
+ * genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
+ */
+export declare const MIN_PEEK_SCRIM_OPACITY = 0.3;
+/**
+ * Scrim opacity (1 = fully visible) for a drag/settle `offset`.
  * The scrim stays full while the sheet is at or above its second-shortest
- * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
- * a glance state that reveals the content behind — and stays hidden below it.
- * A single-detent sheet has no peek, so it instead fades across the dismiss
- * overshoot toward `dismissOffset`.
+ * detent, then fades as it collapses onto the shortest ("peek") detent — a
+ * glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
+ * gone, since the sheet is still modal) and holds there below it.
+ * A single-detent sheet has no peek, so it instead fades all the way to 0
+ * across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
  */
 export declare function scrimOpacityForOffset(offset: number, offsets: readonly number[], dismissOffset: number): number;
 /**

package/dist/BottomSheet/snapOffsets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAWR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}
+{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAeR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}

package/dist/BottomSheet/snapOffsets.js

@@ -58,24 +58,37 @@ export function nearestOffset(value, offsets) {
 }
 
 /**
- * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * Minimum scrim opacity at the peek detent. The scrim thins to a glance state
+ * but never fully vanishes, because a modal sheet keeps the background inert —
+ * a fully clear backdrop would read as "interactive" when it isn't. (For a
+ * genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
+ */
+export const MIN_PEEK_SCRIM_OPACITY = 0.3;
+
+/**
+ * Scrim opacity (1 = fully visible) for a drag/settle `offset`.
  * The scrim stays full while the sheet is at or above its second-shortest
- * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
- * a glance state that reveals the content behind — and stays hidden below it.
- * A single-detent sheet has no peek, so it instead fades across the dismiss
- * overshoot toward `dismissOffset`.
+ * detent, then fades as it collapses onto the shortest ("peek") detent — a
+ * glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
+ * gone, since the sheet is still modal) and holds there below it.
+ * A single-detent sheet has no peek, so it instead fades all the way to 0
+ * across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
  */
 export function scrimOpacityForOffset(offset, offsets, dismissOffset) {
   const shortest = offsets[offsets.length - 1];
-  const fadeStart = offsets.length >= 2 ? offsets[offsets.length - 2] : 0;
-  const fadeEnd = offsets.length >= 2 ? shortest : dismissOffset;
+  const hasPeek = offsets.length >= 2;
+  const fadeStart = hasPeek ? offsets[offsets.length - 2] : 0;
+  const fadeEnd = hasPeek ? shortest : dismissOffset;
+  // Peek is a resting state on a still-modal sheet, so keep a floor; the
+  // dismiss overshoot is a sheet on its way out, so let it clear completely.
+  const floor = hasPeek ? MIN_PEEK_SCRIM_OPACITY : 0;
   if (offset <= fadeStart) {
     return 1;
   }
   if (offset >= fadeEnd) {
-    return 0;
+    return floor;
   }
-  return 1 - (offset - fadeStart) / (fadeEnd - fadeStart);
+  return 1 - (1 - floor) * ((offset - fadeStart) / (fadeEnd - fadeStart));
 }
 
 /**

package/dist/BottomSheet/useSheetGestures.d.ts

@@ -43,7 +43,7 @@ export interface UseSheetGesturesOptions {
      * Called with the scrim opacity the sheet should show (1 = fully visible,
      * 0 = hidden) as the drag moves and on settle. Full while the sheet is at
      * or above its mid detent, fading to 0 as it collapses onto the shortest
-     * "peek" detent — so a glance-height sheet reveals the content behind — and
+     * "peek" detent — thinning to a faint glance state without fully clearing — and
      * on the dismiss overshoot. Lets the owner mirror it onto the scrim.
      */
     onScrimOpacity?: (opacity: number) => void;

package/dist/BottomSheet/useSheetGestures.js

@@ -213,7 +213,7 @@ export function useSheetGestures({
     const target = resolveSettleOffset(offset, offsets, dir, baseOffset);
     setSettledOffset(target);
     onSnapRef.current?.(height - target);
-    // Keep the scrim in sync with the resting detent (hidden at the peek).
+    // Keep the scrim in sync with the resting detent (faint floor at the peek).
     const dismissOffset = maxOffset + shortestDetentHeight * DISMISS_OVERSHOOT_RATIO;
     onScrimOpacityRef.current?.(scrimOpacityForOffset(target, offsets, dismissOffset));
     // Haptic "tick" when landing on a different detent (where supported).

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @file RichTextEditorAutoLinkPlugin.tsx
+ * @input Uses `@lexical/react/LexicalAutoLinkPlugin` (`AutoLinkPlugin`,
+ *   `createLinkMatcherWithRegExp`) and the shared URL/email matchers from
+ *   `linkUtils`.
+ * @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
+ *   default `DEFAULT_LINK_MATCHERS`.
+ * @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to
+ *   auto-linkify URLs and emails as they are typed or pasted. Requires
+ *   `AutoLinkNode` to be registered (it is, by default).
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/RichTextEditor/index.ts (exports)
+ * - /packages/lab/src/index.ts (barrel re-export)
+ * - /packages/lab/src/RichTextEditor/RichTextEditor.doc.mjs (usage notes)
+ * - /packages/lab/src/RichTextEditor/RichTextEditor.test.tsx (tests)
+ * - /apps/storybook/stories/RichTextEditor.stories.tsx (story)
+ *
+ * NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
+ * `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
+ *
+ * COMPATIBILITY: astryx aims for its RichTextEditor internals to eventually
+ * back Meta's EPS `EPSRichTextArea` (nest/libs/eps-lexical). EPS's auto-link is
+ * matcher-driven and applies `target="_blank"` + `rel="noopener noreferrer"` to
+ * created links (its `NEW_TAB_LINK_ATTRIBUTES`). This plugin uses the same
+ * matcher shape (`createLinkMatcherWithRegExp` + `attributes`) and the same
+ * new-tab defaults, so EPS can pass its own richer matcher set (e.g. shortform
+ * `D123` / `T456` / `S789` intern URLs) through the `matchers` prop without
+ * changing the contract. EPS ships a hardened fork of the transform itself
+ * (expanded separators, code-block exclusion) — astryx stays on the OSS
+ * `AutoLinkPlugin`, and EPS can substitute its own plugin in the same slot.
+ */
+import { type LinkMatcher } from '@lexical/react/LexicalAutoLinkPlugin';
+/**
+ * Attributes written onto every auto-created link so it opens in a new tab.
+ * `rel="noopener noreferrer"` is required whenever `target="_blank"` is set, to
+ * prevent reverse-tabnabbing. Matches EPS eps-lexical's `NEW_TAB_LINK_ATTRIBUTES`.
+ */
+export declare const NEW_TAB_LINK_ATTRIBUTES: {
+    readonly target: "_blank";
+    readonly rel: "noopener noreferrer";
+};
+/**
+ * Default matchers: bare URLs (defaulting to `https://` when scheme-less) and
+ * email addresses (as `mailto:` links). Both carry {@link NEW_TAB_LINK_ATTRIBUTES}.
+ * URLs are passed through {@link sanitizeUrl} so only http/https/mailto/tel
+ * schemes are ever written.
+ */
+export declare const DEFAULT_LINK_MATCHERS: LinkMatcher[];
+export interface RichTextEditorAutoLinkPluginProps {
+    /**
+     * Link matchers to use. Defaults to {@link DEFAULT_LINK_MATCHERS} (URLs +
+     * emails, opening in a new tab). Provide a custom array to recognize
+     * additional patterns (e.g. product-specific shortform references) — build
+     * each with `createLinkMatcherWithRegExp` from
+     * `@lexical/react/LexicalAutoLinkPlugin`.
+     */
+    matchers?: LinkMatcher[];
+    /**
+     * Called when a link is created, updated, or removed by auto-linking.
+     * Receives the new URL (or `null` when removed) and the previous URL.
+     */
+    onChange?: (url: string | null, prevUrl: string | null) => void;
+}
+/**
+ * Automatically converts typed/pasted URLs and email addresses into links.
+ * Render it inside the editor's `plugins` slot — it reaches the editor via
+ * `useLexicalComposerContext()`, so it must live within the editor's
+ * `LexicalComposer`. Requires `AutoLinkNode` (registered by default).
+ *
+ * @example
+ * ```
+ * import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
+ *
+ * <RichTextEditor
+ *   label="Notes"
+ *   plugins={<RichTextEditorAutoLinkPlugin />}
+ * />
+ * ```
+ */
+export declare function RichTextEditorAutoLinkPlugin({ matchers, onChange, }: RichTextEditorAutoLinkPluginProps): import("react").JSX.Element;
+export declare namespace RichTextEditorAutoLinkPlugin {
+    var displayName: string;
+}
+//# sourceMappingURL=RichTextEditorAutoLinkPlugin.d.ts.map

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAEnC;yBALe,4BAA4B"}

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.js

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file RichTextEditorAutoLinkPlugin.tsx
+ * @input Uses `@lexical/react/LexicalAutoLinkPlugin` (`AutoLinkPlugin`,
+ *   `createLinkMatcherWithRegExp`) and the shared URL/email matchers from
+ *   `linkUtils`.
+ * @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
+ *   default `DEFAULT_LINK_MATCHERS`.
+ * @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to
+ *   auto-linkify URLs and emails as they are typed or pasted. Requires
+ *   `AutoLinkNode` to be registered (it is, by default).
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/RichTextEditor/index.ts (exports)
+ * - /packages/lab/src/index.ts (barrel re-export)
+ * - /packages/lab/src/RichTextEditor/RichTextEditor.doc.mjs (usage notes)
+ * - /packages/lab/src/RichTextEditor/RichTextEditor.test.tsx (tests)
+ * - /apps/storybook/stories/RichTextEditor.stories.tsx (story)
+ *
+ * NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
+ * `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
+ *
+ * COMPATIBILITY: astryx aims for its RichTextEditor internals to eventually
+ * back Meta's EPS `EPSRichTextArea` (nest/libs/eps-lexical). EPS's auto-link is
+ * matcher-driven and applies `target="_blank"` + `rel="noopener noreferrer"` to
+ * created links (its `NEW_TAB_LINK_ATTRIBUTES`). This plugin uses the same
+ * matcher shape (`createLinkMatcherWithRegExp` + `attributes`) and the same
+ * new-tab defaults, so EPS can pass its own richer matcher set (e.g. shortform
+ * `D123` / `T456` / `S789` intern URLs) through the `matchers` prop without
+ * changing the contract. EPS ships a hardened fork of the transform itself
+ * (expanded separators, code-block exclusion) — astryx stays on the OSS
+ * `AutoLinkPlugin`, and EPS can substitute its own plugin in the same slot.
+ */
+import { AutoLinkPlugin, createLinkMatcherWithRegExp } from '@lexical/react/LexicalAutoLinkPlugin';
+import { URL_MATCHER, EMAIL_MATCHER, sanitizeUrl } from "./linkUtils.js";
+
+/**
+ * Attributes written onto every auto-created link so it opens in a new tab.
+ * `rel="noopener noreferrer"` is required whenever `target="_blank"` is set, to
+ * prevent reverse-tabnabbing. Matches EPS eps-lexical's `NEW_TAB_LINK_ATTRIBUTES`.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NEW_TAB_LINK_ATTRIBUTES = {
+  target: '_blank',
+  rel: 'noopener noreferrer'
+};
+
+/**
+ * Default matchers: bare URLs (defaulting to `https://` when scheme-less) and
+ * email addresses (as `mailto:` links). Both carry {@link NEW_TAB_LINK_ATTRIBUTES}.
+ * URLs are passed through {@link sanitizeUrl} so only http/https/mailto/tel
+ * schemes are ever written.
+ */
+export const DEFAULT_LINK_MATCHERS = [text => {
+  const match = createLinkMatcherWithRegExp(URL_MATCHER, url => sanitizeUrl(url))(text);
+  return match ? {
+    ...match,
+    attributes: NEW_TAB_LINK_ATTRIBUTES
+  } : null;
+}, text => {
+  const match = createLinkMatcherWithRegExp(EMAIL_MATCHER, email => `mailto:${email}`)(text);
+  return match ? {
+    ...match,
+    attributes: NEW_TAB_LINK_ATTRIBUTES
+  } : null;
+}];
+/**
+ * Automatically converts typed/pasted URLs and email addresses into links.
+ * Render it inside the editor's `plugins` slot — it reaches the editor via
+ * `useLexicalComposerContext()`, so it must live within the editor's
+ * `LexicalComposer`. Requires `AutoLinkNode` (registered by default).
+ *
+ * @example
+ * ```
+ * import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
+ *
+ * <RichTextEditor
+ *   label="Notes"
+ *   plugins={<RichTextEditorAutoLinkPlugin />}
+ * />
+ * ```
+ */
+export function RichTextEditorAutoLinkPlugin({
+  matchers = DEFAULT_LINK_MATCHERS,
+  onChange
+}) {
+  return /*#__PURE__*/_jsx(AutoLinkPlugin, {
+    matchers: matchers,
+    onChange: onChange
+  });
+}
+RichTextEditorAutoLinkPlugin.displayName = 'RichTextEditorAutoLinkPlugin';

package/dist/RichTextEditor/RichTextEditorToolbar.d.ts

@@ -41,6 +41,7 @@ export declare const RICHTEXT_ICON_KEYS: {
     readonly underline: "richtext:underline";
     readonly strikethrough: "richtext:strikethrough";
     readonly code: "richtext:code";
+    readonly link: "richtext:link";
     readonly h1: "richtext:h1";
     readonly h2: "richtext:h2";
     readonly h3: "richtext:h3";
@@ -63,6 +64,34 @@ export interface RichTextEditorToolbarProps {
     headingLevels?: ReadonlyArray<'h1' | 'h2' | 'h3'>;
     /** Toolbar size, forwarded to the Astryx Toolbar. @default 'sm' */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether to show the insert/edit-link button. When enabled, pressing it on a
+     * collapsed or non-link selection prompts for a URL (via `promptForUrl`,
+     * `window.prompt` by default) and wraps the selection in a link; pressing it
+     * while a link is selected removes the link.
+     *
+     * Requires `LinkNode` to be registered (it is, by default) — no extra setup.
+     * The entered URL is sanitized (see `sanitizeUrl`) so only
+     * http/https/mailto/tel links are written.
+     * @default true
+     */
+    hasLink?: boolean;
+    /**
+     * Called to obtain a URL when the link button is pressed on a non-link
+     * selection. Return the URL string to link, or `null`/`''` to cancel.
+     * Receives the currently selected text as a hint. Defaults to
+     * `window.prompt`. Override to plug in a custom (e.g. Astryx Dialog) prompt.
+     */
+    promptForUrl?: (selectedText: string) => string | null | undefined;
+    /**
+     * Whether links created via the toolbar open in a new tab. When `true`
+     * (default), the created link carries `target="_blank"` and
+     * `rel="noopener noreferrer"` — written into the link node's data (so it
+     * serializes and round-trips), not patched onto the DOM. Set `false` to
+     * create same-tab links.
+     * @default true
+     */
+    linkOpensInNewTab?: boolean;
     /**
      * Extra items rendered at the end of the toolbar (after a divider). Use this
      * to compose product-specific controls (e.g. mentions, AI) alongside the
@@ -90,7 +119,7 @@ export interface RichTextEditorToolbarProps {
  * />
  * ```
  */
-export declare function RichTextEditorToolbar({ label, headingLevels, size, endContent, }: RichTextEditorToolbarProps): import("react").JSX.Element;
+export declare function RichTextEditorToolbar({ label, headingLevels, size, hasLink, promptForUrl, linkOpensInNewTab, endContent, }: RichTextEditorToolbarProps): import("react").JSX.Element;
 export declare namespace RichTextEditorToolbar {
     var displayName: string;
 }

package/dist/RichTextEditor/RichTextEditorToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorToolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAmC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AA6CvE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAC;AAyMX,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAClD,mEAAmE;IACnE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAyB,EACzB,aAAkC,EAClC,IAAW,EACX,UAAU,GACX,EAAE,0BAA0B,+BAoP5B;yBAzPe,qBAAqB"}
+{"version":3,"file":"RichTextEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorToolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAmC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAqEvE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAerB,CAAC;AAyNX,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAClD,mEAAmE;IACnE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAyB,EACzB,aAAkC,EAClC,IAAW,EACX,OAAc,EACd,YAAY,EACZ,iBAAwB,EACxB,UAAU,GACX,EAAE,0BAA0B,+BA+W5B;yBAvXe,qBAAqB"}