utkarshdalal · Maaggel · Dec 10, 2025 · Dec 10, 2025 · Dec 11, 2025 · Dec 12, 2025
@@ -241,8 +241,15 @@ dependencies {
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.bundles.compose)
     implementation(libs.landscapist.coil)
+    implementation(libs.coil.svg)
     debugImplementation(libs.androidx.ui.tooling)
 
+    // Media3 (ExoPlayer) for video playback
+    implementation(libs.bundles.media3)
+
+    // Baseline Profiles - enables precompilation of critical code paths
+    implementation(libs.profileinstaller)
+
     // Support
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)

@@ -0,0 +1,13 @@
+<manifest>
+    <id>capsule_grid</id>
+    <title>Capsule Grid</title>
+    <version>1.0.0</version>
+    <engineVersion>1.0.0</engineVersion>
+    <minAppVersion>0.0.0</minAppVersion>
+    <description>A responsive grid of portrait capsule art with compatibility badges and game titles.</description>
+    <author>
+        <name>Radical Thomas</name>
+    </author>
+    <preview src="/assets/theme.png" />
+    <theme source="/theme.xml" variables="/variables.xml" />
+</manifest>
@@ -0,0 +1,64 @@
+<theme>
+    <elements>
+        <card id="capsule" width="100%" height="100%">
+            <image id="art" x="0" y="0" width="100%" height="100%"
+                   src="@{game.capsule}" cornerRadius="@{vars.cornerRadius}" scaleType="cover" />
+
+            <rect id="compatBadge" x="0" y="0" width="100%" height="@{vars.badgeHeight}"
+                  color="@{vars.overlayColor}" cornerRadius="@{vars.cornerRadius} @{vars.cornerRadius} 0 0" />
+            <text id="compatLabel" x="0" y="0" width="100%" height="@{vars.badgeHeight}"
+                  text="@{game.compatibility.label}" textSize="@{vars.textSizeSmall}"
+                  color="@{game.compatibility.color}" maxLines="1" textAlign="center" fontWeight="bold" />
+
+            <rect id="footer" x="0" y="0" width="100%" height="@{vars.badgeHeight}"
+                  color="@{vars.overlayColor}" cornerRadius="0 0 @{vars.cornerRadius} @{vars.cornerRadius}"
+                  anchor="bottomLeft" />
+            <text id="title" x="@{vars.paddingSmall}" y="2" width="80%" height="@{vars.badgeHeight}"
+                  text="@{game.title}" textSize="@{vars.textSizeSmall}" color="@{vars.textColor}"
+                  maxLines="1" textAlign="left" fontWeight="bold" anchor="bottomLeft" />
+
+            <text id="installedCheck" x="16" y="2" height="@{vars.badgeHeight}"
+                  text="✓" textSize="@{vars.textSizeSmall}" color="@{vars.textColor}"
+                  textAlign="right" fontWeight="bold" anchor="bottomRight"
+                  visibleWhen="@{game.isInstalled}" />
+
+            <rect id="backdrop" x="0" y="0" width="100%" height="100%"
+                  color="#00000000" borderWidth="1" borderColor="#22FFFFFF"
+                  cornerRadius="@{vars.cornerRadius}" />
+        </card>
+    </elements>
+
+    <layout>
+        <grid cellWidth="150" aspectRatio="0.67"
+              hSpacing="@{vars.gridSpacing}" vSpacing="@{vars.gridSpacing}"
+              padding="@{vars.gridPaddingTop} 20"
+              highlightCornerRadius="@{vars.cornerRadius}"
+              verticalAlign="center"
+              selectionMode="moving" itemCard="capsule" />
+
+        <fixed id="topBar" backgroundColor="#CC000000" height="@{vars.topBarHeight}">
+            <header x="@{vars.paddingMedium}" y="@{vars.paddingSmall}" anchor="topLeft"
+                textColor="@{vars.textColor}" showAppName="true" showGameCount="true" />
+            <searchBar x="@{vars.searchBarX}" y="@{vars.searchBarY}" width="@{vars.searchBarWidth}" height="56"
+                anchor="topLeft" backgroundColor="#FF1E1E1E" borderRadius="24"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <profileButton x="@{vars.paddingMedium}" y="@{vars.profileButtonY}" anchor="topRight" size="56"
+                iconSize="36" padding="10"
+                backgroundColor="#66808080" cornerRadius="12"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+
+        <fixed id="bottomBar">
+            <filterButton x="100" y="@{vars.bottomOffset}" anchor="bottomRight" expanded="true"
+                          cornerRadius="16" size="56" iconSize="24"
+                          highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                          highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <addButton x="@{vars.paddingMedium}" y="@{vars.bottomOffset}" anchor="bottomRight"
+                       cornerRadius="16" size="56" iconSize="24"
+                       highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                       highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+    </layout>
+</theme>
@@ -0,0 +1,40 @@
+<variables>
+    <!-- Colors (used multiple times) -->
+    <var name="textColor" value="#FFFFFFFF" />
+    <var name="overlayColor" value="#99000000" />
+    <var name="highlightColor" value="#9575CD" />
+
+    <!-- Highlight styling (used by multiple elements) -->
+    <var name="highlightOpacity" value="0.9" />
+    <var name="highlightBorderWidth" value="2" />
+    <var name="highlightTransitionSpeed" value="200" />
+
+    <!-- Shared dimensions -->
+    <var name="cornerRadius" value="20" />
+    <var name="badgeHeight" value="20" />
+    <var name="gridSpacing" value="12" />
+    <var name="textSizeSmall" value="11" />
+
+    <!-- Shared spacing -->
+    <var name="paddingSmall" value="8" />
+    <var name="paddingMedium" value="16" />
+    <var name="bottomOffset" value="24" />
+
+    <!-- Top bar (in breakpoint) -->
+    <var name="topBarHeight" value="72" />
+    <var name="searchBarWidth" value="600" />
+    <var name="searchBarX" value="200" />
+    <var name="searchBarY" value="12" />
+    <var name="profileButtonY" value="12" />
+    <var name="gridPaddingTop" value="80" />
+
+    <!-- Portrait overrides -->
+    <breakpoint orientation="portrait">
+        <var name="topBarHeight" value="130" />
+        <var name="gridPaddingTop" value="160" />
+        <var name="searchBarWidth" value="90%" />
+        <var name="searchBarX" value="5%" />
+        <var name="searchBarY" value="80" />
+        <var name="profileButtonY" value="10" />
+    </breakpoint>
+</variables>
@@ -0,0 +1,14 @@
+<manifest>
+    <id>carousel</id>
+    <title>Carousel</title>
+    <version>1.0.0</version>
+    <engineVersion>1.0.0</engineVersion>
+    <minAppVersion>0.0.0</minAppVersion>
+    <description>A center-focused carousel with large hero images. The highlighted game in the center scales up for emphasis.</description>
+    <author>
+        <name>Mikkel Bjørnmose Bundgaard</name>
+        <github>https://github.com/maaggel</github>
+    </author>
+    <preview src="/assets/theme.png" />
+    <theme source="/theme.xml" variables="/variables.xml" />
+</manifest>
@@ -0,0 +1,71 @@
+<theme>
+    <elements>
+        <card id="carousel" width="@{vars.cardWidth}" height="@{vars.cardHeight}">
+            <image id="hero" x="0" y="0" width="100%" height="@{vars.heroHeight}"
+                   src="@{game.hero}" cornerRadius="@{vars.cornerRadius}" scaleType="cover" />
+
+            <rect id="border" x="0" y="0" width="100%" height="@{vars.heroHeight}"
+                  color="#00000000" borderWidth="2" borderColor="#33FFFFFF"
+                  cornerRadius="@{vars.cornerRadius}" />
+
+            <text id="title" x="0" y="@{vars.infoY}" width="100%"
+                  text="@{game.title}" textSize="@{vars.textSizeTitle}" color="@{vars.infoTextColor}"
+                  maxLines="1" textAlign="center" fontWeight="medium" anchor="topLeft"
+                  focusOnly="true" focusTransitionSpeed="@{vars.transitionSpeed}" />
+
+            <text id="compatLabel" x="0" y="@{vars.compatY}" width="100%"
+                  text="@{game.compatibility.label}" textSize="@{vars.textSizeSmall}"
+                  color="@{game.compatibility.color}" maxLines="1" textAlign="center" fontWeight="normal"
+                  anchor="topLeft" focusOnly="true" focusTransitionSpeed="@{vars.transitionSpeed}" opacity="0.7" />
+
+            <text id="installedCheck" x="10" y="170"
+                  text="✓" textSize="@{vars.textSizeSmall}" color="@{vars.infoTextColor}"
+                  textAlign="right" fontWeight="bold" anchor="topRight"
+                  focusOnly="true" focusTransitionSpeed="@{vars.transitionSpeed}"
+                  visibleWhen="@{game.isInstalled}" />
+        </card>
+    </elements>
+
+    <layout>
+        <carousel
+            centerFocus="true"
+            focusedScale="@{vars.focusedScale}"
+            verticalAlign="center"
+            verticalOffset="@{vars.carouselOffsetY}"
+            itemWidth="@{vars.cardWidth}"
+            itemHeight="@{vars.cardHeight}"
+            itemSpacing="@{vars.itemSpacing}"
+            selectionMode="stationary"
+            itemCard="carousel"
+            focusedBackground="@{game.libraryHero}"
+            backgroundOpacity="0.2"
+            backgroundTransitionSpeed="@{vars.transitionSpeed}"
+            highlightBorderWidth="0" />
+
+        <fixed id="topBar" height="@{vars.topBarHeight}">
+            <header x="@{vars.paddingMedium}" y="8" anchor="topLeft"
+                textColor="#FFFFFFFF" showAppName="true" showGameCount="true" />
+            <searchBar x="76" y="12" width="@{vars.searchBarWidth}" height="46"
+                anchor="topRight" backgroundColor="#CC1E1E1E" borderRadius="28"
+                collapsible="true"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <profileButton x="12" y="@{vars.profileButtonY}" anchor="topRight" size="48"
+                iconSize="48" padding="2"
+                backgroundColor="#CC1E1E1E" cornerRadius="27"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+
+        <fixed id="bottomBar">
+            <filterButton x="@{vars.paddingMedium}" y="@{vars.bottomOffset}" anchor="bottomLeft" expanded="true"
+                          cornerRadius="16" size="56" iconSize="24"
+                          highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                          highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <addButton x="@{vars.paddingMedium}" y="@{vars.bottomOffset}" anchor="bottomRight"
+                       cornerRadius="16" size="56" iconSize="24"
+                       highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                       highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+    </layout>
+</theme>
@@ -0,0 +1,60 @@
+<variables>
+    <!-- Colors (used multiple times) -->
+    <var name="infoTextColor" value="#AAFFFFFF" />
+    <var name="highlightColor" value="#9575CD" />
+
+    <!-- Highlight styling (used by multiple elements) -->
+    <var name="highlightOpacity" value="0.9" />
+    <var name="highlightBorderWidth" value="2" />
+    <var name="highlightTransitionSpeed" value="200" />
+
+    <!-- Shared spacing -->
+    <var name="paddingMedium" value="16" />
+    <var name="bottomOffset" value="24" />
+    <var name="transitionSpeed" value="400" />
+
+    <!-- Card options -->
+    <var name="cardWidth" value="360" />
+    <var name="cardHeight" value="228" />
+    <var name="heroHeight" value="168" />
+    <var name="cornerRadius" value="8" />
+    <var name="itemSpacing" value="24" />
+    <var name="badgeHeight" value="20" />
+
+    <!-- Info positioning -->
+    <var name="infoY" value="170" />
+    <var name="compatY" value="182" />
+
+    <!-- Carousel settings -->
+    <var name="focusedScale" value="1.4" />
+    <var name="carouselOffsetY" value="42" />
+
+    <!-- Text -->
+    <var name="textSizeTitle" value="12" />
+    <var name="textSizeSmall" value="10" />
+
+    <!-- Top bar -->
+    <var name="topBarHeight" value="72" />
+    <var name="searchBarWidth" value="300" />
+    <var name="profileButtonY" value="12" />
+
+    <!-- Portrait overrides -->
+    <breakpoint orientation="portrait">
+        <var name="topBarHeight" value="130" />
+        <var name="searchBarWidth" value="90%" />
+        <var name="profileButtonY" value="0" />
+
+        <var name="cardWidth" value="220" />
+        <var name="cardHeight" value="142" />
+        <var name="heroHeight" value="103" />
+        <var name="itemSpacing" value="12" />
+        <var name="carouselOffsetY" value="30" />
+        <var name="focusedScale" value="1.3" />
+
+        <var name="infoY" value="108" />
+        <var name="compatY" value="125" />
+
+        <var name="textSizeTitle" value="11" />
+        <var name="textSizeSmall" value="8" />
+    </breakpoint>
+</variables>
@@ -0,0 +1,13 @@
+<manifest>
+    <id>hero_grid</id>
+    <title>Hero Grid</title>
+    <version>1.0.0</version>
+    <engineVersion>1.0.0</engineVersion>
+    <minAppVersion>0.0.0</minAppVersion>
+    <description>A responsive grid of landscape hero art with compatibility badges and game titles. Adapts to portrait and landscape orientations.</description>
+    <author>
+        <name>Radical Thomas</name>
+    </author>
+    <preview src="/assets/theme.png" />
+    <theme source="/theme.xml" variables="/variables.xml" />
+</manifest>
@@ -0,0 +1,63 @@
+<theme>
+    <elements>
+        <card id="hero" width="100%" height="100%">
+            <image id="art" x="0" y="0" width="100%" height="100%"
+                   src="@{game.hero}" cornerRadius="@{vars.cornerRadius}" scaleType="cover" />
+
+            <rect id="compatBadge" x="0" y="0" width="100%" height="@{vars.badgeHeight}"
+                  color="@{vars.overlayColor}" cornerRadius="@{vars.cornerRadius} @{vars.cornerRadius} 0 0" />
+            <text id="compatLabel" x="0" y="-2" width="100%" height="@{vars.badgeHeight}"
+                  text="@{game.compatibility.label}" textSize="@{vars.textSizeSmall}"
+                  color="@{game.compatibility.color}" maxLines="1" textAlign="center" fontWeight="bold" />
+
+            <rect id="footer" x="0" y="0" width="100%" height="@{vars.badgeHeight}"
+                  color="@{vars.overlayColor}" cornerRadius="0 0 @{vars.cornerRadius} @{vars.cornerRadius}"
+                  anchor="bottomLeft" />
+            <text id="title" x="@{vars.paddingSmall}" y="2" width="80%" height="@{vars.badgeHeight}"
+                  text="@{game.title}" textSize="@{vars.textSizeSmall}" color="@{vars.textColor}"
+                  maxLines="1" textAlign="left" fontWeight="bold" anchor="bottomLeft" />
+
+            <text id="installedCheck" x="16" y="2" height="@{vars.badgeHeight}"
+                  text="✓" textSize="@{vars.textSizeSmall}" color="@{vars.textColor}"
+                  textAlign="right" fontWeight="bold" anchor="bottomRight"
+                  visibleWhen="@{game.isInstalled}" />
+
+            <rect id="backdrop" x="0" y="0" width="100%" height="100%"
+                  color="#00000000" borderWidth="1" borderColor="#22FFFFFF"
+                  cornerRadius="@{vars.cornerRadius}" />
+        </card>
+    </elements>
+
+    <layout>
+        <grid cellWidth="200" aspectRatio="2.14"
+              hSpacing="@{vars.hSpacing}" vSpacing="15"
+              padding="@{vars.gridPaddingTop} 20"
+              verticalAlign="center"
+              selectionMode="moving" itemCard="hero" />
+
+        <fixed id="topBar" backgroundColor="#CC000000" height="@{vars.topBarHeight}">
+            <header x="@{vars.paddingMedium}" y="@{vars.paddingSmall}" anchor="topLeft"
+                textColor="@{vars.textColor}" showAppName="true" showGameCount="true" />
+            <searchBar x="@{vars.searchBarX}" y="@{vars.searchBarY}" width="@{vars.searchBarWidth}" height="56"
+                anchor="topLeft" backgroundColor="#FF1E1E1E" borderRadius="24"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <profileButton x="@{vars.paddingMedium}" y="@{vars.profileButtonY}" anchor="topRight" size="56"
+                iconSize="36" padding="10"
+                backgroundColor="#66808080" cornerRadius="12"
+                highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+
+        <fixed id="bottomBar">
+            <filterButton x="100" y="@{vars.bottomOffset}" anchor="bottomRight" expanded="true"
+                          cornerRadius="16" size="56" iconSize="24"
+                          highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                          highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+            <addButton x="@{vars.paddingMedium}" y="@{vars.bottomOffset}" anchor="bottomRight"
+                       cornerRadius="16" size="56" iconSize="24"
+                       highlightColor="@{vars.highlightColor}" highlightOpacity="@{vars.highlightOpacity}"
+                       highlightBorderWidth="@{vars.highlightBorderWidth}" highlightTransitionSpeed="@{vars.highlightTransitionSpeed}" />
+        </fixed>
+    </layout>
+</theme>