@marianmeres/stuic 3.129.0 → 3.130.0

package/README.md

@@ -195,7 +195,11 @@ When a stuic app is installed and launched standalone (iOS Home Screen, Android/
 
 **Automatic:**
 
-- `Notifications` — the toast stack always keeps clear of the insets in standalone (you never want a toast under the home indicator). No prop needed; no-op in a browser tab.
+- `Notifications` — the toast stack always keeps clear of the insets in standalone (you never want a toast under the home indicator).
+- `Modal` — when full-bleed (below the `md` breakpoint, where it fills the screen), its content is padded by the insets so header / content / footer clear the system UI. Centered desktop modals are untouched.
+- `AssetsPreview` — the lightbox image stays edge-to-edge, but the overlay controls (close, prev/next, dots, filename) are offset so they clear the insets.
+
+All three are no-ops in a browser tab and need no prop.
 
 **Utility classes** — offset any edge-anchored element without writing your own `env()` rule. They are active in standalone only:
 
@@ -219,7 +223,7 @@ When a stuic app is installed and launched standalone (iOS Home Screen, Android/
 
 **Pick ONE layer.** Don't pad the same edge twice in a nesting chain. E.g. a nav `Drawer` whose content is its own stuic `Header`: put `safeArea` on the inner `Header`, not also on the drawer panel/wrapper.
 
-**Not covered:** other fixed/edge-anchored components (`Modal`/`ModalDialog` full-bleed on mobile, `Float`) do not auto-handle insets — apply a `stuic-safe-area-*` class or the variables to their content as needed.
+**Not covered:** remaining fixed/edge-anchored components (e.g. `Float`, or a bare `ModalDialog` used directly) do not auto-handle insets — apply a `stuic-safe-area-*` class or the variables to their content as needed.
 
 ## TypeScript
 

package/dist/components/AssetsPreview/README.md

@@ -45,6 +45,7 @@ interface AssetPreview {
 - **Touch support**: Touch gestures for pan
 - **Auto-preload**: Preloads full-resolution images when modal opens
 - **File type icons**: Displays appropriate icons for non-image files
+- **PWA safe area**: when installed/standalone, the overlay controls (close, prev/next, dots, filename) are automatically offset so they clear the status bar / notch / home indicator. The image itself stays edge-to-edge. Inert in a browser tab (`env()` → `0`); no prop required.
 
 ## Translation Keys
 

package/dist/components/AssetsPreview/_internal/AssetsPreviewContent.svelte

@@ -658,8 +658,11 @@
 		<div
 			class={twMerge(
 				"absolute inset-0 flex justify-between pointer-events-none",
-				prevNextBottom ? "items-end pb-4" : "items-center"
+				prevNextBottom ? "items-end" : "items-center"
 			)}
+			style="padding-left: var(--stuic-safe-area-left, 0px); padding-right: var(--stuic-safe-area-right, 0px);{prevNextBottom
+				? ' padding-bottom: calc(1rem + var(--stuic-safe-area-bottom, 0px));'
+				: ''}"
 		>
 			<Button
 				class={twMerge(BUTTON_CLS, "ml-4", classControls)}
@@ -681,7 +684,17 @@
 		</div>
 	{/if}
 
-	<div class="absolute top-4 left-4 right-4 flex items-center justify-between gap-3">
+	<!-- Top control bar (close, download, zoom, filename). Offset by the PWA
+	     safe-area insets when installed/standalone so the controls clear the
+	     status bar / notch / side notch. The vars are 0px in a browser tab. -->
+	<div
+		class="absolute flex items-center justify-between gap-3"
+		style="
+			top: calc(1rem + var(--stuic-safe-area-top, 0px));
+			left: calc(1rem + var(--stuic-safe-area-left, 0px));
+			right: calc(1rem + var(--stuic-safe-area-right, 0px));
+		"
+	>
 		{#if !noName && previewAsset?.name}
 			<span class="stuic-assets-preview-label truncate px-1">
 				{previewAsset?.name}
@@ -767,7 +780,8 @@
 		{#if !noDots && assets.length <= 10}
 			{#if !noName && dotTooltip}
 				<div
-					class="absolute bottom-10 left-0 right-0 text-center"
+					class="absolute left-0 right-0 text-center"
+					style="bottom: calc(2.5rem + var(--stuic-safe-area-bottom, 0px));"
 					transition:fade={{ duration: 100 }}
 				>
 					<span class="stuic-assets-preview-label p-1">
@@ -775,7 +789,10 @@
 					</span>
 				</div>
 			{/if}
-			<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3">
+			<div
+				class="absolute left-1/2 -translate-x-1/2 flex items-center gap-3"
+				style="bottom: calc(1rem + var(--stuic-safe-area-bottom, 0px));"
+			>
 				{#each assets as _, i}
 					<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 					<button
@@ -793,7 +810,10 @@
 				{/each}
 			</div>
 		{:else if !noCurrentOfTotal}
-			<div class="absolute bottom-4 left-1/2 -translate-x-1/2">
+			<div
+				class="absolute left-1/2 -translate-x-1/2"
+				style="bottom: calc(1rem + var(--stuic-safe-area-bottom, 0px));"
+			>
 				<span class="stuic-assets-preview-label px-2 py-1 text-sm opacity-60">
 					{previewIdx + 1} / {assets.length}
 				</span>

package/dist/components/Modal/README.md

@@ -107,6 +107,10 @@ By default, Modal is:
 - **Mobile**: Full screen with 1rem margins from viewport edges
 - **Desktop (md+)**: Centered, max-width 768px, auto height with max 80vh
 
+### PWA safe area (automatic)
+
+When the app runs installed/standalone (display-mode standalone or fullscreen) and the Modal is **full-bleed** (below the `md` breakpoint), its content is automatically padded by the device safe-area insets so the header / content / footer clear the status bar, notch and home indicator. This is **inert in a normal browser tab** (`env()` → `0`) and on **centered desktop** modals (which don't touch the edges). No prop required. To go truly edge-to-edge, override the padding on the inner panel via `class`.
+
 ## CSS Variables
 
 Override to customize appearance:

package/dist/components/Modal/index.css

@@ -27,4 +27,24 @@
 	.stuic-modal .main {
 		scrollbar-width: thin;
 	}
+
+	/* ============================================================================
+	   SAFE AREA (PWA installed / standalone) — automatic, full-bleed only.
+	   The Modal is full-screen below the `md` breakpoint (size-full) and a
+	   centered card at/above it (md:size-auto). Only the full-bleed case touches
+	   the device edges, so we gate on `width < 48rem` (Tailwind's md) AND
+	   standalone, and pad the bg-bearing .stuic-modal (a flex column) so its
+	   header / content / footer clear the status bar, notch and home indicator.
+	   Centered desktop modals and browser tabs (env → 0) are untouched. A
+	   consumer wanting true edge-to-edge can override padding via `class`.
+	   ============================================================================ */
+	@media (display-mode: standalone) and (width < 48rem),
+		(display-mode: fullscreen) and (width < 48rem) {
+		.stuic-modal {
+			padding-top: env(safe-area-inset-top);
+			padding-right: env(safe-area-inset-right);
+			padding-bottom: env(safe-area-inset-bottom);
+			padding-left: env(safe-area-inset-left);
+		}
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.129.0",
+	"version": "3.130.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",