Add initial flesttools impl

Updates the milestone version numbers

.dockerignore

@@ -0,0 +1,11 @@
+**/.*/
+!.git/
+**/build/
+**/dist/
+**/out/
+**/target/
+utils/
+!utils/repr_build/scripts/
+.env
+gradlew.bat
+local.properties

.envrc

@@ -1 +0,0 @@
-use_flake

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Bug Report
+name: 🐛 Bug Report
 description: Create a report to help FlorisBoard improve
 labels:
   - "bug"
@@ -62,3 +62,14 @@ body:
       placeholder: e.g. 10, Stock
     validations:
       required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/florisboard/florisboard/issues) or [closed](https://github.com/florisboard/florisboard/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+          required: true
+        - label: "I have read and understood the [contribution guidelines](https://github.com/florisboard/florisboard/blob/main/CONTRIBUTING.md)."
+          required: true
+        - label: "I have taken the time to fill in all the required details. I understand that the bug report will be dismissed otherwise."
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Ask a question
-    url: https://github.com/florisboard/florisboard/discussions/new?category=q-a
-    about: Ask here if you have a question about FlorisBoard or need assistance
-  - name: General feedback
-    url: https://github.com/florisboard/florisboard/discussions/new?category=feedback
-    about: Give general feedback about this project
+  - name: 💬 Matrix
+    url: https://matrix.to/#/#florisboard:matrix.org
+    about: General chat about FlorisBoard and quick Q/A
+  - name: ❓ Questions / Feedback
+    url: https://github.com/florisboard/florisboard/discussions/new/choose
+    about: Post your questions or feedback in the discussions panel

.github/ISSUE_TEMPLATE/crash_report.yml

@@ -1,4 +1,4 @@
-name: Crash report
+name: 💥 Crash report
 description: Create a report with a generated crash log attached to help FlorisBoard improve
 labels:
   - "bug"
@@ -36,3 +36,14 @@ body:
       description: Paste the generated crash log below
     validations:
       required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/florisboard/florisboard/issues) or [closed](https://github.com/florisboard/florisboard/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+          required: true
+        - label: "I have read and understood the [contribution guidelines](https://github.com/florisboard/florisboard/blob/main/CONTRIBUTING.md)."
+          required: true
+        - label: "I have taken the time to fill in all the required details. I understand that the crash report will be dismissed otherwise."
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,4 +1,4 @@
-name: Feature request / Suggestion
+name: ✨ Feature request
 description: Suggest an idea for this project
 labels:
   - "proposal"
@@ -20,3 +20,14 @@ body:
       description: Please explain your idea in a precise way.
     validations:
       required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/florisboard/florisboard/issues) or [closed](https://github.com/florisboard/florisboard/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+          required: true
+        - label: "I have read and understood the [contribution guidelines](https://github.com/florisboard/florisboard/blob/main/CONTRIBUTING.md)."
+          required: true
+        - label: "I have taken the time to fill in all the required details. I understand that the feature request will be dismissed otherwise."
+          required: true

.github/workflows/android.yml

@@ -25,14 +25,14 @@ jobs:
         with:
           submodules: recursive
 
-      - uses: gradle/actions/wrapper-validation@v3
+      - uses: gradle/actions/wrapper-validation@v4
       - name: Set up JDK 17
         uses: actions/setup-java@v4
         with:
           java-version: 17
           distribution: temurin
       - name: Set up CMake and Ninja
-        uses: lukka/get-cmake@latest
+        uses: lukka/get-cmake@v4.0.2
       - name: Build with Gradle
         run: ./gradlew clean assembleDebug
       - uses: actions/upload-artifact@v4

CONTRIBUTING.md

@@ -4,32 +4,34 @@ Thanks for considering contributing to FlorisBoard!
 
 There are several ways to contribute to FlorisBoard. This document provides some general guidelines for each type of contribution.
 
-## General contributions
+The FlorisBoard community is international, as such we require all contributions, including issues, pull requests, and participation in the Matrix chat to be in English and follow the [code of conduct](https://github.com/florisboard/florisboard/blob/main/CODE_OF_CONDUCT.md). Contributions not adhering to these requirements will be dismissed. Thanks for making the FlorisBoard community an inclusive and safe space for everyone!
 
-### Translation
+## Non-code contributions
 
-To make FlorisBoard accessible in as many languages as possible, the platform [Crowdin](https://crowdin.florisboard.patrickgold.dev) is used to crowdsource and manage translations.  The list of languages in Crowdin covers a good range of languages, but feel free to send an email to [florisboard@patrickgold.dev](mailto:florisboard@patrickgold.dev) to request a new language.
+### Translations
+
+To make FlorisBoard accessible in as many languages as possible, the platform [Crowdin](https://crowdin.florisboard.patrickgold.dev) is used to crowdsource and manage translations.  The list of languages in Crowdin covers a good range of languages, but feel free to email [florisboard@patrickgold.dev](mailto:florisboard@patrickgold.dev) to request a new language.
 
 > [!IMPORTANT]
 > This is the only source of translations - **PRs that add/update translations are not accepted.**
 
-### Feedback
-
-You can [give general feedback](https://github.com/florisboard/florisboard/discussions/new?category=feedback) directly here on GitHub. This is the preferred way to give feedback, as it allows not only for me to read and respond to feedback, but for everyone in this community.
-
 ### Bug reporting
 
-This kind of contribution is the most important, as it tells where FlorisBoard has flaws and thus should be improved to maximize stability and user experience. To make this process as smooth as possible, please use the pre-made [issue template](.github/ISSUE_TEMPLATE/bug_report.md) for bug reporting. This makes it easy for us to understand what the bug is and how to solve it.
+Allows us to see where FlorisBoard has flaws and should be improved to maximize stability and user experience. To make this process as smooth as possible, please use the pre-made [bug report template](https://github.com/florisboard/florisboard/issues/new?template=bug_report.yml). This makes it easy for us to understand what the bug is and how to solve it.
 
 #### Capturing error logs
 
-Logs are captured by FlorisBoard's crash handler, which gives you the ability to copy it to the clipboard and paste it in GitHub. This is the preferred way to capture logs.
+Logs are captured by FlorisBoard's crash handler, which gives you the ability to copy it to the clipboard and paste it in the crash report [issue template](https://github.com/florisboard/florisboard/issues/new?template=crash_report.yml). This is the preferred way to capture logs.
 
 Alternatively, you can also use ADB (Android Debug Bridge) to capture the error log. This is recommended for experienced users only.
 
 ### Feature proposals
 
-Use the feature proposal issue template to suggest a new idea or improvement for this project.
+Use the feature proposal [issue template](https://github.com/florisboard/florisboard/issues/new?template=feature_request.yml) to suggest a new idea or improvement for this project.
+
+### Feedback
+
+You can [give general feedback](https://github.com/florisboard/florisboard/discussions/new?category=feedback) directly here on GitHub. This is the preferred way to give feedback, as it allows not only for me to read and respond to feedback, but for everyone in this community.
 
 ## Code contributions
 
@@ -38,15 +40,15 @@ You are always welcome to contribute new features or work on existing issues, th
 > [!NOTE]
 > If you intend to implement a bigger feature please coordinate with us so we can prevent that there's a major difference in expected implementation.
 
-If you are overwhelmed by the code don't hesistate to ask for help in the [dev chat](https://matrix.to/#/#florisboard-dev:matrix.org) or the discussions tab! Some issues are also marked as good first issue, which are easy to do tasks.
+If you are overwhelmed by the code don't hesitate to ask for help in the [dev chat](https://matrix.to/#/#florisboard-dev:matrix.org) or the discussions tab! Some issues are also marked as good first issue, which are easy to do tasks.
 
 ### System requirements for development
 
 - Desktop PC with Linux or WSL2 (Windows)
   - MacOS and Windows without WSL2 probably works too however there's no official support
-- At least 16GB of RAM (because of Android Studio)
+- At least 16GB of RAM (because of Android Studio / IntelliJ)
 - The following tools must be installed:
-  - Android Studio (bundles SDK and NDK)
+  - Android Studio (bundles SDK and NDK) or IntelliJ with Android and Compose plugin
   - Java 17
   - CMake 3.22+
   - Clang 15+
@@ -64,34 +66,7 @@ If you want to manually build the project without Android Studio you must ensure
 
 and Gradle should take care of every build task.
 
-## Joining the team
-
-If you want to join the core maintainer/moderator team on a volunteer basis and be part of this project's journey that's great to hear!
-
-### Basic Requirements
-
-- A passion for seeing FlorisBoard flourish
-- Good English skills for team and public communication
-- A GitHub account and a Matrix handle
-
-### Why Join
-
-You'll have the chance to work directly with me and other team members. While the general idea is for us to work on all kinds of different aspects of the project as a team, if you're particularly interested in a specific area (e.g., UI, extensions, text processing), that's totally okay too!
-
-### Available Roles
-
-Currently the following roles are available and need help:
-
-Role Description | Required Dev Experience
----|---
-Software Developer (Kotlin) for Core App | Java/Kotlin development experience (on Android)
-Software Developer (Rust) for Native Core | Some Rust development experience
-GitHub Issues/Discussions Moderator | None
-Crowdin Translation Verifier | Language proficiency for the language you want to verify
-
-Interested? Feel free to dm me ([@patrickgold](https://matrix.to/#/@patrickgold:matrix.org)) on Matrix or send an email to [florisboard@patrickgold.dev](mailto:florisboard@patrickgold.dev).
-
 ## Donating
 
-Alternatively you can also show your support by buying me a coffee, so I can stay up all night and chase away bugs or add new cool stuff :)
+You can also show your support by buying me a coffee, so I can stay up all night and chase away bugs or add new cool stuff :)
 See the `Sponsors` button for available options!

README.md

@@ -64,7 +64,7 @@ fully respecting your privacy. Currently in early-beta state.
 </tr>
 </table>
 
-Beginning with v0.6.0 FlorisBoard will enter the public beta on Google Play.
+Beginning with v0.7 FlorisBoard will enter the public beta on Google Play.
 
 ## Highlighted features
 - Integrated clipboard manager / history
@@ -74,7 +74,7 @@ Beginning with v0.6.0 FlorisBoard will enter the public beta on Google Play.
 
 > [!IMPORTANT]
 > Word suggestions/spell checking are not included in the current releases
-> and are a major goal for the v0.5 milestone.
+> and are a major goal for the v0.6 milestone.
 
 Feature roadmap: See [ROADMAP.md](ROADMAP.md)
 

ROADMAP.md

@@ -1,44 +1,63 @@
 # Roadmap
 
-This feature roadmap intents to provide transparency to what is planned to be added to FlorisBoard in the foreseeable future. Note that there are no ETAs for any version milestones down below, experience has shown these won't hold anyways.
+This feature roadmap intents to provide transparency to what is planned to be added to FlorisBoard in the foreseeable future. Note that there are no ETAs for any version milestones down below, experience has shown these won't hold anyway.
 
 Each major milestone has associated alpha/beta releases, so if you are interested in previewing features quicker, keep an eye out! Each major 0.x release has also patch releases after the initial major release, which will be published on both the stable and preview tracks.
 
-## 0.5
+## 0.5 (currently in development)
 
-- Implement predictive text support / spell checking
-  - Consider adding proximity-based key typo detection
-- Add new extension type: Language Pack
-  - Basically groups all locale-relevant data (predictive base model, emoji suggestion data, ...)
-    in a dynamically importable extension file
-- New text processing logic (maybe moved back / split to 0.6)
-- Add floating keyboard mode
-- New keyboard layout engine + file syntax based on the upcoming Unicode Keyboard v3 standard
-- Add Tablet mode / Optimizations for landscape input based on new keyboard layout engine
-- Add support for any remaining new features introduced with Android 13
+> [!NOTE]
+> The milestone 0.5 was split, thus the word suggestions now come with version 0.6. The old version 0.6 has been moved down and is now 0.7. The time it takes to implement word suggestions will not change, but we can now release the new theme editor earlier, which would otherwise lie dormant.
+
+- [ ] Theme rework part II / Snygg v2
+  - [x] See https://github.com/florisboard/florisboard/pull/2855
+  - [x] Spaces in URI bug (See https://github.com/florisboard/florisboard/issues/2898)
+  - [ ] Rework cache manager (See https://github.com/florisboard/florisboard/issues/2870)
+  - [x] Re-add time based theme switching (See https://github.com/florisboard/florisboard/pull/2977)
+- [ ] Add support for any remaining new features introduced with Android 13 / 14
+- [ ] Proper physical keyboard support (See https://github.com/florisboard/florisboard/issues/2815)
+- [x] Raise minimum required Android version from Android 7 (SDK level 24) to Android 8 (SDK level 26)
 
 ## 0.6
 
-- Complete rework of the Emoji panel
-  - Emoji search
-  - Fully scrollable emoji list (soft category borders)
-  - More granular themeing options
-  - Layout customization (e.g. placement of category buttons)
-  - Maybe: consider upgrading to emoji2 for better unified system-wide emoji styles
-- Reimplementation of glide typing with the new layout engine and predictive text core
-- Prepare FlorisBoard repository and app store presence for public beta release on Google Play (will go live with stable 0.6)
-- Rework branding images and texts of FlorisBoard for the app stores
-- Focus on stability and experience improvements of the app and keyboard
-- Add support for new features introduced with Android 14 / 15
-- Not finalized, but planned: raise minimum required Android version from Android 7 (SDK level 24) to Android 8 (SDK level 26)
+- [ ] Implement predictive text support / spell checking
+- [ ] Add new extension type: Language Pack
+    - Basically groups all locale-relevant data (predictive base model, emoji suggestion data, ...)
+      in a dynamically importable extension file
+
+## k3lp
+
+> [!NOTE]
+> The development of k3lp is not tied to a florisboard version and takes place on [codeberg.org](https://codeberg.org/k3lp/k3lp) simultaneously.
+
+- [ ] New keyboard layout engine + file syntax based on the upcoming Unicode Keyboard v3 standard
+- [ ] Add Tablet mode / Optimizations for landscape input based on new keyboard layout engine
+
+## 0.7+
+
+> [!NOTE]
+> From 0.6 onwards we plan to have more stable 0.X releases but with at most one large feature per release, thus having a much quicker iteration of new features on the stable track, which is a benefit for everyone involved.
+
+- [ ] Add floating keyboard mode
+- [ ] New text processing logic
+- [ ] Complete rework of the Emoji panel
+  - [ ] Emoji search
+  - [ ] Fully scrollable emoji list (soft category borders)
+  - [ ] Side scrollable emoji list (swipe for next category)
+  - [ ] More granular theming options
+  - [ ] Layout customization (e.g. placement of category buttons)
+  - [ ] Maybe: consider upgrading to emoji2 for better unified system-wide emoji styles
+- [ ] Reimplementation of glide typing with the new layout engine and predictive text core
+- [ ] Prepare FlorisBoard repository and app store presence for public beta release on Google Play (will go live with stable 0.7)
+- [ ] Rework branding images and texts of FlorisBoard for the app stores
+- [ ] Focus on stability and experience improvements of the app and keyboard
+- [ ] Add support for new features introduced with Android 15 / 16
 
 ## Backlog / Planned (unassigned)
 
 **Features that MAY be added (even in versions mentioned above) or dismissed**
 
 - Full on-board layout editor which allows users to create their own layouts without writing a JSON file
-- Theme rework part II
-- Adaptive themes v2
 - Voice-to-text with Mozilla's open-source voice service (or any other oss voice provider)
 - Text translation
 - Stickers/GIFs

app/build.gradle.kts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import org.jetbrains.kotlin.compose.compiler.gradle.ComposeFeatureFlag
 import java.io.ByteArrayOutputStream
 
 plugins {
@@ -23,35 +22,39 @@ plugins {
     alias(libs.plugins.kotlin.plugin.compose)
     alias(libs.plugins.kotlin.serialization)
     alias(libs.plugins.ksp)
-    alias(libs.plugins.mannodermaus.android.junit5)
     alias(libs.plugins.mikepenz.aboutlibraries)
 }
 
 val projectMinSdk: String by project
 val projectTargetSdk: String by project
 val projectCompileSdk: String by project
-val projectBuildToolsVersion: String by project
-val projectNdkVersion: String by project
 val projectVersionCode: String by project
 val projectVersionName: String by project
-val projectVersionNameSuffix = projectVersionName.substringAfter("-", "")
+val projectVersionNameSuffix = projectVersionName.substringAfter("-", "").let { suffix ->
+    if (suffix.isNotEmpty()) {
+        "-$suffix"
+    } else {
+        suffix
+    }
+}
 
 android {
     namespace = "dev.patrickgold.florisboard"
     compileSdk = projectCompileSdk.toInt()
-    buildToolsVersion = projectBuildToolsVersion
-    ndkVersion = projectNdkVersion
+    buildToolsVersion = tools.versions.buildTools.get()
+    ndkVersion = tools.versions.ndk.get()
 
     compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_1_8
-        targetCompatibility = JavaVersion.VERSION_1_8
+        sourceCompatibility = JavaVersion.VERSION_11
+        targetCompatibility = JavaVersion.VERSION_11
     }
 
     kotlinOptions {
-        jvmTarget = "1.8"
+        jvmTarget = "11"
         freeCompilerArgs = listOf(
             "-opt-in=kotlin.contracts.ExperimentalContracts",
             "-Xjvm-default=all-compatibility",
+            "-Xwhen-guards",
         )
     }
 
@@ -149,7 +152,13 @@ android {
     }
 
     aboutLibraries {
-        configPath = "app/src/main/config"
+        collect {
+            configPath = file("src/main/config")
+        }
+    }
+
+    lint {
+        baseline = file("lint.xml")
     }
 
     testOptions {
@@ -162,21 +171,21 @@ android {
     }
 }
 
-composeCompiler {
-    // DO NOT ENABLE STRONG SKIPPING! This project currently relies on
-    // recomposition on parent state change to update the UI correctly.
-    featureFlags.add(ComposeFeatureFlag.StrongSkipping.disabled())
-}
-
 tasks.withType<Test> {
     useJUnitPlatform()
 }
 
 dependencies {
+    val composeBom = platform(libs.androidx.compose.bom)
+    implementation(composeBom)
+    // testImplementation(composeBom)
+    // androidTestImplementation(composeBom)
+
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.activity.ktx)
     implementation(libs.androidx.autofill)
     implementation(libs.androidx.collection.ktx)
+    implementation(libs.androidx.compose.material.icons)
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.runtime.livedata)
     implementation(libs.androidx.compose.ui)
@@ -186,7 +195,6 @@ dependencies {
     implementation(libs.androidx.emoji2)
     implementation(libs.androidx.emoji2.views)
     implementation(libs.androidx.exifinterface)
-    implementation(libs.androidx.material.icons)
     implementation(libs.androidx.navigation.compose)
     implementation(libs.androidx.profileinstaller)
     ksp(libs.androidx.room.compiler)
@@ -202,16 +210,12 @@ dependencies {
     implementation(libs.patrickgold.jetpref.material.ui)
 
     implementation(project(":lib:android"))
+    implementation(project(":lib:color"))
     implementation(project(":lib:kotlin"))
     implementation(project(":lib:native"))
     implementation(project(":lib:snygg"))
 
-    testImplementation(libs.equalsverifier)
-    testImplementation(libs.kotest.assertions.core)
-    testImplementation(libs.kotest.extensions.roboelectric)
-    testImplementation(libs.kotest.property)
-    testImplementation(libs.kotest.runner.junit5)
-
+    testImplementation(libs.kotlin.test.junit5)
     androidTestImplementation(libs.androidx.test.ext)
     androidTestImplementation(libs.androidx.test.espresso.core)
 }

app/lint.xml

@@ -1,3 +1,3 @@
 <lint>
-    <issue id="UsingMaterialAndMaterial3Libraries" severity="ignore" />
+    <issue id="ExtraTranslation" severity="warning"/>
 </lint>

app/src/main/AndroidManifest.xml

@@ -114,6 +114,7 @@
             android:name="dev.patrickgold.florisboard.lib.crashutility.CrashDialogActivity"
             android:icon="@mipmap/floris_app_icon"
             android:label="@string/crash_dialog__title"
+            android:configChanges="orientation|screenSize"
             android:theme="@style/CrashDialogTheme"/>
 
         <!-- Copy to Clipboard Activity -->

app/src/main/assets/ime/keyboard/org.florisboard.layouts/extension.json

@@ -17,6 +17,13 @@
         "direction": "rtl",
         "modifier": "org.florisboard.layouts:arabic"
       },
+      {
+        "id": "armenian_alt_phonetic",
+        "label": "Armenian Alt Phonetic",
+        "authors": [ "MikayelB" ],
+        "direction": "ltr",
+        "modifier": "org.florisboard.layouts:armenian"
+      },
       {
         "id": "western_armenian",
         "label": "Armenian (Western)",
@@ -49,6 +56,12 @@
         "authors": [ "iamrasel" ],
         "direction": "ltr"
       },
+      {
+        "id": "hindi_in",
+        "label": "हिंदी",
+        "authors": [ "npnpatidar" ],
+        "direction": "ltr"
+      },
       {
         "id": "bepo",
         "label": "BÉPO",

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/characters/hindi_in.json

@@ -0,0 +1,42 @@
+[
+  [
+    { "$": "case_selector", "lower": { "code": 2335, "label": "ट" }, "upper": { "code": 2336, "label": "ठ" } },
+    { "$": "case_selector", "lower": { "code": 2337, "label": "ड" }, "upper": { "code": 2338, "label": "ढ" } },
+    { "$": "case_selector", "lower": { "code": 2375, "label": "े" }, "upper": { "code": 2376, "label": "ै" } },
+    { "$": "case_selector", "lower": { "code": 2352, "label": "र" }, "upper": { "code": 2371, "label": "ृ" } },
+    { "$": "case_selector", "lower": { "code": 2340, "label": "त" }, "upper": { "code": 2341, "label": "थ" } },
+    { "$": "case_selector", "lower": { "code": 2351, "label": "य" }, "upper": { "code": 2399, "label": "य़" } },
+    { "$": "case_selector", "lower": { "code": 2369, "label": "ु" }, "upper": { "code": 2370, "label": "ू" } },
+    { "$": "case_selector", "lower": { "code": 2367, "label": "ि" }, "upper": { "code": 2368, "label": "ी" } },
+    { "$": "case_selector", "lower": { "code": 2379, "label": "ो" }, "upper": { "code": 2380, "label": "ौ" } },
+    { "$": "case_selector", "lower": { "code": 2346, "label": "प" }, "upper": { "code": 2398, "label": "फ़" } }
+  ],
+  [
+    { "$": "case_selector", "lower": { "code": 2366, "label": "ा" }, "upper": { "code": 2309, "label": "अ" } },
+    { "$": "case_selector", "lower": { "code": 2360, "label": "स" }, "upper": { "code": 2358, "label": "श" } },
+    { "$": "case_selector", "lower": { "code": 2342, "label": "द" }, "upper": { "code": 2343, "label": "ध" } },
+    { "$": "case_selector", "lower": { "code": 2347, "label": "फ" }, "upper": { "code": 2364, "label": " ़" } },
+    { "$": "case_selector", "lower": { "code": 2327, "label": "ग" }, "upper": { "code": 2328, "label": "घ" } },
+    { "$": "case_selector", "lower": { "code": 2361, "label": "ह" }, "upper": { "code": 2307, "label": "ः" } },
+    { "$": "case_selector", "lower": { "code": 2332, "label": "ज" }, "upper": { "code": 2333, "label": "झ" } },
+    { "$": "case_selector", "lower": { "code": 2325, "label": "क" }, "upper": { "code": 2326, "label": "ख" } },
+    { "$": "case_selector", "lower": { "code": 2354, "label": "ल" }, "upper": { "code": 2355, "label": "ळ" } }
+  ],
+  [
+    {
+      "$": "case_selector",
+      "lower": { "$": "multi_text_key", "codePoints": [2332, 2381, 2334], "label": "ज्ञ" },
+      "upper": { "code": 2395, "label": "ज़" }
+    },
+    {
+      "$": "case_selector",
+      "lower": { "$": "multi_text_key", "codePoints": [2325, 2381, 2359], "label": "क्ष" },
+      "upper": { "code": 2359, "label": "ष" }
+    },
+    { "$": "case_selector", "lower": { "code": 2330, "label": "च" }, "upper": { "code": 2331, "label": "छ" } },
+    { "$": "case_selector", "lower": { "code": 2357, "label": "व" }, "upper": { "code": 2381, "label": "्" } },
+    { "$": "case_selector", "lower": { "code": 2348, "label": "ब" }, "upper": { "code": 2349, "label": "भ" } },
+    { "$": "case_selector", "lower": { "code": 2344, "label": "न" }, "upper": { "code": 2339, "label": "ण" } },
+    { "$": "case_selector", "lower": { "code": 2350, "label": "म" }, "upper": { "code": 2306, "label": "ं" } }
+  ]
+]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/bengali.json

@@ -3,46 +3,52 @@
     { "code": 2535, "label": "১", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 2536, "label": "২", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 2537, "label": "৩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 2538, "label": "৪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 2539, "label": "৫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 2540, "label": "৬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 2542, "label": "৮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 2543, "label": "৯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 2534, "label": "০", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/cjk.json

@@ -33,7 +33,7 @@
         { "code": 32902, "label": "肆" },
         { "code": 18825, "label": "䦉" },
         { "code": 20118, "label": "亖" },
-        { "code": 65300, "label": "３" }
+        { "code": 65300, "label": "４" }
       ]
     } },
     { "code": 20116, "label": "五", "type": "numeric", "popup": {

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/devanagari.json

@@ -3,46 +3,52 @@
     { "code": 2407, "label": "१", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 2408, "label": "२", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 2409, "label": "३", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 2410, "label": "४", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 2411, "label": "५", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 2412, "label": "६", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 2414, "label": "८", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 2415, "label": "९", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 2406, "label": "०", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/eastern_arabic.json

@@ -3,46 +3,52 @@
     { "code": 1633, "label": "١", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 1634, "label": "٢", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 1635, "label": "٣", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 1636, "label": "٤", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 1637, "label": "٥", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 1638, "label": "٦", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 1640, "label": "٨", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 1641, "label": "٩", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 1632, "label": "٠", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/gujarati.json

@@ -3,46 +3,52 @@
     { "code": 2791, "label": "૧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 2792, "label": "૨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 2793, "label": "૩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 2794, "label": "૪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 2795, "label": "૫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 2796, "label": "૬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 2798, "label": "૮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 2799, "label": "૯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 2790, "label": "૦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/gurmukhi.json

@@ -3,46 +3,52 @@
     { "code": 2663, "label": "੧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 2664, "label": "੨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 2665, "label": "੩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 2666, "label": "੪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 2667, "label": "੫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 2668, "label": "੬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 2670, "label": "੮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 2671, "label": "੯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 2662, "label": "੦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/kannada.json

@@ -3,46 +3,52 @@
     { "code": 3303, "label": "೧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 3304, "label": "೨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 3305, "label": "೩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 3306, "label": "೪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 3307, "label": "೫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 3308, "label": "೬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 3310, "label": "೮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 3311, "label": "೯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 3302, "label": "೦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/malayalam.json

@@ -3,46 +3,52 @@
     { "code": 3431, "label": "൧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 3432, "label": "൨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 3433, "label": "൩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 3434, "label": "൪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 3435, "label": "൫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 3436, "label": "൬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 3438, "label": "൮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 3439, "label": "൯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 3430, "label": "൦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/oriya.json

@@ -3,46 +3,52 @@
     { "code": 2919, "label": "୧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 2920, "label": "୨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 2921, "label": "୩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 2922, "label": "୪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 2923, "label": "୫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 2924, "label": "୬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 2926, "label": "୮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 2927, "label": "୯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 2918, "label": "୦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/persian.json

@@ -3,46 +3,52 @@
     { "code": 1777, "label": "۱", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 1778, "label": "۲", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 1779, "label": "۳", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 1780, "label": "۴", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 1781, "label": "۵", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 1782, "label": "۶", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 1784, "label": "۸", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 1785, "label": "۹", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 1776, "label": "۰", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/tamil.json

@@ -3,46 +3,52 @@
     { "code": 3047, "label": "௧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 3048, "label": "௨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 3049, "label": "௩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 3050, "label": "௪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 3051, "label": "௫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 3052, "label": "௬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 3054, "label": "௮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 3055, "label": "௯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 3046, "label": "௦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/telugu.json

@@ -3,46 +3,52 @@
     { "code": 3175, "label": "౧", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 3176, "label": "౨", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 3177, "label": "౩", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 3178, "label": "౪", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 3179, "label": "౫", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 3180, "label": "౬", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 3182, "label": "౮", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 3183, "label": "౯", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 3174, "label": "౦", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/thai.json

@@ -3,20 +3,23 @@
     { "code":  3665, "label": "๑", "type": "numeric", "popup": {
       "main": { "code":  185, "label": "¹" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code":  3666, "label": "๒", "type": "numeric", "popup": {
       "main": { "code":  178, "label": "²" },
       "relevant": [
+        { "code": 8322, "label": "₂"},
         { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
@@ -24,44 +27,59 @@
     { "code":  3667, "label": "๓", "type": "numeric", "popup": {
       "main": { "code":  179, "label": "³" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
         { "code":  190, "label": "¾" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" }
       ]
     } },
     { "code":  3668, "label": "๔", "type": "numeric", "popup": {
       "main": { "code": 8308, "label": "⁴" },
       "relevant": [
+        { "code": 8324, "label": "₄" },
         { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code":  3669, "label": "๕", "type": "numeric", "popup": {
       "main": { "code": 8309, "label": "⁵" },
       "relevant": [
+        { "code": 8325, "label": "₅" },
         { "code": 8538, "label": "⅚" },
         { "code": 8541, "label": "⅝" }
       ]
     } },
     { "code":  3670, "label": "๖", "type": "numeric", "popup": {
-      "main": { "code": 8310, "label": "⁶" }
+      "main": { "code": 8310, "label": "⁶" },
+      "relevant": [
+        { "code": 8326, "label": "₆" }
+      ]
     } },
     { "code":  3671, "label": "๗", "type": "numeric", "popup": {
       "main": { "code": 8311, "label": "⁷" },
       "relevant": [
+        { "code": 8327, "label": "₇" },
         { "code": 8542, "label": "⅞" }
       ]
     } },
     { "code":  3672, "label": "๘", "type": "numeric", "popup": {
-      "main": { "code": 8312, "label": "⁸" }
+      "main": { "code": 8312, "label": "⁸" },
+      "relevant": [
+        { "code": 8328, "label": "₈" }
+      ]
     } },
     { "code":  3673, "label": "๙", "type": "numeric", "popup": {
-      "main": { "code": 8313, "label": "⁹" }
+      "main": { "code": 8313, "label": "⁹" },
+      "relevant": [
+        { "code": 8329, "label": "₉" }
+      ]
     } },
     { "code":  3664, "label": "๐", "type": "numeric", "popup": {
       "main": { "code": 8304, "label": "⁰" },
       "relevant": [
         { "code": 8709, "label": "∅" },
-        { "code": 8319, "label": "ⁿ" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/warang_citi.json

@@ -3,46 +3,52 @@
     { "code": 71905, "label": "𑣡", "type": "numeric", "popup": {
       "main": { "code":   49, "label": "1" },
       "relevant": [
-        { "code": 8537, "label": "⅙" },
+        { "code": 8321, "label": "₁" },
         { "code": 8528, "label": "⅐" },
         { "code": 8539, "label": "⅛" },
         { "code": 8529, "label": "⅑" },
         { "code": 8530, "label": "⅒" },
+        { "code": 8543, "label": "⅟" },
         { "code":  185, "label": "¹" },
         { "code":  189, "label": "½" },
         { "code": 8531, "label": "⅓" },
         { "code":  188, "label": "¼" },
-        { "code": 8533, "label": "⅕" }
+        { "code": 8533, "label": "⅕" },
+        { "code": 8537, "label": "⅙" }
       ]
     } },
     { "code": 71906, "label": "𑣢", "type": "numeric", "popup": {
       "main": { "code":   50, "label": "2" },
       "relevant": [
-        { "code": 8532, "label": "⅔" },
+        { "code": 8322, "label": "₂"},
         { "code":  178, "label": "²" },
+        { "code": 8532, "label": "⅔" },
         { "code": 8534, "label": "⅖" }
       ]
     } },
     { "code": 71907, "label": "𑣣", "type": "numeric", "popup": {
       "main": { "code":   51, "label": "3" },
       "relevant": [
-        { "code": 8535, "label": "⅗" },
         { "code":  190, "label": "¾" },
-        { "code":  179, "label": "³" },
-        { "code": 8540, "label": "⅜" }
+        { "code": 8535, "label": "⅗" },
+        { "code": 8540, "label": "⅜" },
+        { "code": 8323, "label": "₃"},
+        { "code":  179, "label": "³" }
       ]
     } },
     { "code": 71908, "label": "𑣤", "type": "numeric", "popup": {
       "main": { "code":   52, "label": "4" },
       "relevant": [
-        { "code": 8536, "label": "⅘" },
-        { "code": 8308, "label": "⁴" }
+        { "code": 8324, "label": "₄" },
+        { "code": 8308, "label": "⁴" },
+        { "code": 8536, "label": "⅘" }
       ]
     } },
     { "code": 71909, "label": "𑣥", "type": "numeric", "popup": {
       "main": { "code":   53, "label": "5" },
       "relevant": [
         { "code": 8538, "label": "⅚" },
+        { "code": 8325, "label": "₅" },
         { "code": 8309, "label": "⁵" },
         { "code": 8541, "label": "⅝" }
       ]
@@ -50,6 +56,7 @@
     { "code": 71910, "label": "𑣦", "type": "numeric", "popup": {
       "main": { "code":   54, "label": "6" },
       "relevant": [
+        { "code": 8326, "label": "₆" },
         { "code": 8310, "label": "⁶" }
       ]
     } },
@@ -57,27 +64,32 @@
       "main": { "code":   55, "label": "7" },
       "relevant": [
         { "code": 8542, "label": "⅞" },
+        { "code": 8327, "label": "₇" },
         { "code": 8311, "label": "⁷" }
       ]
     } },
     { "code": 71912, "label": "𑣨", "type": "numeric", "popup": {
       "main": { "code":   56, "label": "8" },
       "relevant": [
+        { "code": 8328, "label": "₈" },
         { "code": 8312, "label": "⁸" }
       ]
     } },
     { "code": 71913, "label": "𑣩", "type": "numeric", "popup": {
       "main": { "code":   57, "label": "9" },
       "relevant": [
+        { "code": 8329, "label": "₉" },
         { "code": 8313, "label": "⁹" }
       ]
     } },
     { "code": 71904, "label": "𑣠", "type": "numeric", "popup": {
       "main": { "code":   48, "label": "0" },
       "relevant": [
-        { "code": 8319, "label": "ⁿ" },
         { "code": 8709, "label": "∅" },
-        { "code": 8304, "label": "⁰" }
+        { "code": 8319, "label": "ⁿ" },
+        { "code": 8304, "label": "⁰" },
+        { "code": 8585, "label": "↉" },
+        { "code": 8320, "label": "₀" }
       ]
     } }
   ]

app/src/main/assets/ime/keyboard/org.florisboard.layouts/layouts/numericRow/western_arabic.json

@@ -10,15 +10,17 @@
         "code": 49, "label": "1", "type": "numeric", "popup": {
           "main": { "code": 185, "label": "¹" },
           "relevant": [
-            { "code": 8537, "label": "⅙" },
+            { "code": 8321, "label": "₁" },
             { "code": 8528, "label": "⅐" },
             { "code": 8539, "label": "⅛" },
             { "code": 8529, "label": "⅑" },
             { "code": 8530, "label": "⅒" },
+            { "code": 8543, "label": "⅟" },
             { "code":  189, "label": "½" },
             { "code": 8531, "label": "⅓" },
             { "code":  188, "label": "¼" },
-            { "code": 8533, "label": "⅕" }
+            { "code": 8533, "label": "⅕" },
+            { "code": 8537, "label": "⅙" }
           ]
         }
       }
@@ -29,6 +31,7 @@
         "code": 50, "label": "2", "type": "numeric", "popup": {
           "main": { "code": 178, "label": "²" },
           "relevant": [
+            { "code": 8322, "label": "₂"},
             { "code": 8532, "label": "⅔" },
             { "code": 8534, "label": "⅖" }
           ]
@@ -45,9 +48,10 @@
         "code": 51, "label": "3", "type": "numeric", "popup": {
           "main": { "code": 179, "label": "³" },
           "relevant": [
-            { "code": 8535, "label": "⅗" },
+            { "code": 8540, "label": "⅜" },
+            { "code": 8323, "label": "₃"},
             { "code":  190, "label": "¾" },
-            { "code": 8540, "label": "⅜" }
+            { "code": 8535, "label": "⅗" }
           ]
         }
       }
@@ -68,6 +72,7 @@
         "code": 52, "label": "4", "type": "numeric", "popup": {
           "main": { "code": 8308, "label": "⁴" },
           "relevant": [
+            { "code": 8324, "label": "₄" },
             { "code": 8536, "label": "⅘" }
           ]
         }
@@ -86,6 +91,7 @@
         "code": 53, "label": "5", "type": "numeric", "popup": {
           "main": { "code": 8309, "label": "⁵" },
           "relevant": [
+            { "code": 8325, "label": "₅" },
             { "code": 8538, "label": "⅚" },
             { "code": 8541, "label": "⅝" }
           ]
@@ -105,7 +111,10 @@
       },
       "default": {
         "code": 54, "label": "6", "type": "numeric", "popup": {
-          "main": { "code": 8310, "label": "⁶" }
+          "main": { "code": 8310, "label": "⁶" },
+          "relevant": [
+            { "code": 8326, "label": "₆" }
+          ]
         }
       }
     },
@@ -115,6 +124,7 @@
         "code": 55, "label": "7", "type": "numeric", "popup": {
           "main": { "code": 8311, "label": "⁷" },
           "relevant": [
+            { "code": 8327, "label": "₇" },
             { "code": 8542, "label": "⅞" }
           ]
         }
@@ -132,7 +142,10 @@
       },
       "default": {
         "code": 56, "label": "8", "type": "numeric", "popup": {
-          "main": { "code": 8312, "label": "⁸" }
+          "main": { "code": 8312, "label": "⁸" },
+          "relevant": [
+            { "code": 8328, "label": "₈" }
+          ]
         }
       }
     },
@@ -160,7 +173,10 @@
       },
       "default": {
         "code":   57, "label": "9", "type": "numeric", "popup": {
-          "main": { "code": 8313, "label": "⁹" }
+          "main": { "code": 8313, "label": "⁹" },
+          "relevant": [
+            { "code": 8329, "label": "₉" }
+          ]
         }
       }
     },
@@ -191,7 +207,9 @@
           "main": { "code": 8304, "label": "⁰" },
           "relevant": [
             { "code": 8709, "label": "∅" },
-            { "code": 8319, "label": "ⁿ" }
+            { "code": 8319, "label": "ⁿ" },
+            { "code": 8585, "label": "↉" },
+            { "code": 8320, "label": "₀" }
           ]
         }
       }

app/src/main/assets/ime/keyboard/org.florisboard.localization/extension.json

@@ -48,6 +48,7 @@
     { "id": "fi", "authors": [ "patrickgold" ] },
     { "id": "fo", "authors": [ "BinFlush" ] },
     { "id": "fr", "authors": [ "patrickgold" ] },
+    { "id": "hi-IN", "authors": [ "npnpatidar" ] },
     { "id": "hr", "authors": [ "hedidnothingwrong" ] },
     { "id": "hu", "authors": [ "zoli111, gabik65" ] },
     { "id": "hy", "authors": [ "PJTSearch" ] },
@@ -400,6 +401,16 @@
         "characters": "org.florisboard.layouts:qwertz"
       }
     },
+    {
+      "languageTag": "hy",
+      "composer": "org.florisboard.composers:appender",
+      "currencySet": "org.florisboard.currencysets:armenian_dram",
+      "popupMapping": "org.florisboard.localization:hy",
+      "preferred": {
+        "characters": "org.florisboard.layouts:armenian_alt_phonetic",
+        "symbols": "org.florisboard.layouts:armenian"
+      }
+    },
     {
       "languageTag": "hy",
       "composer": "org.florisboard.composers:appender",
@@ -695,6 +706,16 @@
         "numericAdvanced": "org.florisboard.layouts:bengali"
       }
     },
+    {
+      "languageTag": "hi-IN",
+      "composer": "org.florisboard.composers:appender",
+      "currencySet": "org.florisboard.currencysets:indian_rupee",
+      "popupMapping": "org.florisboard.localization:hi-IN",
+      "preferred": {
+        "characters": "org.florisboard.layouts:hindi_in",
+        "numericRow": "org.florisboard.layouts:devanagari"
+      }
+    },
     {
       "languageTag": "ast",
       "composer": "org.florisboard.composers:appender",

app/src/main/assets/ime/keyboard/org.florisboard.localization/popupMappings/hi-IN.json

@@ -0,0 +1,173 @@
+{
+  "all": {
+    "क": {
+      "main": { "$": "auto_text_key", "code": 2392, "label": "क़" },
+      "relevant": [{ "$": "auto_text_key", "code": 2393, "label": "ख़" }]
+    },
+    "ग": {
+      "main": { "$": "auto_text_key", "code": 2394, "label": "ग़" },
+      "relevant": [{ "$": "auto_text_key", "code": 2427, "label": "ॻ" }]
+    },
+    "च": {
+      "relevant": [
+        { "$": "auto_text_key", "code": 2385, "label": " ॑" },
+        { "$": "auto_text_key", "code": 2386, "label": " ॒" }
+      ]
+    },
+    "ज": {
+      "main": { "$": "auto_text_key", "code": 2395, "label": "ज़" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2428, "label": "ॼ" },
+        { "$": "auto_text_key", "code": 2425, "label": "ॹ" }
+      ]
+    },
+    "ड": {
+      "main": { "$": "auto_text_key", "code": 2396, "label": "ड़" },
+      "relevant": [{ "$": "auto_text_key", "code": 2397, "label": "ढ़" }]
+    },
+    "त": {
+      "main": { "$": "multi_text_key", "codePoints": [2340, 2381, 2352], "label": "त्र" }
+    },
+    "द": {
+      "main": { "$": "auto_text_key", "code": 2396, "label": "ड़" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2430, "label": "ॾ" },
+        { "$": "auto_text_key", "code": 2397, "label": "ढ़" },
+        { "$": "auto_text_key", "code": 2424, "label": "ॸ" }
+      ]
+    },
+    "न": {
+      "main": { "$": "auto_text_key", "code": 2329, "label": "ङ" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2345, "label": "ऩ" },
+        { "$": "auto_text_key", "code": 2334, "label": "ञ" }
+      ]
+    },
+    "फ": {
+      "main": { "$": "auto_text_key", "code": 2398, "label": "फ़" }
+    },
+    "ब": {
+      "relevant": [
+        { "$": "auto_text_key", "code": 2431, "label": "ॿ" },
+        { "$": "auto_text_key", "code": 2365, "label": "ऽ" },
+        { "$": "auto_text_key", "code": 2416, "label": "॰" }
+      ]
+    },
+    "म": {
+      "main": { "$": "auto_text_key", "code": 2305, "label": "ँ" },
+      "relevant": [{ "$": "auto_text_key", "code": 2304, "label": "ऀ" }]
+    },
+    "य": {
+      "main": { "$": "auto_text_key", "code": 2426, "label": "ॺ" }
+    },
+    "र": {
+      "main": { "$": "auto_text_key", "code": 2315, "label": "ऋ" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2400, "label": "ॠ" },
+        { "$": "auto_text_key", "code": 2372, "label": "ॄ" },
+        { "$": "auto_text_key", "code": 2353, "label": "ऱ" }
+      ]
+    },
+    "ल": {
+      "relevant": [
+        { "$": "auto_text_key", "code": 2402, "label": "ॢ" },
+        { "$": "auto_text_key", "code": 2403, "label": "ॣ" },
+        { "$": "auto_text_key", "code": 2316, "label": "ऌ" },
+        { "$": "auto_text_key", "code": 2401, "label": "ॡ" },
+        { "$": "auto_text_key", "code": 2356, "label": "ऴ" }
+      ]
+    },
+    "व": {
+      "relevant": [
+        { "$": "auto_text_key", "code": 2387, "label": " ॓" },
+        { "$": "auto_text_key", "code": 2388, "label": " ॔" }
+      ]
+    },
+    "स": {
+      "main": { "$": "multi_text_key", "codePoints": [2358, 2381, 2352], "label": "श्र" },
+      "relevant": [{ "$": "auto_text_key", "code": 2359, "label": "ष" }]
+    },
+    "ा": {
+      "main": { "$": "auto_text_key", "code": 2310, "label": "आ" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2373, "label": "ॅ" },
+        { "$": "auto_text_key", "code": 2418, "label": "ॲ" },
+        { "$": "auto_text_key", "code": 2308, "label": "ऄ" }
+      ]
+    },
+    "ि": {
+      "main": { "$": "auto_text_key", "code": 2311, "label": "इ" },
+      "relevant": [{ "$": "auto_text_key", "code": 2312, "label": "ई" }]
+    },
+    "ु": {
+      "main": { "$": "auto_text_key", "code": 2313, "label": "उ" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2422, "label": "ॶ" },
+        { "$": "auto_text_key", "code": 2423, "label": "ॷ" },
+        { "$": "auto_text_key", "code": 2390, "label": " ॖ" },
+        { "$": "auto_text_key", "code": 2314, "label": "ऊ" },
+        { "$": "auto_text_key", "code": 2391, "label": " ॗ" }
+      ]
+    },
+    "े": {
+      "main": { "$": "auto_text_key", "code": 2319, "label": "ए" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2317, "label": "ऍ" },
+        { "$": "auto_text_key", "code": 2318, "label": "ऎ" },
+        { "$": "auto_text_key", "code": 2374, "label": " ॆ" },
+        { "$": "auto_text_key", "code": 2320, "label": "ऐ" },
+        { "$": "auto_text_key", "code": 2382, "label": " ॎ" },
+        { "$": "auto_text_key", "code": 2389, "label": " ॕ" }
+      ]
+    },
+    "ो": {
+      "main": { "$": "auto_text_key", "code": 2323, "label": "ओ" },
+      "relevant": [
+        { "$": "auto_text_key", "code": 2322, "label": "ऒ" },
+        { "$": "auto_text_key", "code": 2378, "label": " ॊ" },
+        { "$": "auto_text_key", "code": 2383, "label": " ॏ" },
+        { "$": "auto_text_key", "code": 2421, "label": "ॵ" },
+        { "$": "auto_text_key", "code": 2384, "label": "ॐ" },
+        { "$": "auto_text_key", "code": 2377, "label": "ॉ" },
+        { "$": "auto_text_key", "code": 2419, "label": "ॳ" },
+        { "$": "auto_text_key", "code": 2420, "label": "ॴ" },
+        { "$": "auto_text_key", "code": 2362, "label": " ऺ" },
+        { "$": "auto_text_key", "code": 2363, "label": " ऻ" },
+        { "$": "auto_text_key", "code": 2324, "label": "औ" },
+        { "$": "auto_text_key", "code": 2321, "label": "ऑ" }
+      ]
+    },
+
+    "~right": {
+      "main": { "code": 2404, "label": "।" },
+      "relevant": [
+        { "code": 37, "label": "%" },
+        { "code": 43, "label": "+" },
+        { "code": 45, "label": "-" },
+        { "code": 58, "label": ":" },
+        { "code": 59, "label": ";" },
+        { "code": 47, "label": "/" },
+        { "$": "layout_direction_selector", "ltr": { "code": 40, "label": "(" }, "rtl": { "code": 41, "label": "(" } },
+        { "$": "layout_direction_selector", "ltr": { "code": 41, "label": ")" }, "rtl": { "code": 40, "label": ")" } },
+        { "code": 8205, "label": ">⁞<" },
+        { "code": 8204, "label": "<⁞>" },
+        { "code": 2417, "label": "ॱ" },
+        { "code": 2429, "label": "ॽ" },
+        { "code": 33, "label": "!" },
+        { "code": 63, "label": "?" },
+        { "code": 2405, "label": "॥" }
+      ]
+    }
+  },
+  "uri": {
+    "~right": {
+      "main": { "code": -255, "label": ".com" },
+      "relevant": [
+        { "code": -255, "label": ".org" },
+        { "code": -255, "label": ".net" },
+        { "code": -255, "label": ".in" },
+        { "code": -255, "label": ".co.in" }
+      ]
+    }
+  }
+}

app/src/main/assets/ime/keyboard/org.florisboard.localization/popupMappings/hu.json

@@ -10,9 +10,9 @@
       "main": { "$": "auto_text_key" ,"code" : 237, "label": "í" }
     },
     "o": {
-      "main": { "$": "auto_text_key", "code" : 246, "label": "ö" },
+      "main": { "$": "auto_text_key", "code" : 243, "label": "ó" },
       "relevant": [
-        { "$": "auto_text_key", "code" : 243, "label": "ó" },
+        { "$": "auto_text_key", "code" : 246, "label": "ö" },
         { "$": "auto_text_key", "code" : 337, "label": "ő" }
       ]
     },
@@ -22,9 +22,9 @@
       ]
     },
     "u": {
-      "main": { "$": "auto_text_key", "code" : 252, "label": "ü" },
+      "main": { "$": "auto_text_key", "code" : 250, "label": "ú" },
       "relevant": [
-        { "$": "auto_text_key", "code" : 250, "label": "ú" },
+        { "$": "auto_text_key", "code" : 252, "label": "ü" },
         { "$": "auto_text_key", "code" : 369, "label": "ű" }
       ]
     },

app/src/main/assets/ime/theme/gboard_day.json

@@ -1,65 +0,0 @@
-{
-  "$type": "dev.patrickgold.florisboard.ime.theme.Theme",
-  "name": "gboard_day",
-  "label": "Gboard Day",
-  "authors": [ "patrickgold", "itskareem" ],
-  "isNightTheme": false,
-  "attributes": {
-    "window": {
-      "colorPrimary": "#0479ed",
-      "colorPrimaryDark": "#0467c9",
-      "colorAccent": "#FF9800",
-      "navigationBarColor": "@keyboard/background",
-      "navigationBarLight": "true",
-      "semiTransparentColor": "#20000000",
-      "textColor": "#000000"
-    },
-    "keyboard": {
-      "background": "#D1D6DC"
-    },
-    "key": {
-      "background": "#FCFFFF",
-      "backgroundPressed": "#F5F5F5",
-      "foreground": "@window/textColor",
-      "foregroundPressed": "@window/textColor",
-      "showBorder": "true"
-    },
-    "key:enter": {
-      "background": "@window/colorPrimary",
-      "backgroundPressed": "@window/colorPrimaryDark",
-      "foreground": "#FFFFFF",
-      "foregroundPressed": "#FFFFFF"
-    },
-    "key:shift:capslock": {
-      "foreground": "@window/colorAccent",
-      "foregroundPressed": "@window/colorAccent"
-    },
-    "media": {
-      "foreground": "@window/textColor",
-      "foregroundAlt": "#757575"
-    },
-    "oneHanded": {
-      "background": "@keyboard/background",
-      "foreground": "#424242"
-    },
-    "popup": {
-      "background": "#EEEEEE",
-      "backgroundActive": "#BDBDBD",
-      "foreground": "@window/textColor"
-    },
-    "privateMode": {
-      "background": "#A000FF",
-      "foreground": "#FFFFFF"
-    },
-    "smartbar": {
-      "background": "@keyboard/background",
-      "foreground": "@window/textColor",
-      "foregroundAlt": "#8A8A8A"
-    },
-    "smartbarButton": {
-      "background": "@key/background",
-      "foreground": "@key/foreground"
-    },
-    "glideTrail": {"foreground":  "#200479ed"}
-  }
-}

app/src/main/assets/ime/theme/gboard_night.json

@@ -1,65 +0,0 @@
-{
-  "$type": "dev.patrickgold.florisboard.ime.theme.Theme",
-  "name": "gboard_night",
-  "label": "Gboard Night",
-  "authors": [ "Netscaping" ],
-  "isNightTheme": true,
-  "attributes": {
-    "window": {
-      "colorPrimary": "#5e97f6",
-      "colorPrimaryDark": "#4285f4",
-      "colorAccent": "#FF9800",
-      "navigationBarColor": "@keyboard/background",
-      "navigationBarLight": "false",
-      "semiTransparentColor": "#20FFFFFF",
-      "textColor": "#FFFFFF"
-    },
-    "keyboard": {
-      "background": "#292e33"
-    },
-    "key": {
-      "background": "#484c4f",
-      "backgroundPressed": "#5e5e60",
-      "foreground": "@window/textColor",
-      "foregroundPressed": "@window/textColor",
-      "showBorder": "true"
-    },
-    "key:enter": {
-      "background": "@window/colorPrimary",
-      "backgroundPressed": "@window/colorPrimaryDark",
-      "foreground": "#FFFFFF",
-      "foregroundPressed": "#FFFFFF"
-    },
-    "key:shift:capslock": {
-      "foreground": "@window/colorAccent",
-      "foregroundPressed": "@window/colorAccent"
-    },
-    "media": {
-      "foreground": "@window/textColor",
-      "foregroundAlt": "#BDBDBD"
-    },
-    "oneHanded": {
-      "background": "#373c41",
-      "foreground": "#9b9da0"
-    },
-    "popup": {
-      "background": "#373c41",
-      "backgroundActive": "#5a5e60",
-      "foreground": "@window/textColor"
-    },
-    "privateMode": {
-      "background": "#A000FF",
-      "foreground": "#FFFFFF"
-    },
-    "smartbar": {
-      "background": "transparent",
-      "foreground": "#d4d5d6",
-      "foregroundAlt": "#73FFFFFF"
-    },
-    "smartbarButton": {
-      "background": "#FFFFFF",
-      "foreground": "#686868"
-    },
-    "glideTrail": {"foreground":  "#205e97f6"}
-  }
-}

app/src/main/assets/ime/theme/org.florisboard.themes/extension.json

@@ -2,10 +2,10 @@
   "$": "ime.extension.theme",
   "meta": {
     "id": "org.florisboard.themes",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "title": "FlorisBoard default themes",
     "description": "Default themes (both day and night) for the keyboard UI",
-    "maintainers": [ "patrickgold <patrick@patrickgold.dev>" ],
+    "maintainers": [ "patrickgold <patrick@patrickgold.dev>", "lm41 <lm41@lm41.xyz>" ],
     "license": "apache-2.0"
   },
   "themes": [
@@ -13,49 +13,37 @@
       "id": "floris_day",
       "label": "Floris Day",
       "authors": [ "patrickgold" ],
-      "isNight": false,
-      "isBorderless": false,
-      "isMaterialYouAware": false
+      "isNight": false
     },
     {
       "id": "floris_day_borderless",
       "label": "Floris Day (Borderless)",
       "authors": [ "patrickgold" ],
-      "isNight": false,
-      "isBorderless": true,
-      "isMaterialYouAware": false
+      "isNight": false
     },
     {
       "id": "floris_night",
       "label": "Floris Night",
       "authors": [ "patrickgold" ],
-      "isNight": true,
-      "isBorderless": false,
-      "isMaterialYouAware": false
+      "isNight": true
     },
     {
       "id": "floris_night_borderless",
       "label": "Floris Night (Borderless)",
       "authors": [ "patrickgold" ],
-      "isNight": true,
-      "isBorderless": true,
-      "isMaterialYouAware": false
+      "isNight": true
     },
     {
       "id": "floris_pure_night",
       "label": "Floris Pure Night",
       "authors": [ "serebit" ],
-      "isNight": true,
-      "isBorderless": false,
-      "isMaterialYouAware": false
+      "isNight": true
     },
     {
       "id": "floris_pure_night_borderless",
       "label": "Floris Pure Night (Borderless)",
       "authors": [ "serebit" ],
-      "isNight": true,
-      "isBorderless": true,
-      "isMaterialYouAware": false
+      "isNight": true
     }
   ]
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_day.json

@@ -1,23 +1,40 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#4caf50",
     "--primary-variant": "#388e3c",
     "--secondary": "#ff9800",
     "--secondary-variant": "#e65100",
     "--background": "#e0e0e0",
+    "--background-variant": "#d0d0d0",
     "--surface": "#ffffff",
     "--surface-variant": "#f5f5f5",
 
+    "--popup-surface": "#eeeeee",
+    "--focused-popup-surface": "#bdbdbd",
+
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(0 ,0, 0, 0.25)",
+
+    "--one-hand-background": "#e8f5e9",
+    "--one-hand-foreground": "#424242",
+
+    "--incognito-icon-color": "#00000011",
+
+    "--on-primary": "#f0f0f0",
     "--on-background": "#121212",
+    "--on-background-disabled": "rgb(175,175,175)",
     "--on-surface": "#000000",
     "--on-surface-variant": "#5f5f5f",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
@@ -25,170 +42,322 @@
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "1"
   },
   "key:pressed": {
     "background": "var(--surface-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
+  "key[code=32]": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-family": "monospace",
+    "font-size": "12sp",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#eeeeee",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#bdbdbd",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
-  "smartbar-action-key:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#12121248"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#12121248"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
-    "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "foreground": "var(--secondary)",
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
   },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
   },
   "smartbar-candidate-spacer": {
-    "foreground": "var(--surface)"
+    "foreground": "var(--spacer-color)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#eeeeee",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -213,15 +382,82 @@
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#00000011"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#e8f5e9",
-    "foreground": "#424242"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
 
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_day_borderless.json

@@ -1,83 +1,124 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#4caf50",
     "--primary-variant": "#388e3c",
     "--secondary": "#ff9800",
     "--secondary-variant": "#e65100",
     "--background": "#e0e0e0",
+    "--background-variant": "#d0d0d0",
     "--surface": "#f0f0f0",
     "--surface-variant": "#ffffff",
 
+    "--popup-surface": "#eeeeee",
+    "--focused-popup-surface": "#bdbdbd",
+
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(0 ,0, 0, 0.25)",
+
+    "--one-hand-background": "#e8f5e9",
+    "--one-hand-foreground": "#424242",
+
+    "--incognito-icon-color": "#00000011",
+
+    "--on-primary": "#f0f0f0",
     "--on-background": "#121212",
+    "--on-background-disabled": "#12121248",
     "--on-surface": "#000000",
     "--on-surface-variant": "#5f5f5f",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
     "background": "transparent",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
-    "shape": "var(--shape)"
+    "shape": "var(--shape)",
+    "text-max-lines": "1"
   },
   "key:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
-    "foreground": "var(--on-surface)"
+    "foreground": "var(--on-surface)",
+    "margin": "0dp 6dp"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
+  "key[code=32]": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "margin": "0dp 6dp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-size": "12sp",
+    "font-family": "monospace",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#eeeeee",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#bdbdbd",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
   "smartbar-action-key:pressed": {
@@ -85,109 +126,244 @@
     "foreground": "var(--on-surface)"
   },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#12121248"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#12121248"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
     "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
+  },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
+  },
   "smartbar-candidate-spacer": {
     "foreground": "var(--surface)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#eeeeee",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -212,15 +388,82 @@
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#00000011"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#e8f5e9",
-    "foreground": "#424242"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
 
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_night.json

@@ -1,23 +1,35 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#4caf50",
     "--primary-variant": "#388e3c",
     "--secondary": "#f57c00",
     "--secondary-variant": "#e65100",
     "--background": "#212121",
+    "--background-variant": "#313131",
     "--surface": "#424242",
     "--surface-variant": "#616161",
-
+    "--popup-surface": "#757575",
+    "--focused-popup-surface": "#bdbdbd",
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(255, 255, 255, 0.25)",
+    "--one-hand-background": "#1b5e20",
+    "--one-hand-foreground": "#eeeeee",
+    "--incognito-icon-color": "#ffffff11",
+    "--on-primary": "#f0f0f0",
     "--on-background": "#dcdcdc",
+    "--on-background-disabled": "#dcdcdc48",
     "--on-surface": "#ffffff",
     "--on-surface-variant": "#a0a0a0",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
@@ -25,170 +37,322 @@
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "1"
   },
   "key:pressed": {
     "background": "var(--surface-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
+  "key[code=32]": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-family": "monospace",
+    "font-size": "12sp",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#757575",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#bdbdbd",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
-  "smartbar-action-key:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
-    "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "foreground": "var(--secondary)",
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
   },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
   },
   "smartbar-candidate-spacer": {
-    "foreground": "var(--surface)"
+    "foreground": "var(--spacer-color)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#757575",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -213,15 +377,81 @@
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#ffffff11"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#1b5e20",
-    "foreground": "#eeeeee"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
-
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_night_borderless.json

@@ -1,83 +1,119 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#4caf50",
     "--primary-variant": "#388e3c",
     "--secondary": "#f57c00",
     "--secondary-variant": "#e65100",
     "--background": "#212121",
+    "--background-variant": "#313131",
     "--surface": "#424242",
     "--surface-variant": "#616161",
-
+    "--popup-surface": "#757575",
+    "--focused-popup-surface": "#bdbdbd",
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(255, 255, 255, 0.25)",
+    "--one-hand-background": "#1b5e20",
+    "--one-hand-foreground": "#eeeeee",
+    "--incognito-icon-color": "#ffffff11",
+    "--on-primary": "#f0f0f0",
     "--on-background": "#dcdcdc",
+    "--on-background-disabled": "#dcdcdc48",
     "--on-surface": "#ffffff",
     "--on-surface-variant": "#a0a0a0",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
     "background": "transparent",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
-    "shape": "var(--shape)"
+    "shape": "var(--shape)",
+    "text-max-lines": "1"
   },
   "key:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
-    "foreground": "var(--on-surface)"
+    "foreground": "var(--on-surface)",
+    "margin": "0dp 6dp"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
+  "key[code=32]": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "margin": "0dp 6dp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-size": "12sp",
+    "font-family": "monospace",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#757575",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#bdbdbd",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
   "smartbar-action-key:pressed": {
@@ -85,109 +121,244 @@
     "foreground": "var(--on-surface)"
   },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
     "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
+  },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
+  },
   "smartbar-candidate-spacer": {
     "foreground": "var(--surface)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#757575",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -212,15 +383,81 @@
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#ffffff11"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#1b5e20",
-    "foreground": "#eeeeee"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
-
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_pure_night.json

@@ -1,23 +1,35 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#388e3c",
     "--primary-variant": "#306d32",
     "--secondary": "#ff9800",
     "--secondary-variant": "#804c00",
     "--background": "#000000",
+    "--background-variant": "#111111",
     "--surface": "#212121",
     "--surface-variant": "#3d3d3d",
-
+    "--popup-surface": "#424242",
+    "--focused-popup-surface": "#707070",
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(255, 255, 255, 0.25)",
+    "--one-hand-background": "#1b5e20",
+    "--one-hand-foreground": "#eeeeee",
+    "--incognito-icon-color": "#ffffff11",
+    "--on-primary": "#f0f0f0",
+    "--on-background-disabled": "#dcdcdc48",
     "--on-background": "#eeeeee",
     "--on-surface": "#eeeeee",
     "--on-surface-variant": "#ffffff73",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
@@ -25,60 +37,81 @@
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "1"
   },
   "key:pressed": {
     "background": "var(--surface-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
+  "key[code=32]": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-family": "monospace",
+    "font-size": "12sp",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#424242",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#707070",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
   "smartbar-action-key:pressed": {
@@ -86,109 +119,244 @@
     "foreground": "var(--on-surface)"
   },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
-    "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "foreground": "var(--secondary)",
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
   },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
-    "foreground": "var(--on-background)"
+    "foreground": "var(--on-surface)"
+  },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
   },
   "smartbar-candidate-spacer": {
-    "foreground": "var(--surface)"
+    "foreground": "var(--spacer-color)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#757575",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -199,29 +367,95 @@
     "foreground": "var(--on-background)",
     "font-size": "16sp",
     "shape": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
-    "border-color": "var(--secondary-variant)",
-    "border-width": "1dp"
+    "border-color": "var(--secondary)",
+    "border-width": "2dp"
   },
   "extracted-landscape-input-action": {
-    "background": "var(--surface)",
+    "background": "var(--primary)",
     "foreground": "var(--on-surface)",
     "shape": "rounded-corner(4dp, 4dp, 4dp, 4dp)"
   },
 
   "glide-trail": {
-    "foreground": "var(--primary-variant)"
+    "foreground": "var(--primary)"
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#ffffff11"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#000000",
-    "foreground": "#eeeeee"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
-
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/assets/ime/theme/org.florisboard.themes/stylesheets/floris_pure_night_borderless.json

@@ -1,83 +1,119 @@
 {
+  "$schema": "https://schemas.florisboard.org/snygg/v2/stylesheet",
   "@defines": {
     "--primary": "#388e3c",
     "--primary-variant": "#306d32",
     "--secondary": "#ff9800",
     "--secondary-variant": "#804c00",
     "--background": "#000000",
+    "--background-variant": "#111111",
     "--surface": "#212121",
     "--surface-variant": "#3d3d3d",
-
+    "--popup-surface": "#424242",
+    "--focused-popup-surface": "#707070",
+    "--drag-marker": "rgb(255,0,0)",
+    "--spacer-color": "rgba(255, 255, 255, 0.25)",
+    "--one-hand-background": "#1b5e20",
+    "--one-hand-foreground": "#eeeeee",
+    "--incognito-icon-color": "#ffffff11",
+    "--on-primary": "#f0f0f0",
+    "--on-background-disabled": "#dcdcdc48",
     "--on-background": "#eeeeee",
     "--on-surface": "#eeeeee",
     "--on-surface-variant": "#ffffff73",
 
     "--shape": "rounded-corner(8dp, 8dp, 8dp, 8dp)",
-    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)"
+    "--shape-variant": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
+    "--shape-chip": "rounded-corner(50%, 50%, 50%, 50%)"
   },
 
-  "keyboard": {
-    "background": "var(--background)"
+  "window": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)"
   },
 
   "key": {
     "background": "transparent",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
-    "shape": "var(--shape)"
+    "shape": "var(--shape)",
+    "text-max-lines": "1"
   },
   "key:pressed": {
-    "background": "#6161617f",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:enter}]": {
+  "key[code=10]": {
     "background": "var(--primary)",
-    "foreground": "var(--on-surface)"
+    "foreground": "var(--on-surface)",
+    "margin": "0dp 6dp"
   },
-  "key[code={c:enter}]:pressed": {
+  "key[code=10]:pressed": {
     "background": "var(--primary-variant)",
     "foreground": "var(--on-surface)"
   },
-  "key[code={c:shift}][shiftstate={sh:caps_lock}]": {
-    "foreground": "var(--secondary)"
-  },
-  "key[code={c:space}]": {
-    "background": "#61616146",
+  "key[code=32]": {
+    "background": "var(--surface)",
     "foreground": "var(--on-surface-variant)",
+    "font-size": "12sp",
+    "margin": "0dp 6dp",
+    "text-overflow": "ellipsis"
+  },
+  "key[code=-201,-202,-203]": {
+    "font-size": "18sp"
+  },
+  "key[code=-204,-205]": {
     "font-size": "12sp"
   },
+  "key[code=-205]": {
+    "text-max-lines": "2"
+  },
+  "key[code=-11][shiftstate=`caps_lock`]": {
+    "foreground": "var(--secondary)"
+  },
   "key-hint": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
-    "font-size": "12sp"
+    "font-size": "12sp",
+    "font-family": "monospace",
+    "padding": "0dp 1dp 1dp 0dp",
+    "text-max-lines": "1"
   },
-  "key-popup": {
-    "background": "#363636",
+  "key-popup-box": {
+    "background": "var(--popup-surface)",
     "foreground": "var(--on-surface)",
     "font-size": "22sp",
     "shape": "var(--shape)",
     "shadow-elevation": "2dp"
   },
-  "key-popup:focus": {
-    "background": "#5F5F5F",
-    "foreground": "var(--on-surface)"
+  "key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape)"
+  },
+  "key-popup-extended-indicator": {
+    "font-size": "16sp"
   },
 
+  "smartbar": {
+    "font-size": "18sp"
+  },
   "smartbar-shared-actions-toggle": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
+    "margin": "6dp",
     "shape": "circle()",
     "shadow-elevation": "2dp"
   },
   "smartbar-extended-actions-toggle": {
     "background": "transparent",
     "foreground": "var(--on-surface-variant)",
+    "margin": "6dp",
     "shape": "circle()"
   },
   "smartbar-action-key": {
     "background": "transparent",
     "foreground": "var(--on-background)",
-    "font-size": "18sp",
     "shape": "var(--shape)"
   },
   "smartbar-action-key:pressed": {
@@ -85,109 +121,244 @@
     "foreground": "var(--on-surface)"
   },
   "smartbar-action-key:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+    "foreground": "var(--on-background-disabled)"
   },
-  "smartbar-action-tile": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "18sp",
-    "shape": "var(--shape)"
-  },
-  "smartbar-action-tile:pressed": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "smartbar-action-tile:disabled": {
-    "background": "transparent",
-    "foreground": "#dcdcdc48"
+
+  "smartbar-actions-overflow": {
+    "margin": "4dp"
   },
   "smartbar-actions-overflow-customize-button": {
-    "background": "var(--surface)",
-    "foreground": "var(--on-surface)",
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
     "font-size": "14sp",
-    "shape": "circle()",
-    "shadow-elevation": "2dp"
+    "margin": "0dp 8dp 0dp 0dp",
+    "shape": "rounded-corner(24dp, 24dp, 24dp, 24dp)"
   },
+  "smartbar-action-tile": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "font-size": "14sp",
+    "margin": "4dp",
+    "padding": "4dp",
+    "shape": "rounded-corner(20%, 20%, 20%, 20%)",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-action-tile:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-action-tile-icon": {
+    "font-size": "24sp",
+    "margin": "0dp 0dp 0dp 8dp"
+  },
+
   "smartbar-actions-editor": {
     "background": "var(--background)",
+    "foreground": "var(--on-background)",
     "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
   },
   "smartbar-actions-editor-header": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
   },
   "smartbar-actions-editor-subheader": {
     "foreground": "var(--on-background)",
-    "font-size": "16sp"
+    "font-size": "16sp",
+    "font-weight": "bold",
+    "padding": "12dp 16dp 12dp 8dp",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
+  "smartbar-actions-editor-tile-grid": {
+    "margin": "4dp 0dp"
+  },
+  "smartbar-actions-editor-tile": {
+    "margin": "4dp",
+    "padding": "8dp",
+    "text-align": "center",
+    "text-max-lines": "2",
+    "text-overflow": "ellipsis"
+  },
+  "smartbar-actions-editor-tile[code=-999]": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "smartbar-actions-editor-tile[code=-991]": {
+    "foreground": "var(--drag-marker)"
+  },
+
   "smartbar-candidate-word": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rectangle()"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rectangle()",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-word:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-word-secondary-text": {
+    "font-size": "8sp",
+    "margin": "0dp 2dp 0dp 0dp"
+  },
   "smartbar-candidate-clip": {
     "background": "transparent",
     "foreground": "var(--on-background)",
     "font-size": "14sp",
-    "shape": "rounded-corner(8%, 8%, 8%, 8%)"
+    "margin": "4dp",
+    "padding": "8dp 0dp",
+    "shape": "rounded-corner(8%, 8%, 8%, 8%)",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   },
   "smartbar-candidate-clip:pressed": {
     "background": "var(--surface)",
     "foreground": "var(--on-background)"
   },
+  "smartbar-candidate-clip-icon": {
+    "margin": "0dp 0dp 4dp 0dp"
+  },
   "smartbar-candidate-spacer": {
     "foreground": "var(--surface)"
   },
 
   "clipboard-header": {
-    "background": "transparent",
-    "foreground": "var(--on-surface)",
+    "foreground": "var(--on-background)",
     "font-size": "16sp"
   },
+  "clipboard-header-button": {
+    "margin": "4dp",
+    "shape": "circle()"
+  },
+  "clipboard-header-button:disabled": {
+    "foreground": "var(--on-background-disabled)"
+  },
+  "clipboard-header-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-subheader": {
+    "font-size": "14sp",
+    "margin": "6dp 10dp 6dp 6dp"
+  },
+  "clipboard-content": {
+    "padding": "10dp 0dp"
+  },
+  "clipboard-filter-row": {
+    "background": "var(--background-variant)",
+    "foreground": "var(--on-background)",
+    "padding": "0dp 0dp 4dp 0dp",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-filter-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "margin": "4dp 4dp 0dp 4dp",
+    "padding": "8dp 4dp",
+    "shape": "var(--shape-chip)"
+  },
+  "clipboard-filter-chip[state=`active`]": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)"
+  },
+  "clipboard-filter-chip-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-grid": {
+    "shape": "var(--shape-variant)"
+  },
   "clipboard-item": {
     "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
-    "shadow-elevation": "2dp"
+    "shadow-elevation": "2dp",
+    "text-max-lines": "10",
+    "text-overflow": "ellipsis"
+  },
+  "clipboard-item[type=`text`]": {
+    "padding": "12dp 8dp"
+  },
+  "clipboard-item-description": {
+    "font-size": "12sp",
+    "font-style": "italic"
   },
   "clipboard-item-popup": {
-    "background": "var(--surface-variant)",
+    "background": "var(--surface)",
     "foreground": "var(--on-surface)",
     "font-size": "14sp",
+    "margin": "4dp",
     "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-
-  "emoji-key": {
-    "background": "transparent",
-    "foreground": "var(--on-background)",
-    "font-size": "22sp",
-    "shape": "var(--shape)"
+  "clipboard-item-popup[type=`text`]": {
+    "padding": "12dp 8dp"
   },
-  "emoji-key:pressed": {
+  "clipboard-item-timestamp": {
+    "font-size": "11sp",
+    "padding": "16dp 8dp"
+  },
+  "clipboard-item-actions": {
     "background": "var(--surface)",
-    "foreground": "var(--on-surface)"
-  },
-  "emoji-key-popup": {
-    "background": "#757575",
     "foreground": "var(--on-surface)",
-    "font-size": "22sp",
-    "shape": "var(--shape)",
+    "margin": "4dp",
+    "shape": "var(--shape-variant)",
     "shadow-elevation": "2dp"
   },
-  "emoji-tab": {
-    "foreground": "var(--on-background)"
+  "clipboard-item-action": {
+    "font-size": "16sp",
+    "padding": "12dp"
   },
-  "emoji-tab:focus": {
-    "foreground": "var(--primary)"
+  "clipboard-item-action-text": {
+    "margin": "4dp 0dp 0dp 0dp"
+  },
+  "clipboard-clear-all-dialog": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)",
+    "shadow-elevation": "1dp"
+  },
+  "clipboard-clear-all-dialog-message": {
+    "padding": "16dp"
+  },
+  "clipboard-clear-all-dialog-buttons": {
+    "padding": "4dp"
+  },
+  "clipboard-clear-all-dialog-button": {
+    "background": "transparent",
+    "foreground": "var(--on-surface)",
+    "shape": "var(--shape-variant)"
+  },
+  "clipboard-history-disabled-title": {
+    "font-weight": "bold"
+  },
+  "clipboard-history-disabled-message": {
+    "padding": "0dp 4dp 0dp 8dp"
+  },
+  "clipboard-history-disabled-button": {
+    "background": "var(--primary)",
+    "foreground": "var(--on-primary)",
+    "shape": "rounded-corner(24dp,24dp,24dp,24dp)"
+  },
+  "clipboard-history-locked-title": {
+    "font-weight": "bold",
+    "text-align": "center"
+  },
+  "clipboard-history-locked-message": {
+    "padding": "0dp 4dp 0dp 0dp",
+    "text-align": "center"
   },
 
   "extracted-landscape-input-layout": {
@@ -198,29 +369,95 @@
     "foreground": "var(--on-background)",
     "font-size": "16sp",
     "shape": "rounded-corner(12dp, 12dp, 12dp, 12dp)",
-    "border-color": "var(--secondary-variant)",
-    "border-width": "1dp"
+    "border-color": "var(--secondary)",
+    "border-width": "2dp"
   },
   "extracted-landscape-input-action": {
-    "background": "var(--surface)",
+    "background": "var(--primary)",
     "foreground": "var(--on-surface)",
     "shape": "rounded-corner(4dp, 4dp, 4dp, 4dp)"
   },
 
   "glide-trail": {
-    "foreground": "var(--primary-variant)"
+    "foreground": "var(--primary)"
   },
 
   "incognito-mode-indicator": {
-    "foreground": "#ffffff11"
+    "foreground": "var(--incognito-icon-color)"
+  },
+
+  "inline-autofill-chip": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+
+  "media-emoji-subheader": {
+    "font-weight": "bold",
+    "margin": "4dp"
+  },
+  "media-emoji-key": {
+    "background": "transparent",
+    "foreground": "var(--on-background)",
+    "font-size": "22sp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key:pressed": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)"
+  },
+  "media-emoji-key-popup-box": {
+    "background": "var(--popup-surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "22sp",
+    "shape": "var(--shape)",
+    "shadow-elevation": "2dp"
+  },
+  "media-emoji-key-popup-element:focus": {
+    "background": "var(--focused-popup-surface)",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-tab": {
+    "foreground": "var(--on-background)"
+  },
+  "media-emoji-tab:focus": {
+    "foreground": "var(--primary)"
+  },
+  "media-bottom-row-button": {
+    "padding": "16dp 0dp",
+    "shape": "var(--shape)"
+  },
+  "media-emoji-key-popup-extended-indicator": {
+    "foreground": "inherit"
   },
 
   "one-handed-panel": {
-    "background": "#000000",
-    "foreground": "#eeeeee"
+    "background": "var(--one-hand-background)",
+    "foreground": "var(--one-hand-foreground)"
   },
-
-  "system-nav-bar": {
-    "background": "var(--background)"
+  "subtype-panel": {
+    "background": "var(--background)",
+    "foreground": "var(--on-background)",
+    "shape": "rounded-corner(24dp, 24dp, 0dp, 0dp)"
+  },
+  "subtype-panel-header": {
+    "background": "var(--surface)",
+    "foreground": "var(--on-surface)",
+    "font-size": "18sp",
+    "padding": "12dp",
+    "text-align": "center",
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
+  },
+  "subtype-panel-list-item": {
+    "font-size": "16sp",
+    "padding": "16dp"
+  },
+  "subtype-panel-list-item-icon-leading": {
+    "font-size": "24sp",
+    "padding": "0dp 0dp 16dp 0dp"
+  },
+  "subtype-panel-list-item-text": {
+    "text-max-lines": "1",
+    "text-overflow": "ellipsis"
   }
 }

app/src/main/kotlin/dev/patrickgold/florisboard/FlorisApplication.kt

@@ -33,7 +33,6 @@ import dev.patrickgold.florisboard.ime.keyboard.KeyboardManager
 import dev.patrickgold.florisboard.ime.media.emoji.FlorisEmojiCompat
 import dev.patrickgold.florisboard.ime.nlp.NlpManager
 import dev.patrickgold.florisboard.ime.text.gestures.GlideTypingManager
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.ThemeManager
 import dev.patrickgold.florisboard.lib.cache.CacheManager
 import dev.patrickgold.florisboard.lib.crashutility.CrashUtility
@@ -61,7 +60,6 @@ class FlorisApplication : Application() {
                 System.loadLibrary("fl_native")
             } catch (_: Exception) {
             }
-            FlorisImeTheme.init()
         }
     }
 

app/src/main/kotlin/dev/patrickgold/florisboard/FlorisImeService.kt

@@ -18,6 +18,7 @@ package dev.patrickgold.florisboard
 
 import android.content.Context
 import android.content.Intent
+import android.content.IntentFilter
 import android.content.res.Configuration
 import android.inputmethodservice.ExtractEditText
 import android.os.Build
@@ -48,10 +49,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -79,6 +79,8 @@ import dev.patrickgold.florisboard.app.devtools.DevtoolsOverlay
 import dev.patrickgold.florisboard.app.florisPreferenceModel
 import dev.patrickgold.florisboard.ime.ImeUiMode
 import dev.patrickgold.florisboard.ime.clipboard.ClipboardInputLayout
+import dev.patrickgold.florisboard.ime.core.SelectSubtypePanel
+import dev.patrickgold.florisboard.ime.core.isSubtypeSelectionShowing
 import dev.patrickgold.florisboard.ime.editor.EditorRange
 import dev.patrickgold.florisboard.ime.editor.FlorisEditorInfo
 import dev.patrickgold.florisboard.ime.input.InputFeedbackController
@@ -99,7 +101,7 @@ import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickActionsEditorPa
 import dev.patrickgold.florisboard.ime.text.TextInputLayout
 import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
-import dev.patrickgold.florisboard.lib.compose.FlorisButton
+import dev.patrickgold.florisboard.ime.theme.WallpaperChangeReceiver
 import dev.patrickgold.florisboard.lib.compose.ProvideLocalizedResources
 import dev.patrickgold.florisboard.lib.compose.SystemUiIme
 import dev.patrickgold.florisboard.lib.devtools.LogTopic
@@ -111,6 +113,7 @@ import dev.patrickgold.florisboard.lib.util.ViewUtils
 import dev.patrickgold.florisboard.lib.util.debugSummarize
 import dev.patrickgold.florisboard.lib.util.launchActivity
 import dev.patrickgold.jetpref.datastore.model.observeAsState
+import java.lang.ref.WeakReference
 import org.florisboard.lib.android.AndroidInternalR
 import org.florisboard.lib.android.AndroidVersion
 import org.florisboard.lib.android.isOrientationLandscape
@@ -118,14 +121,11 @@ import org.florisboard.lib.android.isOrientationPortrait
 import org.florisboard.lib.android.showShortToast
 import org.florisboard.lib.android.systemServiceOrNull
 import org.florisboard.lib.kotlin.collectLatestIn
-import org.florisboard.lib.snygg.ui.SnyggSurface
-import org.florisboard.lib.snygg.ui.shape
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.snyggBorder
-import org.florisboard.lib.snygg.ui.snyggShadow
-import org.florisboard.lib.snygg.ui.solidColor
-import org.florisboard.lib.snygg.ui.spSize
-import java.lang.ref.WeakReference
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggButton
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggText
+import org.florisboard.lib.snygg.ui.rememberSnyggThemeQuery
 
 /**
  * Global weak reference for the [FlorisImeService] class. This is needed as certain actions (request hide, switch to
@@ -232,10 +232,10 @@ class FlorisImeService : LifecycleInputMethodService() {
             val imm = ims.systemServiceOrNull(InputMethodManager::class) ?: return false
             val list: List<InputMethodInfo> = imm.enabledInputMethodList
             for (el in list) {
-                for (i in 0 until el.subtypeCount){
+                for (i in 0 until el.subtypeCount) {
                     if (el.getSubtypeAt(i).mode != "voice") continue
                     if (AndroidVersion.ATLEAST_API28_P) {
-                        ims.switchInputMethod(el.id)
+                        ims.switchInputMethod(el.id, el.getSubtypeAt(i))
                         return true
                     } else {
                         ims.window.window?.let { window ->
@@ -267,6 +267,8 @@ class FlorisImeService : LifecycleInputMethodService() {
     private var isExtractUiShown by mutableStateOf(false)
     private var resourcesContext by mutableStateOf(this as Context)
 
+    private val wallpaperChangeReceiver = WallpaperChangeReceiver()
+
     init {
         setTheme(R.style.FlorisImeTheme)
     }
@@ -277,9 +279,23 @@ class FlorisImeService : LifecycleInputMethodService() {
         WindowCompat.setDecorFitsSystemWindows(window.window!!, false)
         subtypeManager.activeSubtypeFlow.collectLatestIn(lifecycleScope) { subtype ->
             val config = Configuration(resources.configuration)
-            config.setLocale(subtype.primaryLocale.base)
+            if (prefs.localization.displayKeyboardLabelsInSubtypeLanguage.get()) {
+                config.setLocale(subtype.primaryLocale.base)
+            }
             resourcesContext = createConfigurationContext(config)
         }
+        prefs.localization.displayKeyboardLabelsInSubtypeLanguage.observeForever { shouldSync ->
+            val config = Configuration(resources.configuration)
+            if (shouldSync) {
+                config.setLocale(subtypeManager.activeSubtype.primaryLocale.base)
+            }
+            resourcesContext = createConfigurationContext(config)
+        }
+        prefs.physicalKeyboard.showOnScreenKeyboard.observeForever {
+            updateInputViewShown()
+        }
+        @Suppress("DEPRECATION") // We do not retrieve the wallpaper but only listen to changes
+        registerReceiver(wallpaperChangeReceiver, IntentFilter(Intent.ACTION_WALLPAPER_CHANGED))
     }
 
     override fun onCreateInputView(): View {
@@ -318,6 +334,7 @@ class FlorisImeService : LifecycleInputMethodService() {
 
     override fun onDestroy() {
         super.onDestroy()
+        unregisterReceiver(wallpaperChangeReceiver)
         FlorisImeServiceReference = WeakReference(null)
         inputWindowView = null
     }
@@ -342,6 +359,13 @@ class FlorisImeService : LifecycleInputMethodService() {
         }
     }
 
+    override fun onEvaluateInputViewShown(): Boolean {
+        val config = resources.configuration
+        return super.onEvaluateInputViewShown()
+            || config.keyboard == Configuration.KEYBOARD_NOKEYS
+            || prefs.physicalKeyboard.showOnScreenKeyboard.get()
+    }
+
     override fun onUpdateSelection(
         oldSelStart: Int,
         oldSelEnd: Int,
@@ -448,6 +472,10 @@ class FlorisImeService : LifecycleInputMethodService() {
 
         flogInfo(LogTopic.IMS_EVENTS) { "Creating inline suggestions request" }
         val stylesBundle = themeManager.createInlineSuggestionUiStyleBundle(this)
+        if (stylesBundle == null) {
+            flogWarning(LogTopic.IMS_EVENTS) { "Failed to retrieve inline suggestions style bundle" }
+            return null
+        }
         val spec = InlinePresentationSpec.Builder(
             InlineSuggestionUiSmallestSize,
             InlineSuggestionUiBiggestSize,
@@ -495,7 +523,9 @@ class FlorisImeService : LifecycleInputMethodService() {
         outInsets.visibleTopInsets = visibleTopY
         outInsets.touchableInsets = Insets.TOUCHABLE_INSETS_REGION
         val left = 0
-        val top = if (keyboardManager.activeState.isBottomSheetShowing()) { 0 } else {
+        val top = if (keyboardManager.activeState.isBottomSheetShowing() || keyboardManager.activeState.isSubtypeSelectionShowing()) {
+            0
+        } else {
             visibleTopY - if (needAdditionalOverlay) FlorisImeSizing.Static.smartbarHeightPx else 0
         }
         val right = inputViewSize.width
@@ -508,7 +538,8 @@ class FlorisImeService : LifecycleInputMethodService() {
      */
     private fun updateSoftInputWindowLayoutParameters() {
         val w = window?.window ?: return
-        WindowCompat.setDecorFitsSystemWindows(w, true)
+        // TODO: Verify that this doesn't give us a padding problem
+        WindowCompat.setDecorFitsSystemWindows(w, false)
         ViewUtils.updateLayoutHeightOf(w, WindowManager.LayoutParams.MATCH_PARENT)
         val layoutHeight = if (isFullscreenUiMode) {
             WindowManager.LayoutParams.WRAP_CONTENT
@@ -545,19 +576,18 @@ class FlorisImeService : LifecycleInputMethodService() {
             ProvideKeyboardRowBaseHeight {
                 CompositionLocalProvider(LocalInputFeedbackController provides inputFeedbackController) {
                     FlorisImeTheme {
+                        // Do not apply system bar padding here yet, we want to draw it ourselves
                         Column(modifier = Modifier.fillMaxWidth()) {
                             if (!(isFullscreenUiMode && isExtractUiShown)) {
-                                Box(
+                                DevtoolsOverlay(
                                     modifier = Modifier
                                         .fillMaxWidth()
                                         .weight(1f),
-                                ) {
-                                    DevtoolsOverlay(modifier = Modifier.fillMaxSize())
-                                }
+                                )
                             }
                             ImeUi()
+                            SystemUiIme()
                         }
-                        SystemUiIme()
                     }
                 }
             }
@@ -568,25 +598,27 @@ class FlorisImeService : LifecycleInputMethodService() {
     @Composable
     private fun ImeUi() {
         val state by keyboardManager.activeState.collectAsState()
-        val keyboardStyle = FlorisImeTheme.style.get(
-            element = FlorisImeUi.Keyboard,
-            mode = state.inputShiftState.value,
+        val attributes = mapOf(
+            FlorisImeUi.Attr.Mode to state.keyboardMode.toString(),
+            FlorisImeUi.Attr.ShiftState to state.inputShiftState.toString(),
         )
         val layoutDirection = LocalLayoutDirection.current
-        SideEffect {
-            if (keyboardManager.activeState.layoutDirection != layoutDirection) {
-                keyboardManager.activeState.layoutDirection = layoutDirection
-            }
+        LaunchedEffect(layoutDirection) {
+            keyboardManager.activeState.layoutDirection = layoutDirection
         }
         CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
-            SnyggSurface(
+            SnyggBox(
+                elementName = FlorisImeUi.Window.elementName,
+                attributes = attributes,
                 modifier = Modifier
                     .fillMaxWidth()
                     .wrapContentHeight()
-                    .onGloballyPositioned { coords -> inputViewSize = coords.size }
+                    .onGloballyPositioned { coords -> inputViewSize = coords.size },
+                clickAndSemanticsModifier = Modifier
                     // Do not remove below line or touch input may get stuck
                     .pointerInteropFilter { false },
-                style = keyboardStyle,
+                supportsBackgroundImage = true,
+                allowClip = false,
             ) {
                 val configuration = LocalConfiguration.current
                 val bottomOffset by if (configuration.isOrientationPortrait()) {
@@ -598,18 +630,18 @@ class FlorisImeService : LifecycleInputMethodService() {
                     modifier = Modifier
                         .fillMaxWidth()
                         .wrapContentHeight()
+                        // Apply system bars padding here (we already drew our keyboard background)
                         .safeDrawingPadding()
-                        // FIXME: removing this fixes the Smartbar sizing but breaks one-handed-mode
-                        //.height(IntrinsicSize.Min)
                         .padding(bottom = bottomOffset),
                 ) {
                     val oneHandedMode by prefs.keyboard.oneHandedMode.observeAsState()
+                    val oneHandedModeEnabled by prefs.keyboard.oneHandedModeEnabled.observeAsState()
                     val oneHandedModeScaleFactor by prefs.keyboard.oneHandedModeScaleFactor.observeAsState()
                     val keyboardWeight = when {
-                        oneHandedMode == OneHandedMode.OFF || configuration.isOrientationLandscape() -> 1f
+                        !oneHandedModeEnabled || configuration.isOrientationLandscape() -> 1f
                         else -> oneHandedModeScaleFactor / 100f
                     }
-                    if (oneHandedMode == OneHandedMode.END && configuration.isOrientationPortrait()) {
+                    if (oneHandedModeEnabled && oneHandedMode == OneHandedMode.END && configuration.isOrientationPortrait()) {
                         OneHandedPanel(
                             panelSide = OneHandedMode.START,
                             weight = 1f - keyboardWeight,
@@ -628,7 +660,7 @@ class FlorisImeService : LifecycleInputMethodService() {
                             }
                         }
                     }
-                    if (oneHandedMode == OneHandedMode.START && configuration.isOrientationPortrait()) {
+                    if (oneHandedModeEnabled && oneHandedMode == OneHandedMode.START && configuration.isOrientationPortrait()) {
                         OneHandedPanel(
                             panelSide = OneHandedMode.END,
                             weight = 1f - keyboardWeight,
@@ -680,12 +712,22 @@ class FlorisImeService : LifecycleInputMethodService() {
             ProvideLocalizedResources(resourcesContext, forceLayoutDirection = LayoutDirection.Ltr) {
                 FlorisImeTheme {
                     BottomSheetHostUi(
-                        isShowing = state.isBottomSheetShowing(),
+                        isShowing = state.isBottomSheetShowing() || state.isSubtypeSelectionShowing(),
                         onHide = {
-                            keyboardManager.activeState.isActionsEditorVisible = false
+                            if (state.isBottomSheetShowing()) {
+                                keyboardManager.activeState.isActionsEditorVisible = false
+                            }
+                            if (state.isSubtypeSelectionShowing()) {
+                                keyboardManager.activeState.isSubtypeSelectionVisible = false
+                            }
                         },
                     ) {
-                        QuickActionsEditorPanel()
+                        if (state.isBottomSheetShowing()) {
+                            QuickActionsEditorPanel()
+                        }
+                        if (state.isSubtypeSelectionShowing()) {
+                            SelectSubtypePanel()
+                        }
                     }
                 }
             }
@@ -719,44 +761,39 @@ class FlorisImeService : LifecycleInputMethodService() {
 
         @Composable
         fun Content() {
-            val context = LocalContext.current
             ProvideLocalizedResources(resourcesContext, forceLayoutDirection = LayoutDirection.Ltr) {
                 FlorisImeTheme {
-                    val layoutStyle = FlorisImeTheme.style.get(FlorisImeUi.ExtractedLandscapeInputLayout)
-                    val fieldStyle = FlorisImeTheme.style.get(FlorisImeUi.ExtractedLandscapeInputField)
-                    val actionStyle = FlorisImeTheme.style.get(FlorisImeUi.ExtractedLandscapeInputAction)
                     val activeEditorInfo by editorInstance.activeInfoFlow.collectAsState()
-                    Box(
-                        modifier = Modifier
-                            .snyggBackground(context, layoutStyle, FlorisImeTheme.fallbackSurfaceColor()),
-                    ) {
-                        Row(
+                    SnyggBox(FlorisImeUi.ExtractedLandscapeInputLayout.elementName) {
+                        SnyggRow(
                             modifier = Modifier.fillMaxSize(),
                             verticalAlignment = Alignment.CenterVertically,
                         ) {
-                            val fieldColor = fieldStyle.foreground.solidColor(context, FlorisImeTheme.fallbackContentColor())
-                            AndroidView(
+                            SnyggBox(
+                                elementName = FlorisImeUi.ExtractedLandscapeInputLayout.elementName,
                                 modifier = Modifier
-                                    .padding(8.dp)
                                     .fillMaxHeight()
-                                    .weight(1f)
-                                    .snyggShadow(fieldStyle)
-                                    .snyggBorder(context, fieldStyle)
-                                    .snyggBackground(context, fieldStyle),
-                                factory = { extractEditText },
-                                update = { view ->
-                                    view.background = null
-                                    view.backgroundTintList = null
-                                    view.foregroundTintList = null
-                                    view.setTextColor(fieldColor.toArgb())
-                                    view.setHintTextColor(fieldColor.copy(fieldColor.alpha * 0.6f).toArgb())
-                                    view.setTextSize(
-                                        TypedValue.COMPLEX_UNIT_SP,
-                                        fieldStyle.fontSize.spSize(default = 16.sp).value,
-                                    )
-                                },
-                            )
-                            FlorisButton(
+                                    .weight(1f),
+                            ) {
+                                val fieldStyle = rememberSnyggThemeQuery(FlorisImeUi.ExtractedLandscapeInputField.elementName)
+                                val foreground = fieldStyle.foreground()
+                                AndroidView(
+                                    factory = { extractEditText },
+                                    update = { view ->
+                                        view.background = null
+                                        view.backgroundTintList = null
+                                        view.foregroundTintList = null
+                                        view.setTextColor(foreground.toArgb())
+                                        view.setHintTextColor(foreground.copy(foreground.alpha * 0.6f).toArgb())
+                                        view.setTextSize(
+                                            TypedValue.COMPLEX_UNIT_SP,
+                                            fieldStyle.fontSize(default = 16.sp).value,
+                                        )
+                                    },
+                                )
+                            }
+                            SnyggButton(
+                                FlorisImeUi.ExtractedLandscapeInputAction.elementName,
                                 onClick = {
                                     if (activeEditorInfo.extractedActionId != 0) {
                                         currentInputConnection?.performEditorAction(activeEditorInfo.extractedActionId)
@@ -765,15 +802,13 @@ class FlorisImeService : LifecycleInputMethodService() {
                                     }
                                 },
                                 modifier = Modifier.padding(horizontal = 8.dp),
-                                text = activeEditorInfo.extractedActionLabel
-                                    ?: getTextForImeAction(activeEditorInfo.imeOptions.action.toInt())
-                                    ?: "ACTION",
-                                shape = actionStyle.shape.shape(),
-                                colors = ButtonDefaults.buttonColors(
-                                    containerColor = actionStyle.background.solidColor(context, FlorisImeTheme.fallbackContentColor()),
-                                    contentColor = actionStyle.foreground.solidColor(context, FlorisImeTheme.fallbackSurfaceColor()),
-                                ),
-                            )
+                            ) {
+                                SnyggText(
+                                    text = activeEditorInfo.extractedActionLabel
+                                        ?: getTextForImeAction(activeEditorInfo.imeOptions.action.toInt())
+                                        ?: "ACTION",
+                                )
+                            }
                         }
                     }
                 }

app/src/main/kotlin/dev/patrickgold/florisboard/app/AppPrefs.kt

@@ -18,10 +18,12 @@ package dev.patrickgold.florisboard.app
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
-import dev.patrickgold.florisboard.app.settings.theme.DisplayColorsAs
 import dev.patrickgold.florisboard.app.settings.theme.DisplayKbdAfterDialogs
+import dev.patrickgold.florisboard.app.settings.theme.SnyggLevel
 import dev.patrickgold.florisboard.app.setup.NotificationPermissionState
+import dev.patrickgold.florisboard.ime.clipboard.CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO
 import dev.patrickgold.florisboard.ime.core.DisplayLanguageNamesIn
 import dev.patrickgold.florisboard.ime.core.Subtype
 import dev.patrickgold.florisboard.ime.input.CapitalizationBehavior
@@ -40,58 +42,36 @@ import dev.patrickgold.florisboard.ime.smartbar.CandidatesDisplayMode
 import dev.patrickgold.florisboard.ime.smartbar.ExtendedActionsPlacement
 import dev.patrickgold.florisboard.ime.smartbar.IncognitoDisplayMode
 import dev.patrickgold.florisboard.ime.smartbar.SmartbarLayout
+import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickAction
 import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickActionArrangement
+import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickActionJsonConfig
 import dev.patrickgold.florisboard.ime.text.gestures.SwipeAction
+import dev.patrickgold.florisboard.ime.text.key.KeyCode
 import dev.patrickgold.florisboard.ime.text.key.KeyHintConfiguration
 import dev.patrickgold.florisboard.ime.text.key.KeyHintMode
 import dev.patrickgold.florisboard.ime.text.key.UtilityKeyAction
+import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
 import dev.patrickgold.florisboard.ime.theme.ThemeMode
 import dev.patrickgold.florisboard.ime.theme.extCoreTheme
+import dev.patrickgold.florisboard.lib.compose.ColorPreferenceSerializer
 import dev.patrickgold.florisboard.lib.ext.ExtensionComponentName
 import dev.patrickgold.florisboard.lib.observeAsTransformingState
 import dev.patrickgold.florisboard.lib.util.VersionName
 import dev.patrickgold.jetpref.datastore.JetPref
+import dev.patrickgold.jetpref.datastore.model.LocalTime
+import dev.patrickgold.jetpref.datastore.model.PreferenceData
 import dev.patrickgold.jetpref.datastore.model.PreferenceMigrationEntry
 import dev.patrickgold.jetpref.datastore.model.PreferenceModel
-import dev.patrickgold.jetpref.datastore.model.PreferenceType
 import dev.patrickgold.jetpref.datastore.model.observeAsState
-import kotlinx.serialization.encodeToString
+import dev.patrickgold.jetpref.material.ui.ColorRepresentation
 import kotlinx.serialization.json.Json
+import org.florisboard.lib.android.AndroidVersion
 import org.florisboard.lib.android.isOrientationPortrait
-import org.florisboard.lib.snygg.SnyggLevel
+import org.florisboard.lib.color.DEFAULT_GREEN
 
 fun florisPreferenceModel() = JetPref.getOrCreatePreferenceModel(AppPrefs::class, ::AppPrefs)
 
 class AppPrefs : PreferenceModel("florisboard-app-prefs") {
-    val advanced = Advanced()
-    inner class Advanced {
-        val settingsTheme = enum(
-            key = "advanced__settings_theme",
-            default = AppTheme.AUTO,
-        )
-        val useMaterialYou = boolean(
-            key = "advanced__use_material_you",
-            default = true,
-        )
-        val settingsLanguage = string(
-            key = "advanced__settings_language",
-            default = "auto",
-        )
-        val showAppIcon = boolean(
-            key = "advanced__show_app_icon",
-            default = true,
-        )
-        val incognitoMode = enum(
-            key = "advanced__incognito_mode",
-            default = IncognitoMode.DYNAMIC_ON_OFF,
-        )
-        // Internal pref
-        val forceIncognitoModeFromDynamic = boolean(
-            key = "advanced__force_incognito_mode_from_dynamic",
-            default = false,
-        )
-    }
-
     val clipboard = Clipboard()
     inner class Clipboard {
         val useInternalClipboard = boolean(
@@ -110,6 +90,23 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             key = "clipboard__history_enabled",
             default = false,
         )
+        val numHistoryGridColumnsPortrait = int(
+            key = "clipboard__num_history_grid_columns_portrait",
+            default = CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO,
+        )
+        val numHistoryGridColumnsLandscape = int(
+            key = "clipboard__num_history_grid_columns_landscape",
+            default = CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO,
+        )
+        @Composable
+        fun numHistoryGridColumns(): PreferenceData<Int> {
+            val configuration = LocalConfiguration.current
+            return if (configuration.isOrientationPortrait()) {
+                numHistoryGridColumnsPortrait
+            } else {
+                numHistoryGridColumnsLandscape
+            }
+        }
         val cleanUpOld = boolean(
             key = "clipboard__clean_up_old",
             default = false,
@@ -138,6 +135,14 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             key = "clipboard__clear_primary_clip_deletes_last_item",
             default = true,
         )
+        val suggestionEnabled = boolean(
+            key = "clipboard__suggestion_enabled",
+            default = true,
+        )
+        val suggestionTimeout = int(
+            key = "clipboard__suggestion_timeout",
+            default = 60,
+        )
     }
 
     val correction = Correction()
@@ -166,10 +171,6 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             key = "devtools__enabled",
             default = false,
         )
-        val showLastLayoutComputation = boolean(
-            key = "devtools__show_last_layout_computation",
-            default = false,
-        )
         val showPrimaryClip = boolean(
             key = "devtools__show_primary_clip",
             default = false,
@@ -502,7 +503,11 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
         )
         val oneHandedMode = enum(
             key = "keyboard__one_handed_mode",
-            default = OneHandedMode.OFF,
+            default = OneHandedMode.END,
+        )
+        val oneHandedModeEnabled = boolean(
+            key = "keyboard__one_handed_mode_enabled",
+            default = false,
         )
         val oneHandedModeScaleFactor = int(
             key = "keyboard__one_handed_mode_scale_factor",
@@ -574,14 +579,14 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
         @Composable
         fun fontSizeMultiplier(): Float {
             val configuration = LocalConfiguration.current
-            val oneHandedMode by oneHandedMode.observeAsState()
+            val oneHandedModeEnabled by oneHandedModeEnabled.observeAsState()
             val oneHandedModeFactor by oneHandedModeScaleFactor.observeAsTransformingState { it / 100.0f }
             val fontSizeMultiplierBase by if (configuration.isOrientationPortrait()) {
                 fontSizeMultiplierPortrait
             } else {
                 fontSizeMultiplierLandscape
             }.observeAsTransformingState { it / 100.0f }
-            val fontSizeMultiplier = fontSizeMultiplierBase * if (oneHandedMode != OneHandedMode.OFF && configuration.isOrientationPortrait()) {
+            val fontSizeMultiplier = fontSizeMultiplierBase * if (oneHandedModeEnabled && configuration.isOrientationPortrait()) {
                 oneHandedModeFactor
             } else {
                 1.0f
@@ -596,6 +601,10 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             key = "localization__display_language_names_in",
             default = DisplayLanguageNamesIn.SYSTEM_LOCALE,
         )
+        val displayKeyboardLabelsInSubtypeLanguage = boolean(
+            key = "localization__display_keyboard_labels_in_subtype_language",
+            default = false,
+        )
         val activeSubtypeId = long(
             key = "localization__active_subtype_id",
             default = Subtype.DEFAULT.id,
@@ -606,6 +615,38 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
         )
     }
 
+    val other = Other()
+    inner class Other {
+        val settingsTheme = enum(
+            key = "other__settings_theme",
+            default = AppTheme.AUTO,
+        )
+        val accentColor = custom(
+            key = "other__accent_color",
+            default = when (AndroidVersion.ATLEAST_API31_S) {
+                true -> Color.Unspecified
+                false -> DEFAULT_GREEN
+            },
+            serializer = ColorPreferenceSerializer,
+        )
+        val settingsLanguage = string(
+            key = "other__settings_language",
+            default = "auto",
+        )
+        val showAppIcon = boolean(
+            key = "other__show_app_icon",
+            default = true,
+        )
+    }
+
+    val physicalKeyboard = PhysicalKeyboard()
+    inner class PhysicalKeyboard {
+        val showOnScreenKeyboard = boolean(
+            key = "physical_keyboard__show_on_screen_keyboard",
+            default = false,
+        )
+    }
+
     val smartbar = Smartbar()
     inner class Smartbar {
         val enabled = boolean(
@@ -682,13 +723,14 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             key = "suggestion__block_possibly_offensive",
             default = true,
         )
-        val clipboardContentEnabled = boolean(
-            key = "suggestion__clipboard_content_enabled",
-            default = true,
+        val incognitoMode = enum(
+            key = "suggestion__incognito_mode",
+            default = IncognitoMode.DYNAMIC_ON_OFF,
         )
-        val clipboardContentTimeout = int(
-            key = "suggestion__clipboard_content_timeout",
-            default = 60,
+        // Internal pref
+        val forceIncognitoModeFromDynamic = boolean(
+            key = "suggestion__force_incognito_mode_from_dynamic",
+            default = false,
         )
     }
 
@@ -708,17 +750,25 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             default = extCoreTheme("floris_night"),
             serializer = ExtensionComponentName.Serializer,
         )
-        //val sunriseTime = localTime(
-        //    key = "theme__sunrise_time",
-        //    default = LocalTime.of(6, 0),
-        //)
-        //val sunsetTime = localTime(
-        //    key = "theme__sunset_time",
-        //    default = LocalTime.of(18, 0),
-        //)
-        val editorDisplayColorsAs = enum(
-            key = "theme__editor_display_colors_as",
-            default = DisplayColorsAs.HEX8,
+        val accentColor = custom(
+            key = "theme__accent_color",
+            default = when (AndroidVersion.ATLEAST_API31_S) {
+                true -> Color.Unspecified
+                false -> DEFAULT_GREEN
+            },
+            serializer = ColorPreferenceSerializer,
+        )
+        val sunriseTime = time(
+            key = "theme__sunrise_time",
+            default = LocalTime(6, 0),
+        )
+        val sunsetTime = time(
+            key = "theme__sunset_time",
+            default = LocalTime(18, 0),
+        )
+        val editorColorRepresentation = enum(
+            key = "theme__editor_color_representation",
+            default = ColorRepresentation.HEX,
         )
         val editorDisplayKbdAfterDialogs = enum(
             key = "theme__editor_display_kbd_after_dialogs",
@@ -732,34 +782,6 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
 
     override fun migrate(entry: PreferenceMigrationEntry): PreferenceMigrationEntry {
         return when (entry.key) {
-            // Migrate enums from their lowercase to uppercase representation
-            // Keep migration rule until: 0.5 dev cycle
-            "advanced__settings_theme", "gestures__swipe_up", "gestures__swipe_down", "gestures__swipe_left",
-            "gestures__swipe_right", "gestures__space_bar_swipe_up", "gestures__space_bar_swipe_left",
-            "gestures__space_bar_swipe_right", "gestures__space_bar_long_press", "gestures__delete_key_swipe_left",
-            "gestures__delete_key_long_press", "keyboard__hinted_number_row_mode", "keyboard__hinted_symbols_mode",
-            "keyboard__utility_key_action", "keyboard__one_handed_mode", "keyboard__landscape_input_ui_mode",
-            "localization__display_language_names_in", "smartbar__primary_actions_row_type",
-            "smartbar__secondary_actions_placement", "smartbar__secondary_actions_row_type", "spelling__language_mode",
-            "suggestion__display_mode", "theme__mode", "theme__editor_display_colors_as",
-            "theme__editor_display_kbd_after_dialogs", "theme__editor_level",
-            -> {
-                entry.transform(rawValue = entry.rawValue.uppercase())
-            }
-
-            // Migrate old private mode force flag as this is a sensitive preference
-            // Keep migration rule until: 0.5 dev cycle
-            "advanced__force_private_mode" -> {
-                if (entry.rawValue.toBoolean()) {
-                    entry.transform(
-                        type = PreferenceType.string(),
-                        key = "advanced__incognito_mode",
-                        rawValue = IncognitoMode.FORCE_ON.toString(),
-                    )
-                } else {
-                    entry.reset()
-                }
-            }
 
             // Migrate media prefs to emoji prefs
             // Keep migration rule until: 0.6 dev cycle
@@ -774,19 +796,82 @@ class AppPrefs : PreferenceModel("florisboard-app-prefs") {
             "media__emoji_recently_used_max_size" -> {
                 entry.transform(key = "emoji__history_recent_max_size")
             }
-            "media__emoji_preferred_skin_tone" -> {
+
+            // Migrate advanced prefs to other prefs
+            // Keep migration rules until: 0.7 dev cycle
+            "advanced__settings_theme" -> {
+                entry.transform(key = "other__settings_theme")
+            }
+            "advanced__accent_color" -> {
+                entry.transform(key = "other__accent_color")
+            }
+            "advanced__settings_language" -> {
+                entry.transform(key = "other__settings_language")
+            }
+            "advanced__show_app_icon" -> {
+                entry.transform(key = "other__show_app_icon")
+            }
+            "advanced__incognito_mode" -> {
+                entry.transform(key = "suggestion__incognito_mode")
+            }
+            "advanced__force_incognito_mode_from_dynamic" -> {
+                entry.transform(key = "suggestion__force_incognito_mode_from_dynamic")
+            }
+            // Migrate clipboard suggestion prefs to clipboard
+            // Keep migration rules until: 0.7 dev cycle
+            "suggestion__clipboard_content_enabled" -> {
+                entry.transform(key = "clipboard__suggestion_enabled")
+            }
+            "suggestion__clipboard_content_timeout" -> {
+                entry.transform(key = "clipboard__suggestion_timeout")
+            }
+
+            //Migrate one hand mode prefs keep until: 0.7 dev cycle
+            "keyboard__one_handed_mode" -> {
+                if (entry.rawValue == "OFF") {
+                    entry.reset()
+                } else {
+                    entry.keepAsIs()
+                }
+            }
+            "smartbar__action_arrangement" -> {
+                fun migrateAction(action: QuickAction): QuickAction {
+                    return if (action is QuickAction.InsertKey && action.data.code == KeyCode.COMPACT_LAYOUT_TO_RIGHT) {
+                        action.copy(TextKeyData.TOGGLE_COMPACT_LAYOUT)
+                    } else {
+                        action
+                    }
+                }
+
+                val arrangement = QuickActionJsonConfig.decodeFromString<QuickActionArrangement>(entry.rawValue)
+                var newArrangement = arrangement.copy(
+                    stickyAction = arrangement.stickyAction?.let{ migrateAction(it) },
+                    dynamicActions = arrangement.dynamicActions.map { migrateAction(it) },
+                    hiddenActions = arrangement.hiddenActions.map { migrateAction(it) },
+                )
+                if (QuickAction.InsertKey(TextKeyData.LANGUAGE_SWITCH) !in newArrangement) {
+                    newArrangement = newArrangement.copy(
+                        dynamicActions = newArrangement.dynamicActions.plus(QuickAction.InsertKey(TextKeyData.LANGUAGE_SWITCH))
+                    )
+                }
+                val json = QuickActionJsonConfig.encodeToString(newArrangement.distinct())
+                entry.transform(rawValue = json)
+            }
+
+            // Migrate theme editor fine-tuning
+            // Keep migration rule until: 0.6 dev cycle
+            "theme__editor_display_colors_as" -> {
+                val colorRepresentation = when (entry.rawValue) {
+                    "RGBA" -> ColorRepresentation.RGB
+                    else -> ColorRepresentation.HEX
+                }
                 entry.transform(
-                    key = "emoji__preferred_skin_tone",
-                    rawValue = entry.rawValue.uppercase(), // keep until: 0.5 dev cycle
-                )
-            }
-            "media__emoji_preferred_hair_style" -> {
-                entry.transform(
-                    key = "emoji__preferred_hair_style",
-                    rawValue = entry.rawValue.uppercase(), // keep until: 0.5 dev cycle
+                    key = "theme__editor_color_representation",
+                    rawValue = colorRepresentation.name,
                 )
             }
 
+
             // Default: keep entry
             else -> entry.keepAsIs()
         }

app/src/main/kotlin/dev/patrickgold/florisboard/app/EnumDisplayEntries.kt

@@ -18,13 +18,15 @@ package dev.patrickgold.florisboard.app
 
 import androidx.compose.runtime.Composable
 import dev.patrickgold.florisboard.R
-import dev.patrickgold.florisboard.app.settings.theme.DisplayColorsAs
 import dev.patrickgold.florisboard.app.settings.theme.DisplayKbdAfterDialogs
+import dev.patrickgold.florisboard.app.settings.theme.SnyggLevel
 import dev.patrickgold.florisboard.ime.core.DisplayLanguageNamesIn
 import dev.patrickgold.florisboard.ime.input.CapitalizationBehavior
 import dev.patrickgold.florisboard.ime.input.HapticVibrationMode
 import dev.patrickgold.florisboard.ime.input.InputFeedbackActivationMode
+import dev.patrickgold.florisboard.ime.input.InputShiftState
 import dev.patrickgold.florisboard.ime.keyboard.IncognitoMode
+import dev.patrickgold.florisboard.ime.keyboard.KeyboardMode
 import dev.patrickgold.florisboard.ime.keyboard.SpaceBarMode
 import dev.patrickgold.florisboard.ime.landscapeinput.LandscapeInputUiMode
 import dev.patrickgold.florisboard.ime.media.emoji.EmojiHistory
@@ -41,9 +43,9 @@ import dev.patrickgold.florisboard.ime.text.key.KeyHintMode
 import dev.patrickgold.florisboard.ime.text.key.UtilityKeyAction
 import dev.patrickgold.florisboard.ime.theme.ThemeMode
 import dev.patrickgold.florisboard.lib.compose.stringRes
-import org.florisboard.lib.snygg.SnyggLevel
 import dev.patrickgold.jetpref.datastore.ui.ListPreferenceEntry
 import dev.patrickgold.jetpref.datastore.ui.listPrefEntries
+import dev.patrickgold.jetpref.material.ui.ColorRepresentation
 import org.florisboard.lib.kotlin.curlyFormat
 import kotlin.reflect.KClass
 
@@ -58,19 +60,19 @@ private val ENUM_DISPLAY_ENTRIES = mapOf<Pair<KClass<*>, String>, @Composable ()
             )
             entry(
                 key = AppTheme.AUTO_AMOLED,
-                label = stringRes(R.string.pref__advanced__settings_theme__auto_amoled),
+                label = stringRes(R.string.pref__other__settings_theme__auto_amoled),
             )
             entry(
                 key = AppTheme.LIGHT,
-                label = stringRes(R.string.pref__advanced__settings_theme__light),
+                label = stringRes(R.string.pref__other__settings_theme__light),
             )
             entry(
                 key = AppTheme.DARK,
-                label = stringRes(R.string.pref__advanced__settings_theme__dark),
+                label = stringRes(R.string.pref__other__settings_theme__dark),
             )
             entry(
                 key = AppTheme.AMOLED_DARK,
-                label = stringRes(R.string.pref__advanced__settings_theme__amoled_dark),
+                label = stringRes(R.string.pref__other__settings_theme__amoled_dark),
             )
         }
     },
@@ -102,18 +104,24 @@ private val ENUM_DISPLAY_ENTRIES = mapOf<Pair<KClass<*>, String>, @Composable ()
             )
         }
     },
-    DisplayColorsAs::class to DEFAULT to {
+    ColorRepresentation::class to DEFAULT to {
         listPrefEntries {
             entry(
-                key = DisplayColorsAs.HEX8,
-                label = stringRes(R.string.enum__display_colors_as__hex8),
+                key = ColorRepresentation.HEX,
+                label = stringRes(R.string.enum__color_representation__hex),
                 description = stringRes(R.string.general__example_given).curlyFormat("example" to "#4caf50ff"),
                 showDescriptionOnlyIfSelected = true,
             )
             entry(
-                key = DisplayColorsAs.RGBA,
-                label = stringRes(R.string.enum__display_colors_as__rgba),
-                description = stringRes(R.string.general__example_given).curlyFormat("example" to "rgba(76,175,80,1.0)"),
+                key = ColorRepresentation.RGB,
+                label = stringRes(R.string.enum__color_representation__rgb),
+                description = stringRes(R.string.general__example_given).curlyFormat("example" to "rgba(76, 175, 80, 1.0)"),
+                showDescriptionOnlyIfSelected = true,
+            )
+            entry(
+                key = ColorRepresentation.HSV,
+                label = stringRes(R.string.enum__color_representation__hsv),
+                description = stringRes(R.string.general__example_given).curlyFormat("example" to "hsva(122, 56, 68, 1.0)"),
                 showDescriptionOnlyIfSelected = true,
             )
         }
@@ -358,6 +366,58 @@ private val ENUM_DISPLAY_ENTRIES = mapOf<Pair<KClass<*>, String>, @Composable ()
             )
         }
     },
+    InputShiftState::class to DEFAULT to {
+        listPrefEntries {
+            entry(
+                key = InputShiftState.UNSHIFTED,
+                label = stringRes(R.string.enum__input_shift_state__unshifted),
+            )
+            entry(
+                key = InputShiftState.SHIFTED_MANUAL,
+                label = stringRes(R.string.enum__input_shift_state__shifted_manual),
+            )
+            entry(
+                key = InputShiftState.SHIFTED_AUTOMATIC,
+                label = stringRes(R.string.enum__input_shift_state__shifted_automatic),
+            )
+            entry(
+                key = InputShiftState.CAPS_LOCK,
+                label = stringRes(R.string.enum__input_shift_state__caps_lock),
+            )
+        }
+    },
+    KeyboardMode::class to DEFAULT to {
+        listPrefEntries {
+            entry(
+                key = KeyboardMode.CHARACTERS,
+                label = stringRes(R.string.enum__keyboard_mode__characters),
+            )
+            entry(
+                key = KeyboardMode.SYMBOLS,
+                label = stringRes(R.string.enum__keyboard_mode__symbols),
+            )
+            entry(
+                key = KeyboardMode.SYMBOLS2,
+                label = stringRes(R.string.enum__keyboard_mode__symbols2),
+            )
+            entry(
+                key = KeyboardMode.NUMERIC,
+                label = stringRes(R.string.enum__keyboard_mode__numeric),
+            )
+            entry(
+                key = KeyboardMode.NUMERIC_ADVANCED,
+                label = stringRes(R.string.enum__keyboard_mode__numeric_advanced),
+            )
+            entry(
+                key = KeyboardMode.PHONE,
+                label = stringRes(R.string.enum__keyboard_mode__phone),
+            )
+            entry(
+                key = KeyboardMode.PHONE2,
+                label = stringRes(R.string.enum__keyboard_mode__phone2),
+            )
+        }
+    },
     LandscapeInputUiMode::class to DEFAULT to {
         listPrefEntries {
             entry(
@@ -376,10 +436,6 @@ private val ENUM_DISPLAY_ENTRIES = mapOf<Pair<KClass<*>, String>, @Composable ()
     },
     OneHandedMode::class to DEFAULT to {
         listPrefEntries {
-            entry(
-                key = OneHandedMode.OFF,
-                label = stringRes(R.string.enum__one_handed_mode__off),
-            )
             entry(
                 key = OneHandedMode.START,
                 label = stringRes(R.string.enum__one_handed_mode__start),
@@ -542,6 +598,10 @@ private val ENUM_DISPLAY_ENTRIES = mapOf<Pair<KClass<*>, String>, @Composable ()
                 key = SwipeAction.SHOW_INPUT_METHOD_PICKER,
                 label = stringRes(R.string.enum__swipe_action__show_input_method_picker),
             )
+            entry(
+                key = SwipeAction.SHOW_SUBTYPE_PICKER,
+                label = "Show subtype picker"
+            )
             entry(
                 key = SwipeAction.SWITCH_TO_PREV_SUBTYPE,
                 label = stringRes(R.string.enum__swipe_action__switch_to_prev_subtype),

app/src/main/kotlin/dev/patrickgold/florisboard/app/FlorisAppActivity.kt

@@ -88,17 +88,17 @@ class FlorisAppActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
-        prefs.advanced.settingsTheme.observe(this) {
+        prefs.other.settingsTheme.observe(this) {
             appTheme = it
         }
-        prefs.advanced.settingsLanguage.observe(this) {
+        prefs.other.settingsLanguage.observe(this) {
             val config = Configuration(resources.configuration)
             val locale = if (it == "auto") FlorisLocale.default() else FlorisLocale.fromTag(it)
             config.setLocale(locale.base)
             resourcesContext = createConfigurationContext(config)
         }
         if (AndroidVersion.ATMOST_API28_P) {
-            prefs.advanced.showAppIcon.observe(this) {
+            prefs.other.showAppIcon.observe(this) {
                 showAppIcon = it
             }
         }
@@ -117,8 +117,7 @@ class FlorisAppActivity : ComponentActivity() {
             AppVersionUtils.updateVersionOnInstallAndLastUse(this, prefs)
             setContent {
                 ProvideLocalizedResources(resourcesContext) {
-                    val useMaterialYou by prefs.advanced.useMaterialYou.observeAsState()
-                    FlorisAppTheme(theme = appTheme, isMaterialYouAware = useMaterialYou) {
+                    FlorisAppTheme(theme = appTheme) {
                         Surface(color = MaterialTheme.colorScheme.background) {
                             AppContent()
                         }

app/src/main/kotlin/dev/patrickgold/florisboard/app/Routes.kt

@@ -47,8 +47,9 @@ import dev.patrickgold.florisboard.app.settings.HomeScreen
 import dev.patrickgold.florisboard.app.settings.about.AboutScreen
 import dev.patrickgold.florisboard.app.settings.about.ProjectLicenseScreen
 import dev.patrickgold.florisboard.app.settings.about.ThirdPartyLicensesScreen
-import dev.patrickgold.florisboard.app.settings.advanced.AdvancedScreen
 import dev.patrickgold.florisboard.app.settings.advanced.BackupScreen
+import dev.patrickgold.florisboard.app.settings.advanced.OtherScreen
+import dev.patrickgold.florisboard.app.settings.advanced.PhysicalKeyboardScreen
 import dev.patrickgold.florisboard.app.settings.advanced.RestoreScreen
 import dev.patrickgold.florisboard.app.settings.clipboard.ClipboardScreen
 import dev.patrickgold.florisboard.app.settings.dictionary.DictionaryScreen
@@ -110,9 +111,10 @@ object Routes {
 
         const val Media = "settings/media"
 
-        const val Advanced = "settings/advanced"
-        const val Backup = "settings/advanced/backup"
-        const val Restore = "settings/advanced/restore"
+        const val Other = "settings/other"
+        const val PhysicalKeyboard = "settings/other/physical-keyboard"
+        const val Backup = "settings/other/backup"
+        const val Restore = "settings/other/restore"
 
         const val About = "settings/about"
         const val ProjectLicense = "settings/about/project-license"
@@ -239,7 +241,8 @@ object Routes {
 
             composableWithDeepLink(Settings.Media) { MediaScreen() }
 
-            composableWithDeepLink(Settings.Advanced) { AdvancedScreen() }
+            composableWithDeepLink(Settings.Other) { OtherScreen() }
+            composableWithDeepLink(Settings.PhysicalKeyboard) { PhysicalKeyboardScreen() }
             composableWithDeepLink(Settings.Backup) { BackupScreen() }
             composableWithDeepLink(Settings.Restore) { RestoreScreen() }
 

app/src/main/kotlin/dev/patrickgold/florisboard/app/apptheme/Theme.kt

@@ -17,19 +17,22 @@
 package dev.patrickgold.florisboard.app.apptheme
 
 import android.app.Activity
+import android.content.Context
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.material3.dynamicDarkColorScheme
-import androidx.compose.material3.dynamicLightColorScheme
-import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
 import dev.patrickgold.florisboard.app.AppTheme
+import dev.patrickgold.florisboard.app.florisPreferenceModel
+import dev.patrickgold.jetpref.datastore.model.observeAsState
 import org.florisboard.lib.android.AndroidVersion
+import org.florisboard.lib.color.ColorMappings
 
 /*private val AmoledDarkColorPalette = darkColorScheme(
     primary = Green500,
@@ -70,170 +73,66 @@ private val LightColorPalette = lightColorScheme(
     */
 )*/
 
-private val lightScheme = lightColorScheme(
-    primary = primaryLight,
-    onPrimary = onPrimaryLight,
-    primaryContainer = primaryContainerLight,
-    onPrimaryContainer = onPrimaryContainerLight,
-    secondary = secondaryLight,
-    onSecondary = onSecondaryLight,
-    secondaryContainer = secondaryContainerLight,
-    onSecondaryContainer = onSecondaryContainerLight,
-    tertiary = tertiaryLight,
-    onTertiary = onTertiaryLight,
-    tertiaryContainer = tertiaryContainerLight,
-    onTertiaryContainer = onTertiaryContainerLight,
-    error = errorLight,
-    onError = onErrorLight,
-    errorContainer = errorContainerLight,
-    onErrorContainer = onErrorContainerLight,
-    background = backgroundLight,
-    onBackground = onBackgroundLight,
-    surface = surfaceLight,
-    onSurface = onSurfaceLight,
-    surfaceVariant = surfaceVariantLight,
-    onSurfaceVariant = onSurfaceVariantLight,
-    outline = outlineLight,
-    outlineVariant = outlineVariantLight,
-    scrim = scrimLight,
-    inverseSurface = inverseSurfaceLight,
-    inverseOnSurface = inverseOnSurfaceLight,
-    inversePrimary = inversePrimaryLight,
-    surfaceDim = surfaceDimLight,
-    surfaceBright = surfaceBrightLight,
-    surfaceContainerLowest = surfaceContainerLowestLight,
-    surfaceContainerLow = surfaceContainerLowLight,
-    surfaceContainer = surfaceContainerLight,
-    surfaceContainerHigh = surfaceContainerHighLight,
-    surfaceContainerHighest = surfaceContainerHighestLight,
-)
 
-private val darkScheme = darkColorScheme(
-    primary = primaryDark,
-    onPrimary = onPrimaryDark,
-    primaryContainer = primaryContainerDark,
-    onPrimaryContainer = onPrimaryContainerDark,
-    secondary = secondaryDark,
-    onSecondary = onSecondaryDark,
-    secondaryContainer = secondaryContainerDark,
-    onSecondaryContainer = onSecondaryContainerDark,
-    tertiary = tertiaryDark,
-    onTertiary = onTertiaryDark,
-    tertiaryContainer = tertiaryContainerDark,
-    onTertiaryContainer = onTertiaryContainerDark,
-    error = errorDark,
-    onError = onErrorDark,
-    errorContainer = errorContainerDark,
-    onErrorContainer = onErrorContainerDark,
-    background = backgroundDark,
-    onBackground = onBackgroundDark,
-    surface = surfaceDark,
-    onSurface = onSurfaceDark,
-    surfaceVariant = surfaceVariantDark,
-    onSurfaceVariant = onSurfaceVariantDark,
-    outline = outlineDark,
-    outlineVariant = outlineVariantDark,
-    scrim = scrimDark,
-    inverseSurface = inverseSurfaceDark,
-    inverseOnSurface = inverseOnSurfaceDark,
-    inversePrimary = inversePrimaryDark,
-    surfaceDim = surfaceDimDark,
-    surfaceBright = surfaceBrightDark,
-    surfaceContainerLowest = surfaceContainerLowestDark,
-    surfaceContainerLow = surfaceContainerLowDark,
-    surfaceContainer = surfaceContainerDark,
-    surfaceContainerHigh = surfaceContainerHighDark,
-    surfaceContainerHighest = surfaceContainerHighestDark,
-)
+@Composable
+fun getColorScheme(
+    context: Context,
+    theme: AppTheme,
+): ColorScheme {
+    val prefs by florisPreferenceModel()
+    val accentColor by prefs.other.accentColor.observeAsState()
+    val isDark = isSystemInDarkTheme()
 
-private val amoledScheme = darkScheme.copy(
-    background = amoledDark,
-    surface = amoledDark
-)
+    return when (theme) {
+        AppTheme.AUTO -> {
+            if (isDark) {
+                ColorMappings.dynamicDarkColorScheme(context, accentColor)
+            } else {
+                ColorMappings.dynamicLightColorScheme(context, accentColor)
+            }
+        }
+
+        AppTheme.DARK -> {
+            ColorMappings.dynamicDarkColorScheme(context, accentColor)
+        }
+
+        AppTheme.LIGHT -> {
+            ColorMappings.dynamicLightColorScheme(context, accentColor)
+        }
+
+        AppTheme.AMOLED_DARK -> {
+            ColorMappings.dynamicDarkColorScheme(context, accentColor).amoled()
+        }
+
+        AppTheme.AUTO_AMOLED -> {
+            if (isDark) {
+                ColorMappings.dynamicDarkColorScheme(context, accentColor).amoled()
+            } else {
+                ColorMappings.dynamicLightColorScheme(context, accentColor)
+            }
+        }
+    }
+}
+
+fun ColorScheme.amoled(): ColorScheme {
+    return this.copy(background = Color.Black, surface = Color.Black)
+}
 
 @Composable
 fun FlorisAppTheme(
     theme: AppTheme,
-    isMaterialYouAware: Boolean,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
-
-    val colors = if (AndroidVersion.ATLEAST_API31_S) {
-        when (theme) {
-            AppTheme.AUTO -> when {
-                isMaterialYouAware -> when {
-                    isSystemInDarkTheme() -> dynamicDarkColorScheme(LocalContext.current)
-                    else -> dynamicLightColorScheme(LocalContext.current)
-                }
-
-                else -> {
-                    when {
-                        isSystemInDarkTheme() -> darkScheme
-                        else -> lightScheme
-                    }
-                }
-            }
-
-            AppTheme.AUTO_AMOLED -> when {
-                isMaterialYouAware -> when {
-                    isSystemInDarkTheme() -> dynamicDarkColorScheme(LocalContext.current).copy(
-                        background = amoledDark,
-                        surface = amoledDark,
-                    )
-
-                    else -> dynamicLightColorScheme(LocalContext.current)
-                }
-
-                else -> {
-                    when {
-                        isSystemInDarkTheme() -> amoledScheme
-                        else -> lightScheme
-                    }
-                }
-            }
-
-            AppTheme.LIGHT -> when {
-                isMaterialYouAware -> dynamicLightColorScheme(LocalContext.current)
-                else -> lightScheme
-            }
-
-            AppTheme.DARK -> when {
-                isMaterialYouAware -> dynamicDarkColorScheme(LocalContext.current)
-                else -> darkScheme
-            }
-
-            AppTheme.AMOLED_DARK -> when {
-                isMaterialYouAware -> dynamicDarkColorScheme(LocalContext.current).copy(
-                    background = amoledDark,
-                    surface = amoledDark,
-                )
-
-                else -> amoledScheme
-            }
-        }
-    } else {
-        when (theme) {
-            AppTheme.AUTO -> when {
-                isSystemInDarkTheme() -> darkScheme
-                else -> lightScheme
-            }
-
-            AppTheme.AUTO_AMOLED -> when {
-                isSystemInDarkTheme() -> darkScheme
-                else -> lightScheme
-            }
-
-            AppTheme.LIGHT -> lightScheme
-            AppTheme.DARK -> darkScheme
-            AppTheme.AMOLED_DARK -> amoledScheme
-        }
-    }
+    val colors = getColorScheme(
+        context = LocalContext.current,
+        theme = theme,
+    )
 
     val darkTheme =
         theme == AppTheme.DARK
-        || theme == AppTheme.AMOLED_DARK
-        || (theme == AppTheme.AUTO && isSystemInDarkTheme())
-        || (theme == AppTheme.AUTO_AMOLED && isSystemInDarkTheme())
+            || theme == AppTheme.AMOLED_DARK
+            || (theme == AppTheme.AUTO && isSystemInDarkTheme())
+            || (theme == AppTheme.AUTO_AMOLED && isSystemInDarkTheme())
 
     val view = LocalView.current
     if (!view.isInEditMode) {

app/src/main/kotlin/dev/patrickgold/florisboard/app/devtools/DevtoolsOverlay.kt

@@ -29,6 +29,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -43,13 +44,17 @@ import dev.patrickgold.florisboard.app.florisPreferenceModel
 import dev.patrickgold.florisboard.clipboardManager
 import dev.patrickgold.florisboard.editorInstance
 import dev.patrickgold.florisboard.ime.keyboard.CachedLayout
+import dev.patrickgold.florisboard.ime.keyboard.DebugLayoutComputationResult
 import dev.patrickgold.florisboard.ime.nlp.NlpInlineAutofill
+import dev.patrickgold.florisboard.ime.theme.ThemeManager
 import dev.patrickgold.florisboard.keyboardManager
 import dev.patrickgold.florisboard.lib.FlorisLocale
 import dev.patrickgold.florisboard.lib.observeAsNonNullState
 import dev.patrickgold.florisboard.nlpManager
+import dev.patrickgold.florisboard.themeManager
 import dev.patrickgold.jetpref.datastore.model.observeAsState
 import org.florisboard.lib.android.AndroidVersion
+import org.florisboard.lib.snygg.SnyggMissingSchemaException
 import java.text.SimpleDateFormat
 import java.util.*
 
@@ -61,15 +66,16 @@ fun DevtoolsOverlay(modifier: Modifier = Modifier) {
     val context = LocalContext.current
     val prefs by florisPreferenceModel()
     val keyboardManager by context.keyboardManager()
+    val themeManager by context.themeManager()
 
     val devtoolsEnabled by prefs.devtools.enabled.observeAsState()
     val showPrimaryClip by prefs.devtools.showPrimaryClip.observeAsState()
     val showInputStateOverlay by prefs.devtools.showInputStateOverlay.observeAsState()
-    val showLastLayoutComputation by prefs.devtools.showLastLayoutComputation.observeAsState()
     val showSpellingOverlay by prefs.devtools.showSpellingOverlay.observeAsState()
     val showInlineAutofillOverlay by prefs.devtools.showInlineAutofillOverlay.observeAsState()
 
     val debugLayoutResult by keyboardManager.layoutManager.debugLayoutComputationResultFlow.collectAsState()
+    val themeInfo by themeManager.activeThemeInfo.observeAsState()
 
     CompositionLocalProvider(
         LocalContentColor provides Color.White,
@@ -82,8 +88,8 @@ fun DevtoolsOverlay(modifier: Modifier = Modifier) {
             if (devtoolsEnabled && showInputStateOverlay) {
                 DevtoolsInputStateOverlay()
             }
-            if (devtoolsEnabled && showLastLayoutComputation || debugLayoutResult?.allLayoutsSuccess() == false) {
-                DevtoolsLastLayoutComputationOverlay()
+            if (debugLayoutResult?.allLayoutsSuccess() == false) {
+                DevtoolsLastLayoutComputationOverlay(debugLayoutResult)
             }
             if (devtoolsEnabled && showSpellingOverlay) {
                 DevtoolsSpellingOverlay()
@@ -91,6 +97,10 @@ fun DevtoolsOverlay(modifier: Modifier = Modifier) {
             if (devtoolsEnabled && showInlineAutofillOverlay && AndroidVersion.ATLEAST_API30_R) {
                 DevtoolsInlineAutofillOverlay()
             }
+            val loadFailure = themeInfo?.loadFailure
+            if (loadFailure != null) {
+                DevtoolsStylesheetFailedToLoadOverlay(loadFailure)
+            }
         }
     }
 }
@@ -137,13 +147,9 @@ private fun DevtoolsInputStateOverlay() {
 }
 
 @Composable
-private fun DevtoolsLastLayoutComputationOverlay() {
-    val context = LocalContext.current
-    val keyboardManager by context.keyboardManager()
-    val debugLayoutResult by keyboardManager.layoutManager.debugLayoutComputationResultFlow.collectAsState()
-
+private fun DevtoolsLastLayoutComputationOverlay(debugLayoutResult: DebugLayoutComputationResult?) {
     @Composable
-    fun PrintResult(result: Result<CachedLayout>) {
+    fun PrintResult(result: Result<CachedLayout?>) {
         if (result.isSuccess) {
             DevtoolsText(text = "loaded: ${result.getOrNull()?.name}")
         } else {
@@ -229,6 +235,39 @@ private fun DevtoolsInlineAutofillOverlay() {
     }
 }
 
+@Composable
+private fun DevtoolsStylesheetFailedToLoadOverlay(loadFailure: ThemeManager.LoadFailure) {
+    DevtoolsOverlayBox(title = "Failed to load stylesheet, fell back to base style") {
+        DevtoolsSubGroup(title = "Extension") {
+            DevtoolsText(text = "id:       ${loadFailure.extension.id}")
+            DevtoolsText(text = "title:    ${loadFailure.extension.title}")
+            DevtoolsText(text = "version:  ${loadFailure.extension.version}")
+        }
+        DevtoolsSubGroup(title = "Component") {
+            DevtoolsText(text = "id:       ${loadFailure.component.id}")
+            DevtoolsText(text = "label:    ${loadFailure.component.label}")
+            DevtoolsText(text = "path:     ${loadFailure.component.stylesheetPath()}")
+        }
+        val cause = loadFailure.cause
+        DevtoolsSubGroup(title = "Cause") {
+            DevtoolsText(text = "${cause.message}")
+        }
+        if (cause is SnyggMissingSchemaException) {
+            DevtoolsSubGroup(title = "Explanation") {
+                DevtoolsText(
+                    text = """
+                    It appears you’re trying to load a theme designed for FlorisBoard v0.4 (Snygg v1), which isn’t compatible with the latest release using Snygg v2.
+
+                    If you are the theme author, please update your theme to support Snygg v2.
+
+                    If you’re a user, please update your theme via the Addons Store. If an updated version isn’t available yet, please select one of the built-in themes during this transition period.
+                """.trimIndent()
+                )
+            }
+        }
+    }
+}
+
 @Composable
 private fun DevtoolsOverlayBox(
     title: String,

app/src/main/kotlin/dev/patrickgold/florisboard/app/devtools/DevtoolsScreen.kt

@@ -27,6 +27,8 @@ import dev.patrickgold.florisboard.app.Routes
 import dev.patrickgold.florisboard.extensionManager
 import dev.patrickgold.florisboard.ime.dictionary.DictionaryManager
 import dev.patrickgold.florisboard.ime.dictionary.FlorisUserDictionaryDatabase
+import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickActionArrangement
+import dev.patrickgold.florisboard.ime.smartbar.quickaction.QuickActionJsonConfig
 import org.florisboard.lib.android.AndroidSettings
 import org.florisboard.lib.android.showLongToast
 import dev.patrickgold.florisboard.lib.compose.FlorisConfirmDeleteDialog
@@ -73,12 +75,6 @@ fun DevtoolsScreen() = FlorisScreen {
                 summary = stringRes(R.string.devtools__show_input_state_overlay__summary),
                 enabledIf = { prefs.devtools.enabled isEqualTo true },
             )
-            SwitchPreference(
-                prefs.devtools.showLastLayoutComputation,
-                title = "Show last layout computation",
-                summary = "Show the last layout computation in a dialog",
-                enabledIf = { prefs.devtools.enabled isEqualTo true },
-            )
             SwitchPreference(
                 prefs.devtools.showSpellingOverlay,
                 title = stringRes(R.string.devtools__show_spelling_overlay__label),
@@ -110,6 +106,15 @@ fun DevtoolsScreen() = FlorisScreen {
                 onClick = { setShowDialog(true) },
                 enabledIf = { prefs.devtools.enabled isEqualTo true },
             )
+            Preference(
+                title = stringRes(R.string.devtools__reset_quick_actions_to_default__label),
+                summary = stringRes(R.string.devtools__reset_quick_actions_to_default__summary),
+                onClick = {
+                    prefs.smartbar.actionArrangement.set(QuickActionArrangement.Default)
+                    context.showLongToast(R.string.devtools__reset_quick_actions_to_default__toast_success)
+                },
+                enabledIf = { prefs.devtools.enabled isEqualTo true },
+            )
             Preference(
                 title = stringRes(R.string.devtools__reset_flag__label, "flag_name" to "isImeSetUp"),
                 summary = stringRes(R.string.devtools__reset_flag_is_ime_set_up__summary),
@@ -128,6 +133,13 @@ fun DevtoolsScreen() = FlorisScreen {
                 onClick = { navController.navigate(Routes.Devtools.ExportDebugLog) },
                 enabledIf = { prefs.devtools.enabled isEqualTo true },
             )
+            SwitchPreference(
+                prefs.glide.enabled,
+                title = "prefs.glide.enabled (debug)",
+                summaryOn = "This impacts your performance and may trigger the all keys invisible bug!",
+                summaryOff = "Recommended to keep this off!",
+                enabledIf = { prefs.devtools.enabled isEqualTo true },
+            )
         }
 
         PreferenceGroup(title = stringRes(R.string.devtools__group_android__title)) {

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/AddonBox.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Input
 import androidx.compose.material.icons.filled.Shop
 import androidx.compose.material.icons.outlined.FileDownload
 import androidx.compose.material3.MaterialTheme
@@ -29,6 +30,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import dev.patrickgold.florisboard.BuildConfig
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
@@ -41,6 +44,41 @@ import dev.patrickgold.florisboard.lib.ext.generateUpdateUrl
 import dev.patrickgold.florisboard.lib.util.launchUrl
 import org.florisboard.lib.kotlin.curlyFormat
 
+@Composable
+fun ImportExtensionBox(navController: NavController) {
+    val context = LocalContext.current
+    FlorisOutlinedBox(
+        modifier = Modifier.defaultFlorisOutlinedBox(),
+    ) {
+        Text(
+            modifier = Modifier.padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 4.dp),
+            text = stringRes(id = R.string.ext__home__info),
+            style = MaterialTheme.typography.bodySmall,
+        )
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 6.dp),
+        ) {
+            FlorisTextButton(
+                onClick = {
+                    context.launchUrl("https://${BuildConfig.FLADDONS_STORE_URL}/")
+                },
+                icon = Icons.Default.Shop,
+                text = stringRes(id = R.string.ext__home__visit_store),
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            FlorisTextButton(
+                onClick = {
+                    navController.navigate(Routes.Ext.Import(ExtensionImportScreenType.EXT_ANY, null))
+                },
+                icon = Icons.AutoMirrored.Filled.Input,
+                text = stringRes(R.string.action__import),
+            )
+        }
+    }
+}
+
 @Composable
 fun UpdateBox(extensionIndex: List<Extension>) {
     val context = LocalContext.current

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/ExtensionComponentView.kt

@@ -81,14 +81,11 @@ fun ExtensionComponentView(
             when (component) {
                 is ThemeExtensionComponent -> {
                     val text = remember(
-                        component.authors, component.isNightTheme, component.isBorderless,
-                        component.isMaterialYouAware, component.stylesheetPath(),
+                        component.authors, component.isNightTheme, component.stylesheetPath(),
                     ) {
                         buildString {
                             appendLine("authors = ${component.authors}")
                             appendLine("isNightTheme = ${component.isNightTheme}")
-                            appendLine("isBorderless = ${component.isBorderless}")
-                            appendLine("isMaterialYouAware = ${component.isMaterialYouAware}")
                             append("stylesheetPath = ${component.stylesheetPath()}")
                         }
                     }

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/ExtensionEditFilesScreen.kt

@@ -0,0 +1,290 @@
+/*
+ * Copyright (C) 2025 The FlorisBoard Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package dev.patrickgold.florisboard.app.ext
+
+import android.provider.OpenableColumns
+import androidx.activity.compose.BackHandler
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Photo
+import androidx.compose.material.icons.filled.TextFields
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import dev.patrickgold.florisboard.R
+import dev.patrickgold.florisboard.lib.cache.CacheManager
+import dev.patrickgold.florisboard.lib.compose.FlorisIconButton
+import dev.patrickgold.florisboard.lib.compose.FlorisScreen
+import dev.patrickgold.florisboard.lib.compose.stringRes
+import dev.patrickgold.jetpref.datastore.ui.Preference
+import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
+import dev.patrickgold.jetpref.material.ui.JetPrefTextField
+import java.io.File
+import java.util.*
+import org.florisboard.lib.android.query
+import org.florisboard.lib.android.readToFile
+import org.florisboard.lib.android.showLongToast
+import org.florisboard.lib.android.showShortToast
+import org.florisboard.lib.kotlin.io.parentDir
+import org.florisboard.lib.kotlin.io.subDir
+import org.florisboard.lib.kotlin.io.subFile
+import org.florisboard.lib.kotlin.mimeTypeFilterOf
+
+const val FONTS = "fonts"
+const val IMAGES = "images"
+
+val MIME_TYPES = mapOf(
+    FONTS to mimeTypeFilterOf(
+        // Source: https://www.alienfactory.co.uk/articles/mime-types-for-web-fonts-in-bedsheet#mimeTypes
+        "font/*",
+        "application/font-*",
+        "application/x-font-*",
+        "application/vnd.ms-fontobject",
+    ),
+    IMAGES to mimeTypeFilterOf(
+        "image/*",
+    ),
+)
+
+@Composable
+fun ExtensionEditFilesScreen(workspace: CacheManager.ExtEditorWorkspace<*>) = FlorisScreen {
+    title = stringRes(R.string.ext__editor__files__title)
+
+    fun handleBackPress() {
+        workspace.currentAction = null
+    }
+
+    navigationIcon {
+        FlorisIconButton(
+            onClick = { handleBackPress() },
+            icon = Icons.Default.Close,
+        )
+    }
+
+    content {
+        val context = LocalContext.current
+        var version by rememberSaveable { mutableIntStateOf(0) }
+        val fontFiles = remember(version) {
+            workspace.extDir.subDir(FONTS).listFiles { it.isFile }.orEmpty().asList()
+        }
+        val imageFiles = remember(version) {
+            workspace.extDir.subDir(IMAGES).listFiles { it.isFile }.orEmpty().asList()
+        }
+
+        var currentImportDest by remember { mutableStateOf<String?>(null) }
+        var currentImportResult by remember { mutableStateOf<Result<Pair<File, String>>?>(null) }
+
+        val importLauncher = rememberLauncherForActivityResult(
+            contract = ActivityResultContracts.GetContent(),
+            onResult = { uri ->
+                currentImportResult = runCatching {
+                    checkNotNull(uri) { "" }
+                    val tempFile = context.cacheDir.subFile("temp_${UUID.randomUUID()}")
+                    context.contentResolver.readToFile(uri, tempFile)
+                    val mimeType = context.contentResolver.getType(uri)
+                    val filter = MIME_TYPES[currentImportDest!!]!!
+                    check(filter.matches(mimeType)) {
+                        "Given file mime type was '$mimeType', expected one of ${filter.types}"
+                    }
+                    val fileName = context.contentResolver.query(uri, arrayOf(OpenableColumns.DISPLAY_NAME)).use { cursor ->
+                        if (cursor == null || !cursor.moveToFirst()) return@use null
+                        val name = cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME)
+                        cursor.getString(name)
+                    }
+                    tempFile to fileName.orEmpty()
+                }
+            },
+        )
+
+        LaunchedEffect(currentImportResult) {
+            val message = currentImportResult?.exceptionOrNull()?.message
+            if (!message.isNullOrBlank()) {
+                context.showLongToast(message)
+            }
+        }
+
+        BackHandler {
+            handleBackPress()
+        }
+
+        @Composable
+        fun FileList(title: String, icon: ImageVector, files: List<File>, onAdd: () -> Unit) {
+            var dialogFile by remember { mutableStateOf<File?>(null) }
+            ListItem(
+                headlineContent = {
+                    Text(
+                        text = title,
+                        color = MaterialTheme.colorScheme.secondary,
+                        fontWeight = FontWeight.Bold,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                leadingContent = {
+                    Spacer(modifier = Modifier.width(24.dp))
+                },
+                trailingContent = {
+                    IconButton(
+                        onClick = onAdd,
+                    ) {
+                        Icon(Icons.Default.Add, null)
+                    }
+                },
+            )
+            for (file in files) {
+                Preference(
+                    onClick = {
+                        dialogFile = file
+                    },
+                    icon = icon,
+                    title = file.name,
+                )
+            }
+
+            dialogFile?.let { file ->
+                var fileNameInput by rememberSaveable { mutableStateOf(file.name) }
+                JetPrefAlertDialog(
+                    title = stringRes(R.string.general__properties),
+                    confirmLabel = stringRes(R.string.action__apply),
+                    dismissLabel = stringRes(R.string.action__cancel),
+                    neutralLabel = stringRes(R.string.action__delete),
+                    allowOutsideDismissal = true,
+                    onNeutral = {
+                        if (file.delete()) {
+                            context.showShortToast("Successfully deleted")
+                        } else {
+                            context.showShortToast("Failed to delete")
+                        }
+                        dialogFile = null
+                        version++
+                    },
+                    onConfirm = {
+                        val newFile = file.parentFile!!.subFile(fileNameInput).canonicalFile
+                        if (newFile.parentFile != file.canonicalFile.parentFile) {
+                            context.showLongToast("Invalid file name!")
+                            return@JetPrefAlertDialog
+                        }
+                        if (newFile.exists()) {
+                            context.showShortToast("Filename already exists.")
+                            return@JetPrefAlertDialog
+                        }
+                        val success = file.renameTo(newFile)
+                        if (success) {
+                            context.showShortToast("Successfully renamed")
+                        } else {
+                            context.showShortToast("Failed to rename the file.")
+                        }
+                        dialogFile = null
+                        version++
+                    },
+                    onDismiss = {
+                        dialogFile = null
+                    },
+                ) {
+                    JetPrefTextField(
+                        labelText = stringRes(R.string.general__file_name),
+                        value = fileNameInput,
+                        onValueChange = { fileNameInput = it },
+                        singleLine = true,
+                    )
+                }
+            }
+        }
+
+        FileList(
+            title = stringRes(R.string.ext__editor__files__type_fonts),
+            icon = Icons.Default.TextFields,
+            files = fontFiles,
+        ) {
+            currentImportDest = FONTS
+            importLauncher.launch("*/*")
+        }
+
+        FileList(
+            title = stringRes(R.string.ext__editor__files__type_images),
+            icon = Icons.Default.Photo,
+            files = imageFiles,
+        ) {
+            currentImportDest = IMAGES
+            importLauncher.launch("*/*")
+        }
+
+        val dest = currentImportDest
+        val result = currentImportResult?.getOrNull()
+        if (dest != null && result != null) {
+            var fileNameInput by rememberSaveable { mutableStateOf(result.second) }
+            JetPrefAlertDialog(
+                title = stringRes(R.string.action__import_file),
+                confirmLabel = stringRes(R.string.action__add),
+                onConfirm = {
+                    val fileName = fileNameInput.trim()
+                    val dir = workspace.extDir.subDir(dest)
+                    dir.mkdirs()
+                    val file = dir.subFile(fileName)
+                    if (file.parentDir != workspace.extDir.subDir(dest)) {
+                        context.showShortToast("Invalid file name")
+                    } else if (file.exists()) {
+                        context.showShortToast("File already exists")
+                    } else {
+                        val tempFile = result.first
+                        if (!tempFile.renameTo(file)) {
+                            context.showShortToast("Failed to rename file")
+                            tempFile.delete()
+                        }
+                        currentImportDest = null
+                        currentImportResult = null
+                        version++
+                    }
+                },
+                dismissLabel = stringRes(R.string.action__cancel),
+                onDismiss = {
+                    val tempFile = result.first
+                    tempFile.delete()
+                    currentImportDest = null
+                    currentImportResult = null
+                },
+            ) {
+                JetPrefTextField(
+                    value = fileNameInput,
+                    onValueChange = { fileNameInput = it },
+                    singleLine = true,
+                )
+            }
+        }
+    }
+}

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/ExtensionEditScreen.kt

@@ -34,7 +34,6 @@ import androidx.compose.material.icons.automirrored.outlined.LibraryBooks
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Code
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -49,6 +48,7 @@ import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.settings.advanced.RadioListItem
 import dev.patrickgold.florisboard.app.settings.theme.DialogProperty
+import dev.patrickgold.florisboard.app.settings.theme.PrettyPrintConfig
 import dev.patrickgold.florisboard.app.settings.theme.ThemeEditorScreen
 import dev.patrickgold.florisboard.cacheManager
 import dev.patrickgold.florisboard.extensionManager
@@ -64,9 +64,9 @@ import dev.patrickgold.florisboard.lib.compose.FlorisButtonBar
 import dev.patrickgold.florisboard.lib.compose.FlorisIconButton
 import dev.patrickgold.florisboard.lib.compose.FlorisInfoCard
 import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedBox
-import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedTextField
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.FlorisUnsavedChangesDialog
+import dev.patrickgold.florisboard.lib.compose.Validation
 import dev.patrickgold.florisboard.lib.compose.defaultFlorisOutlinedBox
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.florisboard.lib.ext.Extension
@@ -83,15 +83,17 @@ import dev.patrickgold.florisboard.lib.ext.validate
 import dev.patrickgold.florisboard.lib.io.FlorisRef
 import dev.patrickgold.florisboard.lib.io.ZipUtils
 import dev.patrickgold.florisboard.lib.rememberValidationResult
-import org.florisboard.lib.snygg.SnyggStylesheetJsonConfig
 import dev.patrickgold.florisboard.themeManager
 import dev.patrickgold.jetpref.datastore.ui.Preference
 import dev.patrickgold.jetpref.datastore.ui.vectorResource
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
+import dev.patrickgold.jetpref.material.ui.JetPrefTextField
+import java.util.*
 import org.florisboard.lib.android.showLongToast
+import org.florisboard.lib.kotlin.io.deleteContentsRecursively
+import org.florisboard.lib.kotlin.io.subDir
 import org.florisboard.lib.kotlin.io.subFile
 import org.florisboard.lib.kotlin.io.writeJson
-import java.util.UUID
 import kotlin.reflect.KClass
 
 private val TextFieldVerticalPadding = 8.dp
@@ -197,7 +199,7 @@ private fun ExtensionEditScreenSheetSwitcher(
                     ManageDependenciesScreen(workspace)
                 }
                 is EditorAction.ManageFiles -> {
-                    ManageFilesScreen(workspace)
+                    ExtensionEditFilesScreen(workspace)
                 }
                 is EditorAction.CreateComponent<*> -> {
                     CreateComponentScreen(workspace, action.type)
@@ -261,17 +263,33 @@ private fun EditScreen(
             return
         }
         val manifest = extEditor.build()
+        workspace.saverDir.deleteContentsRecursively()
         val manifestFile = workspace.saverDir.subFile(ExtensionDefaults.MANIFEST_FILE_NAME)
         manifestFile.writeJson(manifest, ExtensionJsonConfig)
         when (extEditor) {
             is ThemeExtensionEditor -> {
+                // TODO: this is hacky
+                val fonts = workspace.extDir.subDir("fonts")
+                if (fonts.exists()) {
+                    fonts.copyRecursively(workspace.saverDir.subDir("fonts"), overwrite = true)
+                }
+                val images = workspace.extDir.subDir("images")
+                if (images.exists()) {
+                    images.copyRecursively(workspace.saverDir.subDir("images"), overwrite = true)
+                }
                 for (theme in extEditor.themes) {
                     val stylesheetFile = workspace.saverDir.subFile(theme.stylesheetPath())
                     stylesheetFile.parentFile?.mkdirs()
                     val stylesheetEditor = theme.stylesheetEditor
                     if (stylesheetEditor != null) {
-                        val stylesheet = stylesheetEditor.build()
-                        stylesheetFile.writeJson(stylesheet, SnyggStylesheetJsonConfig)
+                        runCatching {
+                            val stylesheet = stylesheetEditor.build().toJson(PrettyPrintConfig).getOrThrow()
+                            stylesheetFile.writeText(stylesheet)
+                        }.onFailure {
+                            // TODO: better error handling
+                            context.showLongToast(it.message.toString())
+                            return
+                        }
                     } else {
                         val unmodifiedStylesheetFile = workspace.extDir.subFile(theme.stylesheetPath())
                         if (unmodifiedStylesheetFile.exists()) {
@@ -582,35 +600,6 @@ private fun ManageDependenciesScreen(workspace: CacheManager.ExtEditorWorkspace<
     }
 }
 
-@Composable
-private fun ManageFilesScreen(workspace: CacheManager.ExtEditorWorkspace<*>) = FlorisScreen {
-    title = stringRes(R.string.ext__editor__files__title)
-
-    fun handleBackPress() {
-        workspace.currentAction = null
-    }
-
-    navigationIcon {
-        FlorisIconButton(
-            onClick = { handleBackPress() },
-            icon = Icons.Default.Close,
-        )
-    }
-
-    content {
-        BackHandler {
-            handleBackPress()
-        }
-
-        FlorisInfoCard(
-            modifier = Modifier.padding(all = 8.dp),
-            text = """
-                Managing archive files is currently not supported.
-                """.trimIndent().replace('\n', ' '),
-        )
-    }
-}
-
 private enum class CreateFrom {
     EMPTY,
     EXISTING;
@@ -703,15 +692,14 @@ private fun <T : ExtensionComponent> CreateComponentScreen(
                                 val component = editor.themes.find { it.id == componentName.componentId } ?: return
                                 val componentEditor = component.let { c ->
                                     ThemeExtensionComponentEditor(
-                                        componentId, c.label, c.authors, c.isNightTheme, c.isBorderless,
-                                        c.isMaterialYouAware, stylesheetPath = "",
+                                        componentId, c.label, c.authors, c.isNightTheme, stylesheetPath = "",
                                     ).also { it.stylesheetEditor = c.stylesheetEditor }
                                 }
                                 if (componentEditor.stylesheetEditor != null) {
-                                    val stylesheet = componentEditor.stylesheetEditor!!.build()
                                     val stylesheetFile = workspace.extDir.subFile(componentEditor.stylesheetPath())
                                     stylesheetFile.parentFile?.mkdirs()
-                                    stylesheetFile.writeJson(stylesheet, SnyggStylesheetJsonConfig)
+                                    val stylesheet = componentEditor.stylesheetEditor!!.build().toJson(PrettyPrintConfig).getOrThrow()
+                                    stylesheetFile.writeText(stylesheet)
                                     componentEditor.stylesheetEditor = null
                                 } else {
                                     val srcStylesheetFile = workspace.extDir.subFile(component.stylesheetPath())
@@ -813,36 +801,37 @@ private fun <T : ExtensionComponent> CreateComponentScreen(
                 modifier = Modifier.padding(horizontal = 16.dp),
                 text = stringRes(R.string.ext__meta__id),
             ) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
+                    modifier = Modifier.fillMaxWidth(),
                     value = newId,
                     onValueChange = { newId = it },
                     singleLine = true,
-                    showValidationError = showValidationErrors,
-                    validationResult = newIdValidation,
                 )
+                Validation(showValidationErrors, newIdValidation)
             }
             DialogProperty(
                 modifier = Modifier.padding(horizontal = 16.dp),
                 text = stringRes(R.string.ext__meta__label),
             ) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
+                    modifier = Modifier.fillMaxWidth(),
                     value = newLabel,
                     onValueChange = { newLabel = it },
                     singleLine = true,
-                    showValidationError = showValidationErrors,
-                    validationResult = newLabelValidation,
                 )
+                Validation(showValidationErrors, newLabelValidation)
+
             }
             DialogProperty(
                 modifier = Modifier.padding(horizontal = 16.dp),
                 text = stringRes(R.string.ext__meta__authors),
             ) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
+                    modifier = Modifier.fillMaxWidth(),
                     value = newAuthors,
                     onValueChange = { newAuthors = it },
-                    showValidationError = showValidationErrors,
-                    validationResult = newAuthorsValidation,
                 )
+                Validation(showValidationErrors, newAuthorsValidation)
             }
         }
     }
@@ -860,7 +849,6 @@ private fun EditorSheetTextField(
     showValidationError: Boolean = false,
     validationResult: ValidationResult? = null,
 ) {
-    val borderColor = MaterialTheme.colorScheme.outline
     Column(modifier = Modifier.padding(vertical = TextFieldVerticalPadding)) {
         Row(
             modifier = Modifier
@@ -880,18 +868,13 @@ private fun EditorSheetTextField(
                 )
             }
         }
-        FlorisOutlinedTextField(
+        JetPrefTextField(
             modifier = modifier.fillMaxWidth(),
             enabled = enabled,
             value = value,
             onValueChange = onValueChange,
             singleLine = singleLine,
-            showValidationError = showValidationError,
-            validationResult = validationResult,
-            colors = OutlinedTextFieldDefaults.colors(
-                unfocusedBorderColor = borderColor,
-                disabledBorderColor = borderColor,
-            )
         )
+        Validation(showValidationError, validationResult)
     }
 }

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/ExtensionHomeScreen.kt

@@ -16,33 +16,18 @@
 
 package dev.patrickgold.florisboard.app.ext
 
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.Input
 import androidx.compose.material.icons.filled.Keyboard
 import androidx.compose.material.icons.filled.Language
 import androidx.compose.material.icons.filled.Palette
-import androidx.compose.material.icons.filled.Shop
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.unit.dp
-import dev.patrickgold.florisboard.BuildConfig
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
 import dev.patrickgold.florisboard.extensionManager
-import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedBox
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
-import dev.patrickgold.florisboard.lib.compose.FlorisTextButton
-import dev.patrickgold.florisboard.lib.compose.defaultFlorisOutlinedBox
 import dev.patrickgold.florisboard.lib.compose.stringRes
-import dev.patrickgold.florisboard.lib.util.launchUrl
 import dev.patrickgold.jetpref.datastore.ui.Preference
 
 @Composable
@@ -56,36 +41,7 @@ fun ExtensionHomeScreen() = FlorisScreen {
     val extensionIndex = extensionManager.combinedExtensionList()
 
     content {
-        FlorisOutlinedBox(
-            modifier = Modifier.defaultFlorisOutlinedBox(),
-        ) {
-            Text(
-                modifier = Modifier.padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 4.dp),
-                text = stringRes(id = R.string.ext__home__info),
-                style = MaterialTheme.typography.bodySmall,
-            )
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 6.dp),
-            ) {
-                FlorisTextButton(
-                    onClick = {
-                        context.launchUrl("https://${BuildConfig.FLADDONS_STORE_URL}/")
-                    },
-                    icon = Icons.Default.Shop,
-                    text = stringRes(id = R.string.ext__home__visit_store),
-                )
-                Spacer(modifier = Modifier.weight(1f))
-                FlorisTextButton(
-                    onClick = {
-                        navController.navigate(Routes.Ext.Import(ExtensionImportScreenType.EXT_ANY, null))
-                    },
-                    icon = Icons.AutoMirrored.Filled.Input,
-                    text = stringRes(R.string.action__import),
-                )
-            }
-        }
+        ImportExtensionBox(navController)
 
         UpdateBox(extensionIndex = extensionIndex)
 

app/src/main/kotlin/dev/patrickgold/florisboard/app/ext/ExtensionListScreen.kt

@@ -113,6 +113,9 @@ fun ExtensionListScreen(type: ExtensionListScreenType, showUpdate: Boolean) = Fl
             contentPadding = PaddingValues(bottom = fabHeightDp),
         ) {
             if (showUpdate) {
+                item {
+                    ImportExtensionBox(navController)
+                }
                 item {
                     UpdateBox(extensionIndex = extensionIndex)
                 }

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/HomeScreen.kt

@@ -152,8 +152,8 @@ fun HomeScreen() = FlorisScreen {
         )
         Preference(
             icon = Icons.Outlined.Build,
-            title = stringRes(R.string.settings__advanced__title),
-            onClick = { navController.navigate(Routes.Settings.Advanced) },
+            title = stringRes(R.string.settings__other__title),
+            onClick = { navController.navigate(Routes.Settings.Other) },
         )
         Preference(
             icon = Icons.Outlined.Info,

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/about/ThirdPartyLicensesScreen.kt

@@ -21,8 +21,9 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.mikepenz.aboutlibraries.ui.compose.LibraryDefaults
 import com.mikepenz.aboutlibraries.ui.compose.m3.LibrariesContainer
-import com.mikepenz.aboutlibraries.ui.compose.m3.LibraryDefaults
+import com.mikepenz.aboutlibraries.ui.compose.m3.libraryColors
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.florisScrollbar

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/advanced/OtherScreen.kt

@@ -19,58 +19,72 @@ package dev.patrickgold.florisboard.app.settings.advanced
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Adb
 import androidx.compose.material.icons.filled.Archive
-import androidx.compose.material.icons.filled.FormatPaint
+import androidx.compose.material.icons.filled.FormatColorFill
 import androidx.compose.material.icons.filled.Language
 import androidx.compose.material.icons.filled.Palette
 import androidx.compose.material.icons.filled.Preview
 import androidx.compose.material.icons.filled.SettingsBackupRestore
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.AppTheme
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
 import dev.patrickgold.florisboard.app.enumDisplayEntriesOf
 import dev.patrickgold.florisboard.ime.core.DisplayLanguageNamesIn
-import dev.patrickgold.florisboard.ime.keyboard.IncognitoMode
 import dev.patrickgold.florisboard.lib.FlorisLocale
-import org.florisboard.lib.android.AndroidVersion
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.jetpref.datastore.model.observeAsState
+import dev.patrickgold.jetpref.datastore.ui.ColorPickerPreference
 import dev.patrickgold.jetpref.datastore.ui.ListPreference
 import dev.patrickgold.jetpref.datastore.ui.Preference
 import dev.patrickgold.jetpref.datastore.ui.PreferenceGroup
 import dev.patrickgold.jetpref.datastore.ui.SwitchPreference
+import dev.patrickgold.jetpref.datastore.ui.isMaterialYou
 import dev.patrickgold.jetpref.datastore.ui.listPrefEntries
 import dev.patrickgold.jetpref.datastore.ui.vectorResource
+import org.florisboard.lib.android.AndroidVersion
+import org.florisboard.lib.color.ColorMappings
+
 
 @Composable
-fun AdvancedScreen() = FlorisScreen {
-    title = stringRes(R.string.settings__advanced__title)
+fun OtherScreen() = FlorisScreen {
+    title = stringRes(R.string.settings__other__title)
     previewFieldVisible = false
 
     val navController = LocalNavController.current
+    val context = LocalContext.current
 
     content {
         ListPreference(
-            prefs.advanced.settingsTheme,
+            prefs.other.settingsTheme,
             icon = Icons.Default.Palette,
-            title = stringRes(R.string.pref__advanced__settings_theme__label),
+            title = stringRes(R.string.pref__other__settings_theme__label),
             entries = enumDisplayEntriesOf(AppTheme::class),
         )
-        SwitchPreference(
-            pref = prefs.advanced.useMaterialYou,
-            icon = Icons.Default.FormatPaint,
-            title = stringRes(R.string.pref__advanced__settings_material_you__label),
-            visibleIf = {
-                AndroidVersion.ATLEAST_API31_S
-            },
+        ColorPickerPreference(
+            pref = prefs.other.accentColor,
+            title = stringRes(R.string.pref__other__settings_accent_color__label),
+            defaultValueLabel = stringRes(R.string.action__default),
+            icon = Icons.Default.FormatColorFill,
+            defaultColors = ColorMappings.colors,
+            showAlphaSlider = false,
+            enableAdvancedLayout = false,
+            colorOverride = {
+                if (it.isMaterialYou(context)) {
+                    Color.Unspecified
+                } else {
+                    it
+                }
+            }
         )
         ListPreference(
-            prefs.advanced.settingsLanguage,
+            prefs.other.settingsLanguage,
             icon = Icons.Default.Language,
-            title = stringRes(R.string.pref__advanced__settings_language__label),
+            title = stringRes(R.string.pref__other__settings_language__label),
             entries = listPrefEntries {
                 listOf(
                     "auto",
@@ -132,20 +146,19 @@ fun AdvancedScreen() = FlorisScreen {
             }
         )
         SwitchPreference(
-            prefs.advanced.showAppIcon,
+            prefs.other.showAppIcon,
             icon = Icons.Default.Preview,
-            title = stringRes(R.string.pref__advanced__show_app_icon__label),
+            title = stringRes(R.string.pref__other__show_app_icon__label),
             summary = when {
-                AndroidVersion.ATLEAST_API29_Q -> stringRes(R.string.pref__advanced__show_app_icon__summary_atleast_q)
+                AndroidVersion.ATLEAST_API29_Q -> stringRes(R.string.pref__other__show_app_icon__summary_atleast_q)
                 else -> null
             },
             enabledIf = { AndroidVersion.ATMOST_API28_P },
         )
-        ListPreference(
-            prefs.advanced.incognitoMode,
-            icon = vectorResource(id = R.drawable.ic_incognito),
-            title = stringRes(R.string.pref__advanced__incognito_mode__label),
-            entries = enumDisplayEntriesOf(IncognitoMode::class),
+        Preference(
+            icon = vectorResource(R.drawable.ic_keyboard_keys),
+            title = stringRes(R.string.physical_keyboard__title),
+            onClick = { navController.navigate(Routes.Settings.PhysicalKeyboard) },
         )
         Preference(
             icon = Icons.Default.Adb,

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/advanced/PhysicalKeyboardScreen.kt

@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2025 The FlorisBoard Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package dev.patrickgold.florisboard.app.settings.advanced
+
+import android.content.Intent
+import android.content.res.Configuration
+import android.provider.Settings
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
+import dev.patrickgold.florisboard.R
+import dev.patrickgold.florisboard.lib.compose.FlorisScreen
+import dev.patrickgold.florisboard.lib.compose.stringRes
+import dev.patrickgold.jetpref.datastore.ui.Preference
+import dev.patrickgold.jetpref.datastore.ui.SwitchPreference
+
+@Composable
+fun PhysicalKeyboardScreen() = FlorisScreen {
+    title = stringRes(R.string.physical_keyboard__title)
+
+    val context = LocalContext.current
+    val physicalKeyboardAttached by remember {
+        mutableStateOf(context.resources.configuration.keyboard != Configuration.KEYBOARD_NOKEYS)
+    }
+
+    val activityForResult = rememberLauncherForActivityResult(
+        ActivityResultContracts.StartActivityForResult()
+    ) { }
+
+    content {
+        if (physicalKeyboardAttached) {
+            Preference(
+                title = stringRes(R.string.physical_keyboard__system_settings__title),
+                summary = stringRes(R.string.physical_keyboard__system_settings__summary),
+                onClick = {
+                    activityForResult.launch(Intent(Settings.ACTION_HARD_KEYBOARD_SETTINGS))
+                }
+            )
+        } else {
+            Preference(
+                title = stringRes(R.string.physical_keyboard__system_settings__title),
+                summary = stringRes(R.string.physical_keyboard__system_settings__summary_not_attached),
+            )
+        }
+        SwitchPreference(
+            pref = prefs.physicalKeyboard.showOnScreenKeyboard,
+            title = stringRes(R.string.physical_keyboard__show_on_screen_keyboard__title),
+            summary = stringRes(R.string.physical_keyboard__show_on_screen_keyboard__summary),
+        )
+    }
+}

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/clipboard/ClipboardScreen.kt

@@ -18,6 +18,7 @@ package dev.patrickgold.florisboard.app.settings.clipboard
 
 import androidx.compose.runtime.Composable
 import dev.patrickgold.florisboard.R
+import dev.patrickgold.florisboard.ime.clipboard.CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.pluralsRes
 import dev.patrickgold.florisboard.lib.compose.stringRes
@@ -52,12 +53,47 @@ fun ClipboardScreen() = FlorisScreen {
             enabledIf = { prefs.clipboard.useInternalClipboard isEqualTo true },
         )
 
+        PreferenceGroup(title = stringRes(R.string.pref__clipboard__group_clipboard_suggestion__label)) {
+            SwitchPreference(
+                prefs.clipboard.suggestionEnabled,
+                title = stringRes(R.string.pref__clipboard__suggestion_enabled__label),
+                summary = stringRes(R.string.pref__clipboard__suggestion_enabled__summary),
+            )
+            DialogSliderPreference(
+                prefs.clipboard.suggestionTimeout,
+                title = stringRes(R.string.pref__clipboard__suggestion_timeout__label),
+                valueLabel = { stringRes(R.string.pref__clipboard__suggestion_timeout__summary, "v" to it) },
+                min = 30,
+                max = 300,
+                stepIncrement = 5,
+                enabledIf = { prefs.clipboard.suggestionEnabled isEqualTo true },
+            )
+        }
+
         PreferenceGroup(title = stringRes(R.string.pref__clipboard__group_clipboard_history__label)) {
             SwitchPreference(
                 prefs.clipboard.historyEnabled,
                 title = stringRes(R.string.pref__clipboard__enable_clipboard_history__label),
                 summary = stringRes(R.string.pref__clipboard__enable_clipboard_history__summary),
             )
+            DialogSliderPreference(
+                primaryPref = prefs.clipboard.numHistoryGridColumnsPortrait,
+                secondaryPref = prefs.clipboard.numHistoryGridColumnsLandscape,
+                title = stringRes(R.string.pref__clipboard__num_history_grid_columns__label),
+                primaryLabel = stringRes(R.string.screen_orientation__portrait),
+                secondaryLabel = stringRes(R.string.screen_orientation__landscape),
+                valueLabel = { numGridColumns ->
+                    if (numGridColumns == CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO) {
+                        stringRes(R.string.general__auto)
+                    } else {
+                        numGridColumns.toString()
+                    }
+                },
+                min = 0,
+                max = 10,
+                stepIncrement = 1,
+                enabledIf = { prefs.clipboard.historyEnabled isEqualTo true },
+            )
             SwitchPreference(
                 prefs.clipboard.cleanUpOld,
                 title = stringRes(R.string.pref__clipboard__clean_up_old__label),

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/dictionary/UserDictionaryScreen.kt

@@ -56,14 +56,15 @@ import dev.patrickgold.florisboard.ime.dictionary.UserDictionaryEntry
 import dev.patrickgold.florisboard.ime.dictionary.UserDictionaryValidation
 import dev.patrickgold.florisboard.lib.FlorisLocale
 import dev.patrickgold.florisboard.lib.compose.FlorisIconButton
-import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedTextField
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
+import dev.patrickgold.florisboard.lib.compose.Validation
 import dev.patrickgold.florisboard.lib.compose.rippleClickable
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.florisboard.lib.rememberValidationResult
 import dev.patrickgold.florisboard.lib.util.launchActivity
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
 import dev.patrickgold.jetpref.material.ui.JetPrefListItem
+import dev.patrickgold.jetpref.material.ui.JetPrefTextField
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.florisboard.lib.android.showLongToast
@@ -366,39 +367,35 @@ fun UserDictionaryScreen(type: UserDictionaryType) = FlorisScreen {
             ) {
                 Column {
                     DialogProperty(text = stringRes(R.string.settings__udm__dialog__word_label)) {
-                        FlorisOutlinedTextField(
+                        JetPrefTextField(
                             value = word,
                             onValueChange = { word = it },
-                            showValidationError = showValidationErrors,
-                            validationResult = wordValidation,
                         )
+                        Validation(showValidationErrors, wordValidation)
                     }
                     DialogProperty(text = stringRes(
                         R.string.settings__udm__dialog__freq_label,
                         "f_min" to FREQUENCY_MIN, "f_max" to FREQUENCY_MAX,
                     )) {
-                        FlorisOutlinedTextField(
+                        JetPrefTextField(
                             value = freq,
                             onValueChange = { freq = it },
-                            showValidationError = showValidationErrors,
-                            validationResult = freqValidation,
                         )
+                        Validation(showValidationErrors, freqValidation)
                     }
                     DialogProperty(text = stringRes(R.string.settings__udm__dialog__shortcut_label)) {
-                        FlorisOutlinedTextField(
+                        JetPrefTextField(
                             value = shortcut,
                             onValueChange = { shortcut = it },
-                            showValidationError = showValidationErrors,
-                            validationResult = shortcutValidation,
                         )
+                        Validation(showValidationErrors, shortcutValidation)
                     }
                     DialogProperty(text = stringRes(R.string.settings__udm__dialog__locale_label)) {
-                        FlorisOutlinedTextField(
+                        JetPrefTextField(
                             value = locale,
                             onValueChange = { locale = it },
-                            showValidationError = showValidationErrors,
-                            validationResult = localeValidation,
                         )
+                        Validation(showValidationErrors, localeValidation)
                     }
                 }
             }

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/keyboard/InputFeedbackScreen.kt

@@ -20,11 +20,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.enumDisplayEntriesOf
-import dev.patrickgold.florisboard.ime.input.InputFeedbackActivationMode
 import dev.patrickgold.florisboard.ime.input.HapticVibrationMode
-import org.florisboard.lib.android.AndroidVersion
-import org.florisboard.lib.android.systemVibratorOrNull
-import org.florisboard.lib.android.vibrate
+import dev.patrickgold.florisboard.ime.input.InputFeedbackActivationMode
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.jetpref.datastore.ui.DialogSliderPreference
@@ -32,6 +29,8 @@ import dev.patrickgold.jetpref.datastore.ui.ExperimentalJetPrefDatastoreUi
 import dev.patrickgold.jetpref.datastore.ui.ListPreference
 import dev.patrickgold.jetpref.datastore.ui.PreferenceGroup
 import dev.patrickgold.jetpref.datastore.ui.SwitchPreference
+import org.florisboard.lib.android.systemVibratorOrNull
+import org.florisboard.lib.android.vibrate
 
 @OptIn(ExperimentalJetPrefDatastoreUi::class)
 @Composable
@@ -138,8 +137,6 @@ fun InputFeedbackScreen() = FlorisScreen {
                 summary = { strength ->
                     if (vibrator == null || !vibrator.hasVibrator()) {
                         stringRes(R.string.pref__input_feedback__haptic_vibration_strength__summary_no_vibrator)
-                    } else if (AndroidVersion.ATMOST_API25_N_MR1) {
-                        stringRes(R.string.pref__input_feedback__haptic_vibration_strength__summary_unsupported_android_version)
                     } else if (!vibrator.hasAmplitudeControl()) {
                         stringRes(R.string.pref__input_feedback__haptic_vibration_strength__summary_no_amplitude_ctrl)
                     } else {
@@ -157,7 +154,7 @@ fun InputFeedbackScreen() = FlorisScreen {
                     prefs.inputFeedback.hapticEnabled isEqualTo true &&
                         prefs.inputFeedback.hapticVibrationMode isEqualTo HapticVibrationMode.USE_VIBRATOR_DIRECTLY &&
                         vibrator != null && vibrator.hasVibrator() &&
-                        AndroidVersion.ATLEAST_API26_O && vibrator.hasAmplitudeControl()
+                        vibrator.hasAmplitudeControl()
                 },
             )
             SwitchPreference(

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/keyboard/KeyboardScreen.kt

@@ -107,8 +107,10 @@ fun KeyboardScreen() = FlorisScreen {
         PreferenceGroup(title = stringRes(R.string.pref__keyboard__group_layout__label)) {
             ListPreference(
                 prefs.keyboard.oneHandedMode,
+                prefs.keyboard.oneHandedModeEnabled,
                 title = stringRes(R.string.pref__keyboard__one_handed_mode__label),
                 entries = enumDisplayEntriesOf(OneHandedMode::class),
+                summarySwitchDisabled = stringRes(R.string.state__disabled),
             )
             DialogSliderPreference(
                 prefs.keyboard.oneHandedModeScaleFactor,
@@ -117,7 +119,7 @@ fun KeyboardScreen() = FlorisScreen {
                 min = 70,
                 max = 90,
                 stepIncrement = 1,
-                enabledIf = { prefs.keyboard.oneHandedMode isNotEqualTo OneHandedMode.OFF },
+                enabledIf = { prefs.keyboard.oneHandedModeEnabled.isTrue() },
             )
             ListPreference(
                 prefs.keyboard.landscapeInputUiMode,

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/localization/LocalizationScreen.kt

@@ -53,6 +53,7 @@ import dev.patrickgold.jetpref.datastore.model.observeAsState
 import dev.patrickgold.jetpref.datastore.ui.ListPreference
 import dev.patrickgold.jetpref.datastore.ui.Preference
 import dev.patrickgold.jetpref.datastore.ui.PreferenceGroup
+import dev.patrickgold.jetpref.datastore.ui.SwitchPreference
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
 import kotlinx.serialization.encodeToString
 import kotlinx.serialization.json.Json
@@ -103,6 +104,10 @@ fun LocalizationScreen() = FlorisScreen {
             title = stringRes(R.string.settings__localization__display_language_names_in__label),
             entries = enumDisplayEntriesOf(DisplayLanguageNamesIn::class),
         )
+        SwitchPreference(
+            prefs.localization.displayKeyboardLabelsInSubtypeLanguage,
+            title = stringRes(R.string.settings__localization__display_keyboard_labels_in_subtype_language),
+        )
         Preference(
             title = stringRes(R.string.settings__localization__language_pack_title),
             summary = stringRes(R.string.settings__localization__language_pack_summary),

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/EditRuleDialog.kt

@@ -48,8 +48,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
@@ -59,7 +59,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.toMutableStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
@@ -70,6 +69,7 @@ import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import dev.patrickgold.florisboard.R
+import dev.patrickgold.florisboard.app.enumDisplayEntriesOf
 import dev.patrickgold.florisboard.ime.input.InputKeyEventReceiver
 import dev.patrickgold.florisboard.ime.input.InputShiftState
 import dev.patrickgold.florisboard.ime.keyboard.ComputingEvaluator
@@ -82,30 +82,35 @@ import dev.patrickgold.florisboard.ime.keyboard.computeImageVector
 import dev.patrickgold.florisboard.ime.keyboard.computeLabel
 import dev.patrickgold.florisboard.ime.text.key.KeyCode
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
-import dev.patrickgold.florisboard.ime.theme.FlorisImeUiSpec
+import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.keyboardManager
 import dev.patrickgold.florisboard.lib.NATIVE_NULLPTR
-import org.florisboard.lib.android.showShortToast
-import org.florisboard.lib.android.stringRes
 import dev.patrickgold.florisboard.lib.compose.FlorisChip
-import dev.patrickgold.florisboard.lib.compose.FlorisDropdownMenu
 import dev.patrickgold.florisboard.lib.compose.FlorisHyperlinkText
 import dev.patrickgold.florisboard.lib.compose.FlorisIconButton
-import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedTextField
 import dev.patrickgold.florisboard.lib.compose.florisHorizontalScroll
 import dev.patrickgold.florisboard.lib.compose.stringRes
-import org.florisboard.lib.snygg.SnyggLevel
-import org.florisboard.lib.snygg.SnyggRule
 import dev.patrickgold.florisboard.lib.util.InputMethodUtils
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
+import dev.patrickgold.jetpref.material.ui.JetPrefDropdown
+import dev.patrickgold.jetpref.material.ui.JetPrefTextField
+import dev.patrickgold.jetpref.material.ui.JetPrefTextFieldDefaults
+import org.florisboard.lib.android.showShortToast
+import org.florisboard.lib.android.stringRes
 import org.florisboard.lib.kotlin.curlyFormat
-import org.florisboard.lib.kotlin.getKeyByValue
+import org.florisboard.lib.snygg.SnyggAnnotationRule
+import org.florisboard.lib.snygg.SnyggAttributes
+import org.florisboard.lib.snygg.SnyggElementRule
+import org.florisboard.lib.snygg.SnyggRule
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.ui.NonNullSaver
+import kotlin.reflect.KClass
 
 private val TransparentTextSelectionColors = TextSelectionColors(
     handleColor = Color.Transparent,
     backgroundColor = Color.Transparent,
 )
-internal val SnyggEmptyRuleForAdding = SnyggRule(element = "- select -")
+internal val SnyggEmptyRuleForAdding = SnyggElementRule(elementName = "--select--")
 
 @OptIn(ExperimentalLayoutApi::class)
 @Composable
@@ -116,69 +121,69 @@ internal fun EditRuleDialog(
     onDeleteRule: (rule: SnyggRule) -> Unit,
     onDismiss: () -> Unit,
 ) {
+    val context = LocalContext.current
     val isAddRuleDialog = initRule == SnyggEmptyRuleForAdding
     var showSelectAsError by rememberSaveable { mutableStateOf(false) }
     var showAlreadyExistsError by rememberSaveable { mutableStateOf(false) }
 
-    val possibleElementNames = remember {
-        listOf(SnyggEmptyRuleForAdding.element) + FlorisImeUiSpec.elements.keys
+    val possibleRuleTemplates = remember {
+        buildList {
+            add(SnyggEmptyRuleForAdding)
+            add(SnyggAnnotationRule.Font(fontName = ""))
+            FlorisImeUi.elementNames.forEach { name ->
+                add(SnyggElementRule(name))
+            }
+        }
+    }
+    val possibleRuleLabels = possibleRuleTemplates.map { rule ->
+        val elementName = when (rule) {
+            is SnyggElementRule -> rule.elementName
+            else -> rule.decl().name
+        }
+        context.translateElementName(elementName, level) ?: rule
     }
-    val possibleElementLabels = possibleElementNames.map { translateElementName(it, level) ?: it }
-    var elementsExpanded by remember { mutableStateOf(false) }
     var elementsSelectedIndex by rememberSaveable {
-        val index = possibleElementNames.indexOf(initRule.element).coerceIn(possibleElementNames.indices)
+        val index = possibleRuleTemplates
+            .indexOfFirst {  rule ->
+                val elementName = when (rule) {
+                    is SnyggElementRule -> rule.elementName
+                    else -> rule.decl().name
+                }
+                val initElementName = when (initRule) {
+                    is SnyggElementRule -> initRule.elementName
+                    else -> initRule.decl().name
+                }
+                elementName == initElementName
+            }
+            .coerceIn(possibleRuleTemplates.indices)
         mutableIntStateOf(index)
     }
-
-    val codes = rememberSaveable(saver = IntListSaver) { initRule.codes.toMutableStateList() }
-    var editCodeDialogValue by rememberSaveable { mutableStateOf<Int?>(null) }
-    val groups = rememberSaveable(saver = IntListSaver) { initRule.groups.toMutableStateList() }
-    var shiftStateUnshifted by rememberSaveable {
-        mutableStateOf(initRule.shiftStates.contains(InputShiftState.UNSHIFTED.value))
+    var currentRule by rememberSaveable(elementsSelectedIndex, stateSaver = SnyggRule.NonNullSaver) {
+        mutableStateOf(
+            if (isAddRuleDialog) possibleRuleTemplates[elementsSelectedIndex] else initRule
+        )
     }
-    var shiftStateShiftedManual by rememberSaveable {
-        mutableStateOf(initRule.shiftStates.contains(InputShiftState.SHIFTED_MANUAL.value))
-    }
-    var shiftStateShiftedAutomatic by rememberSaveable {
-        mutableStateOf(initRule.shiftStates.contains(InputShiftState.SHIFTED_AUTOMATIC.value))
-    }
-    var shiftStateCapsLock by rememberSaveable {
-        mutableStateOf(initRule.shiftStates.contains(InputShiftState.CAPS_LOCK.value))
-    }
-    var pressedSelector by rememberSaveable { mutableStateOf(initRule.pressedSelector) }
-    var focusSelector by rememberSaveable { mutableStateOf(initRule.focusSelector) }
-    var disabledSelector by rememberSaveable { mutableStateOf(initRule.disabledSelector) }
 
     JetPrefAlertDialog(
-        title = stringRes(if (isAddRuleDialog) {
-            R.string.settings__theme_editor__add_rule
-        } else {
-            R.string.settings__theme_editor__edit_rule
-        }),
-        confirmLabel = stringRes(if (isAddRuleDialog) {
-            R.string.action__add
-        } else {
-            R.string.action__apply
-        }),
+        title = stringRes(
+            if (isAddRuleDialog) {
+                R.string.settings__theme_editor__add_rule
+            } else {
+                R.string.settings__theme_editor__edit_rule
+            }
+        ),
+        confirmLabel = stringRes(
+            if (isAddRuleDialog) {
+                R.string.action__add
+            } else {
+                R.string.action__apply
+            }
+        ),
         onConfirm = {
             if (isAddRuleDialog && elementsSelectedIndex == 0) {
                 showSelectAsError = true
             } else {
-                val newRule = SnyggRule(
-                    element = possibleElementNames[elementsSelectedIndex],
-                    codes = codes.toList(),
-                    groups = groups.toList(),
-                    shiftStates = buildList {
-                        if (shiftStateUnshifted) { add(InputShiftState.UNSHIFTED.value) }
-                        if (shiftStateShiftedManual) { add(InputShiftState.SHIFTED_MANUAL.value) }
-                        if (shiftStateShiftedAutomatic) { add(InputShiftState.SHIFTED_AUTOMATIC.value) }
-                        if (shiftStateCapsLock) { add(InputShiftState.CAPS_LOCK.value) }
-                    },
-                    pressedSelector = pressedSelector,
-                    focusSelector = focusSelector,
-                    disabledSelector = disabledSelector,
-                )
-                if (!onConfirmRule(initRule, newRule)) {
+                if (!onConfirmRule(initRule, currentRule)) {
                     showAlreadyExistsError = true
                 }
             }
@@ -202,154 +207,168 @@ internal fun EditRuleDialog(
                 )
             }
 
-            DialogProperty(text = stringRes(R.string.settings__theme_editor__rule_element)) {
-                FlorisDropdownMenu(
-                    items = possibleElementLabels,
-                    expanded = elementsExpanded,
+            DialogProperty(text = stringRes(R.string.settings__theme_editor__rule_name)) {
+                JetPrefDropdown(
+                    options = possibleRuleLabels,
+                    selectedOptionIndex = elementsSelectedIndex,
+                    onSelectOption = { elementsSelectedIndex = it },
                     enabled = isAddRuleDialog,
-                    selectedIndex = elementsSelectedIndex,
                     isError = showSelectAsError && elementsSelectedIndex == 0,
-                    onSelectItem = { elementsSelectedIndex = it },
-                    onExpandRequest = { elementsExpanded = true },
-                    onDismissRequest = { elementsExpanded = false },
                 )
             }
 
-            DialogProperty(text = stringRes(R.string.settings__theme_editor__rule_selectors)) {
-                Row(modifier = Modifier.florisHorizontalScroll()) {
-                    FlorisChip(
-                        onClick = { pressedSelector = !pressedSelector },
-                        modifier = Modifier.padding(end = 4.dp),
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> SnyggRule.PRESSED_SELECTOR
-                            else -> stringRes(R.string.snygg__rule_selector__pressed)
+            (currentRule as? SnyggAnnotationRule.Font)?.apply {
+                DialogProperty(text = stringRes(R.string.snygg__rule_annotation__font_name)) {
+                    JetPrefTextField(
+                        modifier = Modifier,
+                        value = fontName,
+                        onValueChange = {
+                            currentRule = copy(fontName = it)
                         },
-                        selected = pressedSelector,
-                    )
-                    FlorisChip(
-                        onClick = { focusSelector = !focusSelector },
-                        modifier = Modifier.padding( end = 4.dp),
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> SnyggRule.FOCUS_SELECTOR
-                            else -> stringRes(R.string.snygg__rule_selector__focus)
-                        },
-                        selected = focusSelector,
-                    )
-                    FlorisChip(
-                        onClick = { disabledSelector = !disabledSelector },
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> SnyggRule.DISABLED_SELECTOR
-                            else -> stringRes(R.string.snygg__rule_selector__disabled)
-                        },
-                        selected = disabledSelector,
+                        singleLine = true,
                     )
                 }
             }
 
-            DialogProperty(
-                text = stringRes(R.string.settings__theme_editor__rule_codes),
-                trailingIconTitle = {
-                    FlorisIconButton(
-                        onClick = { editCodeDialogValue = NATIVE_NULLPTR.toInt() },
-                        modifier = Modifier.offset(x = 12.dp),
-                        icon = Icons.Default.Add,
-                    )
-                },
-            ) {
-                Text(
-                    modifier = Modifier.padding(vertical = 4.dp),
-                    text = stringRes(if (codes.isEmpty()) {
-                        R.string.settings__theme_editor__no_codes_defined
+            // TODO: Move to toplevel @Composable function
+            (currentRule as? SnyggElementRule)?.apply {
+                if (elementName == SnyggEmptyRuleForAdding.elementName) {
+                    return@apply
+                }
+                fun updateCurrentRule(newSelector: SnyggSelector) {
+                    currentRule = if (selector == newSelector) {
+                        copy(selector = SnyggSelector.NONE)
                     } else {
-                        R.string.settings__theme_editor__codes_defined
-                    }),
-                    fontStyle = FontStyle.Italic,
-                )
-                FlowRow {
-                    for (code in codes) {
+                        copy(selector = newSelector)
+                    }
+                }
+                DialogProperty(text = stringRes(R.string.settings__theme_editor__rule_selectors)) {
+                    Row(
+                        modifier = Modifier.florisHorizontalScroll(),
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    ) {
+                        // TODO: avoid code duplication
                         FlorisChip(
-                            onClick = { editCodeDialogValue = code },
-                            text = code.toString(),
-                            selected = editCodeDialogValue == code,
-                            shape = MaterialTheme.shapes.medium,
+                            onClick = { updateCurrentRule(SnyggSelector.PRESSED) },
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.PRESSED.id
+                                else -> stringRes(R.string.snygg__rule_selector__pressed)
+                            },
+                            selected = selector == SnyggSelector.PRESSED,
+                        )
+                        FlorisChip(
+                            onClick = { updateCurrentRule(SnyggSelector.FOCUS) },
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.FOCUS.id
+                                else -> stringRes(R.string.snygg__rule_selector__focus)
+                            },
+                            selected = selector == SnyggSelector.FOCUS,
+                        )
+                        FlorisChip(
+                            onClick = { updateCurrentRule(SnyggSelector.HOVER) },
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.HOVER.id
+                                else -> stringRes(R.string.snygg__rule_selector__hover)
+                            },
+                            selected = selector == SnyggSelector.HOVER,
+                        )
+                        FlorisChip(
+                            onClick = { updateCurrentRule(SnyggSelector.DISABLED) },
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.DISABLED.id
+                                else -> stringRes(R.string.snygg__rule_selector__disabled)
+                            },
+                            selected = selector == SnyggSelector.DISABLED,
                         )
                     }
                 }
-            }
 
-            DialogProperty(text = stringRes(R.string.settings__theme_editor__rule_shift_states)) {
-                FlowRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
-                    FlorisChip(
-                        onClick = { shiftStateUnshifted = !shiftStateUnshifted },
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> remember {
-                                SnyggRule.Placeholders.getKeyByValue(InputShiftState.UNSHIFTED.value)
-                            }
-                            else -> stringRes(R.string.enum__input_shift_state__unshifted)
+                val codes = remember(currentRule) {
+                    attributes[FlorisImeUi.Attr.Code] ?: emptyList()
+                }
+                var editCodeDialogValue by rememberSaveable { mutableStateOf<String?>(null) }
+                val initCodeValue = editCodeDialogValue
+                if (initCodeValue != null) {
+                    EditCodeValueDialog(
+                        codeValue = initCodeValue,
+                        checkExisting = { codes.contains(it) },
+                        onAdd = {
+                            currentRule = copy(
+                                attributes = attributes.including(FlorisImeUi.Attr.Code to it)
+                            )
                         },
-                        selected = shiftStateUnshifted,
-                    )
-                    FlorisChip(
-                        onClick = { shiftStateShiftedManual = !shiftStateShiftedManual },
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> remember {
-                                SnyggRule.Placeholders.getKeyByValue(InputShiftState.SHIFTED_MANUAL.value)
-                            }
-                            else -> stringRes(R.string.enum__input_shift_state__shifted_manual)
+                        onDelete = {
+                            currentRule = copy(
+                                attributes = attributes.excluding(FlorisImeUi.Attr.Code to it)
+                            )
                         },
-                        selected = shiftStateShiftedManual,
-                    )
-                    FlorisChip(
-                        onClick = { shiftStateShiftedAutomatic = !shiftStateShiftedAutomatic },
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> remember {
-                                SnyggRule.Placeholders.getKeyByValue(InputShiftState.SHIFTED_AUTOMATIC.value)
-                            }
-                            else -> stringRes(R.string.enum__input_shift_state__shifted_automatic)
-                        },
-                        selected = shiftStateShiftedAutomatic,
-                    )
-                    FlorisChip(
-                        onClick = { shiftStateCapsLock = !shiftStateCapsLock },
-                        text = when (level) {
-                            SnyggLevel.DEVELOPER -> remember {
-                                SnyggRule.Placeholders.getKeyByValue(InputShiftState.CAPS_LOCK.value)
-                            }
-                            else -> stringRes(R.string.enum__input_shift_state__caps_lock)
-                        },
-                        selected = shiftStateCapsLock,
+                        onDismiss = { editCodeDialogValue = null },
                     )
                 }
+                DialogProperty(
+                    text = stringRes(R.string.settings__theme_editor__rule_codes),
+                    trailingIconTitle = {
+                        FlorisIconButton(
+                            onClick = { editCodeDialogValue = KeyCode.UNSPECIFIED.toString() },
+                            modifier = Modifier.offset(x = 12.dp),
+                            icon = Icons.Default.Add,
+                        )
+                    },
+                ) {
+                    if (codes.isEmpty()) {
+                        Text(
+                            text = stringRes(R.string.settings__theme_editor__no_codes_defined),
+                            fontStyle = FontStyle.Italic,
+                        )
+                    }
+                    FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                        for (code in codes) {
+                            FlorisChip(
+                                onClick = { editCodeDialogValue = code },
+                                text = code,
+                                selected = editCodeDialogValue == code,
+                                shape = MaterialTheme.shapes.medium,
+                            )
+                        }
+                    }
+                }
+
+                EnumLikeAttributeBox(
+                    text = stringRes(R.string.settings__theme_editor__rule_modes),
+                    enumClass = KeyboardMode::class,
+                    attribute = FlorisImeUi.Attr.Mode,
+                    attributes = attributes,
+                    setAttributes = { currentRule = copy(attributes = it) },
+                    level = level,
+                )
+
+                EnumLikeAttributeBox(
+                    text = stringRes(R.string.settings__theme_editor__rule_shift_states),
+                    enumClass = InputShiftState::class,
+                    attribute = FlorisImeUi.Attr.ShiftState,
+                    attributes = attributes,
+                    setAttributes = { currentRule = copy(attributes = it) },
+                    level = level,
+                )
             }
         }
     }
-
-    val initCodeValue = editCodeDialogValue
-    if (initCodeValue != null) {
-        EditCodeValueDialog(
-            codeValue = initCodeValue,
-            checkExisting = { codes.contains(it) },
-            onAdd = { codes.add(it) },
-            onDelete = { codes.remove(it) },
-            onDismiss = { editCodeDialogValue = null },
-        )
-    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun EditCodeValueDialog(
-    codeValue: Int,
-    checkExisting: (Int) -> Boolean,
-    onAdd: (Int) -> Unit,
-    onDelete: (Int) -> Unit,
+    codeValue: String,
+    checkExisting: (String) -> Boolean,
+    onAdd: (String) -> Unit,
+    onDelete: (String) -> Unit,
     onDismiss: () -> Unit,
 ) {
     val context = LocalContext.current
     val keyboardManager by context.keyboardManager()
 
     var inputCodeString by rememberSaveable(codeValue) {
-        val str = if (codeValue == 0) "" else codeValue.toString()
+        val str = if (codeValue == KeyCode.UNSPECIFIED.toString()) "" else codeValue.toString()
         mutableStateOf(str)
     }
     val textKeyData = remember(inputCodeString) {
@@ -406,6 +425,7 @@ private fun EditCodeValueDialog(
                     inputCodeString = data.code.toString()
                     isRecordingKey = false
                 }
+
                 override fun onInputKeyRepeat(data: KeyData) = Unit
                 override fun onInputKeyCancel(data: KeyData) = Unit
             }
@@ -423,16 +443,20 @@ private fun EditCodeValueDialog(
     }
 
     JetPrefAlertDialog(
-        title = stringRes(if (codeValue == NATIVE_NULLPTR.toInt()) {
-            R.string.settings__theme_editor__add_code
-        } else {
-            R.string.settings__theme_editor__edit_code
-        }),
-        confirmLabel = stringRes(if (codeValue == NATIVE_NULLPTR.toInt()) {
-            R.string.action__add
-        } else {
-            R.string.action__apply
-        }),
+        title = stringRes(
+            if (codeValue == KeyCode.UNSPECIFIED.toString()) {
+                R.string.settings__theme_editor__add_code
+            } else {
+                R.string.settings__theme_editor__edit_code
+            }
+        ),
+        confirmLabel = stringRes(
+            if (codeValue == KeyCode.UNSPECIFIED.toString()) {
+                R.string.action__add
+            } else {
+                R.string.action__apply
+            }
+        ),
         onConfirm = {
             val code = inputCodeString.trim().toIntOrNull(radix = 10)
             when {
@@ -440,25 +464,28 @@ private fun EditCodeValueDialog(
                     errorId = R.string.settings__theme_editor__code_invalid
                     showError = true
                 }
-                code == codeValue -> {
+
+                code.toString() == codeValue -> {
                     onDismiss()
                 }
-                checkExisting(code) -> {
+
+                checkExisting(code.toString()) -> {
                     errorId = R.string.settings__theme_editor__code_already_exists
                     showError = true
                 }
+
                 else -> {
-                    if (codeValue != NATIVE_NULLPTR.toInt()) {
+                    if (codeValue != KeyCode.UNSPECIFIED.toString()) {
                         onDelete(codeValue)
                     }
-                    onAdd(code)
+                    onAdd(code.toString())
                     onDismiss()
                 }
             }
         },
         dismissLabel = stringRes(R.string.action__cancel),
         onDismiss = onDismiss,
-        neutralLabel = if (codeValue != NATIVE_NULLPTR.toInt()) {
+        neutralLabel = if (codeValue != KeyCode.UNSPECIFIED.toString()) {
             stringRes(R.string.action__delete)
         } else {
             null
@@ -505,7 +532,7 @@ private fun EditCodeValueDialog(
                     LocalTextSelectionColors.current
                 }
                 CompositionLocalProvider(LocalTextSelectionColors provides textSelectionColors) {
-                    FlorisOutlinedTextField(
+                    JetPrefTextField(
                         modifier = Modifier
                             .focusRequester(focusRequester)
                             .weight(1f),
@@ -514,7 +541,7 @@ private fun EditCodeValueDialog(
                             inputCodeString = v
                             showError = false
                         },
-                        placeholder = when {
+                        placeholderText = when {
                             isRecordingKey -> {
                                 stringRes(R.string.settings__theme_editor__code_recording_placeholder)
                             }
@@ -527,21 +554,25 @@ private fun EditCodeValueDialog(
                         },
                         isError = showError,
                         singleLine = true,
-                        colors = if (isRecordingKey) {
-                            OutlinedTextFieldDefaults.colors(
-                                focusedTextColor = Color.Transparent,
-                                cursorColor = Color.Transparent,
+                        appearance = JetPrefTextFieldDefaults.filled(
+                            colors = if (isRecordingKey) {
+                                TextFieldDefaults.colors(
+                                    focusedTextColor = Color.Transparent,
+                                    cursorColor = Color.Transparent,
+                                )
+                            } else {
+                                TextFieldDefaults.colors()
+                            }
+                        ),
+                        trailingIcon = {
+                            FlorisIconButton(
+                                onClick = { requestStartRecording() },
+                                icon = Icons.Default.Pageview,
+                                iconColor = recordingKeyColor,
                             )
-                        } else {
-                            OutlinedTextFieldDefaults.colors()
-                        },
+                        }
                     )
                 }
-                FlorisIconButton(
-                    onClick = { requestStartRecording() },
-                    icon = Icons.Default.Pageview,
-                    iconColor = recordingKeyColor,
-                )
             }
             AnimatedVisibility(visible = showError) {
                 Text(
@@ -573,9 +604,12 @@ private fun TextKeyDataPreviewBox(
                 override val mode = KeyboardMode.NUMERIC_ADVANCED
                 override fun getKeyForPos(pointerX: Float, pointerY: Float) = error("not implemented")
                 override fun keys() = error("not implemented")
-                override fun layout(keyboardWidth: Float, keyboardHeight: Float, desiredKey: Key,
-                                    extendTouchBoundariesDownwards: Boolean) = error("not implemented")
+                override fun layout(
+                    keyboardWidth: Float, keyboardHeight: Float, desiredKey: Key,
+                    extendTouchBoundariesDownwards: Boolean,
+                ) = error("not implemented")
             }
+
             override fun context() = context
         }
     }
@@ -603,20 +637,19 @@ private fun TextKeyDataPreviewBox(
                 .align(Alignment.CenterVertically),
             contentAlignment = Alignment.Center,
         ) {
-            if (label != null) {
-                Text(
-                    text = label,
-                    fontSize = 16.sp,
-                    maxLines = 1,
-                    softWrap = false,
-                )
-            }
             if (icon != null) {
                 Icon(
                     modifier = Modifier.requiredSize(24.dp),
                     imageVector = icon,
                     contentDescription = null,
                 )
+            } else if (label != null) {
+                Text(
+                    text = label,
+                    fontSize = 16.sp,
+                    maxLines = 1,
+                    softWrap = false,
+                )
             }
         }
         Column(modifier = Modifier.weight(1f)) {
@@ -625,3 +658,79 @@ private fun TextKeyDataPreviewBox(
         }
     }
 }
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun <V : Any> EnumLikeAttributeBox(
+    text: String,
+    enumClass: KClass<V>,
+    attribute: String,
+    attributes: SnyggAttributes,
+    setAttributes: (SnyggAttributes) -> Unit,
+    level: SnyggLevel,
+) {
+    val allEntries = enumDisplayEntriesOf(enumClass)
+    val (alreadyAddedEntries, notYetAddedEntries) = remember(attributes, attribute) {
+        allEntries.partition { entry ->
+            attributes[attribute]?.contains(entry.key.toString()) == true
+        }
+    }
+    var showAddDialog by remember { mutableStateOf(false) }
+
+    DialogProperty(
+        text = text,
+        trailingIconTitle = {
+            FlorisIconButton(
+                onClick = { showAddDialog = true },
+                modifier = Modifier.offset(x = 12.dp),
+                icon = Icons.Default.Add,
+            )
+        },
+    ) {
+        FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            for (entry in alreadyAddedEntries) {
+                FlorisChip(
+                    onClick = {
+                        setAttributes(attributes.excluding(attribute to entry.key.toString()))
+                    },
+                    text = entry.label,
+                )
+            }
+            if (alreadyAddedEntries.isEmpty()) {
+                Text(
+                    text = stringRes(R.string.settings__theme_editor__no_codes_defined),
+                    fontStyle = FontStyle.Italic,
+                )
+            }
+        }
+    }
+
+    if (showAddDialog) {
+        JetPrefAlertDialog(
+            title = stringRes(R.string.action__add),
+            dismissLabel = stringRes(R.string.action__cancel),
+            onDismiss = { showAddDialog = false },
+        ) {
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                for (entry in notYetAddedEntries) {
+                    FlorisChip(
+                        onClick = {
+                            setAttributes(attributes.including(attribute to entry.key.toString()))
+                            showAddDialog = false
+                        },
+                        text = when (level) {
+                            SnyggLevel.DEVELOPER -> entry.key.toString()
+                            else -> entry.label
+                        },
+                    )
+                }
+            }
+            if (notYetAddedEntries.isEmpty()) {
+                Text(
+                    text = stringRes(R.string.settings__theme_editor__no_enum_value_to_add_anymore),
+                    fontStyle = FontStyle.Italic,
+                )
+            }
+        }
+    }
+}

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/FineTuneDialog.kt

@@ -23,9 +23,9 @@ import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.enumDisplayEntriesOf
 import dev.patrickgold.florisboard.app.florisPreferenceModel
 import dev.patrickgold.florisboard.lib.compose.stringRes
-import org.florisboard.lib.snygg.SnyggLevel
 import dev.patrickgold.jetpref.datastore.ui.ListPreference
 import dev.patrickgold.jetpref.datastore.ui.PreferenceLayout
+import dev.patrickgold.jetpref.material.ui.ColorRepresentation
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
 
 private val FineTuneContentPadding = PaddingValues(horizontal = 8.dp)
@@ -44,9 +44,9 @@ fun FineTuneDialog(onDismiss: () -> Unit) {
                 entries = enumDisplayEntriesOf(SnyggLevel::class),
             )
             ListPreference(
-                listPref = prefs.theme.editorDisplayColorsAs,
-                title = stringRes(R.string.settings__theme_editor__fine_tune__display_colors_as),
-                entries = enumDisplayEntriesOf(DisplayColorsAs::class),
+                listPref = prefs.theme.editorColorRepresentation,
+                title = stringRes(R.string.settings__theme_editor__fine_tune__color_representation),
+                entries = enumDisplayEntriesOf(ColorRepresentation::class),
             )
             ListPreference(
                 listPref = prefs.theme.editorDisplayKbdAfterDialogs,

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/SnyggLevel.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package org.florisboard.lib.snygg
+package dev.patrickgold.florisboard.app.settings.theme
 
 /**
  * SnyggLevel indicates if a rule property is intended to be edited by all users (BASIC) or only by advanced users

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/SnyggValueIcon.kt

@@ -26,29 +26,64 @@ import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.FormatAlignLeft
+import androidx.compose.material.icons.automirrored.filled.FormatAlignRight
+import androidx.compose.material.icons.automirrored.filled.WrapText
+import androidx.compose.material.icons.filled.AttachFile
+import androidx.compose.material.icons.filled.CheckBox
+import androidx.compose.material.icons.filled.CheckBoxOutlineBlank
+import androidx.compose.material.icons.filled.FontDownload
+import androidx.compose.material.icons.filled.FormatAlignCenter
+import androidx.compose.material.icons.filled.FormatAlignJustify
+import androidx.compose.material.icons.filled.FormatBold
+import androidx.compose.material.icons.filled.FormatItalic
 import androidx.compose.material.icons.filled.FormatSize
+import androidx.compose.material.icons.filled.FormatStrikethrough
+import androidx.compose.material.icons.filled.FormatUnderlined
 import androidx.compose.material.icons.filled.Link
+import androidx.compose.material.icons.filled.OpenInFull
+import androidx.compose.material.icons.filled.Padding
 import androidx.compose.material.icons.filled.Straighten
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import dev.patrickgold.florisboard.app.florisPreferenceModel
+import dev.patrickgold.jetpref.datastore.model.observeAsState
 import org.florisboard.lib.snygg.value.SnyggCutCornerDpShapeValue
 import org.florisboard.lib.snygg.value.SnyggDefinedVarValue
 import org.florisboard.lib.snygg.value.SnyggDpSizeValue
-import org.florisboard.lib.snygg.value.SnyggMaterialYouValue
 import org.florisboard.lib.snygg.value.SnyggRoundedCornerDpShapeValue
 import org.florisboard.lib.snygg.value.SnyggShapeValue
-import org.florisboard.lib.snygg.value.SnyggSolidColorValue
+import org.florisboard.lib.snygg.value.SnyggStaticColorValue
 import org.florisboard.lib.snygg.value.SnyggSpSizeValue
 import org.florisboard.lib.snygg.value.SnyggValue
 import dev.patrickgold.jetpref.material.ui.checkeredBackground
+import org.florisboard.lib.color.ColorMappings
+import org.florisboard.lib.color.getColor
+import org.florisboard.lib.snygg.value.SnyggContentScaleValue
+import org.florisboard.lib.snygg.value.SnyggCustomFontFamilyValue
+import org.florisboard.lib.snygg.value.SnyggDynamicDarkColorValue
+import org.florisboard.lib.snygg.value.SnyggDynamicLightColorValue
+import org.florisboard.lib.snygg.value.SnyggFontStyleValue
+import org.florisboard.lib.snygg.value.SnyggFontWeightValue
+import org.florisboard.lib.snygg.value.SnyggGenericFontFamilyValue
+import org.florisboard.lib.snygg.value.SnyggNoValue
+import org.florisboard.lib.snygg.value.SnyggPaddingValue
+import org.florisboard.lib.snygg.value.SnyggTextAlignValue
+import org.florisboard.lib.snygg.value.SnyggTextDecorationLineValue
+import org.florisboard.lib.snygg.value.SnyggTextOverflowValue
+import org.florisboard.lib.snygg.value.SnyggUriValue
+import org.florisboard.lib.snygg.value.SnyggYesValue
 
 object SnyggValueIcon {
     interface Spec {
@@ -86,13 +121,51 @@ internal fun SnyggValueIcon(
     modifier: Modifier = Modifier,
     spec: SnyggValueIcon.Spec = SnyggValueIcon.Normal,
 ) {
+    val prefs by florisPreferenceModel()
+    val context = LocalContext.current
+    val accentColor by prefs.theme.accentColor.observeAsState()
+
     when (value) {
-        is SnyggSolidColorValue -> {
+        is SnyggStaticColorValue -> {
             SnyggValueColorBox(modifier = modifier, spec = spec, backgroundColor = value.color)
         }
+        is SnyggDynamicLightColorValue -> {
+            val colorScheme = ColorMappings.dynamicLightColorScheme(context, accentColor)
+            SnyggValueColorBox(modifier = modifier, spec = spec, backgroundColor = colorScheme.getColor(value.colorName))
+        }
+        is SnyggDynamicDarkColorValue -> {
+            val colorScheme = ColorMappings.dynamicDarkColorScheme(context, accentColor)
+            SnyggValueColorBox(modifier = modifier, spec = spec, backgroundColor = colorScheme.getColor(value.colorName))
+        }
 
-        is SnyggMaterialYouValue -> {
-            SnyggValueColorBox(modifier = modifier, spec = spec, backgroundColor = value.loadColor(LocalContext.current))
+        is SnyggGenericFontFamilyValue, is SnyggCustomFontFamilyValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.FontDownload,
+                contentDescription = null,
+            )
+        }
+        is SnyggFontStyleValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.FormatItalic,
+                contentDescription = null,
+            )
+        }
+        is SnyggFontWeightValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.FormatBold,
+                contentDescription = null,
+            )
+        }
+
+        is SnyggPaddingValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.Padding,
+                contentDescription = null,
+            )
         }
 
         is SnyggShapeValue -> {
@@ -102,6 +175,7 @@ internal fun SnyggValueIcon(
                     .border(spec.borderWith, MaterialTheme.colorScheme.onBackground, value.alwaysPercentShape())
             )
         }
+
         is SnyggDpSizeValue -> {
             Icon(
                 modifier = modifier.requiredSize(spec.iconSize),
@@ -116,6 +190,37 @@ internal fun SnyggValueIcon(
                 contentDescription = null,
             )
         }
+
+        is SnyggTextAlignValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = when (value.textAlign) {
+                    TextAlign.Left, TextAlign.Start -> Icons.AutoMirrored.Default.FormatAlignLeft
+                    TextAlign.Right, TextAlign.End -> Icons.AutoMirrored.Default.FormatAlignRight
+                    TextAlign.Justify -> Icons.Default.FormatAlignJustify
+                    else -> Icons.Default.FormatAlignCenter
+                },
+                contentDescription = null,
+            )
+        }
+        is SnyggTextDecorationLineValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = when (value.textDecoration) {
+                    TextDecoration.LineThrough -> Icons.Default.FormatStrikethrough
+                    else -> Icons.Default.FormatUnderlined
+                },
+                contentDescription = null,
+            )
+        }
+        is SnyggTextOverflowValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.AutoMirrored.Default.WrapText,
+                contentDescription = null,
+            )
+        }
+
         is SnyggDefinedVarValue -> {
             val realValue = definedVariables[value.key]
             if (realValue == null) {
@@ -150,6 +255,37 @@ internal fun SnyggValueIcon(
                 }
             }
         }
+
+        is SnyggUriValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.AttachFile,
+                contentDescription = null,
+            )
+        }
+        is SnyggContentScaleValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.OpenInFull,
+                contentDescription = null,
+            )
+        }
+
+        is SnyggYesValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.FormatBold,
+                contentDescription = null,
+            )
+        }
+        is SnyggNoValue -> {
+            Icon(
+                modifier = modifier.requiredSize(spec.iconSize),
+                imageVector = Icons.Default.CheckBoxOutlineBlank,
+                contentDescription = null,
+            )
+        }
+
         else -> {
             // Render nothing
         }

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/ThemeEditorScreen.kt

@@ -36,11 +36,16 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material.icons.filled.KeyboardArrowUp
 import androidx.compose.material.icons.filled.Tune
+import androidx.compose.material3.AlertDialogDefaults
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
@@ -53,11 +58,8 @@ import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.saveable.Saver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshots.SnapshotStateList
-import androidx.compose.runtime.toMutableStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -71,17 +73,18 @@ import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.apptheme.Shapes
 import dev.patrickgold.florisboard.app.ext.ExtensionComponentView
 import dev.patrickgold.florisboard.app.florisPreferenceModel
-import dev.patrickgold.florisboard.ime.theme.FlorisImeUiSpec
+import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.ime.theme.ThemeExtensionComponent
 import dev.patrickgold.florisboard.ime.theme.ThemeExtensionComponentEditor
 import dev.patrickgold.florisboard.ime.theme.ThemeExtensionEditor
 import dev.patrickgold.florisboard.ime.theme.ThemeManager
+import dev.patrickgold.florisboard.ime.theme.extPreviewTheme
 import dev.patrickgold.florisboard.lib.cache.CacheManager
 import dev.patrickgold.florisboard.lib.compose.FlorisIconButton
 import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedBox
-import dev.patrickgold.florisboard.lib.compose.FlorisOutlinedTextField
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.PreviewKeyboardField
+import dev.patrickgold.florisboard.lib.compose.Validation
 import dev.patrickgold.florisboard.lib.compose.defaultFlorisOutlinedBox
 import dev.patrickgold.florisboard.lib.compose.florisVerticalScroll
 import dev.patrickgold.florisboard.lib.compose.rememberPreviewFieldController
@@ -93,26 +96,46 @@ import dev.patrickgold.florisboard.themeManager
 import dev.patrickgold.jetpref.datastore.model.observeAsState
 import dev.patrickgold.jetpref.material.ui.JetPrefAlertDialog
 import dev.patrickgold.jetpref.material.ui.JetPrefListItem
+import dev.patrickgold.jetpref.material.ui.JetPrefTextField
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.florisboard.lib.android.showLongToast
-import org.florisboard.lib.kotlin.io.readJson
 import org.florisboard.lib.kotlin.io.subFile
-import org.florisboard.lib.snygg.SnyggLevel
-import org.florisboard.lib.snygg.SnyggPropertySetEditor
-import org.florisboard.lib.snygg.SnyggPropertySetSpec
+import org.florisboard.lib.snygg.SnyggAnnotationRule
+import org.florisboard.lib.snygg.SnyggElementRule
+import org.florisboard.lib.snygg.SnyggJsonConfiguration
+import org.florisboard.lib.snygg.SnyggMultiplePropertySetsEditor
 import org.florisboard.lib.snygg.SnyggRule
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.SnyggSinglePropertySetEditor
+import org.florisboard.lib.snygg.SnyggSpec
+import org.florisboard.lib.snygg.SnyggSpecDecl
 import org.florisboard.lib.snygg.SnyggStylesheet
 import org.florisboard.lib.snygg.SnyggStylesheetEditor
-import org.florisboard.lib.snygg.SnyggStylesheetJsonConfig
-import org.florisboard.lib.snygg.definedVariablesRule
-import org.florisboard.lib.snygg.isDefinedVariablesRule
+import org.florisboard.lib.snygg.ui.Saver
+import kotlin.Boolean
+import kotlin.String
 
-internal val IntListSaver = Saver<SnapshotStateList<Int>, ArrayList<Int>>(
-    save = { ArrayList(it) },
-    restore = { it.toMutableStateList() },
+internal val PrettyPrintConfig = SnyggJsonConfiguration.of(
+    prettyPrint = true,
+    prettyPrintIndent = "  ",
 )
 
+private val LenientConfig = SnyggJsonConfiguration.of(
+    ignoreMissingSchema = true,
+    ignoreInvalidSchema = true,
+    ignoreUnsupportedSchema = true,
+    ignoreInvalidRules = true,
+    ignoreInvalidProperties = true,
+    ignoreInvalidValues = true,
+)
+
+private enum class StylesheetLoadingStrategy {
+    TRY_LOAD_OR_ASK_ON_CONFLICT, // default state
+    TRY_LOAD_OR_EMPTY, // user chose to not auto-fix errors
+    TRY_LOAD_OR_PARSE_LENIENT; // user chose to auto-fix errors
+}
+
 @OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun ThemeEditorScreen(
@@ -130,35 +153,66 @@ fun ThemeEditorScreen(
     val scope = rememberCoroutineScope()
     val previewFieldController = rememberPreviewFieldController().also { it.isVisible = true }
 
-    val stylesheetEditor = remember {
+    var stylesheetLoadingStrategy by rememberSaveable {
+        mutableStateOf(StylesheetLoadingStrategy.TRY_LOAD_OR_ASK_ON_CONFLICT)
+    }
+    var stylesheetEditorFailure by remember { mutableStateOf<Throwable?>(null) }
+    val stylesheetEditor = remember(stylesheetLoadingStrategy) {
         editor.stylesheetEditor ?: run {
+            stylesheetEditorFailure = null
             val stylesheetPath = editor.stylesheetPath()
             editor.stylesheetPathOnLoad = stylesheetPath
             val stylesheetFile = workspace.extDir.subFile(stylesheetPath)
             val stylesheetEditor = if (stylesheetFile.exists()) {
                 try {
-                    stylesheetFile.readJson<SnyggStylesheet>(SnyggStylesheetJsonConfig).edit()
-                } catch (e: Throwable) {
-                    SnyggStylesheetEditor()
+                    val stylesheetJson = stylesheetFile.readText()
+                    val config = when (stylesheetLoadingStrategy) {
+                        StylesheetLoadingStrategy.TRY_LOAD_OR_PARSE_LENIENT -> LenientConfig
+                        else -> PrettyPrintConfig
+                    }
+                    SnyggStylesheet.fromJson(stylesheetJson, config).getOrThrow().edit(CustomRuleComparator)
+                } catch (error: Throwable) {
+                    stylesheetEditorFailure = when (stylesheetLoadingStrategy) {
+                        StylesheetLoadingStrategy.TRY_LOAD_OR_ASK_ON_CONFLICT -> error
+                        else -> null
+                    }
+                    SnyggStylesheetEditor(SnyggStylesheet.SCHEMA_V2, comparator = CustomRuleComparator)
                 }
             } else {
-                SnyggStylesheetEditor()
-            }
-            if (stylesheetEditor.rules.none { (rule, _) -> rule.isDefinedVariablesRule() }) {
-                stylesheetEditor.rules[SnyggRule.definedVariablesRule()] = SnyggPropertySetEditor()
+                SnyggStylesheetEditor(SnyggStylesheet.SCHEMA_V2, comparator = CustomRuleComparator)
             }
+            stylesheetEditor.rules.putIfAbsent(SnyggAnnotationRule.Defines, SnyggSinglePropertySetEditor())
             stylesheetEditor
         }.also { editor.stylesheetEditor = it }
     }
 
+    val definedVariables = remember(stylesheetEditor.rules, workspace.version) {
+        stylesheetEditor.rules.firstNotNullOfOrNull { (rule, propertySet) ->
+            if (rule is SnyggAnnotationRule.Defines && propertySet is SnyggSinglePropertySetEditor) {
+                propertySet.properties
+            } else {
+                null
+            }
+        } ?: emptyMap()
+    }
+
+    val fontNames = remember(stylesheetEditor.rules, workspace.version) {
+        stylesheetEditor.rules.mapNotNull { (rule, _) ->
+            if (rule is SnyggAnnotationRule.Font) {
+                rule.fontName
+            } else {
+                null
+            }
+        }
+    }
+
     val snyggLevel by prefs.theme.editorLevel.observeAsState()
-    val displayColorsAs by prefs.theme.editorDisplayColorsAs.observeAsState()
+    val colorRepresentation by prefs.theme.editorColorRepresentation.observeAsState()
     val displayKbdAfterDialogs by prefs.theme.editorDisplayKbdAfterDialogs.observeAsState()
     var oldFocusState by remember { mutableStateOf(false) }
     var snyggRuleToEdit by rememberSaveable(stateSaver = SnyggRule.Saver) { mutableStateOf(null) }
     var snyggPropertyToEdit by remember { mutableStateOf<PropertyInfo?>(null) }
-    var snyggPropertySetForEditing = remember<SnyggPropertySetEditor?> { null }
-    var snyggPropertySetSpecForEditing = remember<SnyggPropertySetSpec?> { null }
+    var snyggPropertySetForEditing = remember<SnyggSinglePropertySetEditor?> { null }
     var showEditComponentMetaDialog by rememberSaveable { mutableStateOf(false) }
     var showFineTuneDialog by rememberSaveable { mutableStateOf(false) }
 
@@ -198,6 +252,33 @@ fun ThemeEditorScreen(
     }
 
     content {
+        stylesheetEditorFailure?.let { failure ->
+            JetPrefAlertDialog(
+                title = stringRes(R.string.settings__theme_editor__stylesheet_error_title),
+                confirmLabel = stringRes(R.string.action__yes),
+                onConfirm = {
+                    editor.stylesheetEditor = null
+                    stylesheetLoadingStrategy = StylesheetLoadingStrategy.TRY_LOAD_OR_PARSE_LENIENT
+                },
+                dismissLabel = stringRes(R.string.action__no),
+                onDismiss = {
+                    editor.stylesheetEditor = null
+                    stylesheetLoadingStrategy = StylesheetLoadingStrategy.TRY_LOAD_OR_EMPTY
+                },
+            ) {
+                Column {
+                    Text(
+                        modifier = Modifier.padding(bottom = 8.dp),
+                        text = failure.message.toString(),
+                        fontStyle = FontStyle.Italic,
+                    )
+                    Text(
+                        text = stringRes(R.string.settings__theme_editor__stylesheet_error_description),
+                    )
+                }
+            }
+        }
+
         BackHandler {
             handleBackPress()
         }
@@ -229,23 +310,16 @@ fun ThemeEditorScreen(
 
         DisposableEffect(workspace.version) {
             themeManager.previewThemeInfo = ThemeManager.ThemeInfo.DEFAULT.copy(
-                stylesheet = stylesheetEditor.build().compileToFullyQualified(FlorisImeUiSpec),
+                name = extPreviewTheme(System.currentTimeMillis().toString()),
+                config = editor.build(),
+                stylesheet = stylesheetEditor.build(),
+                loadedDir = workspace.extDir,
             )
             onDispose {
                 themeManager.previewThemeInfo = null
             }
         }
 
-        val definedVariables = remember(stylesheetEditor.rules) {
-            stylesheetEditor.rules.firstNotNullOfOrNull { (rule, propertySet) ->
-                if (rule.isDefinedVariablesRule()) {
-                    propertySet.properties
-                } else {
-                    null
-                }
-            } ?: emptyMap()
-        }
-
         // TODO: (priority = low)
         //  Floris scrollbar does not like lazy lists with non-constant item heights.
         //  Consider building a custom scrollbar tailored for this list specifically.
@@ -263,7 +337,7 @@ fun ThemeEditorScreen(
                         onEditBtnClick = { showEditComponentMetaDialog = true },
                     )
                     if (stylesheetEditor.rules.isEmpty() ||
-                        (stylesheetEditor.rules.size == 1 && stylesheetEditor.rules.keys.all { it.isDefinedVariablesRule() })
+                        (stylesheetEditor.rules.size == 1 && stylesheetEditor.rules.all { (rule, _) -> rule == SnyggAnnotationRule.Defines })
                     ) {
                         Text(
                             modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp),
@@ -274,9 +348,9 @@ fun ThemeEditorScreen(
                 }
             }
 
-            items(stylesheetEditor.rules.entries.toList()) { (rule, propertySet) -> key(rule) {
-                val isVariablesRule = rule.isDefinedVariablesRule()
-                val propertySetSpec = FlorisImeUiSpec.propertySetSpec(rule.element)
+            items(stylesheetEditor.rules.toList()) { (rule, propertySet) -> key(rule) {
+                val propertySetSpec = SnyggSpec.propertySetSpecOf(rule)
+                val isVariablesRule = rule == SnyggAnnotationRule.Defines
                 FlorisOutlinedBox(
                     modifier = Modifier
                         .padding(vertical = 8.dp, horizontal = 16.dp)
@@ -291,33 +365,129 @@ fun ThemeEditorScreen(
                                 snyggRuleToEdit = rule
                             },
                             onAddPropertyBtnClick = {
-                                snyggPropertySetForEditing = propertySet
-                                snyggPropertySetSpecForEditing = propertySetSpec
-                                snyggPropertyToEdit = SnyggEmptyPropertyInfoForAdding
+                                when(propertySet) {
+                                    is SnyggMultiplePropertySetsEditor -> {
+                                        workspace.update {
+                                            propertySet.sets.add(SnyggSinglePropertySetEditor())
+                                        }
+                                    }
+                                    is SnyggSinglePropertySetEditor -> {
+                                        snyggPropertySetForEditing = propertySet
+                                        snyggPropertyToEdit = SnyggEmptyPropertyInfoForAdding.copy(
+                                            rule = rule,
+                                        )
+                                    }
+                                }
                             },
                         )
                         if (isVariablesRule) {
                             Text(
                                 modifier = Modifier.padding(bottom = 8.dp, start = 16.dp, end = 16.dp),
-                                text = stringRes(R.string.snygg__rule_element__defines_description),
+                                text = stringRes(R.string.snygg__rule_annotation__defines_description),
                                 style = MaterialTheme.typography.bodyMedium,
                                 fontStyle = FontStyle.Italic,
                             )
                         }
-                        for ((propertyName, propertyValue) in propertySet.properties) {
-                            val propertySpec = propertySetSpec?.propertySpec(propertyName)
-                            if (propertySpec != null && propertySpec.level <= snyggLevel || isVariablesRule) {
-                                JetPrefListItem(
-                                    modifier = Modifier.rippleClickable {
-                                        snyggPropertySetForEditing = propertySet
-                                        snyggPropertySetSpecForEditing = propertySetSpec
-                                        snyggPropertyToEdit = PropertyInfo(propertyName, propertyValue)
-                                    },
-                                    text = translatePropertyName(propertyName, snyggLevel),
-                                    secondaryText = translatePropertyValue(propertyValue, snyggLevel, displayColorsAs),
-                                    singleLineSecondaryText = true,
-                                    trailing = { SnyggValueIcon(propertyValue, definedVariables) },
-                                )
+
+                        @Composable
+                        fun SinglePropertySetEditor(
+                            propertySet: SnyggSinglePropertySetEditor,
+                        ) {
+                            for ((propertyName, propertySpec) in propertySetSpec?.properties.orEmpty()) {
+                                if (propertySpec.required && !propertySet.properties.containsKey(propertyName)) {
+                                    FlorisOutlinedBox(title = "Errors", modifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)) {
+                                        Text(
+                                            modifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp),
+                                            text = "Required property '$propertyName' does not exist",
+                                            color = MaterialTheme.colorScheme.error,
+                                        )
+                                    }
+                                }
+                            }
+                            for ((propertyName, propertyValue) in propertySet.properties) {
+                                if (true /*propertySpec != null && propertySpec.level <= snyggLevel*/ || isVariablesRule) {
+                                    JetPrefListItem(
+                                        modifier = Modifier.rippleClickable {
+                                            snyggPropertySetForEditing = propertySet
+                                            snyggPropertyToEdit = PropertyInfo(rule, propertyName, propertyValue)
+                                        },
+                                        text = context.translatePropertyName(propertyName, snyggLevel),
+                                        secondaryText = context.translatePropertyValue(propertyValue, snyggLevel, colorRepresentation),
+                                        singleLineSecondaryText = true,
+                                        trailing = { SnyggValueIcon(propertyValue, definedVariables) },
+                                    )
+                                }
+                            }
+                        }
+
+                        when (propertySet) {
+                            is SnyggSinglePropertySetEditor -> {
+                                SinglePropertySetEditor(propertySet)
+                            }
+                            is SnyggMultiplePropertySetsEditor -> {
+                                val sets = propertySet.sets
+                                sets.forEachIndexed { propertySetIndex, propertySet ->
+                                    key(propertySet.uuid) {
+                                        FlorisOutlinedBox(Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)) {
+                                            Row {
+                                                Text("Source set", Modifier
+                                                    .padding(start = 16.dp)
+                                                    .align(Alignment.CenterVertically))
+                                                Spacer(Modifier.weight(1f))
+                                                FlorisIconButton(
+                                                    onClick = {
+                                                        workspace.update {
+                                                            if (propertySetIndex > 0) {
+                                                                val set = sets.removeAt(propertySetIndex)
+                                                                sets.add(propertySetIndex - 1, set)
+                                                            }
+                                                        }
+                                                    },
+                                                    icon = Icons.Default.KeyboardArrowUp,
+                                                    iconColor = MaterialTheme.colorScheme.primary,
+                                                    iconModifier = Modifier.size(ButtonDefaults.IconSize),
+                                                    enabled = propertySetIndex > 0,
+                                                )
+                                                FlorisIconButton(
+                                                    onClick = {
+                                                        workspace.update {
+                                                            if (propertySetIndex + 1 < sets.size) {
+                                                                val set = sets.removeAt(propertySetIndex)
+                                                                sets.add(propertySetIndex + 1, set)
+                                                            }
+                                                        }
+                                                    },
+                                                    icon = Icons.Default.KeyboardArrowDown,
+                                                    iconColor = MaterialTheme.colorScheme.primary,
+                                                    iconModifier = Modifier.size(ButtonDefaults.IconSize),
+                                                    enabled = propertySetIndex + 1 < sets.size,
+                                                )
+                                                FlorisIconButton(
+                                                    onClick = {
+                                                        workspace.update {
+                                                            sets.removeAt(propertySetIndex)
+                                                        }
+                                                    },
+                                                    icon = Icons.Default.Delete,
+                                                    iconColor = MaterialTheme.colorScheme.primary,
+                                                    iconModifier = Modifier.size(ButtonDefaults.IconSize),
+                                                )
+                                                FlorisIconButton(
+                                                    onClick = {
+                                                        snyggPropertySetForEditing = propertySet
+                                                        snyggPropertyToEdit = SnyggEmptyPropertyInfoForAdding.copy(
+                                                            rule = rule,
+                                                        )
+                                                    },
+                                                    icon = Icons.Default.Add,
+                                                    iconColor = MaterialTheme.colorScheme.primary,
+                                                    iconModifier = Modifier.size(ButtonDefaults.IconSize),
+                                                )
+                                            }
+                                            SinglePropertySetEditor(propertySet)
+                                        }
+                                    }
+                                }
                             }
                         }
                     }
@@ -369,7 +539,14 @@ fun ThemeEditorScreen(
                                     true
                                 }
                                 oldRule == SnyggEmptyRuleForAdding -> {
-                                    rules[newRule] = SnyggPropertySetEditor()
+                                    when (SnyggSpec.propertySetSpecOf(newRule)!!.type) {
+                                        SnyggSpecDecl.PropertySet.Type.SINGLE_SET -> {
+                                            rules[newRule] = SnyggSinglePropertySetEditor()
+                                        }
+                                        SnyggSpecDecl.PropertySet.Type.MULTIPLE_SETS -> {
+                                            rules[newRule] = SnyggMultiplePropertySetsEditor()
+                                        }
+                                    }
                                     snyggRuleToEdit = null
                                     scope.launch {
                                         lazyListState.animateScrollToItem(index = rules.keys.indexOf(newRule))
@@ -396,11 +573,12 @@ fun ThemeEditorScreen(
         val propertyToEdit = snyggPropertyToEdit
         if (propertyToEdit != null) {
             EditPropertyDialog(
-                propertySetSpec = snyggPropertySetSpecForEditing,
                 initProperty = propertyToEdit,
                 level = snyggLevel,
-                displayColorsAs = displayColorsAs,
+                colorRepresentation = colorRepresentation,
                 definedVariables = definedVariables,
+                fontNames = fontNames,
+                workspace = workspace,
                 onConfirmNewValue = { name, value ->
                     val properties = snyggPropertySetForEditing?.properties ?: return@EditPropertyDialog false
                     if (propertyToEdit == SnyggEmptyPropertyInfoForAdding && properties.containsKey(name)) {
@@ -441,8 +619,6 @@ private fun ComponentMetaEditorDialog(
     var authors by rememberSaveable { mutableStateOf(editor.authors.joinToString("\n")) }
     val authorsValidation = rememberValidationResult(ExtensionValidation.ComponentAuthors, authors)
     var isNightTheme by rememberSaveable { mutableStateOf(editor.isNightTheme) }
-    var isBorderless by rememberSaveable { mutableStateOf(editor.isBorderless) }
-    val isMaterialYouAware by rememberSaveable { mutableStateOf(editor.isMaterialYouAware) }
     var stylesheetPath by rememberSaveable { mutableStateOf(editor.stylesheetPath) }
     val stylesheetPathValidation = rememberValidationResult(ExtensionValidation.ThemeComponentStylesheetPath, stylesheetPath)
 
@@ -464,8 +640,6 @@ private fun ComponentMetaEditorDialog(
                     editor.label = label.trim()
                     editor.authors = authors.lines().map { it.trim() }.filter { it.isNotBlank() }
                     editor.isNightTheme = isNightTheme
-                    editor.isBorderless = isBorderless
-                    editor.isMaterialYouAware = isMaterialYouAware
                     editor.stylesheetPath = stylesheetPath.trim()
                 }
                 onConfirm()
@@ -477,31 +651,28 @@ private fun ComponentMetaEditorDialog(
     ) {
         Column {
             DialogProperty(text = stringRes(R.string.ext__meta__id)) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
                     value = id,
                     onValueChange = { id = it },
                     keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Ascii),
                     singleLine = true,
-                    showValidationError = showValidationErrors,
-                    validationResult = idValidation,
                 )
+                Validation(showValidationErrors, idValidation)
             }
             DialogProperty(text = stringRes(R.string.ext__meta__label)) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
                     value = label,
                     onValueChange = { label = it },
                     singleLine = true,
-                    showValidationError = showValidationErrors,
-                    validationResult = labelValidation,
                 )
+                Validation(showValidationErrors, labelValidation)
             }
             DialogProperty(text = stringRes(R.string.ext__meta__authors)) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
                     value = authors,
                     onValueChange = { authors = it },
-                    showValidationError = showValidationErrors,
-                    validationResult = authorsValidation,
                 )
+                Validation(showValidationErrors, authorsValidation)
             }
             JetPrefListItem(
                 modifier = Modifier.toggleable(isNightTheme) { isNightTheme = it },
@@ -509,28 +680,21 @@ private fun ComponentMetaEditorDialog(
                 trailing = {
                     Switch(checked = isNightTheme, onCheckedChange = null)
                 },
-            )
-            JetPrefListItem(
-                modifier = Modifier.toggleable(isBorderless) { isBorderless = it },
-                text = stringRes(R.string.settings__theme_editor__component_meta_is_borderless),
-                trailing = {
-                    Switch(checked = isBorderless, onCheckedChange = null)
-                },
+                colors = ListItemDefaults.colors(containerColor = AlertDialogDefaults.containerColor)
             )
             DialogProperty(text = stringRes(R.string.settings__theme_editor__component_meta_stylesheet_path)) {
-                FlorisOutlinedTextField(
+                JetPrefTextField(
                     value = stylesheetPath,
                     onValueChange = { stylesheetPath = it },
                     keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Ascii),
                     singleLine = true,
-                    placeholder = if (stylesheetPath.isEmpty()) {
+                    placeholderText = if (stylesheetPath.isEmpty()) {
                         ThemeExtensionComponent.defaultStylesheetPath(id.trim())
                     } else {
                         null
                     },
-                    showValidationError = showValidationErrors,
-                    validationResult = stylesheetPathValidation,
                 )
+                Validation(showValidationErrors, stylesheetPathValidation)
             }
         }
     }
@@ -544,6 +708,8 @@ private fun SnyggRuleRow(
     onEditRuleBtnClick: () -> Unit,
     onAddPropertyBtnClick: () -> Unit,
 ) {
+    val context = LocalContext.current
+
     @Composable
     fun Selector(text: String) {
         Text(
@@ -565,7 +731,6 @@ private fun SnyggRuleRow(
             style = MaterialTheme.typography.bodyMedium,
             color = LocalContentColor.current.copy(alpha = 0.56f),
             fontFamily = FontFamily.Monospace,
-            maxLines = 1,
             overflow = TextOverflow.Ellipsis,
         )
     }
@@ -580,38 +745,53 @@ private fun SnyggRuleRow(
                 .weight(1f)
                 .padding(vertical = 8.dp, horizontal = 10.dp),
         ) {
-            Text(
-                text = translateElementName(rule, level),
-                style = MaterialTheme.typography.bodyMedium,
-                fontFamily = FontFamily.Monospace,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-            Row(modifier = Modifier.fillMaxWidth()) {
-                if (rule.pressedSelector) {
-                    Selector(text = when (level) {
-                        SnyggLevel.DEVELOPER -> SnyggRule.PRESSED_SELECTOR
-                        else -> stringRes(R.string.snygg__rule_selector__pressed)
-                    })
+            if (rule is SnyggElementRule) {
+                Text(
+                    text = context.translateElementName(rule, level),
+                    style = MaterialTheme.typography.bodyMedium,
+                    fontFamily = FontFamily.Monospace,
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis,
+                )
+                Row(modifier = Modifier.fillMaxWidth()) {
+                    if (rule.selector == SnyggSelector.PRESSED) {
+                        Selector(
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.PRESSED.id
+                                else -> stringRes(R.string.snygg__rule_selector__pressed)
+                            }
+                        )
+                    }
+                    if (rule.selector == SnyggSelector.FOCUS) {
+                        Selector(
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.FOCUS.id
+                                else -> stringRes(R.string.snygg__rule_selector__focus)
+                            }
+                        )
+                    }
+                    if (rule.selector == SnyggSelector.HOVER) {
+                        Selector(
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.HOVER.id
+                                else -> stringRes(R.string.snygg__rule_selector__hover)
+                            }
+                        )
+                    }
+                    if (rule.selector == SnyggSelector.DISABLED) {
+                        Selector(
+                            text = when (level) {
+                                SnyggLevel.DEVELOPER -> SnyggSelector.DISABLED.id
+                                else -> stringRes(R.string.snygg__rule_selector__disabled)
+                            }
+                        )
+                    }
                 }
-                if (rule.focusSelector) {
-                    Selector(text = when (level) {
-                        SnyggLevel.DEVELOPER -> SnyggRule.FOCUS_SELECTOR
-                        else -> stringRes(R.string.snygg__rule_selector__focus)
-                    })
+                for ((attrKey, attrValue) in rule.attributes) {
+                    AttributesList(text = attrKey, list = attrValue.toString())
                 }
-                if (rule.disabledSelector) {
-                    Selector(text = when (level) {
-                        SnyggLevel.DEVELOPER -> SnyggRule.DISABLED_SELECTOR
-                        else -> stringRes(R.string.snygg__rule_selector__disabled)
-                    })
-                }
-            }
-            if (rule.codes.isNotEmpty()) {
-                AttributesList(text = "code", list = remember(rule.codes) { rule.codes.toString() })
-            }
-            if (rule.shiftStates.isNotEmpty()) {
-                AttributesList(text = "shiftstate", list = remember(rule.shiftStates) { rule.shiftStates.toString() })
+            } else {
+                Text(text = rule.toString())
             }
         }
         if (showEditBtn) {
@@ -645,10 +825,31 @@ internal fun DialogProperty(
                     .weight(1f)
                     .padding(vertical = 8.dp),
                 text = text,
-                style = MaterialTheme.typography.titleSmall,
+                style = MaterialTheme.typography.titleMedium,
             )
             trailingIconTitle()
         }
         content()
     }
 }
+
+private object CustomRuleComparator : Comparator<SnyggRule> {
+    @Suppress("IfThenToElvis")
+    override fun compare(a: SnyggRule, b: SnyggRule): Int {
+        return if (a !is SnyggElementRule || b !is SnyggElementRule || a.elementName == b.elementName) {
+            a.compareTo(b)
+        } else {
+            val aOrdinal = FlorisImeUi.elementNamesToOrdinals[a.elementName]
+            val bOrdinal = FlorisImeUi.elementNamesToOrdinals[b.elementName]
+            if (aOrdinal == null && bOrdinal == null) {
+                a.elementName.compareTo(b.elementName)
+            } else if (bOrdinal == null) {
+                -1
+            } else if (aOrdinal == null) {
+                1
+            } else {
+                aOrdinal.compareTo(bOrdinal)
+            }
+        }
+    }
+}

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/ThemeScreen.kt

@@ -16,17 +16,18 @@
 
 package dev.patrickgold.florisboard.app.settings.theme
 
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Brightness2
 import androidx.compose.material.icons.filled.BrightnessAuto
+import androidx.compose.material.icons.filled.ColorLens
 import androidx.compose.material.icons.filled.DarkMode
 import androidx.compose.material.icons.filled.LightMode
+import androidx.compose.material.icons.filled.WbTwilight
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.unit.dp
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
@@ -35,14 +36,17 @@ import dev.patrickgold.florisboard.app.ext.AddonManagementReferenceBox
 import dev.patrickgold.florisboard.app.ext.ExtensionListScreenType
 import dev.patrickgold.florisboard.ime.theme.ThemeManager
 import dev.patrickgold.florisboard.ime.theme.ThemeMode
-import dev.patrickgold.florisboard.lib.compose.FlorisInfoCard
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.florisboard.lib.ext.ExtensionComponentName
 import dev.patrickgold.florisboard.themeManager
 import dev.patrickgold.jetpref.datastore.model.observeAsState
+import dev.patrickgold.jetpref.datastore.ui.ColorPickerPreference
 import dev.patrickgold.jetpref.datastore.ui.ListPreference
+import dev.patrickgold.jetpref.datastore.ui.LocalTimePickerPreference
 import dev.patrickgold.jetpref.datastore.ui.Preference
+import dev.patrickgold.jetpref.datastore.ui.isMaterialYou
+import org.florisboard.lib.color.ColorMappings
 
 @Composable
 fun ThemeScreen() = FlorisScreen {
@@ -61,35 +65,15 @@ fun ThemeScreen() = FlorisScreen {
     }
 
     content {
-        val themeMode by prefs.theme.mode.observeAsState()
         val dayThemeId by prefs.theme.dayThemeId.observeAsState()
         val nightThemeId by prefs.theme.nightThemeId.observeAsState()
 
-        /*Card(modifier = Modifier.padding(8.dp)) {
-            Column(modifier = Modifier.padding(8.dp)) {
-                Text("If you want to give feedback on the new stylesheet editor and theme engine, please do so in below linked feedback thread:\n")
-                Button(onClick = {
-                    context.launchUrl("https://github.com/florisboard/florisboard/discussions/1531")
-                }) {
-                    Text("Open Feedback Thread")
-                }
-            }
-        }*/
-
         ListPreference(
             prefs.theme.mode,
             icon = Icons.Default.BrightnessAuto,
             title = stringRes(R.string.pref__theme__mode__label),
             entries = enumDisplayEntriesOf(ThemeMode::class),
         )
-        if (themeMode == ThemeMode.FOLLOW_TIME) {
-            FlorisInfoCard(
-                modifier = Modifier.padding(8.dp),
-                text = """
-                The theme mode "Follow time" is not available in this beta release.
-            """.trimIndent()
-            )
-        }
         Preference(
             icon = Icons.Default.LightMode,
             title = stringRes(R.string.pref__theme__day),
@@ -108,6 +92,34 @@ fun ThemeScreen() = FlorisScreen {
                 navController.navigate(Routes.Settings.ThemeManager(ThemeManagerScreenAction.SELECT_NIGHT))
             },
         )
+        LocalTimePickerPreference(
+            pref = prefs.theme.sunriseTime,
+            title = stringRes(R.string.pref__theme__sunrise_time__label),
+            icon = Icons.Default.WbTwilight,
+            enabledIf = { prefs.theme.mode isEqualTo ThemeMode.FOLLOW_TIME },
+        )
+        LocalTimePickerPreference(
+            pref = prefs.theme.sunsetTime,
+            title = stringRes(R.string.pref__theme__sunset_time__label),
+            icon = Icons.Default.Brightness2,
+            enabledIf = { prefs.theme.mode isEqualTo ThemeMode.FOLLOW_TIME },
+        )
+        ColorPickerPreference(
+            pref = prefs.theme.accentColor,
+            title = stringRes(R.string.pref__theme__theme_accent_color__label),
+            defaultValueLabel = stringRes(R.string.action__default),
+            icon = Icons.Default.ColorLens,
+            defaultColors = ColorMappings.colors,
+            showAlphaSlider = false,
+            enableAdvancedLayout = false,
+            colorOverride = {
+                if (it.isMaterialYou(context)) {
+                    Color.Unspecified
+                } else {
+                    it
+                }
+            }
+        )
 
         AddonManagementReferenceBox(type = ExtensionListScreenType.EXT_THEME)
     }

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/theme/ThemeTranslations.kt

@@ -16,134 +16,108 @@
 
 package dev.patrickgold.florisboard.app.settings.theme
 
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.graphics.Color
+import android.content.Context
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.lib.UnicodeCtrlChar
-import dev.patrickgold.florisboard.lib.compose.stringRes
+import dev.patrickgold.jetpref.material.ui.ColorRepresentation
+import org.florisboard.lib.kotlin.simpleNameOrEnclosing
 import org.florisboard.lib.snygg.Snygg
-import org.florisboard.lib.snygg.SnyggLevel
-import org.florisboard.lib.snygg.SnyggRule
-import org.florisboard.lib.snygg.value.RgbaColor
+import org.florisboard.lib.snygg.SnyggElementRule
 import org.florisboard.lib.snygg.value.SnyggCircleShapeValue
+import org.florisboard.lib.snygg.value.SnyggCustomFontFamilyValue
 import org.florisboard.lib.snygg.value.SnyggCutCornerDpShapeValue
 import org.florisboard.lib.snygg.value.SnyggCutCornerPercentShapeValue
 import org.florisboard.lib.snygg.value.SnyggDefinedVarValue
 import org.florisboard.lib.snygg.value.SnyggDpSizeValue
-import org.florisboard.lib.snygg.value.SnyggExplicitInheritValue
-import org.florisboard.lib.snygg.value.SnyggImplicitInheritValue
-import org.florisboard.lib.snygg.value.SnyggMaterialYouDarkColorValue
-import org.florisboard.lib.snygg.value.SnyggMaterialYouLightColorValue
+import org.florisboard.lib.snygg.value.SnyggDynamicDarkColorValue
+import org.florisboard.lib.snygg.value.SnyggDynamicLightColorValue
+import org.florisboard.lib.snygg.value.SnyggFontStyleValue
+import org.florisboard.lib.snygg.value.SnyggFontWeightValue
+import org.florisboard.lib.snygg.value.SnyggGenericFontFamilyValue
+import org.florisboard.lib.snygg.value.SnyggInheritValue
+import org.florisboard.lib.snygg.value.SnyggNoValue
+import org.florisboard.lib.snygg.value.SnyggContentScaleValue
+import org.florisboard.lib.snygg.value.SnyggPaddingValue
 import org.florisboard.lib.snygg.value.SnyggPercentageSizeValue
 import org.florisboard.lib.snygg.value.SnyggRectangleShapeValue
 import org.florisboard.lib.snygg.value.SnyggRoundedCornerDpShapeValue
 import org.florisboard.lib.snygg.value.SnyggRoundedCornerPercentShapeValue
-import org.florisboard.lib.snygg.value.SnyggSolidColorValue
 import org.florisboard.lib.snygg.value.SnyggSpSizeValue
+import org.florisboard.lib.snygg.value.SnyggStaticColorValue
+import org.florisboard.lib.snygg.value.SnyggTextAlignValue
+import org.florisboard.lib.snygg.value.SnyggTextDecorationLineValue
+import org.florisboard.lib.snygg.value.SnyggTextMaxLinesValue
+import org.florisboard.lib.snygg.value.SnyggTextOverflowValue
+import org.florisboard.lib.snygg.value.SnyggUndefinedValue
+import org.florisboard.lib.snygg.value.SnyggUriValue
 import org.florisboard.lib.snygg.value.SnyggValue
 import org.florisboard.lib.snygg.value.SnyggValueEncoder
-import kotlin.math.roundToInt
+import org.florisboard.lib.snygg.value.SnyggYesValue
 
-@Composable
-internal fun translateElementName(rule: SnyggRule, level: SnyggLevel): String {
-    return translateElementName(rule.element, level) ?: remember {
-        buildString {
-            if (rule.isAnnotation) {
-                append(SnyggRule.ANNOTATION_MARKER)
-            }
-            append(rule.element)
-        }
+internal fun Context.translateElementName(rule: SnyggElementRule, level: SnyggLevel): String {
+    return translateElementName(rule.elementName, level) ?: rule.elementName
+}
+
+internal fun Context.translateElementName(element: String, level: SnyggLevel): String? {
+    return when (level) {
+        SnyggLevel.DEVELOPER -> null
+        else -> FlorisImeUi.elementNamesToTranslation[element]?.let { getString(it) }
     }
 }
 
-@Composable
-internal fun translateElementName(element: String, level: SnyggLevel): String? {
-    return when (level) {
-        SnyggLevel.DEVELOPER -> null
-        else -> when (element) {
-            "defines" -> R.string.snygg__rule_element__defines
-            FlorisImeUi.Keyboard -> R.string.snygg__rule_element__keyboard
-            FlorisImeUi.Key -> R.string.snygg__rule_element__key
-            FlorisImeUi.KeyHint -> R.string.snygg__rule_element__key_hint
-            FlorisImeUi.KeyPopup -> R.string.snygg__rule_element__key_popup
-            FlorisImeUi.ClipboardHeader -> R.string.snygg__rule_element__clipboard_header
-            FlorisImeUi.ClipboardItem -> R.string.snygg__rule_element__clipboard_item
-            FlorisImeUi.ClipboardItemPopup -> R.string.snygg__rule_element__clipboard_item_popup
-            FlorisImeUi.EmojiKey -> R.string.snygg__rule_element__emoji_key
-            FlorisImeUi.EmojiKeyPopup -> R.string.snygg__rule_element__emoji_key_popup
-            FlorisImeUi.EmojiTab -> R.string.snygg__rule_element__emoji_key_tab
-            FlorisImeUi.ExtractedLandscapeInputLayout -> R.string.snygg__rule_element__extracted_landscape_input_layout
-            FlorisImeUi.ExtractedLandscapeInputField -> R.string.snygg__rule_element__extracted_landscape_input_field
-            FlorisImeUi.ExtractedLandscapeInputAction -> R.string.snygg__rule_element__extracted_landscape_input_action
-            FlorisImeUi.GlideTrail -> R.string.snygg__rule_element__glide_trail
-            FlorisImeUi.IncognitoModeIndicator -> R.string.snygg__rule_element__incognito_mode_indicator
-            FlorisImeUi.OneHandedPanel -> R.string.snygg__rule_element__one_handed_panel
-            FlorisImeUi.Smartbar -> R.string.snygg__rule_element__smartbar
-            FlorisImeUi.SmartbarSharedActionsRow -> R.string.snygg__rule_element__smartbar_shared_actions_row
-            FlorisImeUi.SmartbarSharedActionsToggle -> R.string.snygg__rule_element__smartbar_shared_actions_toggle
-            FlorisImeUi.SmartbarExtendedActionsRow -> R.string.snygg__rule_element__smartbar_extended_actions_row
-            FlorisImeUi.SmartbarExtendedActionsToggle -> R.string.snygg__rule_element__smartbar_extended_actions_toggle
-            FlorisImeUi.SmartbarActionKey -> R.string.snygg__rule_element__smartbar_action_key
-            FlorisImeUi.SmartbarActionTile -> R.string.snygg__rule_element__smartbar_action_tile
-            FlorisImeUi.SmartbarActionsOverflow -> R.string.snygg__rule_element__smartbar_actions_overflow
-            FlorisImeUi.SmartbarActionsOverflowCustomizeButton -> R.string.snygg__rule_element__smartbar_actions_overflow_customize_button
-            FlorisImeUi.SmartbarActionsEditor -> R.string.snygg__rule_element__smartbar_actions_editor
-            FlorisImeUi.SmartbarActionsEditorHeader -> R.string.snygg__rule_element__smartbar_actions_editor_header
-            FlorisImeUi.SmartbarActionsEditorSubheader -> R.string.snygg__rule_element__smartbar_actions_editor_subheader
-            FlorisImeUi.SmartbarCandidatesRow -> R.string.snygg__rule_element__smartbar_candidates_row
-            FlorisImeUi.SmartbarCandidateWord -> R.string.snygg__rule_element__smartbar_candidate_word
-            FlorisImeUi.SmartbarCandidateClip -> R.string.snygg__rule_element__smartbar_candidate_clip
-            FlorisImeUi.SmartbarCandidateSpacer -> R.string.snygg__rule_element__smartbar_candidate_spacer
-            FlorisImeUi.SystemNavBar -> R.string.snygg__rule_element__system_nav_bar
-            else -> null
-        }
-    }.let { if (it != null) { stringRes(it) } else { null } }
-}
+private val PropertyNameMap = mapOf(
+    Snygg.Background to R.string.snygg__property_name__background,
+    Snygg.Foreground to R.string.snygg__property_name__foreground,
+    Snygg.BackgroundImage to R.string.snygg__property_name__background_image,
+    Snygg.ContentScale to R.string.snygg__property_name__content_scale,
+    Snygg.BorderColor to R.string.snygg__property_name__border_color,
+    Snygg.BorderStyle to R.string.snygg__property_name__border_style,
+    Snygg.BorderWidth to R.string.snygg__property_name__border_width,
+    Snygg.FontFamily to R.string.snygg__property_name__font_family,
+    Snygg.FontSize to R.string.snygg__property_name__font_size,
+    Snygg.FontStyle to R.string.snygg__property_name__font_style,
+    Snygg.FontWeight to R.string.snygg__property_name__font_weight,
+    Snygg.LetterSpacing to R.string.snygg__property_name__letter_spacing,
+    Snygg.LineHeight to R.string.snygg__property_name__line_height,
+    Snygg.Margin to R.string.snygg__property_name__margin,
+    Snygg.Padding to R.string.snygg__property_name__padding,
+    Snygg.ShadowColor to R.string.snygg__property_name__shadow_color,
+    Snygg.ShadowElevation to R.string.snygg__property_name__shadow_elevation,
+    Snygg.Shape to R.string.snygg__property_name__shape,
+    Snygg.Clip to R.string.snygg__property_name__clip,
+    Snygg.Src to R.string.snygg__property_name__src,
+    Snygg.TextAlign to R.string.snygg__property_name__text_align,
+    Snygg.TextDecorationLine to R.string.snygg__property_name__text_decoration_line,
+    Snygg.TextMaxLines to R.string.snygg__property_name__text_max_lines,
+    Snygg.TextOverflow to R.string.snygg__property_name__text_overflow,
+    "--primary" to R.string.snygg__property_name__var_primary,
+    "--primary-variant" to R.string.snygg__property_name__var_primary_variant,
+    "--secondary" to R.string.snygg__property_name__var_secondary,
+    "--secondary-variant" to R.string.snygg__property_name__var_secondary_variant,
+    "--background" to R.string.snygg__property_name__var_background,
+    "--surface" to R.string.snygg__property_name__var_surface,
+    "--surface-variant" to R.string.snygg__property_name__var_surface_variant,
+    "--on-primary" to R.string.snygg__property_name__var_on_primary,
+    "--on-secondary" to R.string.snygg__property_name__var_on_secondary,
+    "--on-background" to R.string.snygg__property_name__var_on_background,
+    "--on-surface" to R.string.snygg__property_name__var_on_surface,
+    "--on-surface-variant" to R.string.snygg__property_name__var_on_surface_variant,
+    "--shape" to R.string.snygg__property_name__var_shape,
+    "--shape-variant" to R.string.snygg__property_name__var_shape_variant
+)
 
-@Composable
-internal fun translatePropertyName(propertyName: String, level: SnyggLevel): String {
+internal fun Context.translatePropertyName(propertyName: String, level: SnyggLevel): String {
     return when (level) {
         SnyggLevel.DEVELOPER -> null
-        else -> when (propertyName) {
-            Snygg.Width -> R.string.snygg__property_name__width
-            Snygg.Height -> R.string.snygg__property_name__height
-            Snygg.Background -> R.string.snygg__property_name__background
-            Snygg.Foreground -> R.string.snygg__property_name__foreground
-            Snygg.BorderColor -> R.string.snygg__property_name__border_color
-            Snygg.BorderStyle -> R.string.snygg__property_name__border_style
-            Snygg.BorderWidth -> R.string.snygg__property_name__border_width
-            Snygg.FontFamily -> R.string.snygg__property_name__font_family
-            Snygg.FontSize -> R.string.snygg__property_name__font_size
-            Snygg.FontStyle -> R.string.snygg__property_name__font_style
-            Snygg.FontVariant -> R.string.snygg__property_name__font_variant
-            Snygg.FontWeight -> R.string.snygg__property_name__font_weight
-            Snygg.ShadowElevation -> R.string.snygg__property_name__shadow_elevation
-            Snygg.Shape -> R.string.snygg__property_name__shape
-            "--primary" -> R.string.snygg__property_name__var_primary
-            "--primary-variant" -> R.string.snygg__property_name__var_primary_variant
-            "--secondary" -> R.string.snygg__property_name__var_secondary
-            "--secondary-variant" -> R.string.snygg__property_name__var_secondary_variant
-            "--background" -> R.string.snygg__property_name__var_background
-            "--surface" -> R.string.snygg__property_name__var_surface
-            "--surface-variant" -> R.string.snygg__property_name__var_surface_variant
-            "--on-primary" -> R.string.snygg__property_name__var_on_primary
-            "--on-secondary" -> R.string.snygg__property_name__var_on_secondary
-            "--on-background" -> R.string.snygg__property_name__var_on_background
-            "--on-surface" -> R.string.snygg__property_name__var_on_surface
-            "--on-surface-variant" -> R.string.snygg__property_name__var_on_surface_variant
-            "--shape" -> R.string.snygg__property_name__var_shape
-            "--shape-variant" -> R.string.snygg__property_name__var_shape_variant
-            else -> null
-        }
+        else -> PropertyNameMap[propertyName]
     }.let { resId ->
         when {
             resId != null -> {
-                stringRes(resId)
+                getString(resId)
             }
             propertyName.isBlank() -> {
-                stringRes(R.string.general__select_dropdown_value_placeholder)
+                getString(R.string.general__select_dropdown_value_placeholder)
             }
             else -> {
                 propertyName
@@ -152,15 +126,14 @@ internal fun translatePropertyName(propertyName: String, level: SnyggLevel): Str
     }
 }
 
-@Composable
-internal fun translatePropertyValue(
+internal fun Context.translatePropertyValue(
     propertyValue: SnyggValue,
     level: SnyggLevel,
-    displayColorsAs: DisplayColorsAs,
+    colorRepresentation: ColorRepresentation,
 ): String {
     return when (propertyValue) {
-        is SnyggSolidColorValue -> remember(propertyValue.color, displayColorsAs) {
-            buildColorString(propertyValue.color, displayColorsAs)
+        is SnyggStaticColorValue -> {
+            colorRepresentation.formatColor(propertyValue.color, withAlpha = true)
         }
         else -> when (level) {
             SnyggLevel.DEVELOPER -> null
@@ -176,51 +149,38 @@ internal fun translatePropertyValue(
     }
 }
 
-internal fun buildColorString(color: Color, displayColorsAs: DisplayColorsAs): String {
-    return when (displayColorsAs) {
-        DisplayColorsAs.HEX8 -> buildString {
-            append(UnicodeCtrlChar.LeftToRightIsolate)
-            append("#")
-            append((color.red * RgbaColor.RedMax).roundToInt().toString(16).padStart(2, '0'))
-            append((color.green * RgbaColor.GreenMax).roundToInt().toString(16).padStart(2, '0'))
-            append((color.blue * RgbaColor.BlueMax).roundToInt().toString(16).padStart(2, '0'))
-            append((color.alpha * 0xFF).roundToInt().toString(16).padStart(2, '0'))
-            append(UnicodeCtrlChar.PopDirectionalIsolate)
-        }
-        DisplayColorsAs.RGBA -> buildString {
-            append(UnicodeCtrlChar.LeftToRightIsolate)
-            append("rgba(")
-            append((color.red * RgbaColor.RedMax).roundToInt())
-            append(",")
-            append((color.green * RgbaColor.GreenMax).roundToInt())
-            append(",")
-            append((color.blue * RgbaColor.BlueMax).roundToInt())
-            append(",")
-            append(color.alpha)
-            append(")")
-            append(UnicodeCtrlChar.PopDirectionalIsolate)
-        }
-    }
-}
+private val PropertyValueEncoderNameMap = mapOf(
+    SnyggUndefinedValue to R.string.general__select_dropdown_value_placeholder,
+    SnyggInheritValue to R.string.snygg__property_value__explicit_inherit,
+    SnyggDefinedVarValue to R.string.snygg__property_value__defined_var,
+    SnyggYesValue to R.string.snygg__property_value__yes,
+    SnyggNoValue to R.string.snygg__property_value__no,
+    SnyggStaticColorValue to R.string.snygg__property_value__solid_color,
+    SnyggDynamicLightColorValue to R.string.snygg__property_value__material_you_light_color,
+    SnyggDynamicDarkColorValue to R.string.snygg__property_value__material_you_dark_color,
+    SnyggGenericFontFamilyValue to R.string.snygg__property_value__font_family_generic,
+    SnyggCustomFontFamilyValue to R.string.snygg__property_value__font_family_custom,
+    SnyggFontStyleValue to R.string.snygg__property_value__font_style,
+    SnyggFontWeightValue to R.string.snygg__property_value__font_weight,
+    SnyggPaddingValue to R.string.snygg__property_value__padding,
+    SnyggRectangleShapeValue to R.string.snygg__property_value__rectangle_shape,
+    SnyggCircleShapeValue to R.string.snygg__property_value__circle_shape,
+    SnyggCutCornerDpShapeValue to R.string.snygg__property_value__cut_corner_shape_dp,
+    SnyggCutCornerPercentShapeValue to R.string.snygg__property_value__cut_corner_shape_percent,
+    SnyggRoundedCornerDpShapeValue to R.string.snygg__property_value__rounded_corner_shape_dp,
+    SnyggRoundedCornerPercentShapeValue to R.string.snygg__property_value__rounded_corner_shape_percent,
+    SnyggDpSizeValue to R.string.snygg__property_value__dp_size,
+    SnyggSpSizeValue to R.string.snygg__property_value__sp_size,
+    SnyggPercentageSizeValue to R.string.snygg__property_value__percentage_size,
+    SnyggContentScaleValue to R.string.snygg__property_value__content_scale,
+    SnyggTextAlignValue to R.string.snygg__property_value__text_align,
+    SnyggTextDecorationLineValue to R.string.snygg__property_value__text_decoration_line,
+    SnyggTextMaxLinesValue to R.string.snygg__property_value__text_max_lines,
+    SnyggTextOverflowValue to R.string.snygg__property_value__text_overflow,
+    SnyggUriValue to R.string.snygg__property_value__uri,
+)
 
-@Composable
-internal fun translatePropertyValueEncoderName(encoder: SnyggValueEncoder): String {
-    return when (encoder) {
-        SnyggImplicitInheritValue -> R.string.general__select_dropdown_value_placeholder
-        SnyggExplicitInheritValue -> R.string.snygg__property_value__explicit_inherit
-        SnyggSolidColorValue -> R.string.snygg__property_value__solid_color
-        SnyggMaterialYouLightColorValue -> R.string.snygg__property_value__material_you_light_color
-        SnyggMaterialYouDarkColorValue -> R.string.snygg__property_value__material_you_dark_color
-        SnyggRectangleShapeValue -> R.string.snygg__property_value__rectangle_shape
-        SnyggCircleShapeValue -> R.string.snygg__property_value__circle_shape
-        SnyggCutCornerDpShapeValue -> R.string.snygg__property_value__cut_corner_shape_dp
-        SnyggCutCornerPercentShapeValue -> R.string.snygg__property_value__cut_corner_shape_percent
-        SnyggRoundedCornerDpShapeValue -> R.string.snygg__property_value__rounded_corner_shape_dp
-        SnyggRoundedCornerPercentShapeValue -> R.string.snygg__property_value__rounded_corner_shape_percent
-        SnyggDpSizeValue -> R.string.snygg__property_value__dp_size
-        SnyggSpSizeValue -> R.string.snygg__property_value__sp_size
-        SnyggPercentageSizeValue -> R.string.snygg__property_value__percentage_size
-        SnyggDefinedVarValue -> R.string.snygg__property_value__defined_var
-        else -> null
-    }.let { if (it != null) { stringRes(it) } else { encoder::class.simpleName ?: "" } }.toString()
+internal fun Context.translatePropertyValueEncoderName(encoder: SnyggValueEncoder): String {
+    return PropertyValueEncoderNameMap[encoder]?.let { getString(it) }
+        ?: encoder::class.simpleNameOrEnclosing().orEmpty()
 }

app/src/main/kotlin/dev/patrickgold/florisboard/app/settings/typing/TypingScreen.kt

@@ -35,6 +35,7 @@ import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
 import dev.patrickgold.florisboard.app.enumDisplayEntriesOf
+import dev.patrickgold.florisboard.ime.keyboard.IncognitoMode
 import dev.patrickgold.florisboard.ime.nlp.SpellingLanguageMode
 import dev.patrickgold.florisboard.lib.compose.FlorisErrorCard
 import dev.patrickgold.florisboard.lib.compose.FlorisHyperlinkText
@@ -47,6 +48,7 @@ import dev.patrickgold.jetpref.datastore.ui.ListPreference
 import dev.patrickgold.jetpref.datastore.ui.Preference
 import dev.patrickgold.jetpref.datastore.ui.PreferenceGroup
 import dev.patrickgold.jetpref.datastore.ui.SwitchPreference
+import dev.patrickgold.jetpref.datastore.ui.vectorResource
 import org.florisboard.lib.android.AndroidVersion
 
 @OptIn(ExperimentalJetPrefDatastoreUi::class)
@@ -79,28 +81,18 @@ fun TypingScreen() = FlorisScreen {
                 summary = stringRes(R.string.pref__suggestion__block_possibly_offensive__summary),
                 enabledIf = { prefs.suggestion.enabled isEqualTo true },
             )
-            SwitchPreference(
-                prefs.suggestion.clipboardContentEnabled,
-                title = stringRes(R.string.pref__suggestion__clipboard_content_enabled__label),
-                summary = stringRes(R.string.pref__suggestion__clipboard_content_enabled__summary),
-                enabledIf = { prefs.suggestion.enabled isEqualTo true },
-            )
-            DialogSliderPreference(
-                prefs.suggestion.clipboardContentTimeout,
-                title = stringRes(R.string.pref__suggestion__clipboard_content_timeout__label),
-                valueLabel = { stringRes(R.string.pref__suggestion__clipboard_content_timeout__summary, "v" to it) },
-                min = 30,
-                max = 300,
-                stepIncrement = 5,
-                enabledIf = { prefs.suggestion.enabled isEqualTo true },
-                visibleIf = { prefs.suggestion.clipboardContentEnabled isEqualTo true },
-            )
             SwitchPreference(
                 prefs.suggestion.api30InlineSuggestionsEnabled,
                 title = stringRes(R.string.pref__suggestion__api30_inline_suggestions_enabled__label),
                 summary = stringRes(R.string.pref__suggestion__api30_inline_suggestions_enabled__summary),
                 visibleIf = { AndroidVersion.ATLEAST_API30_R },
             )
+            ListPreference(
+                prefs.suggestion.incognitoMode,
+                icon = vectorResource(id = R.drawable.ic_incognito),
+                title = stringRes(R.string.pref__suggestion__incognito_mode__label),
+                entries = enumDisplayEntriesOf(IncognitoMode::class),
+            )
         }
 
         PreferenceGroup(title = stringRes(R.string.pref__correction__title)) {

app/src/main/kotlin/dev/patrickgold/florisboard/app/setup/SetupScreen.kt

@@ -45,9 +45,6 @@ import dev.patrickgold.florisboard.app.FlorisAppActivity
 import dev.patrickgold.florisboard.app.LocalNavController
 import dev.patrickgold.florisboard.app.Routes
 import dev.patrickgold.florisboard.app.florisPreferenceModel
-import org.florisboard.lib.android.AndroidVersion
-import dev.patrickgold.florisboard.lib.util.launchActivity
-import dev.patrickgold.florisboard.lib.util.launchUrl
 import dev.patrickgold.florisboard.lib.compose.FlorisBulletSpacer
 import dev.patrickgold.florisboard.lib.compose.FlorisScreen
 import dev.patrickgold.florisboard.lib.compose.FlorisScreenScope
@@ -56,9 +53,12 @@ import dev.patrickgold.florisboard.lib.compose.FlorisStepLayout
 import dev.patrickgold.florisboard.lib.compose.FlorisStepState
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.florisboard.lib.util.InputMethodUtils
+import dev.patrickgold.florisboard.lib.util.launchActivity
+import dev.patrickgold.florisboard.lib.util.launchUrl
 import dev.patrickgold.jetpref.datastore.model.observeAsState
 import dev.patrickgold.jetpref.datastore.ui.PreferenceUiScope
 import kotlinx.coroutines.delay
+import org.florisboard.lib.android.AndroidVersion
 
 
 @Composable
@@ -105,128 +105,65 @@ private fun FlorisScreenScope.content(
     hasNotificationPermission: NotificationPermissionState,
 ) {
 
-    // Show screen without notification permission if the android version is below android 13.
-    if (AndroidVersion.ATMOST_API32_S_V2) {
+    val stepState = rememberSaveable(saver = FlorisStepState.Saver) {
+        val initStep = when {
+            !isFlorisBoardEnabled -> Steps.EnableIme.id
+            !isFlorisBoardSelected -> Steps.SelectIme.id
+            hasNotificationPermission == NotificationPermissionState.NOT_SET && AndroidVersion.ATLEAST_API33_T -> Steps.SelectNotification.id
+            else -> Steps.FinishUp.id
+        }
+        FlorisStepState.new(init = initStep)
+    }
 
-        val stepState = rememberSaveable(saver = FlorisStepState.Saver) {
-            val initStep = when {
-                !isFlorisBoardEnabled -> Steps.WithoutNotifications.EnableIme.id
-                !isFlorisBoardSelected -> Steps.WithoutNotifications.SelectIme.id
-                else -> Steps.WithoutNotifications.FinishUp.id
-            }
-            FlorisStepState.new(init = initStep)
+    content {
+        LaunchedEffect(isFlorisBoardEnabled, isFlorisBoardSelected, hasNotificationPermission) {
+            stepState.setCurrentAuto(
+                when {
+                    !isFlorisBoardEnabled -> Steps.EnableIme.id
+                    !isFlorisBoardSelected -> Steps.SelectIme.id
+                    hasNotificationPermission == NotificationPermissionState.NOT_SET && AndroidVersion.ATLEAST_API33_T -> Steps.SelectNotification.id
+                    else -> Steps.FinishUp.id
+                }
+            )
         }
 
-        content {
-            LaunchedEffect(isFlorisBoardEnabled, isFlorisBoardSelected) {
-                stepState.setCurrentAuto(
-                    when {
-                        !isFlorisBoardEnabled -> Steps.WithoutNotifications.EnableIme.id
-                        !isFlorisBoardSelected -> Steps.WithoutNotifications.SelectIme.id
-                        else -> Steps.WithoutNotifications.FinishUp.id
-                    }
-                )
-            }
-
-            // Below block allows to return from the system IME enabler activity
-            // as soon as it gets selected.
-            LaunchedEffect(Unit) {
-                while (true) {
-                    delay(200L)
-                    val isEnabled = InputMethodUtils.isFlorisboardEnabled(context)
-                    if (stepState.getCurrentAuto().value == Steps.WithoutNotifications.EnableIme.id &&
-                        stepState.getCurrentManual().value == -1 &&
-                        !isFlorisBoardEnabled &&
-                        !isFlorisBoardSelected &&
-                        isEnabled
-                    ) {
-                        context.launchActivity(FlorisAppActivity::class) {
-                            it.flags = (Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED
-                                or Intent.FLAG_ACTIVITY_SINGLE_TOP
-                                or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-                        }
+        // Below block allows to return from the system IME enabler activity
+        // as soon as it gets selected.
+        LaunchedEffect(Unit) {
+            while (true) {
+                delay(200L)
+                val isEnabled = InputMethodUtils.isFlorisboardEnabled(context)
+                if (stepState.getCurrentAuto().value == Steps.EnableIme.id &&
+                    stepState.getCurrentManual().value == -1 &&
+                    !isFlorisBoardEnabled &&
+                    !isFlorisBoardSelected &&
+                    hasNotificationPermission == NotificationPermissionState.NOT_SET &&
+                    isEnabled
+                ) {
+                    context.launchActivity(FlorisAppActivity::class) {
+                        it.flags = (Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED
+                            or Intent.FLAG_ACTIVITY_SINGLE_TOP
+                            or Intent.FLAG_ACTIVITY_CLEAR_TOP)
                     }
                 }
             }
-            FlorisStepLayout(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(horizontal = 16.dp),
-                stepState = stepState,
-                header = {
-                    StepText(stringRes(R.string.setup__intro_message))
-                    Spacer(modifier = Modifier.height(16.dp))
-                },
-                steps = steps(
-                    context, navController, requestNotification
-                ),
-                footer = {
-                    footer(context)
-                },
-            )
-        }
-        // Show the screen with notification permission on android 13+
-    } else {
-        val stepState = rememberSaveable(saver = FlorisStepState.Saver) {
-            val initStep = when {
-                !isFlorisBoardEnabled -> Steps.WithNotifications.EnableIme.id
-                !isFlorisBoardSelected -> Steps.WithNotifications.SelectIme.id
-                hasNotificationPermission == NotificationPermissionState.NOT_SET -> Steps.WithNotifications.SelectNotification.id
-                else -> Steps.WithNotifications.FinishUp.id
-            }
-            FlorisStepState.new(init = initStep)
-        }
-
-        content {
-            LaunchedEffect(isFlorisBoardEnabled, isFlorisBoardSelected, hasNotificationPermission) {
-                stepState.setCurrentAuto(
-                    when {
-                        !isFlorisBoardEnabled -> Steps.WithNotifications.EnableIme.id
-                        !isFlorisBoardSelected -> Steps.WithNotifications.SelectIme.id
-                        hasNotificationPermission == NotificationPermissionState.NOT_SET -> Steps.WithNotifications.SelectNotification.id
-                        else -> Steps.WithNotifications.FinishUp.id
-                    }
-                )
-            }
-
-            // Below block allows to return from the system IME enabler activity
-            // as soon as it gets selected.
-            LaunchedEffect(Unit) {
-                while (true) {
-                    delay(200L)
-                    val isEnabled = InputMethodUtils.isFlorisboardEnabled(context)
-                    if (stepState.getCurrentAuto().value == Steps.WithNotifications.EnableIme.id &&
-                        stepState.getCurrentManual().value == -1 &&
-                        !isFlorisBoardEnabled &&
-                        !isFlorisBoardSelected &&
-                        hasNotificationPermission == NotificationPermissionState.NOT_SET &&
-                        isEnabled
-                    ) {
-                        context.launchActivity(FlorisAppActivity::class) {
-                            it.flags = (Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED
-                                or Intent.FLAG_ACTIVITY_SINGLE_TOP
-                                or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-                        }
-                    }
-                }
-            }
-            FlorisStepLayout(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(horizontal = 16.dp),
-                stepState = stepState,
-                header = {
-                    StepText(stringRes(R.string.setup__intro_message))
-                    Spacer(modifier = Modifier.height(16.dp))
-                },
-                steps = steps(
-                    context, navController, requestNotification
-                ),
-                footer = {
-                    footer(context)
-                },
-            )
         }
+        FlorisStepLayout(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 16.dp),
+            stepState = stepState,
+            header = {
+                StepText(stringRes(R.string.setup__intro_message))
+                Spacer(modifier = Modifier.height(16.dp))
+            },
+            steps = steps(
+                context, navController, requestNotification
+            ),
+            footer = {
+                footer(context)
+            },
+        )
     }
 }
 
@@ -255,105 +192,60 @@ private fun footer(context: Context) {
 private fun PreferenceUiScope<AppPrefs>.steps(
     context: Context,
     navController: NavController,
-    requestNotification: ManagedActivityResultLauncher<String, Boolean>
+    requestNotification: ManagedActivityResultLauncher<String, Boolean>,
 ): List<FlorisStep> {
-    return if (AndroidVersion.ATMOST_API32_S_V2) {
-        listOf(
+
+    return listOfNotNull(
+        FlorisStep(
+            id = Steps.EnableIme.id,
+            title = stringRes(R.string.setup__enable_ime__title),
+        ) {
+            StepText(stringRes(R.string.setup__enable_ime__description))
+            StepButton(label = stringRes(R.string.setup__enable_ime__open_settings_btn)) {
+                InputMethodUtils.showImeEnablerActivity(context)
+            }
+        },
+        FlorisStep(
+            id = Steps.SelectIme.id,
+            title = stringRes(R.string.setup__select_ime__title),
+        ) {
+            StepText(stringRes(R.string.setup__select_ime__description))
+            StepButton(label = stringRes(R.string.setup__select_ime__switch_keyboard_btn)) {
+                InputMethodUtils.showImePicker(context)
+            }
+        },
+        if (AndroidVersion.ATLEAST_API33_T) {
             FlorisStep(
-                id = Steps.WithoutNotifications.EnableIme.id,
-                title = stringRes(R.string.setup__enable_ime__title),
-            ) {
-                StepText(stringRes(R.string.setup__enable_ime__description))
-                StepButton(label = stringRes(R.string.setup__enable_ime__open_settings_btn)) {
-                    InputMethodUtils.showImeEnablerActivity(context)
-                }
-            },
-            FlorisStep(
-                id = Steps.WithoutNotifications.SelectIme.id,
-                title = stringRes(R.string.setup__select_ime__title),
-            ) {
-                StepText(stringRes(R.string.setup__select_ime__description))
-                StepButton(label = stringRes(R.string.setup__select_ime__switch_keyboard_btn)) {
-                    InputMethodUtils.showImePicker(context)
-                }
-            },
-            FlorisStep(
-                id = Steps.WithoutNotifications.FinishUp.id,
-                title = stringRes(R.string.setup__finish_up__title),
-            ) {
-                StepText(stringRes(R.string.setup__finish_up__description_p1))
-                StepText(stringRes(R.string.setup__finish_up__description_p2))
-                StepButton(label = stringRes(R.string.setup__finish_up__finish_btn)) {
-                    this@steps.prefs.internal.isImeSetUp.set(true)
-                    navController.navigate(Routes.Settings.Home) {
-                        popUpTo(Routes.Setup.Screen) {
-                            inclusive = true
-                        }
-                    }
-                }
-            },
-        )
-    } else {
-        listOf(
-            FlorisStep(
-                id = Steps.WithNotifications.EnableIme.id,
-                title = stringRes(R.string.setup__enable_ime__title),
-            ) {
-                StepText(stringRes(R.string.setup__enable_ime__description))
-                StepButton(label = stringRes(R.string.setup__enable_ime__open_settings_btn)) {
-                    InputMethodUtils.showImeEnablerActivity(context)
-                }
-            },
-            FlorisStep(
-                id = Steps.WithNotifications.SelectIme.id,
-                title = stringRes(R.string.setup__select_ime__title),
-            ) {
-                StepText(stringRes(R.string.setup__select_ime__description))
-                StepButton(label = stringRes(R.string.setup__select_ime__switch_keyboard_btn)) {
-                    InputMethodUtils.showImePicker(context)
-                }
-            },
-            FlorisStep(
-                id = Steps.WithNotifications.SelectNotification.id,
-                title = stringRes(R.string.setup__grant_notification_permission__title)
+                id = Steps.SelectNotification.id,
+                title = stringRes(R.string.setup__grant_notification_permission__title),
             ) {
                 StepText(stringRes(R.string.setup__grant_notification_permission__description))
                 StepButton(stringRes(R.string.setup__grant_notification_permission__btn)) {
-                    if (AndroidVersion.ATLEAST_API33_T) {
-                        requestNotification.launch(android.Manifest.permission.POST_NOTIFICATIONS)
+                    requestNotification.launch(android.Manifest.permission.POST_NOTIFICATIONS)
+                }
+            }
+        } else null,
+        FlorisStep(
+            id = Steps.FinishUp.id,
+            title = stringRes(R.string.setup__finish_up__title),
+        ) {
+            StepText(stringRes(R.string.setup__finish_up__description_p1))
+            StepText(stringRes(R.string.setup__finish_up__description_p2))
+            StepButton(label = stringRes(R.string.setup__finish_up__finish_btn)) {
+                this@steps.prefs.internal.isImeSetUp.set(true)
+                navController.navigate(Routes.Settings.Home) {
+                    popUpTo(Routes.Setup.Screen) {
+                        inclusive = true
                     }
                 }
-            },
-            FlorisStep(
-                id = Steps.WithNotifications.FinishUp.id,
-                title = stringRes(R.string.setup__finish_up__title),
-            ) {
-                StepText(stringRes(R.string.setup__finish_up__description_p1))
-                StepText(stringRes(R.string.setup__finish_up__description_p2))
-                StepButton(label = stringRes(R.string.setup__finish_up__finish_btn)) {
-                    this@steps.prefs.internal.isImeSetUp.set(true)
-                    navController.navigate(Routes.Settings.Home) {
-                        popUpTo(Routes.Setup.Screen) {
-                            inclusive = true
-                        }
-                    }
-                }
-            },
-        )
-    }
+            }
+        }
+    )
 }
 
 private sealed class Steps(val id: Int) {
-    sealed class WithoutNotifications(id: Int) : Steps(id) {
-        data object EnableIme : WithoutNotifications(id = 1)
-        data object SelectIme : WithoutNotifications(id = 2)
-        data object FinishUp : WithoutNotifications(id = 3)
-    }
-
-    sealed class WithNotifications(id: Int) : Steps(id) {
-        data object EnableIme : WithNotifications(id = 1)
-        data object SelectIme : WithNotifications(id = 2)
-        data object SelectNotification : WithNotifications(id = 3)
-        data object FinishUp : WithNotifications(id = 4)
-    }
+    data object EnableIme : Steps(id = 1)
+    data object SelectIme : Steps(id = 2)
+    data object SelectNotification : Steps(id = 3)
+    data object FinishUp : Steps(id = 4)
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/clipboard/ClipboardInputLayout.kt

@@ -22,45 +22,57 @@ import android.media.MediaMetadataRetriever
 import android.media.ThumbnailUtils
 import android.provider.MediaStore
 import android.util.Size
-import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
 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.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.staggeredgrid.LazyStaggeredGridScope
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
+import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.outlined.Backspace
-import androidx.compose.material.icons.filled.ClearAll
-import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.DeleteSweep
+import androidx.compose.material.icons.filled.FilterList
+import androidx.compose.material.icons.filled.FilterListOff
+import androidx.compose.material.icons.filled.Image
+import androidx.compose.material.icons.filled.Link
+import androidx.compose.material.icons.filled.Movie
+import androidx.compose.material.icons.filled.Phone
+import androidx.compose.material.icons.filled.TextFields
 import androidx.compose.material.icons.filled.ToggleOff
 import androidx.compose.material.icons.filled.ToggleOn
 import androidx.compose.material.icons.filled.Videocam
-import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material.icons.outlined.ContentPaste
+import androidx.compose.material.icons.outlined.Email
+import androidx.compose.material.icons.outlined.PushPin
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableStateSetOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -68,17 +80,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextDirection
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.florisPreferenceModel
@@ -89,42 +95,43 @@ import dev.patrickgold.florisboard.ime.clipboard.provider.ClipboardItem
 import dev.patrickgold.florisboard.ime.clipboard.provider.ItemType
 import dev.patrickgold.florisboard.ime.keyboard.FlorisImeSizing
 import dev.patrickgold.florisboard.ime.media.KeyboardLikeButton
+import dev.patrickgold.florisboard.ime.smartbar.AnimationDuration
+import dev.patrickgold.florisboard.ime.smartbar.VerticalEnterTransition
+import dev.patrickgold.florisboard.ime.smartbar.VerticalExitTransition
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.keyboardManager
-import dev.patrickgold.florisboard.lib.compose.FlorisIconButtonWithInnerPadding
-import dev.patrickgold.florisboard.lib.compose.FlorisStaggeredVerticalGrid
-import dev.patrickgold.florisboard.lib.compose.FlorisTextButton
+import dev.patrickgold.florisboard.lib.compose.LocalLocalizedDateTimeFormatter
 import dev.patrickgold.florisboard.lib.compose.autoMirrorForRtl
+import dev.patrickgold.florisboard.lib.compose.florisHorizontalScroll
 import dev.patrickgold.florisboard.lib.compose.florisVerticalScroll
 import dev.patrickgold.florisboard.lib.compose.rippleClickable
-import dev.patrickgold.florisboard.lib.compose.safeTimes
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.florisboard.lib.observeAsNonNullState
+import dev.patrickgold.florisboard.lib.observeAsTransformingState
 import dev.patrickgold.florisboard.lib.util.NetworkUtils
 import dev.patrickgold.jetpref.datastore.model.observeAsState
+import kotlinx.coroutines.delay
 import org.florisboard.lib.android.AndroidKeyguardManager
 import org.florisboard.lib.android.AndroidVersion
 import org.florisboard.lib.android.showShortToast
 import org.florisboard.lib.android.systemService
-import org.florisboard.lib.snygg.SnyggPropertySet
+import org.florisboard.lib.snygg.SnyggQueryAttributes
+import org.florisboard.lib.snygg.ui.SnyggBox
 import org.florisboard.lib.snygg.ui.SnyggButton
-import org.florisboard.lib.snygg.ui.SnyggSurface
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.snyggBorder
-import org.florisboard.lib.snygg.ui.snyggClip
-import org.florisboard.lib.snygg.ui.snyggShadow
-import org.florisboard.lib.snygg.ui.solidColor
-import org.florisboard.lib.snygg.ui.spSize
+import org.florisboard.lib.snygg.ui.SnyggChip
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggIcon
+import org.florisboard.lib.snygg.ui.SnyggIconButton
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggText
+import java.time.Instant
 
-private val ContentPadding = PaddingValues(horizontal = 4.dp)
-private val ItemMargin = PaddingValues(all = 6.dp)
-private val ItemPadding = PaddingValues(vertical = 8.dp, horizontal = 12.dp)
-private val DescriptionPadding = PaddingValues(top = 4.dp, start = 12.dp, end = 12.dp)
 private val ItemWidth = 200.dp
 private val DialogWidth = 240.dp
 
+const val CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO: Int = 0
+
 @Composable
 fun ClipboardInputLayout(
     modifier: Modifier = Modifier,
@@ -137,89 +144,126 @@ fun ClipboardInputLayout(
 
     val deviceLocked = androidKeyguardManager.let { it.isDeviceLocked || it.isKeyguardLocked }
     val historyEnabled by prefs.clipboard.historyEnabled.observeAsState()
-    val history by clipboardManager.history.observeAsNonNullState()
+    val unfilteredHistory by clipboardManager.history.observeAsNonNullState()
 
-    val innerHeight = FlorisImeSizing.imeUiHeight() - FlorisImeSizing.smartbarHeight
+    var isFilterRowShown by remember { mutableStateOf(false) }
+    val activeFilterTypes = remember { mutableStateSetOf<ItemType>() }
+
+    val history = remember(unfilteredHistory, activeFilterTypes.toSet()) {
+        if (activeFilterTypes.isEmpty()) {
+            unfilteredHistory
+        } else {
+            unfilteredHistory.all
+                .filter { activeFilterTypes.contains(it.type) }
+                .let { ClipboardManager.ClipboardHistory(it) }
+        }
+    }
+
+    val gridState = rememberLazyStaggeredGridState()
     var popupItem by remember(history) { mutableStateOf<ClipboardItem?>(null) }
     var showClearAllHistory by remember { mutableStateOf(false) }
 
-    val headerStyle = FlorisImeTheme.style.get(FlorisImeUi.ClipboardHeader)
-    val itemStyle = FlorisImeTheme.style.get(FlorisImeUi.ClipboardItem)
-    val popupStyle = FlorisImeTheme.style.get(FlorisImeUi.ClipboardItemPopup)
-    val enableHistoryButtonStyle = FlorisImeTheme.style.get(FlorisImeUi.ClipboardEnableHistoryButton)
-
     fun isPopupSurfaceActive() = popupItem != null || showClearAllHistory
 
+    LaunchedEffect(isFilterRowShown) {
+        delay(AnimationDuration.toLong())
+        if (!isFilterRowShown) {
+            activeFilterTypes.clear()
+        }
+    }
+
+    LaunchedEffect(activeFilterTypes.toSet()) {
+        gridState.scrollToItem(0)
+    }
+
     @Composable
     fun HeaderRow() {
-        Row(
+        SnyggRow(FlorisImeUi.ClipboardHeader.elementName,
             modifier = Modifier
                 .fillMaxWidth()
-                .height(FlorisImeSizing.smartbarHeight)
-                .snyggBackground(context, headerStyle),
+                .height(FlorisImeSizing.smartbarHeight),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            FlorisIconButtonWithInnerPadding(
+            val sizeModifier = Modifier
+                .sizeIn(maxHeight = FlorisImeSizing.smartbarHeight)
+                .aspectRatio(1f)
+            SnyggIconButton(
+                elementName = FlorisImeUi.ClipboardHeaderButton.elementName,
                 onClick = { keyboardManager.activeState.imeUiMode = ImeUiMode.TEXT },
-                icon = Icons.AutoMirrored.Filled.ArrowBack,
-                iconColor = headerStyle.foreground.solidColor(context),
-            )
-            Text(
+                modifier = sizeModifier,
+            ) {
+                SnyggIcon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                )
+            }
+            SnyggText(
+                elementName = FlorisImeUi.ClipboardHeaderText.elementName,
                 modifier = Modifier.weight(1f),
                 text = stringRes(R.string.clipboard__header_title),
-                color = headerStyle.foreground.solidColor(context),
-                fontSize = headerStyle.fontSize.spSize(),
             )
-            FlorisIconButtonWithInnerPadding(
+            SnyggIconButton(
+                elementName = FlorisImeUi.ClipboardHeaderButton.elementName,
                 onClick = { prefs.clipboard.historyEnabled.set(!historyEnabled) },
-                modifier = Modifier.autoMirrorForRtl(),
-                icon = if (historyEnabled) {
-                    Icons.Default.ToggleOn
-                } else {
-                    Icons.Default.ToggleOff
-                },
-                iconColor = headerStyle.foreground.solidColor(context),
+                modifier = sizeModifier.autoMirrorForRtl(),
                 enabled = !deviceLocked && !isPopupSurfaceActive(),
-            )
-            FlorisIconButtonWithInnerPadding(
+            ) {
+                SnyggIcon(
+                    imageVector = if (historyEnabled) {
+                        Icons.Default.ToggleOn
+                    } else {
+                        Icons.Default.ToggleOff
+                    },
+                )
+            }
+            SnyggIconButton(
+                elementName = FlorisImeUi.ClipboardHeaderButton.elementName,
                 onClick = { showClearAllHistory = true },
-                modifier = Modifier.autoMirrorForRtl(),
-                icon = Icons.Default.ClearAll,
-                iconColor = headerStyle.foreground.solidColor(context),
-                enabled = !deviceLocked && historyEnabled && history.all.isNotEmpty() && !isPopupSurfaceActive(),
-            )
-            FlorisIconButtonWithInnerPadding(
-                onClick = {
-                    context.showShortToast("TODO: implement inline clip item editing")
-                },
-                icon = Icons.Default.Edit,
-                iconColor = headerStyle.foreground.solidColor(context),
-                enabled = !deviceLocked && historyEnabled && !isPopupSurfaceActive(),
-            )
+                modifier = sizeModifier.autoMirrorForRtl(),
+                enabled = !deviceLocked && historyEnabled && unfilteredHistory.all.isNotEmpty() && !isPopupSurfaceActive(),
+            ) {
+                SnyggIcon(
+                    imageVector = Icons.Default.DeleteSweep,
+                )
+            }
+            SnyggIconButton(
+                elementName = FlorisImeUi.ClipboardHeaderButton.elementName,
+                onClick = { isFilterRowShown = !isFilterRowShown },
+                modifier = sizeModifier,
+                enabled = !deviceLocked && historyEnabled && unfilteredHistory.all.isNotEmpty() && !isPopupSurfaceActive(),
+            ) {
+                SnyggIcon(
+                    imageVector = if (!isFilterRowShown) {
+                        Icons.Default.FilterList
+                    } else {
+                        Icons.Default.FilterListOff
+                    },
+                )
+            }
             KeyboardLikeButton(
+                modifier = sizeModifier,
                 inputEventDispatcher = keyboardManager.inputEventDispatcher,
                 keyData = TextKeyData.DELETE,
-                element = FlorisImeUi.ClipboardHeader,
+                elementName = FlorisImeUi.ClipboardHeaderButton.elementName,
             ) {
-                Icon(Icons.AutoMirrored.Outlined.Backspace, null)
+                SnyggIcon(imageVector = Icons.AutoMirrored.Outlined.Backspace)
             }
         }
     }
 
-    @OptIn(ExperimentalFoundationApi::class)
     @Composable
     fun ClipItemView(
+        elementName: String,
         item: ClipboardItem,
-        style: SnyggPropertySet,
         contentScrollInsteadOfClip: Boolean,
         modifier: Modifier = Modifier,
     ) {
-        SnyggSurface(
-            modifier = modifier
-                .fillMaxWidth()
-                .padding(ItemMargin),
-            style = style,
-            clip = true,
+        val attributes = remember(item) {
+            mapOf("type" to item.type.toString().lowercase())
+        }
+        SnyggBox(
+            elementName = elementName,
+            attributes = attributes,
+            modifier = modifier.fillMaxWidth(),
             clickAndSemanticsModifier = Modifier.combinedClickable(
                 interactionSource = remember { MutableInteractionSource() },
                 indication = ripple(),
@@ -251,14 +295,9 @@ fun ClipboardInputLayout(
                         contentScale = ContentScale.FillWidth,
                     )
                 } else {
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(ItemPadding),
+                    SnyggText(
+                        modifier = Modifier.fillMaxWidth(),
                         text = bitmap.exceptionOrNull()?.message ?: "Unknown error",
-                        style = TextStyle(textDirection = TextDirection.Ltr),
-                        color = Color.Red,
-                        fontSize = style.fontSize.spSize(),
                     )
                 }
             } else if (item.type == ItemType.VIDEO) {
@@ -298,31 +337,24 @@ fun ClipboardInputLayout(
                         tint = Color.Black,
                     )
                 } else {
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(ItemPadding),
+                    SnyggText(
+                        modifier = Modifier.fillMaxWidth(),
                         text = bitmap.exceptionOrNull()?.message ?: "Unknown error",
-                        style = TextStyle(textDirection = TextDirection.Ltr),
-                        color = Color.Red,
-                        fontSize = style.fontSize.spSize(),
                     )
                 }
             } else {
                 val text = item.stringRepresentation()
                 Column {
-                    ClipTextItemDescription(text, style)
-                    Text(
+                    ClipTextItemDescription(
+                        elementName = FlorisImeUi.ClipboardItemDescription.elementName,
+                        attributes = attributes,
+                        text = text,
+                    )
+                    SnyggText(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .run { if (contentScrollInsteadOfClip) this.florisVerticalScroll() else this }
-                            .padding(ItemPadding),
+                            .run { if (contentScrollInsteadOfClip) this.florisVerticalScroll() else this },
                         text = item.displayText(),
-                        style = TextStyle(textDirection = TextDirection.ContentOrLtr),
-                        color = style.foreground.solidColor(context),
-                        fontSize = style.fontSize.spSize(),
-                        maxLines = if (contentScrollInsteadOfClip) Int.MAX_VALUE else 5,
-                        overflow = TextOverflow.Ellipsis,
                     )
                 }
             }
@@ -331,159 +363,235 @@ fun ClipboardInputLayout(
 
     @Composable
     fun HistoryMainView() {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(innerHeight),
+        SnyggBox(FlorisImeUi.ClipboardContent.elementName,
+            modifier = Modifier.fillMaxSize(),
         ) {
             val historyAlpha by animateFloatAsState(targetValue = if (isPopupSurfaceActive()) 0.12f else 1f)
-            Column(
-                modifier = Modifier
-                    .padding(ContentPadding)
-                    .fillMaxSize()
-                    .alpha(historyAlpha)
-                    .florisVerticalScroll(),
+            val staggeredGridCells by prefs.clipboard.numHistoryGridColumns()
+                .observeAsTransformingState { numGridColumns ->
+                    if (numGridColumns == CLIPBOARD_HISTORY_NUM_GRID_COLUMNS_AUTO) {
+                        StaggeredGridCells.Adaptive(160.dp)
+                    } else {
+                        StaggeredGridCells.Fixed(numGridColumns)
+                    }
+                }
+
+            fun LazyStaggeredGridScope.clipboardItems(
+                items: List<ClipboardItem>,
+                key: String,
+                @StringRes title: Int,
             ) {
-                if (history.pinned.isNotEmpty()) {
-                    ClipCategoryTitle(
-                        text = stringRes(R.string.clipboard__group_pinned),
-                        style = itemStyle,
-                    )
-                    FlorisStaggeredVerticalGrid(maxColumnWidth = ItemWidth) {
-                        for (item in history.pinned) {
-                            ClipItemView(item, itemStyle, contentScrollInsteadOfClip = false)
-                        }
+                if (items.isNotEmpty()) {
+                    item(key, span = StaggeredGridItemSpan.FullLine) {
+                        ClipCategoryTitle(text = stringRes(title))
                     }
-                }
-                if (history.recent.isNotEmpty()) {
-                    ClipCategoryTitle(
-                        text = stringRes(R.string.clipboard__group_recent),
-                        style = itemStyle,
-                    )
-                    FlorisStaggeredVerticalGrid(maxColumnWidth = ItemWidth) {
-                        for (item in history.recent) {
-                            ClipItemView(item, itemStyle, contentScrollInsteadOfClip = false)
-                        }
-                    }
-                }
-                if (history.other.isNotEmpty()) {
-                    ClipCategoryTitle(
-                        text = stringRes(R.string.clipboard__group_other),
-                        style = itemStyle,
-                    )
-                    FlorisStaggeredVerticalGrid(maxColumnWidth = ItemWidth) {
-                        for (item in history.other) {
-                            ClipItemView(item, itemStyle, contentScrollInsteadOfClip = false)
-                        }
+                    items(items) { item ->
+                        ClipItemView(
+                            elementName = FlorisImeUi.ClipboardItem.elementName,
+                            item = item,
+                            contentScrollInsteadOfClip = false,
+                        )
                     }
                 }
             }
+
+            Column(
+                modifier = Modifier
+                    .matchParentSize()
+                    .alpha(historyAlpha),
+            ) {
+                AnimatedVisibility(
+                    visible = isFilterRowShown,
+                    enter = VerticalEnterTransition,
+                    exit = VerticalExitTransition,
+                ) {
+                    SnyggRow(
+                        elementName = FlorisImeUi.ClipboardFilterRow.elementName,
+                        modifier = Modifier.fillMaxWidth(),
+                        clickAndSemanticsModifier = Modifier.florisHorizontalScroll(),
+                    ) {
+                        @Composable
+                        fun FilterChip(
+                            imageVector: ImageVector,
+                            text: String,
+                            itemType: ItemType,
+                        ) {
+                            val active = activeFilterTypes.contains(itemType)
+                            val attributes = remember(active) {
+                                mapOf(
+                                    "state" to if (active) "active" else "inactive",
+                                    "type" to itemType.toString().lowercase(),
+                                )
+                            }
+                            SnyggChip(
+                                elementName = FlorisImeUi.ClipboardFilterChip.elementName,
+                                attributes = attributes,
+                                onClick = {
+                                    if (!activeFilterTypes.add(itemType)) {
+                                        activeFilterTypes.remove(itemType)
+                                    }
+                                },
+                                imageVector = imageVector,
+                                text = text,
+                            )
+                        }
+
+                        FilterChip(
+                            imageVector = Icons.Default.TextFields,
+                            text = "Text",
+                            itemType = ItemType.TEXT,
+                        )
+                        FilterChip(
+                            imageVector = Icons.Default.Image,
+                            text = "Images",
+                            itemType = ItemType.IMAGE,
+                        )
+                        FilterChip(
+                            imageVector = Icons.Default.Movie,
+                            text = "Videos",
+                            itemType = ItemType.VIDEO,
+                        )
+                    }
+                }
+                SnyggBox(FlorisImeUi.ClipboardGrid.elementName,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f),
+                ) {
+                    LazyVerticalStaggeredGrid(
+                        modifier = Modifier.fillMaxSize(),
+                        state = gridState,
+                        columns = staggeredGridCells,
+                    ) {
+                        clipboardItems(
+                            items = history.pinned,
+                            key = "pinned-header",
+                            title = R.string.clipboard__group_pinned,
+                        )
+                        clipboardItems(
+                            items = history.recent,
+                            key = "recent-header",
+                            title = R.string.clipboard__group_recent,
+                        )
+                        clipboardItems(
+                            items = history.other,
+                            key = "other-header",
+                            title = R.string.clipboard__group_other,
+                        )
+                    }
+                }
+            }
+
             if (popupItem != null) {
-                Row(
+                SnyggRow(
                     modifier = Modifier
                         .fillMaxSize()
-                        .padding(ContentPadding)
                         .pointerInput(Unit) {
                             detectTapGestures { popupItem = null }
                         },
                     verticalAlignment = Alignment.CenterVertically,
                     horizontalArrangement = Arrangement.SpaceAround,
                 ) {
-                    ClipItemView(
-                        modifier = Modifier.widthIn(max = ItemWidth),
-                        item = popupItem!!,
-                        style = itemStyle,
-                        contentScrollInsteadOfClip = true,
-                    )
-                    Column(
-                        modifier = Modifier
-                            .padding(ItemMargin)
-                            .snyggShadow(popupStyle)
-                            .snyggBorder(context, popupStyle)
-                            .snyggBackground(context, popupStyle)
-                            .snyggClip(popupStyle),
-                    ) {
-                        PopupAction(
-                            iconId = R.drawable.ic_pin,
-                            text = stringRes(if (popupItem!!.isPinned) {
-                                R.string.clip__unpin_item
-                            } else {
-                                R.string.clip__pin_item
-                            }),
-                            style = popupStyle,
-                        ) {
-                            if (popupItem!!.isPinned) {
-                                clipboardManager.unpinClip(popupItem!!)
-                            } else {
-                                clipboardManager.pinClip(popupItem!!)
+                    SnyggColumn(modifier = Modifier.weight(0.5f)) {
+                        ClipItemView(
+                            elementName = FlorisImeUi.ClipboardItemPopup.elementName,
+                            modifier = Modifier.widthIn(max = ItemWidth),
+                            item = popupItem!!,
+                            contentScrollInsteadOfClip = true,
+                        )
+                        SnyggBox(FlorisImeUi.ClipboardItemTimestamp.elementName) {
+                            val formatter = LocalLocalizedDateTimeFormatter.current
+                            SnyggText(
+                                modifier = Modifier.fillMaxWidth(),
+                                text = formatter.format(Instant.ofEpochMilli(popupItem!!.creationTimestampMs)),
+                            )
+                        }
+                    }
+                    SnyggColumn(modifier = Modifier.weight(0.5f)) {
+                        SnyggColumn(FlorisImeUi.ClipboardItemActions.elementName) {
+                            PopupAction(
+                                icon = Icons.Outlined.PushPin,
+                                text = stringRes(if (popupItem!!.isPinned) {
+                                    R.string.clip__unpin_item
+                                } else {
+                                    R.string.clip__pin_item
+                                }),
+                            ) {
+                                if (popupItem!!.isPinned) {
+                                    clipboardManager.unpinClip(popupItem!!)
+                                } else {
+                                    clipboardManager.pinClip(popupItem!!)
+                                }
+                                popupItem = null
+                            }
+                            PopupAction(
+                                icon = Icons.Default.Delete,
+                                text = stringRes(R.string.clip__delete_item),
+                            ) {
+                                clipboardManager.deleteClip(popupItem!!)
+                                popupItem = null
+                            }
+                            PopupAction(
+                                icon = Icons.Outlined.ContentPaste,
+                                text = stringRes(R.string.clip__paste_item),
+                            ) {
+                                clipboardManager.pasteItem(popupItem!!)
+                                popupItem = null
                             }
-                            popupItem = null
-                        }
-                        PopupAction(
-                            iconId = R.drawable.ic_delete,
-                            text = stringRes(R.string.clip__delete_item),
-                            style = popupStyle,
-                        ) {
-                            clipboardManager.deleteClip(popupItem!!)
-                            popupItem = null
-                        }
-                        PopupAction(
-                            iconId = R.drawable.ic_content_paste,
-                            text = stringRes(R.string.clip__paste_item),
-                            style = popupStyle,
-                        ) {
-                            clipboardManager.pasteItem(popupItem!!)
-                            popupItem = null
                         }
                     }
                 }
             }
+
             if (showClearAllHistory) {
-                Row(
+                SnyggRow(
                     modifier = Modifier
                         .fillMaxSize()
-                        .padding(ContentPadding)
                         .pointerInput(Unit) {
                             detectTapGestures { showClearAllHistory = false }
                         },
                     verticalAlignment = Alignment.CenterVertically,
                     horizontalArrangement = Arrangement.SpaceAround,
                 ) {
-                    Column(
+                    SnyggColumn(
+                        elementName = FlorisImeUi.ClipboardClearAllDialog.elementName,
                         modifier = Modifier
                             .width(DialogWidth)
-                            .snyggShadow(popupStyle)
-                            .snyggBorder(context, popupStyle)
-                            .snyggBackground(context, popupStyle)
-                            .snyggClip(popupStyle)
                             .pointerInput(Unit) {
                                 detectTapGestures { /* Do nothing */ }
                             },
                     ) {
-                        Text(
-                            modifier = Modifier.padding(all = 16.dp),
+                        SnyggText(
+                            elementName = FlorisImeUi.ClipboardClearAllDialogMessage.elementName,
                             text = stringRes(R.string.clipboard__confirm_clear_history__message),
-                            color = popupStyle.foreground.solidColor(context),
                         )
-                        Row(modifier = Modifier.padding(horizontal = 8.dp)) {
+                        SnyggRow(FlorisImeUi.ClipboardClearAllDialogButtons.elementName) {
                             Spacer(modifier = Modifier.weight(1f))
-                            FlorisTextButton(
+                            SnyggButton(
+                                elementName = FlorisImeUi.ClipboardClearAllDialogButton.elementName,
+                                attributes = mapOf("action" to "no"),
                                 onClick = {
                                     showClearAllHistory = false
                                 },
-                                modifier = Modifier.padding(end = 8.dp),
-                                text = stringRes(R.string.action__no),
-                                colors = ButtonDefaults.textButtonColors(contentColor = popupStyle.foreground.solidColor(context)),
-                            )
-                            FlorisTextButton(
+                            ) {
+                                SnyggText(
+                                    text = stringRes(R.string.action__no),
+                                )
+                            }
+                            SnyggButton(
+                                elementName = FlorisImeUi.ClipboardClearAllDialogButton.elementName,
+                                attributes = mapOf("action" to "yes"),
                                 onClick = {
                                     clipboardManager.clearHistory()
                                     context.showShortToast(R.string.clipboard__cleared_history)
                                     showClearAllHistory = false
+                                    isFilterRowShown = false
                                 },
-                                text = stringRes(R.string.action__yes),
-                                colors = ButtonDefaults.textButtonColors(contentColor = popupStyle.foreground.solidColor(context)),
-                            )
+                            ) {
+                                SnyggText(
+                                    text = stringRes(R.string.action__yes),
+                                )
+                            }
                         }
                     }
                 }
@@ -493,98 +601,62 @@ fun ClipboardInputLayout(
 
     @Composable
     fun HistoryEmptyView() {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(innerHeight)
-                .padding(ContentPadding),
+        SnyggColumn(FlorisImeUi.ClipboardContent.elementName,
+            modifier = Modifier.fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Text(
-                modifier = Modifier.padding(top = 24.dp, bottom = 8.dp),
+            SnyggText(
                 text = stringRes(R.string.clipboard__empty__title),
-                color = itemStyle.foreground.solidColor(context),
-                fontSize = itemStyle.fontSize.spSize() safeTimes 1.1f,
-                fontWeight = FontWeight.Bold,
             )
-            Text(
+            SnyggText(
                 text = stringRes(R.string.clipboard__empty__message),
-                color = itemStyle.foreground.solidColor(context),
-                fontSize = itemStyle.fontSize.spSize(),
-                textAlign = TextAlign.Center,
             )
         }
     }
 
     @Composable
     fun HistoryDisabledView() {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(innerHeight)
-                .padding(ContentPadding),
-            contentAlignment = Alignment.TopCenter,
+        SnyggColumn(FlorisImeUi.ClipboardContent.elementName,
+            modifier = Modifier.fillMaxSize(),
         ) {
-            SnyggSurface(
-                modifier = Modifier
-                    .padding(ItemMargin)
-                    .fillMaxWidth()
-                    .wrapContentHeight(),
-                style = itemStyle,
-                contentPadding = ItemPadding,
+            SnyggText(
+                elementName = FlorisImeUi.ClipboardHistoryDisabledTitle.elementName,
+                modifier = Modifier.padding(bottom = 8.dp),
+                text = stringRes(R.string.clipboard__disabled__title),
+            )
+            SnyggText(
+                elementName = FlorisImeUi.ClipboardHistoryDisabledMessage.elementName,
+                text = stringRes(R.string.clipboard__disabled__message),
+            )
+            SnyggButton(FlorisImeUi.ClipboardHistoryDisabledButton.elementName,
+                onClick = { prefs.clipboard.historyEnabled.set(true) },
+                modifier = Modifier.align(Alignment.End),
             ) {
-                Column(modifier = Modifier.fillMaxWidth()) {
-                    Text(
-                        modifier = Modifier.padding(bottom = 8.dp),
-                        text = stringRes(R.string.clipboard__disabled__title),
-                        color = itemStyle.foreground.solidColor(context),
-                        fontSize = itemStyle.fontSize.spSize() safeTimes 1.1f,
-                        fontWeight = FontWeight.Bold,
-                    )
-                    Text(
-                        text = stringRes(R.string.clipboard__disabled__message),
-                        color = itemStyle.foreground.solidColor(context),
-                        fontSize = itemStyle.fontSize.spSize(),
-                    )
-                    SnyggButton(
-                        modifier = Modifier
-                            .padding(top = 8.dp)
-                            .align(Alignment.End),
-                        onClick = { prefs.clipboard.historyEnabled.set(true) },
-                        style = enableHistoryButtonStyle,
-                        text = stringRes(R.string.clipboard__disabled__enable_button)
-                    )
-                }
+                SnyggText(
+                    text = stringRes(R.string.clipboard__disabled__enable_button),
+                )
             }
         }
     }
 
     @Composable
     fun HistoryLockedView() {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(innerHeight)
-                .padding(ContentPadding),
+        SnyggColumn(FlorisImeUi.ClipboardContent.elementName,
+            modifier = Modifier.fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Text(
-                modifier = Modifier.padding(top = 24.dp, bottom = 8.dp),
+            SnyggText(
+                elementName = FlorisImeUi.ClipboardHistoryLockedTitle.elementName,
                 text = stringRes(R.string.clipboard__locked__title),
-                color = itemStyle.foreground.solidColor(context),
-                fontSize = itemStyle.fontSize.spSize() safeTimes 1.1f,
-                fontWeight = FontWeight.Bold,
             )
-            Text(
+            SnyggText(
+                elementName = FlorisImeUi.ClipboardHistoryLockedMessage.elementName,
                 text = stringRes(R.string.clipboard__locked__message),
-                color = itemStyle.foreground.solidColor(context),
-                fontSize = itemStyle.fontSize.spSize(),
-                textAlign = TextAlign.Center,
             )
         }
     }
 
-    Column(
+    SnyggColumn(
         modifier = modifier
             .fillMaxWidth()
             .height(FlorisImeSizing.imeUiHeight()),
@@ -594,7 +666,7 @@ fun ClipboardInputLayout(
             HistoryLockedView()
         } else {
             if (historyEnabled) {
-                if (history.all.isNotEmpty()) {
+                if (history.all.isNotEmpty() || !activeFilterTypes.isEmpty()) {
                     HistoryMainView()
                 } else {
                     HistoryEmptyView()
@@ -609,71 +681,54 @@ fun ClipboardInputLayout(
 @Composable
 private fun ClipCategoryTitle(
     text: String,
-    style: SnyggPropertySet,
     modifier: Modifier = Modifier,
 ) {
-    val context = LocalContext.current
-    Text(
-        modifier = modifier
-            .padding(ItemMargin)
-            .padding(top = 8.dp)
-            .fillMaxWidth(),
+    SnyggText(FlorisImeUi.ClipboardSubheader.elementName,
+        modifier = modifier.fillMaxWidth(),
         text = text.uppercase(),
-        color = style.foreground.solidColor(context),
-        fontWeight = FontWeight.Bold,
-        fontSize = style.fontSize.spSize() safeTimes 0.8f,
     )
 }
 
 @Composable
 private fun ClipTextItemDescription(
+    elementName: String,
+    attributes: SnyggQueryAttributes,
     text: String,
-    style: SnyggPropertySet,
     modifier: Modifier = Modifier,
 ): Unit = with(LocalDensity.current) {
-    val context = LocalContext.current
-    val iconId: Int?
+    val icon: ImageVector?
     val description: String?
     when {
         NetworkUtils.isEmailAddress(text) -> {
-            iconId = R.drawable.ic_email
+            icon = Icons.Outlined.Email
             description = stringRes(R.string.clipboard__item_description_email)
         }
         NetworkUtils.isUrl(text) -> {
-            iconId = R.drawable.ic_link
+            icon = Icons.Default.Link
             description = stringRes(R.string.clipboard__item_description_url)
         }
         NetworkUtils.isPhoneNumber(text) -> {
-            iconId = R.drawable.ic_phone
+            icon = Icons.Default.Phone
             description = stringRes(R.string.clipboard__item_description_phone)
         }
         else -> {
-            iconId = null
+            icon = null
             description = null
         }
     }
-    if (iconId != null && description != null) {
-        Row(
-            modifier = modifier
-                .padding(DescriptionPadding)
-                .offset(y = DescriptionPadding.calculateTopPadding()),
+    if (icon != null && description != null) {
+        SnyggRow(
+            elementName = elementName,
+            attributes = attributes,
+            modifier = modifier,
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            val fontSize = style.fontSize.spSize()
-            Icon(
-                modifier = Modifier
-                    .padding(end = 8.dp)
-                    .requiredSize(fontSize.toDp()),
-                painter = painterResource(id = iconId),
-                contentDescription = null,
-                tint = style.foreground.solidColor(context),
+            SnyggIcon(
+                imageVector = icon,
             )
-            Text(
+            SnyggText(
                 modifier = Modifier.weight(1f),
                 text = description,
-                color = style.foreground.solidColor(context),
-                fontSize = fontSize safeTimes 0.8f,
-                fontStyle = FontStyle.Italic,
             )
         }
     }
@@ -681,31 +736,21 @@ private fun ClipTextItemDescription(
 
 @Composable
 private fun PopupAction(
-    @DrawableRes iconId: Int,
+    icon: ImageVector,
     text: String,
-    style: SnyggPropertySet,
     modifier: Modifier = Modifier,
     onClick: () -> Unit,
 ) {
-    val context = LocalContext.current
-    Row(
-        modifier = modifier
-            .width(ItemWidth)
-            .rippleClickable(onClick = onClick)
-            .padding(all = 8.dp),
+    SnyggRow(FlorisImeUi.ClipboardItemAction.elementName,
+        modifier = modifier.rippleClickable(onClick = onClick),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        Icon(
-            modifier = Modifier.padding(end = 8.dp),
-            painter = painterResource(iconId),
-            contentDescription = null,
-            tint = style.foreground.solidColor(context),
+        SnyggIcon(FlorisImeUi.ClipboardItemActionIcon.elementName,
+            imageVector = icon,
         )
-        Text(
+        SnyggText(FlorisImeUi.ClipboardItemActionText.elementName,
             modifier = Modifier.weight(1f),
             text = text,
-            color = style.foreground.solidColor(context),
-            fontSize = style.fontSize.spSize(),
         )
     }
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/clipboard/FlorisCopyToClipboardActivity.kt

@@ -19,8 +19,8 @@ package dev.patrickgold.florisboard.ime.clipboard
 import android.content.ClipData
 import android.content.Intent
 import android.graphics.Bitmap
+import android.graphics.ImageDecoder
 import android.net.Uri
-import android.os.Build
 import android.os.Bundle
 import android.provider.MediaStore
 import androidx.activity.ComponentActivity
@@ -53,16 +53,19 @@ import dev.patrickgold.florisboard.lib.compose.ProvideLocalizedResources
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.jetpref.datastore.model.observeAsState
 import org.florisboard.lib.android.AndroidClipboardManager
+import org.florisboard.lib.android.AndroidVersion
 import org.florisboard.lib.android.stringRes
 import org.florisboard.lib.android.systemService
+import org.florisboard.lib.kotlin.mimeTypeFilterOf
 
 class FlorisCopyToClipboardActivity : ComponentActivity() {
     private var error: CopyToClipboardError? = null
     private var bitmap: Bitmap? = null
+    private val clipboardManager by lazy { systemService(AndroidClipboardManager::class) }
+    private val filter = mimeTypeFilterOf("image/*")
 
     internal enum class CopyToClipboardError {
         UNKNOWN_ERROR,
-        ANDROID_VERSION_TO_OLD_ERROR,
         TYPE_NOT_SUPPORTED_ERROR;
 
         @Composable
@@ -70,89 +73,100 @@ class FlorisCopyToClipboardActivity : ComponentActivity() {
             val textId = when (this) {
                 UNKNOWN_ERROR -> R.string.send_to_clipboard__unknown_error
                 TYPE_NOT_SUPPORTED_ERROR -> R.string.send_to_clipboard__type_not_supported_error
-                ANDROID_VERSION_TO_OLD_ERROR -> R.string.send_to_clipboard__android_version_to_old_error
             }
             return stringRes(id = textId)
         }
     }
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        handleIntent(intent)
+
+        setContent {
+            Content()
+        }
+    }
+
     override fun onPause() {
         finish()
         super.onPause()
     }
 
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        val systemClipboardManager = this.systemService(AndroidClipboardManager::class)
+    private fun handleIntent(intent: Intent) {
         val type = intent.type
         val action = intent.action
 
-        val prefs by florisPreferenceModel()
-
         if (Intent.ACTION_SEND != action || type == null) {
             error = CopyToClipboardError.UNKNOWN_ERROR
-        } else {
-            if (type.startsWith("image/")) {
-                val hasExtraStream = intent.hasExtra(Intent.EXTRA_STREAM)
-                if (!hasExtraStream) {
-                    error = CopyToClipboardError.TYPE_NOT_SUPPORTED_ERROR
-                } else {
-                    // pasting images via virtual keyboard only available since Android 7.1 (API 25)
-                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.N_MR1) {
-                        error = CopyToClipboardError.ANDROID_VERSION_TO_OLD_ERROR
-                    } else {
-                        val uri: Uri? =
-                            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) {
-                                @Suppress("DEPRECATION")
-                                intent.getParcelableExtra(Intent.EXTRA_STREAM)
-                            } else {
-                                intent.getParcelableExtra(Intent.EXTRA_STREAM, Uri::class.java)
-                            }
-                        val clip = ClipData.newUri(contentResolver, "image", uri)
-                        systemClipboardManager.setPrimaryClip(clip)
-                        bitmap = MediaStore.Images.Media.getBitmap(this.contentResolver, uri)
-                    }
-                }
-            } else {
-                error = CopyToClipboardError.TYPE_NOT_SUPPORTED_ERROR
-            }
+            return
+        }
+        if (!filter.matches(type) || !intent.hasExtra(Intent.EXTRA_STREAM)) {
+            error = CopyToClipboardError.TYPE_NOT_SUPPORTED_ERROR
+            return
         }
 
-        setContent {
-            ProvideLocalizedResources(this, forceLayoutDirection = LayoutDirection.Ltr) {
-                val theme by prefs.advanced.settingsTheme.observeAsState()
-                val isMaterialYouAware by prefs.advanced.useMaterialYou.observeAsState()
-                FlorisAppTheme(theme, isMaterialYouAware) {
-                    BottomSheet {
-                        Row {
-                            Text(
-                                text = error?.showError()
-                                    ?: bitmap?.let { stringRes(id = R.string.send_to_clipboard__description__copied_image_to_clipboard) }
-                                    ?: stringRes(R.string.send_to_clipboard__unknown_error),
-                                textAlign = TextAlign.Center,
-                                modifier = Modifier.weight(1f),
+        val uri: Uri? =
+            if (AndroidVersion.ATLEAST_API33_T) {
+                intent.getParcelableExtra(Intent.EXTRA_STREAM, Uri::class.java)
+            } else {
+                @Suppress("DEPRECATION")
+                intent.getParcelableExtra(Intent.EXTRA_STREAM)
+            }
+
+        if (uri == null) {
+            error = CopyToClipboardError.TYPE_NOT_SUPPORTED_ERROR
+            return
+        }
+        bitmap = uriToBitmap(uri)
+    }
+
+    private fun uriToBitmap(uri: Uri): Bitmap {
+        val clip = ClipData.newUri(contentResolver, "image", uri)
+        clipboardManager.setPrimaryClip(clip)
+        return if (AndroidVersion.ATLEAST_API28_P) {
+            val source = ImageDecoder.createSource(contentResolver, uri)
+            ImageDecoder.decodeBitmap(source)
+        } else {
+            @Suppress("DEPRECATION")
+            MediaStore.Images.Media.getBitmap(contentResolver, uri)
+        }
+    }
+
+    @Composable
+    private fun Content() {
+        val prefs by florisPreferenceModel()
+        ProvideLocalizedResources(this, forceLayoutDirection = LayoutDirection.Ltr) {
+            val theme by prefs.other.settingsTheme.observeAsState()
+            FlorisAppTheme(theme) {
+                BottomSheet {
+                    Row {
+                        Text(
+                            text = error?.showError()
+                                ?: bitmap?.let { stringRes(id = R.string.send_to_clipboard__description__copied_image_to_clipboard) }
+                                ?: stringRes(R.string.send_to_clipboard__unknown_error),
+                            textAlign = TextAlign.Center,
+                            modifier = Modifier.weight(1f),
+                        )
+                    }
+                    bitmap?.let {
+                        Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+                            Image(
+                                modifier = Modifier
+                                    .padding(start = 64.dp, end = 64.dp, top = 32.dp, bottom = 8.dp),
+                                bitmap = bitmap!!.asImageBitmap(),
+                                contentDescription = null
                             )
                         }
-                        bitmap?.let {
-                            Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
-                                Image(
-                                    modifier = Modifier
-                                        .padding(start = 64.dp, end = 64.dp, top = 32.dp, bottom = 8.dp),
-                                    bitmap = bitmap!!.asImageBitmap(),
-                                    contentDescription = null
-                                )
-                            }
-                        }
                     }
                 }
             }
         }
     }
 
-
     @OptIn(ExperimentalMaterial3Api::class)
     @Composable
-    internal fun BottomSheet(
+    private fun BottomSheet(
         content: @Composable ColumnScope.() -> Unit,
     ) {
         ModalBottomSheet(
@@ -162,11 +176,11 @@ class FlorisCopyToClipboardActivity : ComponentActivity() {
             Column {
                 content()
                 Button(
-                    modifier = Modifier.align(Alignment.End).padding(16.dp),
+                    modifier = Modifier
+                        .align(Alignment.End)
+                        .padding(16.dp),
                     onClick = { finish() },
-                    colors = ButtonDefaults.textButtonColors(
-                        //containerColor = buttonContainer.background.solidColor(context = context),
-                    )
+                    colors = ButtonDefaults.textButtonColors(),
                 ) {
                     Text(text = stringRes(id = R.string.action__ok))
                 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/clipboard/provider/ClipboardDatabase.kt

@@ -260,7 +260,7 @@ data class ClipboardItem @OptIn(ExperimentalSerializationApi::class) constructor
 
     fun stringRepresentation(): String {
         return when {
-            text != null -> text.take(500)
+            text != null -> text
             uri != null -> "(Image) $uri"
             else -> "#ERROR"
         }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/core/SelectSubtypePanel.kt

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2025 The FlorisBoard Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package dev.patrickgold.florisboard.ime.core
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.RadioButtonChecked
+import androidx.compose.material.icons.filled.RadioButtonUnchecked
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import dev.patrickgold.florisboard.R
+import dev.patrickgold.florisboard.ime.keyboard.KeyboardState
+import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
+import dev.patrickgold.florisboard.keyboardManager
+import dev.patrickgold.florisboard.lib.compose.stringRes
+import dev.patrickgold.florisboard.subtypeManager
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggListItem
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggText
+
+@Composable
+fun SelectSubtypePanel(modifier: Modifier = Modifier) {
+    val context = LocalContext.current
+    val keyboardManager by context.keyboardManager()
+    val subtypeManager by context.subtypeManager()
+
+    val listState = rememberLazyListState()
+    val subtypes by subtypeManager.subtypesFlow.collectAsState()
+
+    val currentlySelected = subtypeManager.activeSubtype.id
+
+    SnyggColumn(FlorisImeUi.SubtypePanel.elementName, modifier = modifier.safeDrawingPadding()) {
+        SnyggRow(
+            elementName = FlorisImeUi.SubtypePanelHeader.elementName,
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            SnyggText(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .clickable(false) {},
+                text = stringRes(R.string.select_subtype_panel__header),
+            )
+        }
+
+        SnyggBox(FlorisImeUi.SubtypePanelList.elementName) {
+            LazyColumn(
+                state = listState,
+            ) {
+                items(
+                    subtypes,
+                    key = {
+                        it.id
+                    }
+                ) {
+                    SnyggListItem(
+                        elementName = FlorisImeUi.SubtypePanelListItem.elementName,
+                        onClick = {
+                            subtypeManager.switchToSubtypeById(it.id)
+                            keyboardManager.activeState.isSubtypeSelectionVisible = false
+                        },
+                        leadingImageVector = when {
+                            currentlySelected == it.id -> Icons.Default.RadioButtonChecked
+                            else -> Icons.Default.RadioButtonUnchecked
+                        },
+                        text = it.primaryLocale.displayName(),
+                    )
+                }
+            }
+        }
+    }
+}
+
+fun KeyboardState.isSubtypeSelectionShowing(): Boolean {
+    return isSubtypeSelectionVisible
+}

app/src/main/kotlin/dev/patrickgold/florisboard/ime/core/SubtypeManager.kt

@@ -24,7 +24,6 @@ import dev.patrickgold.florisboard.lib.FlorisLocale
 import dev.patrickgold.florisboard.lib.devtools.flogDebug
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
-import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.encodeToString
 import kotlinx.serialization.json.Json
 
@@ -227,4 +226,11 @@ class SubtypeManager(context: Context) {
         prefs.localization.activeSubtypeId.set(newActiveSubtype.id)
         activeSubtype = newActiveSubtype
     }
+
+    fun switchToSubtypeById(id: Long) {
+        if (subtypes.any { it.id == id }) {
+            activeSubtype = getSubtypeById(id)!!
+            prefs.localization.activeSubtypeId.set(id)
+        }
+    }
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/editor/AbstractEditorInstance.kt

@@ -281,7 +281,7 @@ abstract class AbstractEditorInstance(context: Context) {
     abstract fun determineComposer(composerName: ExtensionComponentName): Composer
 
     protected open fun shouldDetermineComposingRegion(editorInfo: FlorisEditorInfo): Boolean {
-        return editorInfo.isRichInputEditor
+        return editorInfo.isRichInputEditor && !editorInfo.inputAttributes.flagTextNoSuggestions
     }
 
     private suspend fun determineLocalComposing(

app/src/main/kotlin/dev/patrickgold/florisboard/ime/editor/EditorInstance.kt

@@ -19,7 +19,6 @@ package dev.patrickgold.florisboard.ime.editor
 import android.content.ClipDescription
 import android.content.ContentUris
 import android.content.Context
-import android.content.Intent
 import android.view.KeyEvent
 import androidx.core.view.inputmethod.InputConnectionCompat
 import androidx.core.view.inputmethod.InputContentInfoCompat
@@ -30,21 +29,20 @@ import dev.patrickgold.florisboard.clipboardManager
 import dev.patrickgold.florisboard.ime.clipboard.provider.ClipboardFileStorage
 import dev.patrickgold.florisboard.ime.clipboard.provider.ClipboardItem
 import dev.patrickgold.florisboard.ime.clipboard.provider.ItemType
-import dev.patrickgold.florisboard.ime.keyboard.KeyboardMode
 import dev.patrickgold.florisboard.ime.input.InputShiftState
 import dev.patrickgold.florisboard.ime.keyboard.IncognitoMode
+import dev.patrickgold.florisboard.ime.keyboard.KeyboardMode
 import dev.patrickgold.florisboard.ime.nlp.SuggestionCandidate
 import dev.patrickgold.florisboard.ime.text.composing.Appender
 import dev.patrickgold.florisboard.ime.text.composing.Composer
 import dev.patrickgold.florisboard.ime.text.key.KeyVariation
 import dev.patrickgold.florisboard.keyboardManager
-import org.florisboard.lib.android.AndroidVersion
-import org.florisboard.lib.android.showShortToast
 import dev.patrickgold.florisboard.lib.ext.ExtensionComponentName
 import dev.patrickgold.florisboard.nlpManager
 import dev.patrickgold.florisboard.subtypeManager
-import kotlinx.coroutines.runBlocking
 import java.util.concurrent.atomic.AtomicInteger
+import kotlinx.coroutines.runBlocking
+import org.florisboard.lib.android.showShortToast
 
 class EditorInstance(context: Context) : AbstractEditorInstance(context) {
     companion object {
@@ -119,11 +117,11 @@ class EditorInstance(context: Context) : AbstractEditorInstance(context) {
             //!instance.inputAttributes.flagTextAutoComplete &&
             //!instance.inputAttributes.flagTextNoSuggestions
         }
-        activeState.isIncognitoMode = when (prefs.advanced.incognitoMode.get()) {
+        activeState.isIncognitoMode = when (prefs.suggestion.incognitoMode.get()) {
             IncognitoMode.FORCE_OFF -> false
             IncognitoMode.FORCE_ON -> true
             IncognitoMode.DYNAMIC_ON_OFF -> {
-                editorInfo.imeOptions.flagNoPersonalizedLearning || prefs.advanced.forceIncognitoModeFromDynamic.get()
+                editorInfo.imeOptions.flagNoPersonalizedLearning || prefs.suggestion.forceIncognitoModeFromDynamic.get()
             }
         }
     }
@@ -324,16 +322,7 @@ class EditorInstance(context: Context) : AbstractEditorInstance(context) {
                 )
                 val ic = currentInputConnection() ?: return false
                 ic.finishComposingText()
-                var flags = 0
-                if (AndroidVersion.ATLEAST_API25_N_MR1) {
-                    flags = flags or InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION
-                } else {
-                    appContext.grantUriPermission(
-                        activeInfo.packageName,
-                        item.uri,
-                        Intent.FLAG_GRANT_READ_URI_PERMISSION,
-                    )
-                }
+                val flags = InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION
                 InputConnectionCompat.commitContent(ic, activeInfo.base, inputContentInfo, flags, null)
             }
         }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/input/InputShiftState.kt

@@ -43,5 +43,7 @@ enum class InputShiftState(val value: Int) {
         fun fromInt(int: Int) = entries.firstOrNull { it.value == int } ?: UNSHIFTED
     }
 
+    override fun toString() = name.lowercase()
+
     fun toInt() = value
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/ComputingEvaluator.kt

@@ -206,7 +206,8 @@ fun ComputingEvaluator.computeImageVector(data: KeyData): ImageVector? {
             Icons.Default.DeleteSweep
         }
         KeyCode.COMPACT_LAYOUT_TO_LEFT,
-        KeyCode.COMPACT_LAYOUT_TO_RIGHT -> {
+        KeyCode.COMPACT_LAYOUT_TO_RIGHT,
+        KeyCode.TOGGLE_COMPACT_LAYOUT -> {
             context()?.vectorResource(id = R.drawable.ic_accessibility_one_handed)
         }
         KeyCode.VOICE_INPUT -> {

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/FlorisImeSizing.kt

@@ -119,7 +119,7 @@ fun ProvideKeyboardRowBaseHeight(content: @Composable () -> Unit) {
 
     val heightFactorPortrait by prefs.keyboard.heightFactorPortrait.observeAsTransformingState { it.toFloat() / 100f }
     val heightFactorLandscape by prefs.keyboard.heightFactorLandscape.observeAsTransformingState { it.toFloat() / 100f }
-    val oneHandedMode by prefs.keyboard.oneHandedMode.observeAsState()
+    val oneHandedMode by prefs.keyboard.oneHandedModeEnabled.observeAsState()
     val oneHandedModeScaleFactor by prefs.keyboard.oneHandedModeScaleFactor.observeAsTransformingState { it.toFloat() / 100f }
 
     // Only set systemBarHeights on api 35 or later because https://developer.android.com/about/versions/15/behavior-changes-15#stable-configuration
@@ -134,7 +134,7 @@ fun ProvideKeyboardRowBaseHeight(content: @Composable () -> Unit) {
     ) {
         calcInputViewHeight(resources, systemBarHeights) * when {
             configuration.isOrientationLandscape() -> heightFactorLandscape
-            else -> heightFactorPortrait * (if (oneHandedMode != OneHandedMode.OFF) oneHandedModeScaleFactor else 1f)
+            else -> heightFactorPortrait * (if (oneHandedMode) oneHandedModeScaleFactor else 1f)
         }
     }
     val smartbarHeight = baseRowHeight * 0.753f

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/KeyboardManager.kt

@@ -55,10 +55,6 @@ import dev.patrickgold.florisboard.ime.text.key.KeyType
 import dev.patrickgold.florisboard.ime.text.key.UtilityKeyAction
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyboardCache
-import org.florisboard.lib.android.AndroidKeyguardManager
-import org.florisboard.lib.android.showLongToast
-import org.florisboard.lib.android.showShortToast
-import org.florisboard.lib.android.systemService
 import dev.patrickgold.florisboard.lib.devtools.LogTopic
 import dev.patrickgold.florisboard.lib.devtools.flogError
 import dev.patrickgold.florisboard.lib.ext.ExtensionComponentName
@@ -67,6 +63,7 @@ import dev.patrickgold.florisboard.lib.uppercase
 import dev.patrickgold.florisboard.lib.util.InputMethodUtils
 import dev.patrickgold.florisboard.nlpManager
 import dev.patrickgold.florisboard.subtypeManager
+import java.lang.ref.WeakReference
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.SupervisorJob
@@ -75,9 +72,13 @@ import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.sync.Mutex
 import kotlinx.coroutines.sync.withLock
+import org.florisboard.lib.android.AndroidKeyguardManager
+import org.florisboard.lib.android.showLongToast
+import org.florisboard.lib.android.showShortToast
+import org.florisboard.lib.android.systemService
 import org.florisboard.lib.kotlin.collectIn
 import org.florisboard.lib.kotlin.collectLatestIn
-import java.lang.ref.WeakReference
+import java.util.concurrent.atomic.AtomicInteger
 
 private val DoubleSpacePeriodMatcher = """([^.!?‽\s]\s)""".toRegex()
 
@@ -100,7 +101,7 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
     private var lastToastReference = WeakReference<Toast>(null)
 
     private val activeEvaluatorGuard = Mutex(locked = false)
-    private var activeEvaluatorVersion: Int = 1
+    private var activeEvaluatorVersion = AtomicInteger(0)
     private val _activeEvaluator = MutableStateFlow<ComputingEvaluator>(DefaultComputingEvaluator)
     val activeEvaluator get() = _activeEvaluator.asStateFlow()
     private val _activeSmartbarEvaluator = MutableStateFlow<ComputingEvaluator>(DefaultComputingEvaluator)
@@ -189,9 +190,9 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
                     keyboardMode = mode,
                     subtype = subtype,
                 ).await()
-            }.await()
+            }
             val computingEvaluator = ComputingEvaluatorImpl(
-                version = activeEvaluatorVersion++,
+                version = activeEvaluatorVersion.getAndAdd(1),
                 keyboard = computedKeyboard,
                 editorInfo = editorInfo,
                 state = state,
@@ -236,11 +237,8 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
         return subtypeManager.subtypes.size > 1
     }
 
-    fun toggleOneHandedMode(isRight: Boolean) {
-        prefs.keyboard.oneHandedMode.set(when (prefs.keyboard.oneHandedMode.get()) {
-            OneHandedMode.OFF -> if (isRight) { OneHandedMode.END } else { OneHandedMode.START }
-            else -> OneHandedMode.OFF
-        })
+    fun toggleOneHandedMode() {
+        prefs.keyboard.oneHandedModeEnabled.set(!prefs.keyboard.oneHandedModeEnabled.get())
     }
 
     fun executeSwipeAction(swipeAction: SwipeAction) {
@@ -272,6 +270,7 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
             SwipeAction.REDO -> TextKeyData.REDO
             SwipeAction.UNDO -> TextKeyData.UNDO
             SwipeAction.SHOW_INPUT_METHOD_PICKER -> TextKeyData.SYSTEM_INPUT_METHOD_PICKER
+            SwipeAction.SHOW_SUBTYPE_PICKER -> TextKeyData.SHOW_SUBTYPE_PICKER
             SwipeAction.SWITCH_TO_CLIPBOARD_CONTEXT -> TextKeyData.IME_UI_MODE_CLIPBOARD
             SwipeAction.SWITCH_TO_PREV_SUBTYPE -> TextKeyData.IME_PREV_SUBTYPE
             SwipeAction.SWITCH_TO_NEXT_SUBTYPE -> TextKeyData.IME_NEXT_SUBTYPE
@@ -582,7 +581,7 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
      * Handles a [KeyCode.TOGGLE_INCOGNITO_MODE] event.
      */
     private fun handleToggleIncognitoMode() {
-        prefs.advanced.forceIncognitoModeFromDynamic.set(!prefs.advanced.forceIncognitoModeFromDynamic.get())
+        prefs.suggestion.forceIncognitoModeFromDynamic.set(!prefs.suggestion.forceIncognitoModeFromDynamic.get())
         val newState = !activeState.isIncognitoMode
         activeState.isIncognitoMode = newState
         lastToastReference.get()?.cancel()
@@ -719,8 +718,15 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
                 clipboardManager.updatePrimaryClip(null)
                 appContext.showShortToast(R.string.clipboard__cleared_primary_clip)
             }
-            KeyCode.COMPACT_LAYOUT_TO_LEFT -> toggleOneHandedMode(isRight = false)
-            KeyCode.COMPACT_LAYOUT_TO_RIGHT -> toggleOneHandedMode(isRight = true)
+            KeyCode.TOGGLE_COMPACT_LAYOUT -> toggleOneHandedMode()
+            KeyCode.COMPACT_LAYOUT_TO_LEFT -> {
+                prefs.keyboard.oneHandedMode.set(OneHandedMode.START)
+                toggleOneHandedMode()
+            }
+            KeyCode.COMPACT_LAYOUT_TO_RIGHT -> {
+                prefs.keyboard.oneHandedMode.set(OneHandedMode.END)
+                toggleOneHandedMode()
+            }
             KeyCode.DELETE -> handleDelete()
             KeyCode.DELETE_WORD -> handleDeleteWord()
             KeyCode.ENTER -> handleEnter()
@@ -742,6 +748,9 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
             KeyCode.SHIFT -> handleShiftUp(data)
             KeyCode.SPACE -> handleSpace(data)
             KeyCode.SYSTEM_INPUT_METHOD_PICKER -> InputMethodUtils.showImePicker(appContext)
+            KeyCode.SHOW_SUBTYPE_PICKER -> {
+                appContext.keyboardManager.value.activeState.isSubtypeSelectionVisible = true
+            }
             KeyCode.SYSTEM_PREV_INPUT_METHOD -> FlorisImeService.switchToPrevInputMethod()
             KeyCode.SYSTEM_NEXT_INPUT_METHOD -> FlorisImeService.switchToNextInputMethod()
             KeyCode.TOGGLE_SMARTBAR_VISIBILITY -> {
@@ -867,17 +876,22 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
         val punctuationRules = MutableLiveData<Map<ExtensionComponentName, PunctuationRule>>(emptyMap())
         val subtypePresets = MutableLiveData<List<SubtypePreset>>(emptyList())
 
+        private val anyChangedGuard = Mutex(locked = false)
         val anyChanged = MutableLiveData(Unit)
 
         init {
             scope.launch(Dispatchers.Main.immediate) {
                 extensionManager.keyboardExtensions.observeForever { keyboardExtensions ->
-                    parseKeyboardExtensions(keyboardExtensions)
+                    scope.launch {
+                        anyChangedGuard.withLock {
+                            parseKeyboardExtensions(keyboardExtensions)
+                        }
+                    }
                 }
             }
         }
 
-        private fun parseKeyboardExtensions(keyboardExtensions: List<KeyboardExtension>) = scope.launch {
+        private fun parseKeyboardExtensions(keyboardExtensions: List<KeyboardExtension>) {
             val localComposers = mutableMapOf<ExtensionComponentName, Composer>()
             val localCurrencySets = mutableMapOf<ExtensionComponentName, CurrencySet>()
             val localLayouts = mutableMapOf<LayoutType, MutableMap<ExtensionComponentName, LayoutArrangementComponent>>()
@@ -956,10 +970,13 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
                 KeyCode.CLIPBOARD_SELECT_ALL -> {
                     editorInfo.isRichInputEditor
                 }
-                KeyCode.TOGGLE_INCOGNITO_MODE -> when (prefs.advanced.incognitoMode.get()) {
+                KeyCode.TOGGLE_INCOGNITO_MODE -> when (prefs.suggestion.incognitoMode.get()) {
                     IncognitoMode.FORCE_OFF, IncognitoMode.FORCE_ON -> false
                     IncognitoMode.DYNAMIC_ON_OFF -> !editorInfo.imeOptions.flagNoPersonalizedLearning
                 }
+                KeyCode.LANGUAGE_SWITCH -> {
+                    subtypeManager.subtypes.size > 1
+                }
                 else -> true
             }
         }
@@ -1007,7 +1024,7 @@ class KeyboardManager(context: Context) : InputKeyEventReceiver {
 
         fun asSmartbarQuickActionsEvaluator(): ComputingEvaluatorImpl {
             return ComputingEvaluatorImpl(
-                version = activeEvaluatorVersion,
+                version = version,
                 keyboard = SmartbarQuickActionsKeyboard,
                 editorInfo = editorInfo,
                 state = state,

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/KeyboardMode.kt

@@ -19,6 +19,7 @@ package dev.patrickgold.florisboard.ime.keyboard
 enum class KeyboardMode(val value: Int) {
     UNSPECIFIED(-1),
     CHARACTERS(0),
+    @Deprecated(message = "TODO: remove")
     EDITING(1),
     SYMBOLS(2),
     SYMBOLS2(3),
@@ -26,7 +27,9 @@ enum class KeyboardMode(val value: Int) {
     NUMERIC_ADVANCED(5),
     PHONE(6),
     PHONE2(7),
+    @Deprecated(message = "TODO: remove")
     SMARTBAR_CLIPBOARD_CURSOR_ROW(8),
+    @Deprecated(message = "TODO: remove")
     SMARTBAR_NUMBER_ROW(9),
     SMARTBAR_QUICK_ACTIONS(10);
 
@@ -34,5 +37,7 @@ enum class KeyboardMode(val value: Int) {
         fun fromInt(int: Int) = entries.firstOrNull { it.value == int } ?: CHARACTERS
     }
 
+    override fun toString() = name.lowercase()
+
     fun toInt() = value
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/KeyboardState.kt

@@ -57,6 +57,7 @@ import kotlin.properties.Delegates
  *
  * <Byte 7> | <Byte 6> | <Byte 5> | <Byte 4> | Description
  * ---------|----------|----------|----------|---------------------------------
+ *          |          |          |        1 | Subtype selection dialog visible
  *        1 |          |          |          | Devtools: Show drag&drop helpers
  *
  * The resulting structure is only relevant during a runtime lifespan and
@@ -91,6 +92,8 @@ open class KeyboardState protected constructor(open var rawValue: ULong) {
 
         const val F_IS_RTL_LAYOUT_DIRECTION: ULong =        0x08000000u
 
+        const val F_IS_SUBTYPE_SELECTION_VISIBLE: ULong =   0x1_0000_0000u
+
         const val F_DEBUG_SHOW_DRAG_AND_DROP_HELPERS =      0x01_00_00_00_00_00_00_00uL
 
         const val STATE_ALL_ZERO: ULong =                   0uL
@@ -188,6 +191,10 @@ open class KeyboardState protected constructor(open var rawValue: ULong) {
         get() = getFlag(F_IS_ACTIONS_EDITOR_VISIBLE)
         set(v) { setFlag(F_IS_ACTIONS_EDITOR_VISIBLE, v) }
 
+    var isSubtypeSelectionVisible: Boolean
+        get() = getFlag(F_IS_SUBTYPE_SELECTION_VISIBLE)
+        set(v) { setFlag(F_IS_SUBTYPE_SELECTION_VISIBLE, v) }
+
     var isComposingEnabled: Boolean
         get() = getFlag(F_IS_COMPOSING_ENABLED)
         set(v) { setFlag(F_IS_COMPOSING_ENABLED, v) }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/keyboard/LayoutManager.kt

@@ -65,9 +65,9 @@ private data class CachedPopupMapping(
 )
 
 data class DebugLayoutComputationResult(
-    val main: Result<CachedLayout>,
-    val mod: Result<CachedLayout>,
-    val ext: Result<CachedLayout>,
+    val main: Result<CachedLayout?>,
+    val mod: Result<CachedLayout?>,
+    val ext: Result<CachedLayout?>,
 ) {
     fun allLayoutsSuccess(): Boolean {
         return main.isSuccess && mod.isSuccess && ext.isSuccess
@@ -96,8 +96,13 @@ class LayoutManager(context: Context) {
      *
      * @return A deferred result for a layout.
      */
-    private fun loadLayoutAsync(ltn: LTN?) = ioScope.runCatchingAsync {
-        require(ltn != null) { "Invalid argument value for 'ltn': null" }
+    private fun loadLayoutAsync(ltn: LTN?, allowNullLTN: Boolean) = ioScope.runCatchingAsync {
+        if (!allowNullLTN) {
+            requireNotNull(ltn) { "Invalid argument value for 'ltn': null" }
+        }
+        if (ltn == null) {
+            return@runCatchingAsync null
+        }
         layoutCacheGuard.withLock {
             val cached = layoutCache[ltn]
             if (cached != null) {
@@ -176,7 +181,7 @@ class LayoutManager(context: Context) {
         val extendedPopupsDefault = loadPopupMappingAsync()
         val extendedPopups = loadPopupMappingAsync(subtype)
 
-        val mainLayoutResult = loadLayoutAsync(main).await()
+        val mainLayoutResult = loadLayoutAsync(main, allowNullLTN = false).await()
         val mainLayout = mainLayoutResult.onFailure {
             flogWarning { "$keyboardMode - main - $it" }
         }.getOrNull()
@@ -196,11 +201,11 @@ class LayoutManager(context: Context) {
         } else {
             modifier
         }
-        val modifierLayoutResult = loadLayoutAsync(modifierToLoad).await()
+        val modifierLayoutResult = loadLayoutAsync(modifierToLoad, allowNullLTN = true).await()
         val modifierLayout = modifierLayoutResult.onFailure {
             flogWarning { "$keyboardMode - mod - $it" }
         }.getOrNull()
-        val extensionLayoutResult = loadLayoutAsync(extension).await()
+        val extensionLayoutResult = loadLayoutAsync(extension, allowNullLTN = true).await()
         val extensionLayout = extensionLayoutResult.onFailure {
             flogWarning { "$keyboardMode - ext - $it" }
         }.getOrNull()

app/src/main/kotlin/dev/patrickgold/florisboard/ime/media/MediaInputLayout.kt

@@ -20,18 +20,19 @@ import android.annotation.SuppressLint
 import androidx.compose.foundation.gestures.awaitEachGesture
 import androidx.compose.foundation.gestures.awaitFirstDown
 import androidx.compose.foundation.gestures.waitForUpOrCancellation
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.indication
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.Backspace
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -46,7 +47,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
 import dev.patrickgold.florisboard.ime.input.InputEventDispatcher
 import dev.patrickgold.florisboard.ime.input.LocalInputFeedbackController
 import dev.patrickgold.florisboard.ime.keyboard.FlorisImeSizing
@@ -54,10 +54,12 @@ import dev.patrickgold.florisboard.ime.keyboard.KeyData
 import dev.patrickgold.florisboard.ime.media.emoji.EmojiData
 import dev.patrickgold.florisboard.ime.media.emoji.EmojiPaletteView
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.keyboardManager
-import org.florisboard.lib.snygg.ui.SnyggSurface
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggRow
 
 @SuppressLint("MutableCollectionMutableState")
 @Composable
@@ -73,7 +75,8 @@ fun MediaInputLayout(
     }
 
     CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
-        Column(
+        SnyggColumn(
+            elementName = FlorisImeUi.Media.elementName,
             modifier = modifier
                 .fillMaxWidth()
                 .height(FlorisImeSizing.imeUiHeight()),
@@ -82,14 +85,17 @@ fun MediaInputLayout(
                 modifier = Modifier.weight(1f),
                 fullEmojiMappings = emojiLayoutDataMap,
             )
-            Row(
+            SnyggRow(
+                elementName = FlorisImeUi.MediaBottomRow.elementName,
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(FlorisImeSizing.keyboardRowBaseHeight * 0.8f),
             ) {
                 KeyboardLikeButton(
+                    elementName = FlorisImeUi.MediaBottomRowButton.elementName,
                     inputEventDispatcher = keyboardManager.inputEventDispatcher,
                     keyData = TextKeyData.IME_UI_MODE_TEXT,
+                    modifier = Modifier.fillMaxHeight(),
                 ) {
                     Text(
                         text = "ABC",
@@ -98,8 +104,10 @@ fun MediaInputLayout(
                 }
                 Spacer(modifier = Modifier.weight(1f))
                 KeyboardLikeButton(
+                    elementName = FlorisImeUi.MediaBottomRowButton.elementName,
                     inputEventDispatcher = keyboardManager.inputEventDispatcher,
                     keyData = TextKeyData.DELETE,
+                    modifier = Modifier.fillMaxHeight(),
                 ) {
                     Icon(imageVector = Icons.AutoMirrored.Outlined.Backspace, contentDescription = null)
                 }
@@ -113,42 +121,45 @@ internal fun KeyboardLikeButton(
     modifier: Modifier = Modifier,
     inputEventDispatcher: InputEventDispatcher,
     keyData: KeyData,
-    element: String = FlorisImeUi.EmojiKey,
-    content: @Composable RowScope.() -> Unit,
+    elementName: String = FlorisImeUi.MediaEmojiKey.elementName,
+    content: @Composable () -> Unit,
 ) {
     val inputFeedbackController = LocalInputFeedbackController.current
-    var isPressed by remember { mutableStateOf(false) }
-    val keyStyle = FlorisImeTheme.style.get(
-        element = element,
-        code = keyData.code,
-        isPressed = isPressed,
-    )
-    SnyggSurface(
-        modifier = modifier.pointerInput(Unit) {
-            awaitEachGesture {
-                awaitFirstDown(requireUnconsumed = false).also {
-                    if (it.pressed != it.previousPressed) it.consume()
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val selector = if (isPressed) {
+        SnyggSelector.PRESSED
+    } else {
+        SnyggSelector.NONE
+    }
+
+    SnyggBox(
+        elementName = elementName,
+        attributes = mapOf(FlorisImeUi.Attr.Code to keyData.code),
+        selector = selector,
+        clickAndSemanticsModifier = modifier
+            .indication(interactionSource, ripple())
+            .pointerInput(Unit) {
+                awaitEachGesture {
+                    val down = awaitFirstDown(requireUnconsumed = false).also {
+                        if (it.pressed != it.previousPressed) it.consume()
+                    }
+                    val press = PressInteraction.Press(down.position)
+                    interactionSource.tryEmit(press)
+                    inputEventDispatcher.sendDown(keyData)
+                    inputFeedbackController.keyPress(keyData)
+                    val up = waitForUpOrCancellation()
+                    if (up != null) {
+                        interactionSource.tryEmit(PressInteraction.Release(press))
+                        inputEventDispatcher.sendUp(keyData)
+                    } else {
+                        interactionSource.tryEmit(PressInteraction.Cancel(press))
+                        inputEventDispatcher.sendCancel(keyData)
+                    }
                 }
-                isPressed = true
-                inputEventDispatcher.sendDown(keyData)
-                inputFeedbackController.keyPress(keyData)
-                val up = waitForUpOrCancellation()
-                isPressed = false
-                if (up != null) {
-                    inputEventDispatcher.sendUp(keyData)
-                } else {
-                    inputEventDispatcher.sendCancel(keyData)
-                }
-            }
-        },
-        style = keyStyle,
+            },
+        contentAlignment = Alignment.Center,
     ) {
-        Row(
-            modifier = Modifier
-                .fillMaxHeight()
-                .padding(horizontal = 12.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            content = content,
-        )
+        content()
     }
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/media/emoji/EmojiPaletteView.kt

@@ -47,7 +47,7 @@ import androidx.compose.material.icons.outlined.Delete
 import androidx.compose.material.icons.outlined.PushPin
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults
@@ -88,23 +88,22 @@ import dev.patrickgold.florisboard.editorInstance
 import dev.patrickgold.florisboard.ime.input.LocalInputFeedbackController
 import dev.patrickgold.florisboard.ime.keyboard.FlorisImeSizing
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.keyboardManager
 import dev.patrickgold.florisboard.lib.compose.florisScrollbar
 import dev.patrickgold.florisboard.lib.compose.header
-import dev.patrickgold.florisboard.lib.compose.safeTimes
 import dev.patrickgold.florisboard.lib.compose.stringRes
 import dev.patrickgold.jetpref.datastore.model.observeAsState
 import kotlinx.coroutines.launch
 import org.florisboard.lib.android.AndroidKeyguardManager
 import org.florisboard.lib.android.showShortToast
 import org.florisboard.lib.android.systemService
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.snyggBorder
-import org.florisboard.lib.snygg.ui.snyggShadow
-import org.florisboard.lib.snygg.ui.solidColor
-import org.florisboard.lib.snygg.ui.spSize
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggIcon
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggText
+import org.florisboard.lib.snygg.ui.rememberSnyggThemeQuery
 import kotlin.math.ceil
 
 private val EmojiCategoryValues = EmojiCategory.entries
@@ -164,10 +163,6 @@ fun EmojiPaletteView(
 
     val preferredSkinTone by prefs.emoji.preferredSkinTone.observeAsState()
     val emojiHistoryEnabled by prefs.emoji.historyEnabled.observeAsState()
-    val fontSizeMultiplier = prefs.keyboard.fontSizeMultiplier()
-    val emojiKeyStyle = FlorisImeTheme.style.get(element = FlorisImeUi.EmojiKey)
-    val emojiKeyFontSize = emojiKeyStyle.fontSize.spSize(default = EmojiDefaultFontSize) safeTimes fontSizeMultiplier
-    val contentColor = emojiKeyStyle.foreground.solidColor(context, default = FlorisImeTheme.fallbackContentColor())
 
     var activeCategory by remember(emojiHistoryEnabled) {
         if (emojiHistoryEnabled) {
@@ -182,11 +177,9 @@ fun EmojiPaletteView(
 
     @Composable
     fun GridHeader(text: String) {
-        Text(
-            modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
+        SnyggText(
+            elementName = FlorisImeUi.MediaEmojiSubheader.elementName,
             text = text,
-            style = MaterialTheme.typography.titleMedium,
-            color = contentColor,
         )
     }
 
@@ -202,9 +195,6 @@ fun EmojiPaletteView(
             preferredSkinTone = preferredSkinTone,
             isPinned = isPinned,
             isRecent = isRecent,
-            contentColor = contentColor,
-            fontSize = emojiKeyFontSize,
-            fontSizeMultiplier = fontSizeMultiplier,
             onEmojiInput = { emoji ->
                 keyboardManager.inputEventDispatcher.sendDownUp(emoji)
                 scope.launch {
@@ -259,7 +249,6 @@ fun EmojiPaletteView(
                 ) {
                     Text(
                         text = stringRes(R.string.emoji__history__phone_locked_message),
-                        color = contentColor,
                     )
                 }
             } else if (activeCategory == EmojiCategory.RECENTLY_USED && isEmojiHistoryEmpty) {
@@ -270,12 +259,10 @@ fun EmojiPaletteView(
                 ) {
                     Text(
                         text = stringRes(R.string.emoji__history__empty_message),
-                        color = contentColor,
                     )
                     Text(
                         modifier = Modifier.padding(top = 8.dp),
                         text = stringRes(R.string.emoji__history__usage_tip),
-                        color = contentColor,
                         fontStyle = FontStyle.Italic,
                     )
                 }
@@ -284,7 +271,7 @@ fun EmojiPaletteView(
                     LazyVerticalGrid(
                         modifier = Modifier
                             .fillMaxSize()
-                            .florisScrollbar(lazyListState, color = contentColor.copy(alpha = 0.28f)),
+                            .florisScrollbar(lazyListState),
                         columns = GridCells.Adaptive(minSize = EmojiBaseWidth),
                         state = lazyListState,
                     ) {
@@ -322,30 +309,29 @@ private fun EmojiCategoriesTabRow(
     onCategoryChange: (EmojiCategory) -> Unit,
     emojiHistoryEnabled: Boolean,
 ) {
-    val context = LocalContext.current
     val inputFeedbackController = LocalInputFeedbackController.current
-    val tabStyle = FlorisImeTheme.style.get(element = FlorisImeUi.EmojiTab)
-    val tabStyleFocused = FlorisImeTheme.style.get(element = FlorisImeUi.EmojiTab, isFocus = true)
-    val unselectedContentColor = tabStyle.foreground.solidColor(context, default = FlorisImeTheme.fallbackContentColor())
-    val selectedContentColor = tabStyleFocused.foreground.solidColor(context, default = FlorisImeTheme.fallbackContentColor())
-
     val selectedTabIndex = if (emojiHistoryEnabled) {
         EmojiCategoryValues.indexOf(activeCategory)
     } else {
         EmojiCategoryValues.indexOf(activeCategory) - 1
     }
+    val style = rememberSnyggThemeQuery(FlorisImeUi.MediaEmojiTab.elementName)
     TabRow(
         modifier = Modifier
             .fillMaxWidth()
             .height(FlorisImeSizing.smartbarHeight),
         selectedTabIndex = selectedTabIndex,
         containerColor = Color.Transparent,
-        contentColor = selectedContentColor,
+        contentColor = style.foreground(),
         indicator = { tabPositions ->
+            val style = rememberSnyggThemeQuery(
+                elementName = FlorisImeUi.MediaEmojiTab.elementName,
+                selector = SnyggSelector.FOCUS,
+            )
             TabRowDefaults.PrimaryIndicator(
                 Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]),
-                color = selectedContentColor,
-                height = 4.dp
+                height = 4.dp,
+                color = style.foreground(),
             )
         },
     ) {
@@ -359,13 +345,12 @@ private fun EmojiCategoriesTabRow(
                     onCategoryChange(category)
                 },
                 selected = activeCategory == category,
-                icon = { Icon(
+                icon = { SnyggIcon(
+                    elementName = FlorisImeUi.MediaEmojiTab.elementName,
+                    selector = if (activeCategory == category) SnyggSelector.FOCUS else SnyggSelector.NONE,
                     modifier = Modifier.size(ButtonDefaults.IconSize),
                     imageVector = category.icon(),
-                    contentDescription = null,
                 ) },
-                unselectedContentColor = unselectedContentColor,
-                selectedContentColor = selectedContentColor,
             )
         }
     }
@@ -378,9 +363,6 @@ private fun EmojiKey(
     preferredSkinTone: EmojiSkinTone,
     isPinned: Boolean,
     isRecent: Boolean,
-    contentColor: Color,
-    fontSize: TextUnit,
-    fontSizeMultiplier: Float,
     onEmojiInput: (Emoji) -> Unit,
     onHistoryAction: () -> Unit,
 ) {
@@ -389,7 +371,7 @@ private fun EmojiKey(
     val variations = emojiSet.variations(withoutSkinTone = preferredSkinTone)
     var showVariantsBox by remember { mutableStateOf(false) }
 
-    Box(
+    SnyggBox(FlorisImeUi.MediaEmojiKey.elementName,
         modifier = Modifier
             .aspectRatio(1f)
             .pointerInput(Unit) {
@@ -413,10 +395,9 @@ private fun EmojiKey(
             modifier = Modifier.align(Alignment.Center),
             text = base.value,
             emojiCompatInstance = emojiCompatInstance,
-            color = contentColor,
-            fontSize = fontSize,
         )
         if (variations.isNotEmpty() || isPinned || isRecent) {
+            val style = rememberSnyggThemeQuery(FlorisImeUi.MediaEmojiKeyPopupExtendedIndicator.elementName)
             val shape = when (LocalLayoutDirection.current) {
                 LayoutDirection.Ltr -> VariantsTriangleShapeLtr
                 LayoutDirection.Rtl -> VariantsTriangleShapeRtl
@@ -426,7 +407,7 @@ private fun EmojiKey(
                     .align(Alignment.BottomEnd)
                     .offset(x = (-4).dp, y = (-4).dp)
                     .size(4.dp)
-                    .background(contentColor, shape),
+                    .background(style.foreground(), shape),
             )
         }
 
@@ -448,7 +429,6 @@ private fun EmojiKey(
                 variations = variations,
                 visible = showVariantsBox,
                 emojiCompatInstance = emojiCompatInstance,
-                fontSizeMultiplier = fontSizeMultiplier,
                 onEmojiTap = { emoji ->
                     onEmojiInput(emoji)
                     showVariantsBox = false
@@ -467,13 +447,10 @@ private fun EmojiVariationsPopup(
     variations: List<Emoji>,
     visible: Boolean,
     emojiCompatInstance: EmojiCompat?,
-    fontSizeMultiplier: Float,
     onEmojiTap: (Emoji) -> Unit,
     onDismiss: () -> Unit,
 ) {
-    val popupStyle = FlorisImeTheme.style.get(element = FlorisImeUi.EmojiKeyPopup)
     val emojiKeyHeight = FlorisImeSizing.smartbarHeight
-    val context = LocalContext.current
 
     if (visible) {
         Popup(
@@ -484,29 +461,25 @@ private fun EmojiVariationsPopup(
             },
             onDismissRequest = onDismiss,
         ) {
-            FlowRow(
+            SnyggRow(
+                elementName = FlorisImeUi.MediaEmojiKeyPopupBox.elementName,
                 modifier = Modifier
-                    .widthIn(max = EmojiBaseWidth * 6)
-                    .snyggShadow(popupStyle)
-                    .snyggBorder(context, popupStyle)
-                    .snyggBackground(context, popupStyle, fallbackColor = FlorisImeTheme.fallbackSurfaceColor()),
+                    .widthIn(max = EmojiBaseWidth * 6),
             ) {
                 for (emoji in variations) {
-                    Box(
+                    SnyggBox(
+                        elementName = FlorisImeUi.MediaEmojiKeyPopupElement.elementName,
                         modifier = Modifier
                             .pointerInput(Unit) {
                                 detectTapGestures { onEmojiTap(emoji) }
                             }
                             .width(EmojiBaseWidth)
-                            .height(emojiKeyHeight)
-                            .padding(all = 4.dp),
+                            .height(emojiKeyHeight),
                     ) {
                         EmojiText(
                             modifier = Modifier.align(Alignment.Center),
                             text = emoji.value,
                             emojiCompatInstance = emojiCompatInstance,
-                            color = popupStyle.foreground.solidColor(context, default = FlorisImeTheme.fallbackContentColor()),
-                            fontSize = popupStyle.fontSize.spSize(default = EmojiDefaultFontSize) safeTimes fontSizeMultiplier,
                         )
                     }
                 }
@@ -526,7 +499,6 @@ private fun EmojiHistoryPopup(
 ) {
     val prefs by florisPreferenceModel()
     val scope = rememberCoroutineScope()
-    val popupStyle = FlorisImeTheme.style.get(element = FlorisImeUi.EmojiKeyPopup)
     val emojiKeyHeight = FlorisImeSizing.smartbarHeight
     val context = LocalContext.current
     val pinnedUS by prefs.emoji.historyPinnedUpdateStrategy.observeAsState()
@@ -536,7 +508,8 @@ private fun EmojiHistoryPopup(
 
     @Composable
     fun Action(icon: ImageVector, action: suspend () -> Unit) {
-        Box(
+        SnyggBox(
+            elementName = FlorisImeUi.MediaEmojiKeyPopupElement.elementName,
             modifier = Modifier
                 .pointerInput(Unit) {
                     detectTapGestures {
@@ -547,14 +520,11 @@ private fun EmojiHistoryPopup(
                     }
                 }
                 .width(EmojiBaseWidth)
-                .height(emojiKeyHeight)
-                .padding(all = 4.dp),
+                .height(emojiKeyHeight),
         ) {
-            Icon(
+            SnyggIcon(
                 modifier = Modifier.align(Alignment.Center),
                 imageVector = icon,
-                contentDescription = null,
-                tint = popupStyle.foreground.solidColor(context, default = FlorisImeTheme.fallbackContentColor()),
             )
         }
     }
@@ -569,12 +539,10 @@ private fun EmojiHistoryPopup(
             },
             onDismissRequest = onDismiss,
         ) {
-            FlowRow(
+            SnyggRow(
+                elementName = FlorisImeUi.MediaEmojiKeyPopupBox.elementName,
                 modifier = Modifier
-                    .widthIn(max = EmojiBaseWidth * 6)
-                    .snyggShadow(popupStyle)
-                    .snyggBorder(context, popupStyle)
-                    .snyggBackground(context, popupStyle, fallbackColor = FlorisImeTheme.fallbackSurfaceColor()),
+                    .widthIn(max = EmojiBaseWidth * 6),
             ) {
                 if (isCurrentlyPinned) {
                     Action(

app/src/main/kotlin/dev/patrickgold/florisboard/ime/nlp/BreakIteratorGroup.kt

@@ -21,8 +21,6 @@ import dev.patrickgold.florisboard.lib.FlorisLocale
 import io.github.reactivecircus.cache4k.Cache
 import org.florisboard.lib.kotlin.GuardedByLock
 import org.florisboard.lib.kotlin.guardedByLock
-import kotlin.contracts.InvocationKind
-import kotlin.contracts.contract
 
 open class BreakIteratorGroup {
     private val charInstances = Cache.Builder().build<FlorisLocale, GuardedByLock<BreakIterator>>()
@@ -32,19 +30,13 @@ open class BreakIteratorGroup {
     private val sentenceInstances = Cache.Builder().build<FlorisLocale, GuardedByLock<BreakIterator>>()
 
     suspend fun <R> character(locale: FlorisLocale, action: (BreakIterator) -> R): R {
-        contract {
-            callsInPlace(action, InvocationKind.EXACTLY_ONCE)
-        }
         val instance = charInstances.get(locale) {
             guardedByLock { BreakIterator.getCharacterInstance(locale.base) }
         }
-        return instance.withLock { action(it) }
+        return instance.withLock(null, action)
     }
 
     suspend fun <R> word(locale: FlorisLocale, action: (BreakIterator) -> R): R {
-        contract {
-            callsInPlace(action, InvocationKind.EXACTLY_ONCE)
-        }
         val instance = wordInstances.get(locale) {
             guardedByLock { BreakIterator.getWordInstance(locale.base) }
         }
@@ -52,9 +44,6 @@ open class BreakIteratorGroup {
     }
 
     suspend fun <R> sentence(locale: FlorisLocale, action: (BreakIterator) -> R): R {
-        contract {
-            callsInPlace(action, InvocationKind.EXACTLY_ONCE)
-        }
         val instance = sentenceInstances.get(locale) {
             guardedByLock { BreakIterator.getSentenceInstance(locale.base) }
         }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/nlp/NlpManager.kt

@@ -96,7 +96,7 @@ class NlpManager(context: Context) {
         prefs.suggestion.enabled.observeForever {
             assembleCandidates()
         }
-        prefs.suggestion.clipboardContentEnabled.observeForever {
+        prefs.clipboard.suggestionEnabled.observeForever {
             assembleCandidates()
         }
         prefs.emoji.suggestionEnabled.observeForever {
@@ -370,14 +370,14 @@ class NlpManager(context: Context) {
             isPrivateSession: Boolean,
         ): List<SuggestionCandidate> {
             // Check if enabled
-            if (!prefs.suggestion.clipboardContentEnabled.get()) return emptyList()
+            if (!prefs.clipboard.suggestionEnabled.get()) return emptyList()
 
             val currentItem = validateClipboardItem(clipboardManager.primaryClip, lastClipboardItemId, content.text)
                 ?: return emptyList()
 
             return buildList {
                 val now = System.currentTimeMillis()
-                if ((now - currentItem.creationTimestampMs) < prefs.suggestion.clipboardContentTimeout.get() * 1000) {
+                if ((now - currentItem.creationTimestampMs) < prefs.clipboard.suggestionTimeout.get() * 1000) {
                     add(ClipboardSuggestionCandidate(currentItem, sourceProvider = this@ClipboardSuggestionProvider, context = context))
                     if (currentItem.isSensitive) {
                         return@buildList

app/src/main/kotlin/dev/patrickgold/florisboard/ime/onehanded/OneHandedMode.kt

@@ -20,7 +20,6 @@ package dev.patrickgold.florisboard.ime.onehanded
  * Static object which contains all possible one-handed mode strings.
  */
 enum class OneHandedMode {
-    OFF,
     START,
     END;
 }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/onehanded/OneHandedPanel.kt

@@ -17,29 +17,26 @@
 package dev.patrickgold.florisboard.ime.onehanded
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
 import androidx.compose.material.icons.filled.ZoomOutMap
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import dev.patrickgold.florisboard.R
 import dev.patrickgold.florisboard.app.florisPreferenceModel
 import dev.patrickgold.florisboard.ime.input.LocalInputFeedbackController
 import dev.patrickgold.florisboard.ime.keyboard.FlorisImeSizing
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.lib.compose.stringRes
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.solidColor
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggIcon
+import org.florisboard.lib.snygg.ui.SnyggIconButton
 
 @Composable
 fun RowScope.OneHandedPanel(
@@ -49,38 +46,43 @@ fun RowScope.OneHandedPanel(
 ) {
     val prefs by florisPreferenceModel()
     val inputFeedbackController = LocalInputFeedbackController.current
-    val oneHandedPanelStyle = FlorisImeTheme.style.get(FlorisImeUi.OneHandedPanel)
-    val context = LocalContext.current
 
-    Column(
+    SnyggColumn(
+        FlorisImeUi.OneHandedPanel.elementName,
         modifier = modifier
             .weight(weight)
-            .snyggBackground(context, oneHandedPanelStyle)
             .height(FlorisImeSizing.imeUiHeight()),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.SpaceEvenly,
     ) {
-        IconButton(
+        SnyggIconButton(
+            FlorisImeUi.OneHandedPanelButton.elementName,
             onClick = {
                 inputFeedbackController.keyPress()
-                prefs.keyboard.oneHandedMode.set(OneHandedMode.OFF)
+                prefs.keyboard.oneHandedModeEnabled.set(false)
             },
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxWidth()
+                .aspectRatio(1f),
         ) {
-            Icon(
+            SnyggIcon(
+                modifier = Modifier.fillMaxWidth(),
                 imageVector = Icons.Default.ZoomOutMap,
                 contentDescription = stringRes(R.string.one_handed__close_btn_content_description),
-                tint = oneHandedPanelStyle.foreground.solidColor(context),
             )
         }
-        IconButton(
+        SnyggIconButton(
+            FlorisImeUi.OneHandedPanelButton.elementName,
             onClick = {
                 inputFeedbackController.keyPress()
                 prefs.keyboard.oneHandedMode.set(panelSide)
             },
-            modifier = Modifier.weight(1f).fillMaxWidth(),
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxWidth(),
         ) {
-            Icon(
+            SnyggIcon(
+                modifier = Modifier.fillMaxWidth(),
                 imageVector = if (panelSide == OneHandedMode.START) {
                     Icons.AutoMirrored.Filled.KeyboardArrowLeft
                 } else {
@@ -93,7 +95,6 @@ fun RowScope.OneHandedPanel(
                         R.string.one_handed__move_end_btn_content_description
                     }
                 ),
-                tint = oneHandedPanelStyle.foreground.solidColor(context),
             )
         }
     }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/popup/PopupUi.kt

@@ -17,79 +17,58 @@
 package dev.patrickgold.florisboard.ime.popup
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.requiredHeight
-import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreHoriz
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import dev.patrickgold.florisboard.ime.keyboard.Key
-import dev.patrickgold.florisboard.ime.text.key.KeyCode
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
-import dev.patrickgold.florisboard.lib.compose.safeTimes
-import org.florisboard.lib.snygg.ui.SnyggSurface
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.snyggBorder
-import org.florisboard.lib.snygg.ui.snyggShadow
-import org.florisboard.lib.snygg.ui.solidColor
-import org.florisboard.lib.snygg.ui.spSize
+import org.florisboard.lib.snygg.SnyggQueryAttributes
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggIcon
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggText
 
 @Composable
 fun PopupBaseBox(
     modifier: Modifier = Modifier,
+    attributes: SnyggQueryAttributes,
     key: Key,
-    fontSizeMultiplier: Float,
     shouldIndicateExtendedPopups: Boolean,
 ): Unit = with(LocalDensity.current) {
-    val context = LocalContext.current
-
-    val popupStyle = FlorisImeTheme.style.get(
-        element = FlorisImeUi.KeyPopup,
-    )
-    val fontSize = popupStyle.fontSize.spSize() safeTimes fontSizeMultiplier
-    SnyggSurface(
+    SnyggBox(
+        elementName = FlorisImeUi.KeyPopupBox.elementName,
+        attributes = attributes,
         modifier = modifier,
-        style = popupStyle,
-        clip = true,
     ) {
         key.label?.let { label ->
-            Box(
+            SnyggBox(
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(key.visibleBounds.height.toDp())
                     .align(Alignment.TopCenter),
             ) {
-                Text(
+                SnyggText(
                     modifier = Modifier.align(Alignment.Center),
                     text = label,
-                    color = popupStyle.foreground.solidColor(context),
-                    fontSize = fontSize,
-                    maxLines = 1,
-                    softWrap = false,
                 )
             }
         }
         if (shouldIndicateExtendedPopups) {
-            Icon(
-                modifier = Modifier
-                    .requiredSize(fontSize.toDp() * 0.65f)
-                    .align(Alignment.CenterEnd),
+            SnyggIcon(
+                elementName = FlorisImeUi.KeyPopupExtendedIndicator.elementName,
+                attributes = attributes,
+                modifier = Modifier.align(Alignment.CenterEnd),
                 imageVector = Icons.Default.MoreHoriz,
-                contentDescription = null,
-                tint = popupStyle.foreground.solidColor(context),
             )
         }
     }
@@ -98,72 +77,43 @@ fun PopupBaseBox(
 @Composable
 fun PopupExtBox(
     modifier: Modifier = Modifier,
+    attributes: SnyggQueryAttributes,
     elements: List<List<PopupUiController.Element>>,
-    fontSizeMultiplier: Float,
     elemArrangement: Arrangement.Horizontal,
     elemWidth: Dp,
     elemHeight: Dp,
     activeElementIndex: Int,
 ): Unit = with(LocalDensity.current) {
-    val context = LocalContext.current
-
-    val popupStyle = FlorisImeTheme.style.get(
-        element = FlorisImeUi.KeyPopup,
-        isFocus = false,
-    )
-    Column(
-        modifier = modifier
-            .snyggShadow(popupStyle)
-            .snyggBorder(context, popupStyle)
-            .snyggBackground(context, popupStyle),
-    ) {
+    SnyggColumn(FlorisImeUi.KeyPopupBox.elementName, attributes, modifier = modifier) {
         for (row in elements.asReversed()) {
-            Row(
+            SnyggRow(
                 modifier = Modifier
                     .fillMaxWidth()
                     .requiredHeight(elemHeight),
                 horizontalArrangement = elemArrangement,
             ) {
                 for (element in row) {
-                    val elemStyle = if (activeElementIndex == element.orderedIndex) {
-                        FlorisImeTheme.style.get(
-                            element = FlorisImeUi.KeyPopup,
-                            isFocus = true,
-                        )
+                    val selector = if (activeElementIndex == element.orderedIndex) {
+                        SnyggSelector.FOCUS
                     } else {
-                        popupStyle
+                        null
                     }
-                    val elemFontSize = elemStyle.fontSize.spSize() safeTimes fontSizeMultiplier safeTimes
-                        if (element.data.code == KeyCode.URI_COMPONENT_TLD) { 0.6f } else { 1.0f }
-                    Box(
-                        modifier = Modifier
-                            .size(elemWidth, elemHeight)
-                            .run {
-                                if (activeElementIndex == element.orderedIndex) {
-                                    snyggBackground(context, elemStyle)
-                                } else {
-                                    this
-                                }
-                            },
+                    SnyggBox(
+                        elementName = FlorisImeUi.KeyPopupElement.elementName,
+                        attributes = attributes,
+                        selector = selector,
+                        modifier = Modifier.size(elemWidth, elemHeight),
                     ) {
                         element.label?.let { label ->
-                            Text(
+                            SnyggText(
                                 modifier = Modifier.align(Alignment.Center),
                                 text = label,
-                                color = elemStyle.foreground.solidColor(context),
-                                fontSize = elemFontSize,
-                                maxLines = 1,
-                                softWrap = false,
                             )
                         }
                         element.icon?.let { icon ->
-                            Icon(
-                                modifier = Modifier
-                                    .requiredSize(elemFontSize.toDp() * 1.1f)
-                                    .align(Alignment.Center),
+                            SnyggIcon(
+                                modifier = Modifier.align(Alignment.Center),
                                 imageVector = icon,
-                                contentDescription = null,
-                                tint = elemStyle.foreground.solidColor(context),
                             )
                         }
                     }

app/src/main/kotlin/dev/patrickgold/florisboard/ime/popup/PopupUiController.kt

@@ -42,6 +42,7 @@ import dev.patrickgold.florisboard.ime.text.key.KeyCode
 import dev.patrickgold.florisboard.ime.text.key.KeyHintConfiguration
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKey
 import dev.patrickgold.florisboard.ime.text.keyboard.TextKeyData
+import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.lib.FlorisRect
 import dev.patrickgold.florisboard.lib.toIntOffset
 
@@ -81,7 +82,6 @@ class PopupUiController(
 
     private var activeElementIndex by mutableIntStateOf(-1)
     var evaluator: ComputingEvaluator = DefaultComputingEvaluator
-    var fontSizeMultiplier: Float = 1.0f
     var keyHintConfiguration: KeyHintConfiguration = KeyHintConfiguration.HINTS_DISABLED
 
     /** Is true if the preview popup is visible to the user, else false */
@@ -448,13 +448,17 @@ class PopupUiController(
 
     @Composable
     fun RenderPopups(): Unit = with(LocalDensity.current) {
+        val attributes = mapOf(
+            FlorisImeUi.Attr.Mode to evaluator.keyboard.mode.toString(),
+            FlorisImeUi.Attr.ShiftState to evaluator.state.inputShiftState.toString(),
+        )
         baseRenderInfo?.let { renderInfo ->
             PopupBaseBox(
                 modifier = Modifier
                     .requiredSize(renderInfo.bounds.size.toDpSize())
                     .absoluteOffset { renderInfo.bounds.topLeft.toIntOffset() },
+                attributes = attributes,
                 key = renderInfo.key,
-                fontSizeMultiplier = fontSizeMultiplier,
                 shouldIndicateExtendedPopups = renderInfo.shouldIndicateExtendedPopups && extRenderInfo == null,
             )
         }
@@ -466,8 +470,8 @@ class PopupUiController(
                 modifier = Modifier
                     .requiredSize(renderInfo.bounds.size.toDpSize())
                     .absoluteOffset { renderInfo.bounds.topLeft.toIntOffset() },
+                attributes = attributes,
                 elements = renderInfo.elements,
-                fontSizeMultiplier = fontSizeMultiplier,
                 elemArrangement = if (renderInfo.anchorLeft) {
                     Arrangement.Start
                 } else {

app/src/main/kotlin/dev/patrickgold/florisboard/ime/sheet/BottomSheetHostUi.kt

@@ -48,7 +48,6 @@ fun BottomSheetHostUi(
     val bgColorOutOfBounds by animateColorAsState(
         if (isShowing) SheetOutOfBoundsBgColorActive else SheetOutOfBoundsBgColorInactive
     )
-
     Column(Modifier.background(bgColorOutOfBounds)) {
         Box(
             modifier = Modifier

app/src/main/kotlin/dev/patrickgold/florisboard/ime/smartbar/CandidatesRow.kt

@@ -21,17 +21,11 @@ import androidx.compose.foundation.gestures.awaitFirstDown
 import androidx.compose.foundation.gestures.waitForUpOrCancellation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -45,25 +39,24 @@ import androidx.compose.ui.input.pointer.PointerInputChange
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import dev.patrickgold.florisboard.app.florisPreferenceModel
 import dev.patrickgold.florisboard.ime.nlp.ClipboardSuggestionCandidate
 import dev.patrickgold.florisboard.ime.nlp.SuggestionCandidate
-import dev.patrickgold.florisboard.ime.theme.FlorisImeTheme
 import dev.patrickgold.florisboard.ime.theme.FlorisImeUi
 import dev.patrickgold.florisboard.keyboardManager
 import dev.patrickgold.florisboard.lib.compose.conditional
 import dev.patrickgold.florisboard.lib.compose.florisHorizontalScroll
-import dev.patrickgold.florisboard.lib.compose.safeTimes
 import dev.patrickgold.florisboard.nlpManager
 import dev.patrickgold.florisboard.subtypeManager
 import dev.patrickgold.jetpref.datastore.model.observeAsState
-import org.florisboard.lib.snygg.ui.snyggBackground
-import org.florisboard.lib.snygg.ui.solidColor
-import org.florisboard.lib.snygg.ui.spSize
+import org.florisboard.lib.snygg.SnyggSelector
+import org.florisboard.lib.snygg.ui.SnyggBox
+import org.florisboard.lib.snygg.ui.SnyggColumn
+import org.florisboard.lib.snygg.ui.SnyggIcon
+import org.florisboard.lib.snygg.ui.SnyggRow
+import org.florisboard.lib.snygg.ui.SnyggSpacer
+import org.florisboard.lib.snygg.ui.SnyggText
 
 val CandidatesRowScrollbarHeight = 2.dp
 
@@ -78,13 +71,10 @@ fun CandidatesRow(modifier: Modifier = Modifier) {
     val displayMode by prefs.suggestion.displayMode.observeAsState()
     val candidates by nlpManager.activeCandidatesFlow.collectAsState()
 
-    val rowStyle = FlorisImeTheme.style.get(FlorisImeUi.SmartbarCandidatesRow)
-    val spacerStyle = FlorisImeTheme.style.get(FlorisImeUi.SmartbarCandidateSpacer)
-
-    Row(
+    SnyggRow(
+        elementName = FlorisImeUi.SmartbarCandidatesRow.elementName,
         modifier = modifier
             .fillMaxSize()
-            .snyggBackground(context, rowStyle)
             .conditional(displayMode == CandidatesDisplayMode.DYNAMIC_SCROLLABLE && candidates.size > 1) {
                 florisHorizontalScroll(scrollbarHeight = CandidatesRowScrollbarHeight)
             },
@@ -115,12 +105,12 @@ fun CandidatesRow(modifier: Modifier = Modifier) {
             }
             for ((n, candidate) in list.withIndex()) {
                 if (n > 0) {
-                    Spacer(
+                    SnyggSpacer(
+                        elementName = FlorisImeUi.SmartbarCandidateSpacer.elementName,
                         modifier = Modifier
                             .width(1.dp)
                             .fillMaxHeight(0.6f)
-                            .align(Alignment.CenterVertically)
-                            .snyggBackground(context, spacerStyle),
+                            .align(Alignment.CenterVertically),
                     )
                 }
                 CandidateItem(
@@ -156,24 +146,21 @@ private fun CandidateItem(
     onLongPress: () -> Boolean = { false },
     longPressDelay: Long,
 ) = with(LocalDensity.current) {
-    val context = LocalContext.current
     var isPressed by remember { mutableStateOf(false) }
 
-    val style = if (candidate is ClipboardSuggestionCandidate) {
-        FlorisImeTheme.style.get(
-            element = FlorisImeUi.SmartbarCandidateClip,
-            isPressed = isPressed,
-        )
+    val elementName = if (candidate is ClipboardSuggestionCandidate) {
+        FlorisImeUi.SmartbarCandidateClip
     } else {
-        FlorisImeTheme.style.get(
-            element = FlorisImeUi.SmartbarCandidateWord,
-            isPressed = isPressed,
-        )
-    }
+        FlorisImeUi.SmartbarCandidateWord
+    }.elementName
+    val attributes = mapOf("auto-commit" to if (candidate.isEligibleForAutoCommit) 1 else 0)
+    val selector = if (isPressed) SnyggSelector.PRESSED else SnyggSelector.NONE
 
-    Row(
+    SnyggRow(
+        elementName = elementName,
+        attributes = attributes,
+        selector = selector,
         modifier = modifier
-            .snyggBackground(context, style)
             .pointerInput(Unit) {
                 awaitEachGesture {
                     val down = awaitFirstDown()
@@ -197,47 +184,35 @@ private fun CandidateItem(
                     }
                     isPressed = false
                 }
-            }
-            .padding(horizontal = 12.dp),
+            },
         verticalAlignment = Alignment.CenterVertically,
     ) {
         if (candidate.icon != null) {
-            Icon(
-                modifier = Modifier
-                    .requiredSize(
-                        style.fontSize
-                            .spSize()
-                            .toDp() * 1.5f
-                    )
-                    .padding(end = 4.dp),
-                imageVector = candidate.icon!!,
-                contentDescription = null,
-                tint = style.foreground.solidColor(context),
-            )
+            SnyggBox(
+                elementName = "$elementName-icon",
+                attributes = attributes,
+                selector = selector,
+            ) {
+                SnyggIcon(imageVector = candidate.icon!!)
+            }
         }
-        Column(
+        SnyggColumn(
             modifier = if (displayMode == CandidatesDisplayMode.CLASSIC) Modifier.weight(1f) else Modifier,
             verticalArrangement = Arrangement.Center,
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Text(
+            SnyggText(
+                elementName = "$elementName-text",
+                attributes = attributes,
+                selector = selector,
                 text = candidate.text.toString(),
-                color = style.foreground.solidColor(context),
-                fontSize = style.fontSize.spSize(),
-                fontWeight = if (candidate.isEligibleForAutoCommit) FontWeight.Bold else FontWeight.Normal,
-                textAlign = TextAlign.Center,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
             )
             if (candidate.secondaryText != null) {
-                Text(
+                SnyggText(
+                    elementName = "$elementName-secondary-text",
+                    attributes = attributes,
+                    selector = selector,
                     text = candidate.secondaryText!!.toString(),
-                    color = style.foreground.solidColor(context),
-                    fontSize = style.fontSize.spSize() safeTimes 0.6,
-                    fontWeight = if (candidate.isEligibleForAutoCommit) FontWeight.Bold else FontWeight.Normal,
-                    textAlign = TextAlign.Center,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis,
                 )
             }
         }