@marianmeres/stuic 3.102.0 → 3.104.0

package/dist/components/Book/Book.svelte

@@ -418,11 +418,17 @@
 	let swipeStartTime = 0;
 	let isSwiping = false;
 
-	// ---- Drag detection (for page click vs drag/swipe discrimination) ----
-
-	let _wasDragged = false;
-	let _dragStartClientX = 0;
-	let _dragStartClientY = 0;
+	// ---- Tap vs drag discrimination for page/area activation ----
+	// Activation uses pointer events (pointerdown/pointerup) rather than a synthesized
+	// mouse `click`. Pointer events unify mouse + touch and fire reliably on a clean tap,
+	// even on the `touch-action: none` gesture surface where tap→click synthesis is
+	// unreliable (notably iOS Safari, worst of all on inner SVG shapes). A tap is a
+	// pointerup landing within TAP_SLOP_PX of its pointerdown; movement beyond that is a
+	// swipe/drag and does not activate.
+
+	const TAP_SLOP_PX = 10;
+	let _tapDownX = 0;
+	let _tapDownY = 0;
 
 	// ---- Zoom helpers ----
 
@@ -572,10 +578,6 @@
 			const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
 			const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
 
-			_wasDragged = false;
-			_dragStartClientX = clientX;
-			_dragStartClientY = clientY;
-
 			if (zoomLevel > 1) {
 				// Pan mode
 				e.preventDefault();
@@ -603,18 +605,6 @@
 				return;
 			}
 
-			// Track drag for page click detection
-			if (!_wasDragged) {
-				const cx = "touches" in e ? (e.touches[0]?.clientX ?? 0) : e.clientX;
-				const cy = "touches" in e ? (e.touches[0]?.clientY ?? 0) : e.clientY;
-				if (
-					Math.abs(cx - _dragStartClientX) > 5 ||
-					Math.abs(cy - _dragStartClientY) > 5
-				) {
-					_wasDragged = true;
-				}
-			}
-
 			// Pan
 			if (isPanning) {
 				e.preventDefault();
@@ -693,10 +683,21 @@
 		};
 	}
 
+	// ---- Tap (pointer) helpers for page/area activation ----
+
+	function handleTapDown(e: PointerEvent) {
+		_tapDownX = e.clientX;
+		_tapDownY = e.clientY;
+	}
+
+	function isTap(e: PointerEvent): boolean {
+		return Math.hypot(e.clientX - _tapDownX, e.clientY - _tapDownY) <= TAP_SLOP_PX;
+	}
+
 	// ---- Page click ----
 
-	function handlePageClick(e: MouseEvent, page: BookPage | undefined) {
-		if (!onPageClick || !page || _wasDragged) return;
+	function handlePageClick(e: PointerEvent, page: BookPage | undefined) {
+		if (!onPageClick || !page || !isTap(e)) return;
 		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
 		const x = (e.clientX - rect.left) / rect.width;
 		const y = (e.clientY - rect.top) / rect.height;
@@ -769,7 +770,8 @@
 						<div
 							class={twMerge(!unstyled && "stuic-book-sheet-front", classPage)}
 							data-placeholder={!sheet.frontPage && sheet.backPage ? "" : undefined}
-							onclick={(e) => handlePageClick(e, sheet.frontPage)}
+							onpointerdown={handleTapDown}
+							onpointerup={(e) => handlePageClick(e, sheet.frontPage)}
 						>
 							{#if isNearby && sheet.frontPage}
 								{#if renderPage}
@@ -840,8 +842,9 @@
 												width={area.w}
 												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
-												onclick={(e: MouseEvent) => {
-													if (_wasDragged) return;
+												onpointerdown={handleTapDown}
+												onpointerup={(e: PointerEvent) => {
+													if (!isTap(e)) return;
 													e.stopPropagation();
 													onAreaClick({ area, page: sheet.frontPage! });
 												}}
@@ -858,7 +861,8 @@
 						<div
 							class={twMerge(!unstyled && "stuic-book-sheet-back", classPage)}
 							data-placeholder={!sheet.backPage && sheet.frontPage ? "" : undefined}
-							onclick={(e) => handlePageClick(e, sheet.backPage)}
+							onpointerdown={handleTapDown}
+							onpointerup={(e) => handlePageClick(e, sheet.backPage)}
 						>
 							{#if isNearby && sheet.backPage}
 								{#if renderPage}
@@ -925,8 +929,9 @@
 												width={area.w}
 												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
-												onclick={(e: MouseEvent) => {
-													if (_wasDragged) return;
+												onpointerdown={handleTapDown}
+												onpointerup={(e: PointerEvent) => {
+													if (!isTap(e)) return;
 													e.stopPropagation();
 													onAreaClick({ area, page: sheet.backPage! });
 												}}

package/dist/components/Button/index.css

@@ -389,30 +389,36 @@
 	   ============================================================================ */
 	.stuic-button[data-aspect1] {
 		aspect-ratio: 1;
-		justify-items: center;
 	}
 
+	/*
+	 * Declare both dimensions instead of deriving the square from aspect-ratio +
+	 * min-* on a shrink-to-fit inline-flex box. WebKit (iOS Safari) resolves the
+	 * cross-axis from content width before enforcing min-width, which squeezed
+	 * icon buttons into a vertical ellipse. Fixed width == height removes that
+	 * derivation, so every engine renders a true square/circle.
+	 */
 	.stuic-button[data-aspect1][data-size="sm"] {
-		min-width: var(--stuic-button-min-height-sm);
-		min-height: var(--stuic-button-min-height-sm);
+		width: var(--stuic-button-min-height-sm);
+		height: var(--stuic-button-min-height-sm);
 		padding: var(--stuic-button-padding-y-sm);
 	}
 
 	.stuic-button[data-aspect1][data-size="md"] {
-		min-width: var(--stuic-button-min-height-md);
-		min-height: var(--stuic-button-min-height-md);
+		width: var(--stuic-button-min-height-md);
+		height: var(--stuic-button-min-height-md);
 		padding: var(--stuic-button-padding-y-md);
 	}
 
 	.stuic-button[data-aspect1][data-size="lg"] {
-		min-width: var(--stuic-button-min-height-lg);
-		min-height: var(--stuic-button-min-height-lg);
+		width: var(--stuic-button-min-height-lg);
+		height: var(--stuic-button-min-height-lg);
 		padding: var(--stuic-button-padding-y-lg);
 	}
 
 	.stuic-button[data-aspect1][data-size="xl"] {
-		min-width: var(--stuic-button-min-height-xl);
-		min-height: var(--stuic-button-min-height-xl);
+		width: var(--stuic-button-min-height-xl);
+		height: var(--stuic-button-min-height-xl);
 		padding: var(--stuic-button-padding-y-xl);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.102.0",
+	"version": "3.104.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
@@ -69,7 +69,7 @@
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.21",
-		"svelte": "^5.55.10",
+		"svelte": "^5.56.0",
 		"svelte-check": "^4.4.8",
 		"tailwindcss": "^4.3.0",
 		"tsx": "^4.22.3",
@@ -81,14 +81,14 @@
 	"dependencies": {
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/cron": "^2.0.1",
-		"@marianmeres/design-tokens": "^1.7.0",
+		"@marianmeres/design-tokens": "^1.8.0",
 		"@marianmeres/icons-fns": "^5.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",
 		"@marianmeres/parse-boolean": "^2.1.0",
 		"@marianmeres/ticker": "^1.17.1",
 		"@marianmeres/tree": "^2.3.0",
-		"libphonenumber-js": "^1.13.3",
+		"libphonenumber-js": "^1.13.4",
 		"runed": "^0.23.4",
 		"tailwind-merge": "^3.6.0"
 	}