openguessr-ui 0.3.6 → 0.4.0

package/README.md

@@ -343,7 +343,8 @@ The loading spinner component can be displayed while large content loads, such a
 
 The notification component is used for short messages at the top of the screen, optionally with an action. It needs to be mounted. It takes the following props:
 
-- `top`: Distance from the top of the viewport, defaults to `--layout-margin`
+- `top`: Distance from the top of the viewport, defaults to `--box-margin`
+- `offsetSafeArea`: Whether the top position should be offset by the safe area inset, defaults to true
 - `onaccept`: Called when the accept button is used
 - `ondismiss`: Called when the dismiss button is used
 

package/components/Notification.svelte

@@ -3,7 +3,7 @@
 	import { Check, SquareArrowOutUpRight, X } from "@lucide/svelte";
 	import { fly } from "svelte/transition";
 
-	let { top = "var(--box-margin)", onaccept, ondismiss } = $props();
+	let { top = "var(--box-margin)", offsetSafeArea = true, onaccept, ondismiss } = $props();
 
 	function accept() {
 		if (notification.acceptFunction) {
@@ -36,7 +36,7 @@
 	);
 </script>
 
-<div class="notification-holder" style:top>
+<div class="notification-holder" style:top style:margin-top={offsetSafeArea ? "env(safe-area-inset-top)" : ""}>
 	{#if notification.visible}
 		<div id="notification-bar" transition:fly={{ y: -20, duration: 250 }}>
 			<p id="notification-text">
@@ -103,7 +103,6 @@
 		position: fixed;
 		left: var(--box-margin);
 		right: var(--box-margin);
-		margin-top: env(safe-area-inset-top);
 		display: flex;
 		justify-content: center;
 		pointer-events: none;

package/components/Popup.svelte

@@ -122,7 +122,7 @@
 
 			if (isScrollingHorizontally || isScrollingDown) {
 				dragStartY = null;
-				return animateDrawerOpen(); // Touch  could've stopped the drawer during open, since it's a content scroll not a drag, resume
+				return animateDrawerOpen(); // Touch could've stopped the drawer during open, since it's a content scroll not a drag, resume
 			}
 		}
 
@@ -140,7 +140,7 @@
 	};
 
 	const dragEnd = (event) => {
-		if (dragStartY == null || !findDragTouch(event.changedTouches)) return; // Only the dragging finger ends the drag
+		if (dragStartY == null || !findDragTouch(event.changedTouches)) return; // Only the dragging finger can end the drag
 		dragStartY = null;
 
 		if (!isDragging) return animateDrawerOpen(); // Single tap without drag, resume opening if it was caught mid-animation
@@ -149,14 +149,14 @@
 		// Calculate velocity
 		const first = velocitySamples[0];
 		const last = velocitySamples.at(-1);
-		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0; // Pixels per ms (time is ms)
+		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0; // Pixels per ms
 
 		// If swiped with enough velocity or past 35%, animate it shut, otherwise open fully again
 		if (velocity > 0.4 || drawerVerticalOffset > uiWindowHeight * 0.35) {
 			const duration = clamp((closedOffset - drawerVerticalOffset) / Math.max(velocity, 1.5), 180, 420); // Faster drag velocity means lower duration
 			closeTiming = { duration, easing: cubicBezier(0.45, 0.55, 0.4, 0.92) };
 			close();
-		} else animateDrawerOpen(); // Too little drag, snap back to fully open state
+		} else animateDrawerOpen();
 	};
 
 	// Automatic z-indexing ---------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openguessr-ui",
-	"version": "0.3.6",
+	"version": "0.4.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite example"