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

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

@@ -1,58 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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) } },
-                )
-            }
-        }
-    }
-}