@columenlabs/lumen-ui 0.1.293 → 0.1.295

package/dist/lumen-bottom-sheet.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
-/** A snap point: a share of the screen's height (0 to 1) or a height in px ("76px"). */
+/**
+ * A snap point: a share of the screen's height (0 to 1), or a height in px ("64px") measured above the
+ * phone's home bar (the sheet adds the bar's safe area to it).
+ */
 export type SheetSnap = number | string;
 export interface LumenBottomSheetProps {
-    /** The heights it rests at, smallest first: `['76px', 0.5, 0.92]` is peek, half and full. */
+    /** The heights it rests at, smallest first: `['64px', 0.5, 0.92]` is peek, half and full. */
     snaps: SheetSnap[];
     /** Where it rests now (one of `snaps`). */
     snap: SheetSnap;

package/dist/lumen-bottom-sheet.js

@@ -8,6 +8,24 @@ function px(s, h) {
         return s * h;
     return Number.parseFloat(s);
 }
+/** The phone's bottom safe area (its home bar), px: 0 where there is none. */
+function useSafeBottom() {
+    const [inset, setInset] = React.useState(0);
+    React.useEffect(() => {
+        const probe = document.createElement('div');
+        probe.style.cssText =
+            'position:fixed;visibility:hidden;padding-bottom:env(safe-area-inset-bottom)';
+        document.body.appendChild(probe);
+        const read = () => setInset(Number.parseFloat(getComputedStyle(probe).paddingBottom) || 0);
+        read();
+        window.addEventListener('resize', read);
+        return () => {
+            window.removeEventListener('resize', read);
+            probe.remove();
+        };
+    }, []);
+    return inset;
+}
 /** The screen's height, kept up to date. */
 function useScreenHeight() {
     const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : window.innerHeight);
@@ -25,10 +43,20 @@ function useScreenHeight() {
  */
 export function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }) {
     const h = useScreenHeight();
+    const inset = useSafeBottom();
+    // A px snap rests above the home bar: vaul gets it with the bar's height added.
+    const rest = (s) => (typeof s === 'string' ? `${px(s, h) + inset}px` : s);
+    const rests = snaps.map(rest);
+    const at = snaps.indexOf(snap);
     // The sheet is as tall as the screen and slides down to its snap; what it holds fills only the
     // part on screen, so a composer or footer at its bottom stays in view at every snap.
-    const shown = Math.min(h, Math.max(0, px(snap, h)));
-    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: snaps, activeSnapPoint: snap, setActiveSnapPoint: (s) => s != null && onSnap(s), children: _jsx(Drawer.Portal, { children: _jsxs(Drawer.Content, { "data-slot": "lumen-bottom-sheet", "aria-describedby": undefined, 
+    const shown = Math.min(h, Math.max(0, px(rest(snap), h)));
+    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
+            const i = s == null ? -1 : rests.indexOf(s);
+            const next = snaps[i];
+            if (next !== undefined)
+                onSnap(next);
+        }, children: _jsx(Drawer.Portal, { children: _jsxs(Drawer.Content, { "data-slot": "lumen-bottom-sheet", "aria-describedby": undefined, 
                 // Focus stays where the person was: the sheet is always there, opening it is not a move.
-                onOpenAutoFocus: (e) => e.preventDefault(), className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: children })] })] }) }) }));
+                onOpenAutoFocus: (e) => e.preventDefault(), className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: children })] })] }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.293",
+  "version": "0.1.295",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.293",
+    "@columenlabs/lumen-ui-types": "0.1.295",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",