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

package/android/src/main/kotlin/ly/img/editor/configuration/memories/sheet/FilterStylesSheet.kt

@@ -0,0 +1,167 @@
+package ly.img.editor.configuration.memories.sheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+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.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+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.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import ly.img.editor.configuration.memories.iconPack.Image
+import ly.img.editor.configuration.memories.style.VideoStyle
+import ly.img.editor.configuration.memories.style.VideoStyles
+import ly.img.editor.core.iconpack.IconPack
+
+@Composable
+fun FilterStylesSheet(
+    onFilterSelected: (VideoStyle) -> Unit,
+    thumbnails: Map<String, String>,
+    initialSelectedId: String = VideoStyles.DEFAULT.id,
+    modifier: Modifier = Modifier,
+) {
+    // Seed from the currently-applied style so reopening the sheet keeps it highlighted.
+    var selectedStyleId by remember(initialSelectedId) { mutableStateOf(initialSelectedId) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        // Title
+        Text(
+            text = "Styles",
+            style = MaterialTheme.typography.headlineSmall,
+            fontWeight = FontWeight.Medium,
+            color = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.padding(bottom = 24.dp),
+        )
+
+        // Filter styles row — centered when it fits, horizontally scrollable on smaller screens.
+        LazyRow(
+            horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally),
+            contentPadding = PaddingValues(horizontal = 16.dp),
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            items(VideoStyles.ALL) { style ->
+                FilterStyleItem(
+                    style = style,
+                    thumbnailUri = thumbnails[style.id],
+                    isSelected = style.id == selectedStyleId,
+                    onClick = {
+                        selectedStyleId = style.id
+                        onFilterSelected(style)
+                    },
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(24.dp))
+    }
+}
+
+@Composable
+private fun FilterStyleItem(
+    style: VideoStyle,
+    thumbnailUri: String?,
+    isSelected: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = modifier.clickable { onClick() },
+    ) {
+        // Filter preview tile
+        Box(
+            modifier = Modifier
+                .size(72.dp)
+                .clip(RoundedCornerShape(16.dp))
+                .background(
+                    if (isSelected) {
+                        MaterialTheme.colorScheme.primary.copy(alpha = 0.1f)
+                    } else {
+                        Color.Transparent
+                    },
+                )
+                .border(
+                    width = if (isSelected) 3.dp else 0.dp,
+                    color = if (isSelected) {
+                        MaterialTheme.colorScheme.primary
+                    } else {
+                        Color.Transparent
+                    },
+                    shape = RoundedCornerShape(16.dp),
+                )
+                .padding(if (isSelected) 4.dp else 0.dp),
+            contentAlignment = Alignment.Center,
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(RoundedCornerShape(12.dp))
+                    .background(Color(style.previewBackground)),
+                contentAlignment = Alignment.Center,
+            ) {
+                if (thumbnailUri != null) {
+                    // Thumbnail supplied by the custom style asset source, loaded with Coil.
+                    AsyncImage(
+                        model = thumbnailUri,
+                        contentDescription = style.displayName,
+                        contentScale = ContentScale.Crop,
+                        modifier = Modifier.fillMaxSize(),
+                    )
+                } else {
+                    // Default style: an icon on the tile color (no filter / original look).
+                    Icon(
+                        imageVector = IconPack.Image,
+                        contentDescription = style.displayName,
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                        modifier = Modifier.size(32.dp),
+                    )
+                }
+            }
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Style name
+        Text(
+            text = style.displayName,
+            style = MaterialTheme.typography.bodyMedium,
+            fontWeight = if (isSelected) FontWeight.SemiBold else FontWeight.Normal,
+            color = if (isSelected) {
+                MaterialTheme.colorScheme.primary
+            } else {
+                MaterialTheme.colorScheme.onSurfaceVariant
+            },
+            textAlign = TextAlign.Center,
+        )
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/sheet/FilterStylesSheetType.kt

@@ -0,0 +1,21 @@
+package ly.img.editor.configuration.memories.sheet
+
+import ly.img.editor.configuration.memories.style.VideoStyle
+import ly.img.editor.configuration.memories.style.VideoStyles
+import ly.img.editor.core.sheet.SheetStyle
+import ly.img.editor.core.sheet.SheetType
+
+fun createFilterStylesSheetType(
+    thumbnails: Map<String, String>,
+    initialSelectedId: String = VideoStyles.DEFAULT.id,
+    onFilterSelected: (VideoStyle) -> Unit,
+): SheetType.Custom = SheetType.Custom(
+    style = SheetStyle(),
+    content = {
+        FilterStylesSheet(
+            onFilterSelected = onFilterSelected,
+            thumbnails = thumbnails,
+            initialSelectedId = initialSelectedId,
+        )
+    },
+)

package/android/src/main/kotlin/ly/img/editor/configuration/memories/sheet/VolumeSheet.kt

@@ -0,0 +1,104 @@
+package ly.img.editor.configuration.memories.sheet
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Slider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.memories.iconPack.VolumeDown
+import ly.img.editor.configuration.memories.iconPack.VolumeUp
+import ly.img.editor.core.iconpack.IconPack
+import ly.img.editor.core.sheet.SheetStyle
+import ly.img.editor.core.sheet.SheetType
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun VolumeSheet(
+    volume: Float,
+    onVolumeChange: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(24.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        // Title
+        Text(
+            text = "Volume",
+            style = MaterialTheme.typography.headlineSmall,
+            fontWeight = FontWeight.Medium,
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+
+        // Volume control
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Icon(
+                imageVector = IconPack.VolumeDown,
+                contentDescription = "Volume Down",
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.size(24.dp),
+            )
+
+            Slider(
+                value = volume,
+                onValueChange = onVolumeChange,
+                valueRange = 0f..1f,
+                modifier = Modifier.weight(1f),
+            )
+
+            Icon(
+                imageVector = IconPack.VolumeUp,
+                contentDescription = "Volume Up",
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.size(24.dp),
+            )
+        }
+
+        // Volume percentage
+        Text(
+            text = "${(volume * 100).toInt()}%",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+        )
+    }
+}
+
+fun createVolumeSheetType(
+    initialVolume: Float,
+    onVolumeChange: (Float) -> Unit,
+): SheetType.Custom = SheetType.Custom(
+    style = SheetStyle(),
+    content = {
+        var volume by remember { mutableFloatStateOf(initialVolume) }
+
+        VolumeSheet(
+            volume = volume,
+            onVolumeChange = { newVolume ->
+                volume = newVolume
+                onVolumeChange(newVolume)
+            },
+        )
+    },
+)

package/android/src/main/kotlin/ly/img/editor/configuration/memories/style/StyleApplier.kt

@@ -0,0 +1,220 @@
+package ly.img.editor.configuration.memories.style
+
+import android.util.Log
+import ly.img.editor.configuration.memories.scene.backgroundBlock
+import ly.img.editor.configuration.memories.scene.findTracks
+import ly.img.editor.configuration.memories.scene.imageBlocksInOrder
+import ly.img.editor.configuration.memories.scene.matteBlock
+import ly.img.engine.Color
+import ly.img.engine.EffectType
+import ly.img.engine.Engine
+import ly.img.engine.FillType
+import ly.img.engine.FindAssetsQuery
+import ly.img.engine.Font
+import ly.img.engine.Typeface
+import kotlin.math.abs
+
+private const val TAG = "MemoriesStyles"
+
+/**
+ * Generic, data-driven application of a [VideoStyle] to the engine. These functions read
+ * everything they need from the style, so they never have to change when styles are added,
+ * removed, or tuned in [VideoStyles].
+ */
+
+/**
+ * Apply [style] to the whole slideshow: filter + scale every media clip, paint the backdrop and
+ * matte, restyle the title, and checkpoint it as one undo step. The tracks are the source of truth,
+ * so this reads the clips back from them rather than holding block ids.
+ */
+suspend fun applyStyleToSlideshow(
+    engine: Engine,
+    page: Int,
+    style: VideoStyle,
+) {
+    val tracks = findTracks(engine, page) ?: return
+    val duration = engine.block.getDuration(page)
+
+    imageBlocksInOrder(engine, tracks).forEach { block ->
+        if (engine.block.supportsEffects(block)) {
+            engine.block.getEffects(block).indices.reversed().forEach { engine.block.removeEffect(block, it) }
+            applyStyleEffects(engine, block, style)
+        }
+        applyMediaScale(engine, block, page, style)
+    }
+
+    backgroundBlock(engine, page)?.let { applyStyleBackground(engine, it, style, duration) }
+    matteBlock(engine, page)?.let {
+        applyMediaScale(engine, it, page, style)
+        engine.block.setDuration(it, duration)
+    }
+
+    tracks.textTrack?.let { textTrack ->
+        engine.block.getChildren(textTrack)
+            .filter { runCatching { engine.block.getMetadata(it, "blockType") }.getOrNull() == "title" }
+            .forEach { updateTitleTypeface(engine, it, style) }
+    }
+
+    engine.editor.addUndoStep()
+}
+
+/** Set the title's font + color for [style] (Noir reads black on its white backdrop; others white). */
+private suspend fun updateTitleTypeface(
+    engine: Engine,
+    textBlock: Int,
+    style: VideoStyle,
+) {
+    try {
+        engine.block.setTextColor(textBlock, Color.fromHex(style.titleTextColorHex))
+        val assets = engine.asset.findAssets(
+            sourceId = "ly.img.typeface",
+            query = FindAssetsQuery(query = style.typeface, page = 0, perPage = 100),
+        )
+        val typeface = assets.assets.firstOrNull()?.payload?.typeface ?: return
+        val font = resolveFont(typeface, style) ?: return
+        engine.block.setFont(textBlock, font.uri, typeface)
+    } catch (e: Exception) {
+        Log.w(TAG, "Could not restyle title for '${style.id}'", e)
+    }
+}
+
+private const val VIDEO_FILL_URI = "fill/video/fileURI"
+
+/** Applies a style's image-filter adjustments to a single media [block]. */
+fun applyStyleEffects(
+    engine: Engine,
+    block: Int,
+    style: VideoStyle,
+) {
+    if (style.adjustments.isNotEmpty()) {
+        val adjustments = engine.block.createEffect(EffectType.Adjustments)
+        engine.block.appendEffect(block, adjustments)
+        style.adjustments.forEach { (property, value) ->
+            engine.block.setFloat(adjustments, property, value)
+        }
+    }
+}
+
+/**
+ * Size + center a media [block] within the [page] for the style's [VideoStyle.mediaScale]:
+ * full-bleed at 1.0, or scaled down and centered so the [VideoStyle.background] shows around it.
+ *
+ * This sets the block's **size and position** directly (rather than an `engine.block.scale` transform)
+ * so it cooperates with the slideshow's Ken Burns pan/zoom. The Ken Burns code pre-scales zoom-out
+ * clips (via `scale`, which mutates width/height) so the pan never reveals their edges; resetting the
+ * size here would wipe that out, so after re-establishing the clean centered base frame we re-apply
+ * the very same compensation on top. The base is reset first, so re-applying a style is idempotent
+ * and never compounds the scale. Blocks without an in-animation (videos, the matte) just get sized.
+ */
+fun applyMediaScale(
+    engine: Engine,
+    block: Int,
+    page: Int,
+    style: VideoStyle,
+) {
+    val pageWidth = engine.block.getWidth(page)
+    val pageHeight = engine.block.getHeight(page)
+    val scale = style.mediaScale.coerceIn(0.1f, 1f)
+
+    // Clean, centered base frame at the target size.
+    engine.block.setWidth(block, pageWidth * scale)
+    engine.block.setHeight(block, pageHeight * scale)
+    engine.block.setPositionX(block, pageWidth * (1f - scale) / 2f)
+    engine.block.setPositionY(block, pageHeight * (1f - scale) / 2f)
+
+    // Re-coordinate Ken Burns: a zoom-out clip is pre-scaled around its center so its pan stays
+    // framed within the new size instead of revealing the backdrop at its edges.
+    val inAnimation = runCatching { engine.block.getInAnimation(block) }.getOrDefault(-1)
+    if (inAnimation != -1) {
+        val zoomIntensity = runCatching {
+            engine.block.getFloat(inAnimation, "animation/ken_burns/zoomIntensity")
+        }.getOrDefault(0f)
+        if (zoomIntensity < 0f) {
+            engine.block.scale(block, 1f + abs(zoomIntensity), anchorX = 0.5f, anchorY = 0.5f)
+        }
+    }
+}
+
+/**
+ * Paint the persistent [backgroundBlock] for the style's [VideoStyle.background]: hidden for
+ * [StyleBackground.None], a flat color for [StyleBackground.Solid], or a muted, looping video
+ * spanning [pageDuration] for [StyleBackground.Video].
+ */
+suspend fun applyStyleBackground(
+    engine: Engine,
+    backgroundBlock: Int,
+    style: VideoStyle,
+    pageDuration: Double,
+) {
+    when (val background = style.background) {
+        StyleBackground.None -> {
+            engine.block.setVisible(backgroundBlock, false)
+        }
+
+        is StyleBackground.Solid -> {
+            val fill = ensureFill(engine, backgroundBlock, FillType.Color)
+            engine.block.setColor(fill, "fill/color/value", Color.fromHex(background.colorHex))
+            engine.block.setVisible(backgroundBlock, true)
+        }
+
+        is StyleBackground.Video -> {
+            // Resolve the backdrop clip from the custom local asset source rather than a hard-coded
+            // path; if the asset is missing, hide the backdrop instead of setting an empty fill.
+            val uri = engine.styleBackgroundVideoUri(background.assetId) ?: run {
+                engine.block.setVisible(backgroundBlock, false)
+                return
+            }
+            val fill = ensureFill(engine, backgroundBlock, FillType.Video)
+            // Only (re)set the source + reload when it actually changed; re-applying a style (e.g.
+            // after a track rebuild) shouldn't pay the decode cost again for the same backdrop.
+            val current = runCatching { engine.block.getString(fill, VIDEO_FILL_URI) }.getOrNull()
+            if (current != uri) {
+                engine.block.setString(fill, VIDEO_FILL_URI, uri)
+                engine.block.forceLoadAVResource(fill)
+            }
+            val sourceDuration = runCatching { engine.block.getAVResourceTotalDuration(fill) }.getOrDefault(0.0)
+            engine.block.setLooping(fill, true)
+            engine.block.setMuted(fill, true)
+            engine.block.setTrimOffset(fill, 0.0)
+            if (sourceDuration > 0.0) engine.block.setTrimLength(fill, sourceDuration)
+            // Keep the backdrop the full length of the slideshow so the loop always covers it.
+            engine.block.setDuration(backgroundBlock, pageDuration)
+            engine.block.setVisible(backgroundBlock, true)
+        }
+    }
+}
+
+/**
+ * Return the [block]'s fill, reusing it when it is already the requested [type], otherwise creating
+ * a fresh fill of that type (and destroying the previous one). Lets us flip the persistent
+ * background block between a color and a video without leaking the discarded fill.
+ */
+private fun ensureFill(
+    engine: Engine,
+    block: Int,
+    type: FillType,
+): Int {
+    val existing = runCatching { engine.block.getFill(block) }.getOrDefault(-1)
+    val existingValid = existing != -1 && runCatching { engine.block.isValid(existing) }.getOrDefault(false)
+    if (existingValid && runCatching { engine.block.getType(existing) }.getOrNull() == type.key) {
+        return existing
+    }
+    val fill = engine.block.createFill(type)
+    engine.block.setFill(block, fill)
+    if (existingValid) runCatching { engine.block.destroy(existing) }
+    return fill
+}
+
+/**
+ * Picks the best font for [style] from [typeface]: the first available sub-family in the
+ * style's preference order, falling back to the typeface's first font.
+ */
+fun resolveFont(
+    typeface: Typeface,
+    style: VideoStyle,
+): Font? {
+    for (weight in style.fontWeights) {
+        typeface.fonts.firstOrNull { it.subFamily == weight }?.let { return it }
+    }
+    return typeface.fonts.firstOrNull()
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/style/StyleAssetSource.kt

@@ -0,0 +1,43 @@
+package ly.img.editor.configuration.memories.style
+
+import androidx.core.net.toUri
+import ly.img.engine.Engine
+import ly.img.engine.FindAssetsQuery
+
+/**
+ * The custom **local** asset source that supplies the bundled style assets — the looping backdrop
+ * videos and every style's picker thumbnail. The files stay local (in `src/main/assets`) and are
+ * described by `assets/ly.img.memories.style/content.json`; the engine loads them through
+ * [addLocalSourceFromJSON][ly.img.engine.AssetApi.addLocalSourceFromJSON], exactly like the default
+ * IMG.LY sources. Keeping them behind an asset source means the style catalog references assets by
+ * id ([VideoStyle]) instead of hard-coding `file:///android_asset/...` paths across the kit.
+ */
+const val STYLE_SOURCE_ID = "ly.img.memories.style"
+
+/** The bundled `content.json` describing [STYLE_SOURCE_ID], resolved as an `android_asset` URI. */
+private const val STYLE_SOURCE_CONTENT_URI = "file:///android_asset/$STYLE_SOURCE_ID/content.json"
+
+/**
+ * Register [STYLE_SOURCE_ID] from its bundled `content.json` (idempotent). Call once while loading
+ * the other asset sources, before any style is applied or the Styles picker is shown.
+ */
+suspend fun Engine.registerStyleAssetSource() {
+    if (STYLE_SOURCE_ID !in asset.findAllSources()) {
+        asset.addLocalSourceFromJSON(contentUri = STYLE_SOURCE_CONTENT_URI.toUri())
+    }
+}
+
+/**
+ * The picker thumbnail URI for each style, keyed by style id, read from [STYLE_SOURCE_ID]. Styles
+ * without a bundled asset (e.g. the unstyled default) are simply absent from the map.
+ */
+suspend fun Engine.loadStyleThumbnails(): Map<String, String> = asset.findAssets(
+    sourceId = STYLE_SOURCE_ID,
+    query = FindAssetsQuery(page = 0, perPage = 100),
+).assets.mapNotNull { asset ->
+    asset.meta?.get("thumbUri")?.let { asset.id to it }
+}.toMap()
+
+/** The backdrop video URI for a style, read from its [STYLE_SOURCE_ID] asset (null if absent). */
+suspend fun Engine.styleBackgroundVideoUri(assetId: String): String? =
+    asset.fetchAsset(sourceId = STYLE_SOURCE_ID, assetId = assetId)?.meta?.get("uri")

package/android/src/main/kotlin/ly/img/editor/configuration/memories/style/VideoStyle.kt

@@ -0,0 +1,118 @@
+package ly.img.editor.configuration.memories.style
+
+/**
+ * Catalog of the video styles offered in the Styles sheet.
+ *
+ * This is the single source of truth for a style: its name, typeface, preferred font
+ * weights, the image-filter adjustments, the scene background and media scale, and the title
+ * text color all live here. To add, remove, or tune a style, edit [VideoStyles.ALL] below —
+ * nothing else needs to change. The generic application logic lives in [StyleApplier].
+ *
+ * The bundled files a style needs — its looping backdrop [StyleBackground.Video] and its picker
+ * thumbnail — are supplied by the [STYLE_SOURCE_ID] custom local asset source (see
+ * [StyleAssetSource]). A style references them by [id], never by a hard-coded `file://` path.
+ */
+data class VideoStyle(
+    /** Stable lowercase identifier used as the key everywhere (e.g. "noir"). */
+    val id: String,
+    /** Human-facing name shown in the sheet (e.g. "Noir"). */
+    val displayName: String,
+    /** Typeface name as it appears in the "ly.img.typeface" asset source. */
+    val typeface: String,
+    /** Preferred font sub-families, most-preferred first; falls back to the first available. */
+    val fontWeights: List<String>,
+    /** Adjustment effect properties, e.g. ("effect/adjustments/saturation", -1.0f). Empty = no adjustments. */
+    val adjustments: List<Pair<String, Float>> = emptyList(),
+    /** How much of the page the media fills. 1.0 = full-bleed; < 1.0 reveals the [background]. */
+    val mediaScale: Float = 1f,
+    /** The backdrop shown behind the (scaled-down) media. */
+    val background: StyleBackground = StyleBackground.None,
+    /** Title text color for this style (hex). White reads on the dark/video backdrops; Noir uses black. */
+    val titleTextColorHex: String = "#FFFFFF",
+    /** Opaque ARGB color for the picker tile (shown behind the icon / as a placeholder). */
+    val previewBackground: Long,
+)
+
+/** The backdrop a style paints behind the media once the media is scaled below full-bleed. */
+sealed interface StyleBackground {
+    /** No backdrop: the media fills the whole page (used by the unstyled default). */
+    object None : StyleBackground
+
+    /** A flat color fill behind the media (e.g. white for Noir). [colorHex] is an "#RRGGBB" string. */
+    data class Solid(
+        val colorHex: String,
+    ) : StyleBackground
+
+    /**
+     * A looping video behind the media, supplied by the [STYLE_SOURCE_ID] asset source.
+     * [assetId] is the id of the backdrop asset in that source (e.g. "hologram").
+     */
+    data class Video(
+        val assetId: String,
+    ) : StyleBackground
+}
+
+object VideoStyles {
+    /** Neutral, unstyled: clean modern sans, full-bleed media, no filter or backdrop. */
+    val DEFAULT = VideoStyle(
+        id = "default",
+        displayName = "Default",
+        typeface = "Montserrat",
+        fontWeights = listOf("SemiBold", "Medium", "Regular"),
+        previewBackground = 0xFFEFEBE9,
+    )
+
+    /** Professional black & white on a clean white backdrop, with black title type. */
+    val NOIR = VideoStyle(
+        id = "noir",
+        displayName = "Noir",
+        typeface = "Playfair Display",
+        fontWeights = listOf("Bold", "SemiBold"),
+        adjustments = listOf(
+            "effect/adjustments/saturation" to -1.0f,
+            "effect/adjustments/contrast" to 0.15f,
+            "effect/adjustments/clarity" to 0.1f,
+        ),
+        mediaScale = 0.8f,
+        background = StyleBackground.Solid(colorHex = "#FFFFFF"),
+        titleTextColorHex = "#000000",
+        previewBackground = 0xFF222222,
+    )
+
+    /** Futuristic cool cast over a looping hologram backdrop. A blue temperature shift cools the media. */
+    val HOLOGRAM = VideoStyle(
+        id = "hologram",
+        displayName = "Hologram",
+        typeface = "VT323",
+        fontWeights = listOf("Regular"),
+        adjustments = listOf(
+            "effect/adjustments/temperature" to -0.4f,
+            "effect/adjustments/contrast" to 0.1f,
+        ),
+        mediaScale = 0.8f,
+        background = StyleBackground.Video(assetId = "hologram"),
+        previewBackground = 0xFFE1F5FE,
+    )
+
+    /** Playful, poppy filter over a looping bubblegum backdrop: punchy saturation, bright tones. */
+    val BUBBLEGUM = VideoStyle(
+        id = "bubblegum",
+        displayName = "Bubblegum",
+        typeface = "Lobster Two",
+        fontWeights = listOf("Bold", "Regular"),
+        adjustments = listOf(
+            "effect/adjustments/saturation" to 0.5f,
+            "effect/adjustments/brightness" to 0.05f,
+            "effect/adjustments/contrast" to 0.1f,
+        ),
+        mediaScale = 0.8f,
+        background = StyleBackground.Video(assetId = "bubblegum"),
+        previewBackground = 0xFFFCE4EC,
+    )
+
+    /** All styles, in the order they appear in the Styles sheet. */
+    val ALL = listOf(DEFAULT, NOIR, HOLOGRAM, BUBBLEGUM)
+
+    /** Resolves a style by its [id] (case-insensitive), falling back to [DEFAULT]. */
+    fun byId(id: String): VideoStyle = ALL.firstOrNull { it.id.equals(id, ignoreCase = true) } ?: DEFAULT
+}