@imgly/editor-react-native 1.80.0 → 1.81.0-rc.0

package/android/src/main/kotlin/ly/img/editor/configuration/memories/util/Animations.kt

@@ -0,0 +1,58 @@
+package ly.img.editor.configuration.memories.util
+
+import ly.img.engine.AnimationType
+import ly.img.engine.Engine
+
+/**
+ * The slide animations for the Memories slideshow — **this is the file to edit**.
+ *
+ * Every photo/clip gets an in-animation (as it appears) and an out-animation (as it leaves),
+ * bundled together as an [AnimationPair]. The kit picks one pair at random per slide
+ * ([getRandomAnimationPair]).
+ *
+ * An [AnimationPair] is a *recipe*, not a pair of engine blocks: [AnimationPair.createIn] /
+ * [AnimationPair.createOut] build a **fresh** engine animation each time they are called. Engine
+ * animations are single-owner (1:1 with a design block), so every slide must own its own animation
+ * instances — assigning one pooled animation block to several slides corrupts the scene (the engine
+ * re-points the animation to the newest block only) and later crashes: destroying a slide auto-
+ * destroys the shared animation, leaving every other slide holding a dangling id. [applySlideAnimation]
+ * calls these builders per slide so each clip gets its own blocks.
+ *
+ * To change the motion between slides, edit the list in [createAnimationPairs] — add, remove, or
+ * tweak entries (e.g. the `blurZoom` zoom strength), or write a whole new pair from two engine
+ * animations. The low-level builders below wrap the engine calls so the list stays readable.
+ */
+data class AnimationPair(
+    val createIn: (Engine) -> Int,
+    val createOut: (Engine) -> Int,
+)
+
+object Animations {
+    /** The pool of animations a slide can use. Edit this list to change the slideshow's motion. */
+    fun createAnimationPairs(): List<AnimationPair> = listOf(
+        blurZoom(),
+    )
+
+    /** Pick a random pair for the next slide. */
+    fun getRandomAnimationPair(animationPairs: List<AnimationPair>): AnimationPair = animationPairs.random()
+
+    // ---- Low-level builders (you usually don't need to touch these) --------------------------
+
+    /** Blur in, then crop-zoom out. [zoomScale] is how far the out-animation zooms (1.0 = none). */
+    private fun blurZoom(zoomScale: Float = 1.7f): AnimationPair = AnimationPair(
+        createIn = { engine ->
+            engine.block.createAnimation(AnimationType.Blur).also { inAnimation ->
+                engine.block.setDuration(inAnimation, IMAGE_DURATION * .5f)
+                engine.block.setEnum(inAnimation, "animationEasing", "EaseOut")
+            }
+        },
+        createOut = { engine ->
+            engine.block.createAnimation(AnimationType.CropZoom).also { outAnimation ->
+                engine.block.setDuration(outAnimation, IMAGE_DURATION * .5f)
+                engine.block.setBoolean(outAnimation, "animation/crop_zoom/fade", true)
+                engine.block.setEnum(outAnimation, "animationEasing", "EaseIn")
+                engine.block.setFloat(outAnimation, "animation/crop_zoom/scale", zoomScale)
+            }
+        },
+    )
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/util/Constants.kt

@@ -0,0 +1,20 @@
+package ly.img.editor.configuration.memories.util
+
+// The knobs for the slideshow. Tweak these to retime, resize, or restyle the montage.
+
+// Canvas — the slideshow page size. Portrait by default; square = 1080 x 1080, landscape = 1920 x 1080.
+const val PAGE_WIDTH = 1080f
+const val PAGE_HEIGHT = 1920f
+
+// Inset (dp) keeping the page off the screen edges and bottom controls.
+const val CANVAS_PADDING_DP = 10
+
+// Timing (seconds).
+const val IMAGE_DURATION = 8.0
+val OVERLAP_DURATION = IMAGE_DURATION * 0.4
+const val TITLE_DURATION = 3.0
+
+// Title card.
+const val TITLE_FONT_SIZE = 48f
+const val BURST_IMAGE_COUNT = 10 // images flashed behind the title
+const val BURST_TITLE_FRACTION = 0.9 // burst spans this fraction of the title duration

package/android/src/main/kotlin/ly/img/editor/configuration/memories/util/ImageDate.kt

@@ -0,0 +1,81 @@
+package ly.img.editor.configuration.memories.util
+
+import android.content.ContentResolver
+import android.net.Uri
+import android.provider.MediaStore
+import androidx.exifinterface.media.ExifInterface
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import ly.img.editor.configuration.memories.model.ImageItem
+import java.text.SimpleDateFormat
+import java.util.Locale
+import java.util.TimeZone
+
+/**
+ * Build [ImageItem]s from freshly-picked [uris], assigning ids from [baseId] + 1 so they stay unique
+ * even after deletions. Runs entirely on [Dispatchers.IO] because resolving MIME types and reading
+ * EXIF dates hits the ContentResolver; callers dispatch the result back to the main thread.
+ */
+suspend fun buildImageItems(
+    contentResolver: ContentResolver,
+    uris: List<Uri>,
+    baseId: Int,
+): List<ImageItem> = withContext(Dispatchers.IO) {
+    uris.mapIndexed { index, uri ->
+        val isVideo = contentResolver.getType(uri)?.startsWith("video/") == true
+        ImageItem(
+            id = baseId + index + 1,
+            url = uri.toString(),
+            isVideo = isVideo,
+            creationDate = if (isVideo) null else getImageCreationDate(contentResolver, uri),
+        )
+    }
+}
+
+/**
+ * Extract creation date from an image URI using MediaStore and EXIF data.
+ * Returns timestamp in milliseconds since epoch, or null if not available.
+ */
+fun getImageCreationDate(
+    contentResolver: ContentResolver,
+    uri: Uri,
+): Long? {
+    try {
+        // First try to get DATE_TAKEN from MediaStore (most reliable for gallery images)
+        val projection = arrayOf(MediaStore.Images.ImageColumns.DATE_TAKEN)
+        contentResolver.query(uri, projection, null, null, null)?.use { cursor ->
+            if (cursor.moveToFirst()) {
+                val dateIndex = cursor.getColumnIndexOrThrow(MediaStore.Images.ImageColumns.DATE_TAKEN)
+                val dateTaken = cursor.getLong(dateIndex)
+                if (dateTaken > 0) {
+                    return dateTaken
+                }
+            }
+        }
+    } catch (e: Exception) {
+        // MediaStore query failed, continue to EXIF fallback
+    }
+
+    try {
+        // Fallback to EXIF data
+        contentResolver.openInputStream(uri)?.use { inputStream ->
+            val exif = ExifInterface(inputStream)
+            val dateTimeOriginal = exif.getAttribute(ExifInterface.TAG_DATETIME_ORIGINAL)
+                ?: exif.getAttribute(ExifInterface.TAG_DATETIME)
+                ?: exif.getAttribute(ExifInterface.TAG_DATETIME_DIGITIZED)
+
+            dateTimeOriginal?.let { dateString ->
+                // EXIF DateTimeOriginal is local wall-clock time with no zone. Interpret it in the
+                // device's zone so the epoch lines up with MediaStore's DATE_TAKEN (which we prefer
+                // above); parsing it as UTC instead skews mixed-source sorting by the UTC offset.
+                val sdf = SimpleDateFormat("yyyy:MM:dd HH:mm:ss", Locale.US)
+                sdf.timeZone = TimeZone.getDefault()
+                return sdf.parse(dateString)?.time
+            }
+        }
+    } catch (e: Exception) {
+        // EXIF extraction failed
+    }
+
+    return null
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/util/Utils.kt

@@ -0,0 +1,27 @@
+package ly.img.editor.configuration.memories.util
+
+import ly.img.editor.configuration.memories.model.ImageItem
+
+/** Sort images chronologically by creation date; images without a date sort last (asc)/first (desc). */
+fun sortByDate(
+    images: List<ImageItem>,
+    ascending: Boolean,
+): List<ImageItem> = if (ascending) {
+    images.sortedWith(compareBy<ImageItem> { it.creationDate ?: Long.MAX_VALUE }.thenBy { it.id })
+} else {
+    images.sortedWith(compareByDescending<ImageItem> { it.creationDate ?: Long.MIN_VALUE }.thenByDescending { it.id })
+}
+
+/**
+ * Detect whether [images] is already in chronological order.
+ * Returns true for ascending (oldest first), false for descending (newest first),
+ * or null if the list is unsorted (or too small / has no dates to be meaningfully ordered).
+ */
+fun detectSortOrder(images: List<ImageItem>): Boolean? {
+    if (images.size < 2) return null
+    // Note: images without a creation date fall back to id order, so a freshly-added
+    // batch still reads as "in order" (ascending).
+    if (images == sortByDate(images, ascending = true)) return true
+    if (images == sortByDate(images, ascending = false)) return false
+    return null
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/CenteredAddImageButton.kt

@@ -0,0 +1,82 @@
+package ly.img.editor.configuration.memories.widget
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.memories.iconPack.AddPhotoAlternate
+import ly.img.editor.core.iconpack.IconPack
+
+/**
+ * Empty-state call to action shown when no photos are selected yet:
+ * a tappable card to add your media.
+ */
+@Composable
+fun CenteredAddImageButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    columnHeight: Float = 0f,
+) {
+    Box(
+        modifier = modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(
+            modifier = Modifier.offset {
+                IntOffset(0, columnHeight.toInt() / 2)
+            },
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Card(
+                modifier = Modifier
+                    .size(160.dp)
+                    .clickable { onClick() },
+                shape = RoundedCornerShape(12.dp),
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            MaterialTheme.colorScheme.surfaceVariant,
+                            RoundedCornerShape(12.dp),
+                        )
+                        .padding(16.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center,
+                ) {
+                    Icon(
+                        imageVector = IconPack.AddPhotoAlternate,
+                        contentDescription = null,
+                        modifier = Modifier.size(48.dp),
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Text(
+                        text = "Add your media",
+                        style = MaterialTheme.typography.bodyLarge,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        textAlign = TextAlign.Center,
+                    )
+                }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/DraggableImageItem.kt

@@ -0,0 +1,145 @@
+package ly.img.editor.configuration.memories.widget
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.AsyncImage
+import ly.img.editor.configuration.memories.iconPack.CheckCircle
+import ly.img.editor.configuration.memories.iconPack.PlayArrow
+import ly.img.editor.configuration.memories.model.ImageItem
+import ly.img.editor.core.iconpack.IconPack
+
+@Composable
+fun DraggableImageItem(
+    image: ImageItem,
+    elevation: Dp,
+    index: Int,
+    isSelectedForDeletion: Boolean = false,
+    onToggleSelection: (() -> Unit)? = null,
+) {
+    // The long-press-drag gesture is owned by the parent grid (ImageGrid); this item only renders.
+    Card(
+        modifier = Modifier
+            .aspectRatio(4 / 5f)
+            .then(
+                if (onToggleSelection != null) {
+                    Modifier.clickable { onToggleSelection() }
+                } else {
+                    Modifier
+                },
+            ),
+        elevation = CardDefaults.cardElevation(defaultElevation = elevation),
+        shape = RoundedCornerShape(8.dp),
+        border = if (isSelectedForDeletion) {
+            BorderStroke(3.dp, MaterialTheme.colorScheme.primary)
+        } else {
+            null
+        },
+    ) {
+        Box {
+            // For video, show a static middle frame; for images, load the URL directly.
+            val model: Any? = if (image.isVideo) rememberVideoThumbnail(image.url) else image.url
+            AsyncImage(
+                model = model,
+                contentDescription = if (image.isVideo) "Video ${image.id}" else "Image ${image.id}",
+                modifier = Modifier.fillMaxSize(),
+                contentScale = ContentScale.Crop,
+            )
+
+            // Play badge to mark video items.
+            if (image.isVideo) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(34.dp)
+                        .background(Color.Black.copy(alpha = 0.45f), CircleShape),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Icon(
+                        imageVector = IconPack.PlayArrow,
+                        contentDescription = null,
+                        tint = Color.White,
+                        modifier = Modifier.size(22.dp),
+                    )
+                }
+            }
+
+            // Highlight scrim when marked for deletion
+            if (isSelectedForDeletion) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.25f)),
+                )
+            }
+
+            // Position index badge
+            Box(
+                modifier = Modifier
+                    .align(Alignment.BottomStart)
+                    .padding(4.dp)
+                    .background(
+                        Color.Black.copy(alpha = 0.7f),
+                        RoundedCornerShape(4.dp),
+                    )
+                    .padding(horizontal = 6.dp, vertical = 2.dp),
+            ) {
+                Text(
+                    text = "${index + 1}",
+                    color = Color.White,
+                    fontSize = 12.sp,
+                    fontWeight = FontWeight.Bold,
+                )
+            }
+
+            // Selection checkbox (only when selection is enabled by the host)
+            if (onToggleSelection != null) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopEnd)
+                        .padding(6.dp),
+                ) {
+                    if (isSelectedForDeletion) {
+                        Icon(
+                            imageVector = IconPack.CheckCircle,
+                            contentDescription = "Selected for deletion",
+                            tint = MaterialTheme.colorScheme.primary,
+                            modifier = Modifier
+                                .size(24.dp)
+                                .background(Color.White, CircleShape),
+                        )
+                    } else {
+                        Box(
+                            modifier = Modifier
+                                .size(24.dp)
+                                .background(Color.Black.copy(alpha = 0.35f), CircleShape)
+                                .border(2.dp, Color.White, CircleShape),
+                        )
+                    }
+                }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/FullscreenVideoControls.kt

@@ -0,0 +1,136 @@
+package ly.img.editor.configuration.memories.widget
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import ly.img.editor.configuration.memories.iconPack.Pause
+import ly.img.editor.configuration.memories.iconPack.PlayArrow
+import ly.img.editor.core.iconpack.IconPack
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FullscreenVideoControls(
+    isPlaying: Boolean,
+    progress: Float,
+    currentTime: Double,
+    totalDuration: Double,
+    onPlayPauseClick: () -> Unit,
+    onSeek: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    fun formatTime(seconds: Double): String {
+        val totalSeconds = seconds.toInt().coerceAtLeast(0)
+        return "%02d:%02d".format(totalSeconds / 60, totalSeconds % 60)
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(80.dp)
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(
+                        Color.Transparent,
+                        Color.Black.copy(alpha = 0.6f),
+                    ),
+                ),
+            ),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter)
+                .padding(horizontal = 16.dp, vertical = 16.dp),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            // Play/Pause Button
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(CircleShape)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = rememberRipple(
+                            bounded = false,
+                            radius = 28.dp,
+                            color = Color.White,
+                        ),
+                    ) { onPlayPauseClick() }
+                    .background(Color.Black.copy(alpha = 0.3f)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(
+                    imageVector = if (isPlaying) IconPack.Pause else IconPack.PlayArrow,
+                    contentDescription = if (isPlaying) "Pause" else "Play",
+                    tint = Color.White,
+                    modifier = Modifier.size(32.dp),
+                )
+            }
+
+            // Slider
+            Slider(
+                value = progress,
+                onValueChange = { newValue ->
+                    onSeek(newValue)
+                },
+                colors = SliderDefaults.colors(
+                    thumbColor = Color.White,
+                    activeTrackColor = Color.White,
+                    inactiveTrackColor = Color.White.copy(alpha = 0.3f),
+                ),
+                modifier = Modifier.weight(1f),
+            )
+
+            // Current time over total duration, to the right of the slider
+            Text(
+                text = "${formatTime(currentTime)} / ${formatTime(totalDuration)}",
+                color = Color.White,
+                fontSize = 12.sp,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF1A1A1A)
+@Composable
+fun FullscreenVideoControlsPreview() {
+    var isPlaying by remember { mutableStateOf(false) }
+    var progress by remember { mutableStateOf(0.3f) }
+
+    FullscreenVideoControls(
+        isPlaying = isPlaying,
+        progress = progress,
+        currentTime = progress * 120.0,
+        totalDuration = 120.0,
+        onPlayPauseClick = { isPlaying = !isPlaying },
+        onSeek = { progress = it },
+    )
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/ImageGrid.kt

@@ -0,0 +1,122 @@
+package ly.img.editor.configuration.memories.widget
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress
+import androidx.compose.foundation.gestures.scrollBy
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import ly.img.editor.configuration.memories.model.ImageItem
+
+@Composable
+fun ImageGrid(
+    modifier: Modifier = Modifier,
+    images: List<ImageItem>,
+    onImagesChanged: (List<ImageItem>) -> Unit,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 72.dp),
+    lazyGridState: LazyGridState = rememberLazyGridState(),
+    selectedForDeletion: Set<Int> = emptySet(),
+    onToggleSelection: ((Int) -> Unit)? = null,
+) {
+    // Empty state is owned by the caller (e.g. ImageSelectionScreen); render nothing here.
+    if (images.isEmpty()) return
+
+    val hapticFeedback = LocalHapticFeedback.current
+
+    // Hand-written drag-reorder engine (no third-party reorder library). The slop gate inside
+    // ReorderableGridState is what keeps the list from snapping when a top/bottom cell is picked up.
+    val dragState = rememberReorderableGridState(lazyGridState) { from, to ->
+        val newImages = images.toMutableList()
+        newImages.add(to, newImages.removeAt(from))
+        onImagesChanged(newImages)
+
+        hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
+    }
+
+    // Continuous edge auto-scroll while dragging (only engages once the slop gate is satisfied).
+    LaunchedEffect(dragState.isDragging) {
+        if (!dragState.isDragging) return@LaunchedEffect
+        while (isActive) {
+            val speed = dragState.autoScrollSpeed
+            if (speed != 0f) lazyGridState.scrollBy(speed)
+            delay(16)
+        }
+    }
+
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(3),
+        state = lazyGridState,
+        contentPadding = contentPadding,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+            .fillMaxHeight()
+            .pointerInput(dragState) {
+                detectDragGesturesAfterLongPress(
+                    onDragStart = { offset ->
+                        dragState.onDragStart(offset)
+                        if (dragState.isDragging) {
+                            hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
+                        }
+                    },
+                    onDrag = { change, dragAmount ->
+                        change.consume()
+                        dragState.onDrag(dragAmount)
+                    },
+                    onDragEnd = dragState::onDragInterrupted,
+                    onDragCancel = dragState::onDragInterrupted,
+                )
+            },
+    ) {
+        items(images.size, key = { images[it].id }) { index ->
+            val isDragging = index == dragState.draggingItemIndex
+            val elevation by animateDpAsState(
+                targetValue = if (isDragging) 8.dp else 0.dp,
+                label = "elevation",
+            )
+
+            val imageId = images[index].id
+            val itemModifier = if (isDragging) {
+                // Dragged cell is placed manually; raise it and translate it under the finger.
+                Modifier
+                    .zIndex(1f)
+                    .graphicsLayer {
+                        translationX = dragState.draggingItemOffset.x
+                        translationY = dragState.draggingItemOffset.y
+                    }
+            } else {
+                // Non-dragged cells keep their default placement. A sliding reorder animation would
+                // need Modifier.animateItem() (Compose 1.7+); this module targets the older BOM.
+                Modifier
+            }
+
+            Box(itemModifier) {
+                DraggableImageItem(
+                    image = images[index],
+                    elevation = elevation,
+                    index = index,
+                    isSelectedForDeletion = imageId in selectedForDeletion,
+                    onToggleSelection = onToggleSelection?.let { toggle -> { toggle(imageId) } },
+                )
+            }
+        }
+    }
+}