feat: custom editor

2026-06-13 15:14:40 +00:00 · 2025-06-18 16:47:29 +10:00
256 changed files with 5452 additions and 38313 deletions
@@ -5,30 +5,31 @@
    "es2021": true,
    "node": true
  },
-  "extends": ["eslint:recommended"],
+  "extends": "eslint:recommended",
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "import"],
  "ignorePatterns": ["**/*.d.ts"],
  "globals": {
    "__ENABLE_GH_RELEASE_UPDATE_CHECK__": "readonly",
    "__GH_RELEASE_REPO__": "readonly",
    "__UPDATE_CHANNEL__": "readonly",
    "__BUILD_LABEL__": "readonly"
  },
  "rules": {
-    "no-unused-vars": "off",
+    // allow importing ts extensions
-    "no-undef": "off",
+    "sort-imports": [
-    "no-useless-escape": "off",
+      "error",
-    "no-prototype-builtins": "off",
+      {
-    "no-empty": "off",
+        "ignoreCase": true,
-    "no-case-declarations": "off",
+        "ignoreDeclarationSort": true,
-    "no-irregular-whitespace": "off",
+        "ignoreMemberSort": false,
-    "sort-imports": "off",
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-    "import/extensions": "off",
+      }
-    "no-async-promise-executor": "off"
+    ],
-  }
+    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "plugins": ["import"]
 }
@@ -1,114 +0,0 @@
 name: 🙋 New Contributor - Need Help Getting Started
 description: Perfect for first-time contributors who need guidance
 labels: ["help wanted", "documentation"]
 title: "[NEW CONTRIBUTOR] "
 body:
  - type: markdown
    attributes:
      value: |
        ## Hi there! 👋
        Welcome to BetterSEQTA+! We're excited to have you join our community.
  - type: checkboxes
    attributes:
      label: Tell us about yourself (check all that apply)
      options:
        - label: "This is my first time contributing to open source"
          required: false
        - label: "I'm new to browser extensions"
          required: false
        - label: "I'm new to TypeScript/JavaScript"
          required: false
        - label: "I have some coding experience but new to this project"
          required: false
  - type: checkboxes
    attributes:
      label: What would you like to work on? (check all that apply)
      options:
        - label: "Fix a bug 🐛"
          required: false
        - label: "Add a new feature ✨"
          required: false
        - label: "Improve documentation 📚"
          required: false
        - label: "Create a plugin 🧩"
          required: false        
        - label: "Improve the UI/design 🎨"
          required: false
        - label: "Write tests 🧪"
          required: false
        - label: "Not sure - I want to help but need guidance!"
          required: false
  - type: checkboxes
    attributes:
      label: Have you read our guides?
      options:
        - label: "Getting Started Guide (see docs/GETTING_STARTED_CONTRIBUTING.md)"
          required: true
        - label: "Architecture Guide (see docs/ARCHITECTURE.md)"
          required: true
        - label: "Plugin Development Guide (see docs/plugins/README.md)"
          required: true
  - type: checkboxes
    attributes:
      label: Have you set up the development environment yet?
      options:
        - label: Yes, everything works! 🎉
          required: false
        - label: Partially - I can run `npm run dev` but having some issues
          required: false
        - label: No, I need help with setup
          required: false
        - label: I tried but ran into errors (please describe below)
          required: false
  - type: input
    attributes:
      label: Errors
      description: "Please list any encountered errors here:"
      placeholder: "I am encountering issues with..."
    validations:
      required: false
  - type: input
    attributes:
      label: Questions or Issues
      description: "Tell us:
                    1. What specifically would you like help with?
                    2. Are you stuck on anything?
                    3. Do you have any questions about the codebase?
                    4. Is there anything in our documentation that's unclear?"
      placeholder: "I want help with..."
    validations:
      required: false
  - type: input
    attributes:
      label: Ideas or Suggestions
      description: "If you have any ideas for features, improvements, or just want to share your thoughts:"
      placeholder: "It would be cool if I could help add..."
    validations:
      required: false
  - type: markdown
    attributes:
      value: |
        ## What happens next?
        A maintainer will respond within 24-48 hours to:
        - Answer your questions
        - Suggest some good issues to work on
        - Help you with setup if needed
        - Point you to relevant documentation
        Don't worry if you're new to this - we're here to help! Every expert was once a beginner. 🚀
        **Join our [Discord server](https://discord.gg/YzmbnCDkat) for real-time help and community chat!** 
@@ -1,67 +0,0 @@
 name: Build Extension
 description: Install dependencies, build Chrome and Firefox extensions, and package zips.
 inputs:
  gh_release_update_check:
    description: Enable GitHub release update checker in the built extension.
    required: false
    default: "false"
  update_channel:
    description: Update channel baked into the build (stable or nightly).
    required: false
    default: stable
  build_label:
    description: Optional build label for nightly display (e.g. run number).
    required: false
    default: ""
  release_repo:
    description: GitHub repo slug for the update checker (owner/name).
    required: false
    default: BetterSEQTA/BetterSEQTA-Plus
 outputs:
  version:
    description: Version from package.json
    value: ${{ steps.version.outputs.version }}
  chrome_zip:
    description: Path to the Chrome extension zip
    value: ${{ steps.zip.outputs.chrome_zip }}
  firefox_zip:
    description: Path to the Firefox extension zip
    value: ${{ steps.zip.outputs.firefox_zip }}
 runs:
  using: composite
  steps:
    - name: Use Node.js 20.x
      uses: actions/setup-node@v4
      with:
        node-version: 20.x
    - name: Install dependencies
      shell: bash
      run: npm install --legacy-peer-deps
    - name: Read version
      id: version
      shell: bash
      run: echo "version=$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
    - name: Build extension
      shell: bash
      env:
        GH_RELEASE_UPDATE_CHECK: ${{ inputs.gh_release_update_check }}
        UPDATE_CHANNEL: ${{ inputs.update_channel }}
        GH_RELEASE_REPO: ${{ inputs.release_repo }}
        BUILD_LABEL: ${{ inputs.build_label }}
      run: npm run build
    - name: Package zips
      id: zip
      shell: bash
      run: |
        VERSION="${{ steps.version.outputs.version }}"
        (cd dist/chrome && zip -r "../betterseqtaplus-${VERSION}-chrome.zip" .)
        (cd dist/firefox && zip -r "../betterseqtaplus-${VERSION}-firefox.zip" .)
        echo "chrome_zip=dist/betterseqtaplus-${VERSION}-chrome.zip" >> "$GITHUB_OUTPUT"
        echo "firefox_zip=dist/betterseqtaplus-${VERSION}-firefox.zip" >> "$GITHUB_OUTPUT"
@@ -1 +0,0 @@
 Experimental nightly build from `main`. May break. **Do not upload to Chrome Web Store or Firefox Add-ons.** Download, replace your sideloaded copy, and reload the extension.
@@ -3,6 +3,8 @@ name: NodeJS Build
 on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]
 jobs:
  build:
@@ -1,46 +0,0 @@
 # Nightly release workflow — updates the same "nightly" release with fresh builds from main.
 # Runs only on BetterSEQTA/BetterSEQTA-Plus. Uses the default GITHUB_TOKEN.
 name: Nightly Release
 on:
  schedule:
    - cron: "0 3 * * *"
  workflow_dispatch:
 permissions:
  contents: write
 env:
  NIGHTLY_TAG: nightly
 jobs:
  nightly:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build extension
        id: build
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "true"
          update_channel: nightly
          build_label: ${{ github.run_number }}
          release_repo: ${{ github.repository }}
      - name: Ensure nightly release exists
        run: |
          if ! gh release view "${{ env.NIGHTLY_TAG }}" 2>/dev/null; then
            gh release create "${{ env.NIGHTLY_TAG }}" \
              --prerelease \
              --title "Nightly" \
              --notes-file .github/nightly-release-notes.md
          fi
      - name: Upload nightly assets
        run: |
          gh release upload "${{ env.NIGHTLY_TAG }}" \
            --clobber \
            "${{ steps.build.outputs.chrome_zip }}" \
            "${{ steps.build.outputs.firefox_zip }}"
@@ -1,29 +0,0 @@
 name: PR CI
 on:
  pull_request:
    branches: ["main"]
 jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
      - name: Install dependencies
        run: npm install --legacy-peer-deps
      - name: Lint
        run: npm run lint
        env:
          ESLINT_USE_FLAT_CONFIG: "false"
      - name: Build extension
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "false"
@@ -1,56 +0,0 @@
 # Manual release workflow only — runs on BetterSEQTA/BetterSEQTA-Plus via workflow_dispatch.
 # Bump package.json version on main, confirm when dispatching, then run.
 # Uses the default GITHUB_TOKEN (contents: write).
 name: Release
 on:
  workflow_dispatch:
    inputs:
      version_updated:
        description: I have already updated the version in package.json
        type: boolean
        required: true
        default: false
 permissions:
  contents: write
 jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Confirm version was updated
        if: inputs.version_updated != true
        run: |
          echo "Check the confirmation box: you must update package.json version before releasing."
          exit 1
      - uses: actions/checkout@v4
      - name: Read version
        id: version
        run: echo "version=$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
      - name: Build extension
        id: build
        uses: ./.github/actions/build-extension
        with:
          gh_release_update_check: "true"
          update_channel: stable
          release_repo: ${{ github.repository }}
      - name: Create release if missing
        run: |
          if ! gh release view "${{ steps.version.outputs.version }}" 2>/dev/null; then
            gh release create "${{ steps.version.outputs.version }}" \
              --title "${{ steps.version.outputs.version }}" \
              --notes "Edit this release description on GitHub."
          fi
      - name: Upload release assets
        run: |
          gh release upload "${{ steps.version.outputs.version }}" \
            --clobber \
            "${{ steps.build.outputs.chrome_zip }}" \
            "${{ steps.build.outputs.firefox_zip }}"
@@ -4,11 +4,12 @@ package-lock.json
 bun.lockb
 pnpm-lock.yaml
 yarn.lock
 bun.lock
-# PDF.js extension assets (copied by postinstall from pdfjs-dist)
+.parcel-cache
-src/public/resources/pdfjs/pdf.worker.min.mjs
+.env
-src/public/resources/pdfjs/pdf.legacy.min.mjs
+.env.submit
 dependency-graph.svg
 # Build
 extension.zip
@@ -18,9 +19,5 @@ betterseqtaplus-safari/
 .million/
 .vscode/
 **/.DS_Store
 .parcel-cache
 .env
 .env.submit
 dependency-graph.svg
 **/.DS_Store
@@ -1,2 +0,0 @@
 legacy-peer-deps=true
@@ -1,31 +1,13 @@
-# Contributing to BetterSEQTA+
+# Contributing
-Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're excited to have you join our community of contributors.
+When contributing to this repository, please first discuss the change you wish to make via issue,
-
+email, or any other method with the owners of this repository before making a change.
 ## 🚀 New Contributors Start Here!
 **Never contributed to an open source project before?** No worries! We've made it super easy to get started:
 - **📖 Read our [contributing guide](https://docs.betterseqta.org/contributing/)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
 - **🏗️ Understand the codebase** with the [architecture guide](https://docs.betterseqta.org/architecture/)
 - **🔧 Having issues?** Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
 We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
 ## Discussion Before Contributing
 For significant changes, please first discuss what you'd like to change via:
 - Opening an issue
 - Joining our Discord server
 - Emailing the maintainers
 This helps ensure your contribution aligns with the project's goals and saves you time!
 ## Community
 Join our community channels to discuss the project, get help, and connect with other contributors:
- **Discord Server**: [Join our Discord](https://discord.gg/YzmbnCDkat)
+- **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
 - **GitHub Discussions**: For longer-form conversations
 - **GitHub Issues**: For bug reports and feature requests
@@ -33,13 +15,13 @@ Join our community channels to discuss the project, get help, and connect with o
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
+- [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
+- [Plugin API Reference](./docs/advanced/plugin-api.md)
 ## Pull Request Process
 1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.
-2. Fork the repo and create your branch from `main`.
+2. Fork the repo and create your branch from `master`.
 3. When writing your pull request, make sure to use the pull request template.
 ### Pull Request Template
@@ -1,3 +1,5 @@
 #
 <a href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel">
  <img src="https://socialify.git.ci/betterseqta/betterseqta-plus/image?description=1&font=Inter&forks=1&issues=1&logo=data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%20height%3D%27656pt%27%20fill%3D%27white%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%20658%20656%27%20width%3D%27658pt%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg%20transform%3D%27matrix(.1%200%200%20-.1%200%20656)%27%253E%253Cpath%20d%3D%27m2960%206499c-918-100-1726-561-2278-1299-196-262-374-609-475-925-171-533-203-1109-91-1655%20228-1115%201030-2032%202104-2408%20356-124%20680-177%201080-176%20269%201%20403%2014%20650%2064%20790%20159%201503%20624%201980%201290%20714%20998%20799%202342%20217%203420-488%20902-1361%201515-2382%201671-113%2017-196%2022-430%2024-159%202-328-1-375-6zm566-1443c476-99%20885-385%201134-791%20190-309%20282-696%20250-1045-22-240-73-420-180-635-78-156-159-275-274-401l-77-84h445%20446v-235-236l-1162%204-1163%203-100%2023c-449%20101-812%20337-1071%20697-77%20107-193%20335-233%20459-115%20358-116%20726-1%201078%20209%20644%20766%201101%201446%201187%20128%2016%20405%204%20540-24z%27%2F%253E%253Cpath%20d%3D%27m3065%204604c-250-36-396-89-576-209-280-187-470-478-535-821-25-135-16-395%2019-525%2095-351%20331-644%20651-806%2098-49%20225-93%20331-114%2092-18%20368-18%20460%200%20481%2095%20853%20444%20982%20921%2035%20129%2044%20389%2019%20524-36%20191-121%20387-228%20531-186%20249-476%20428-783%20485-65%2012-291%2021-340%2014z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E&name=1&owner=1&pattern=Signal&stargazers=1&theme=Dark" />
 </a>
@@ -8,7 +10,7 @@
 <p align="center">
 <a target="_blank" href="https://chrome.google.com/webstore/detail/betterseqta%20/afdgaoaclhkhemfkkkonemoapeinchel"><img src="https://user-images.githubusercontent.com/95666457/149519713-159d7ef7-2c21-4034-a616-f037ff46d9a4.png" alt="ChromeDownload" width="250"></a>
-  <a target="_blank" href="https://discord.gg/YzmbnCDkat"><img src="https://github.com/BetterSEQTA/BetterSEQTA-Plus/assets/108050083/23055730-b16e-44c0-9bef-221d8545af92" width="240" style="border-radius:10%;" /></a>
+  <a target="_blank" href="https://discord.gg/YzmbnCDkat"><img src="https://github.com/SethBurkart123/EvenBetterSEQTA/assets/108050083/23055730-b16e-44c0-9bef-221d8545af92" width="240" style="border-radius:10%;" /></a>
 </p>
 <div>
@@ -16,15 +18,17 @@
  <img src="https://img.shields.io/chrome-web-store/rating/afdgaoaclhkhemfkkkonemoapeinchel" />
 </div>
-## 📚 Documentation
+## Table of contents
 All documentation has been moved to the [official docs site](https://docs.betterseqta.org):
-Includes:
+- [Features](#features)
- Getting started
+- [Creating Custom Themes](#creating-custom-themes)
- Development setup
+- [Getting Started](#getting-started)
- Architecture
+  - [Running Development](#running-development)
- Plugin system
+  - [Building for production](#building-for-production)
- Theme creation
+  - [Folder Structure](#folder-structure)
 - [Contributors](#contributors)
 - [Credits](#credits)
 - [Star History](#star-history)
 ## Features
@@ -48,32 +52,74 @@ Includes:
 ## Creating Custom Themes
-If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://docs.betterseqta.org/theme-creation/). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
+If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://betterseqta.gitbook.io/betterseqta-docs). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
 Don't worry- if you get stuck feel free to ask around in the [discord](https://discord.gg/YzmbnCDkat). We're open and happy to help out! Happy creating :)
-## 🚀 Contributing
+## Getting started
 **New contributors welcome!**
 - 📖 Start here: https://docs.betterseqta.org/install/
 - 🧠 Architecture: https://docs.betterseqta.org/architecture/
 - 🧩 Plugins: https://docs.betterseqta.org/plugins/
 - 💬 Discord: https://discord.gg/YzmbnCDkat
 &nbsp;&nbsp;&nbsp; **1. Clone the repository**
-## ⚡ Quick Start
+```
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
-```bash
+&nbsp;&nbsp;&nbsp; **2. Install dependencies**
 git clone https://github.com/YOUR_USERNAME_FORKED_WITH/BetterSEQTA-Plus
 cd BetterSEQTA-Plus
 npm install --legacy-peer-deps
 npm run dev
 ````
-Then load `dist` in `chrome://extensions` (Developer Mode → Load unpacked).
+You may install the dependencies like below:
 ```
 npm install # or your preferred package manager like pnpm or yarn
 ```
-Full setup guide:
+But it is recommended to do it like this:
-[https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment](https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment)
+
 ```
 npm install --legacy-peer-deps # Only NPM supported
 ```
 ### Running Development
 &nbsp;&nbsp;&nbsp; **3. Run the dev script (it updates as you save files)**
 ```
 npm run dev # or use your preferred package manager
 ```
 ### Building for production
 &nbsp;&nbsp;&nbsp; **4. Run the build script**
 ```
 npm run build # or use your preferred package manager
 ```
 &nbsp;&nbsp;&nbsp; **4.1. Package it up (optional)**
 ```
 npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your preferred package manager
 ```
 &nbsp;&nbsp;&nbsp; **5. Load the extension into chrome**
 - Go to `chrome://extensions`
 - Enable developer mode
 - Click `Load unpacked`
 - Select the `dist` folder
 Just remember, in order to update changes to the extension if you are running in developer mode, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
 ## Folder Structure
 The folder structure is as follows:
 - The `src` folder contains source files that are compiled to the build directory.
 - The `src/plugins` folder contains vital loaders required for BetterSEQTA+ functionality.
 - The `src/interface` folder contains source React & Svelte files that are required for the Settings page.
 - The `dist` folder is where the compiled code ends up, this is the folder what you need to load into chrome as an unpacked extension for development.
 ## Contributors
@@ -81,14 +127,11 @@ Full setup guide:
  <img src="https://contrib.rocks/image?repo=betterseqta/betterseqta-plus" />
 </a>
-Want to contribute? [Click Here!](https://docs.betterseqta.org/contributing/)
+Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
 ## Credits
-This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers.
+This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers
 Originally developed by [Nulkem](https://github.com/Nulkem/betterseqta)
 Ported to Manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68)
 Maintained by [SethBurkart123](https://github.com/SethBurkart123), [Crazypersonalph](https://github.com/Crazypersonalph) & the rest of the BetterSEQTA team!
 ## Star History
@@ -1,237 +0,0 @@
 # BetterSEQTA+ Architecture
 **Published version:** [docs.betterseqta.org/architecture/](https://docs.betterseqta.org/architecture/)
 Hey there! 👋 New to the codebase and feeling a bit lost? Don't worry - this guide will help you understand how everything fits together!
 ## Table of Contents
 - [Overview](#overview)
 - [High-Level Architecture](#high-level-architecture)
 - [Core Components](#core-components)
 - [Plugin System](#plugin-system)
 - [File Structure Explained](#file-structure-explained)
 - [Data Flow](#data-flow)
 - [Browser Extension Basics](#browser-extension-basics)
 ## Overview
 BetterSEQTA+ is a browser extension that enhances SEQTA Learn by:
 - Adding new features through a plugin system
 - Providing customizable themes and UI improvements
 - Offering better navigation and user experience
 Think of it like this: **SEQTA Learn + BetterSEQTA+ = Enhanced SEQTA Experience**
 ## High-Level Architecture
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                    BROWSER EXTENSION                        │
 ├─────────────────────────────────────────────────────────────┤
 │                                                             │
 │  ┌─────────────────┐    ┌──────────────────┐                │
 │  │  Background     │    │  Content Script  │                │
 │  │  Script         │    │  (SEQTA.ts)      │                │
 │  │                 │    │                  │                │
 │  │  - Settings     │◄───┤  - Page Detection│                │
 │  │  - Storage      │    │  - Plugin Loading│                │
 │  │  - Updates      │    │  - UI Injection  │                │
 │  └─────────────────┘    └──────────────────┘                │
 │                                   │                         │
 │                         ┌─────────▼─────────┐               │
 │                         │   Plugin System   │               │
 │                         │                   │               │
 │                         │  ┌─────────────┐  │               │
 │                         │  │ Built-in    │  │               │
 │                         │  │ Plugins     │  │               │
 │                         │  │             │  │               │
 │                         │  │ - Themes    │  │               │
 │                         │  │ - Search    │  │               │
 │                         │  │ - Timetable │  │               │
 │                         │  │ - etc...    │  │               │
 │                         │  └─────────────┘  │               │
 │                         └───────────────────┘               │
 │                                   │                         │
 │                         ┌─────────▼─────────┐               │
 │                         │   Settings UI     │               │
 │                         │   (Svelte App)    │               │
 │                         │                   │               │
 │                         │  - Plugin Config  │               │
 │                         │  - Theme Creator  │               │
 │                         │  - General Settings│              │
 │                         └───────────────────┘               │
 └─────────────────────────────────────────────────────────────┘
                                   │
                         ┌─────────▼─────────┐
                         │   SEQTA Learn     │
                         │   Website         │
                         └───────────────────┘
 ```
 ## Core Components
 ### 1. Entry Point (`src/SEQTA.ts`)
 This is where it all begins! When you visit a SEQTA page:
 1. Detects if you're on a SEQTA Learn page
 2. Injects our CSS styles
 3. Changes the favicon to BetterSEQTA+ icon
 4. Loads settings from storage
 5. Initializes the plugin system
 ### 2. Plugin System (`src/plugins/`)
 The heart of BetterSEQTA+! This is what makes it extensible:
 - **Plugin Manager**: Registers and manages all plugins
 - **Built-in Plugins**: Pre-made plugins (themes, search, etc.)
 - **Plugin API**: Provides plugins with tools to interact with SEQTA
 ### 3. Settings UI (`src/interface/`)
 A Svelte application that lets users:
 - Enable/disable plugins
 - Configure plugin settings
 - Create custom themes
 - Browse the theme store
 ### 4. Background Script (`src/background.ts`)
 Runs in the background and handles:
 - Extension-wide settings storage
 - Communication between different parts
 - Update notifications
 ## Plugin System
 Our plugin system is what makes BetterSEQTA+ so powerful. Here's how it works:
 ### Plugin Lifecycle
 ```
 Plugin Registration → Settings Loading → Plugin Initialization → Running → Cleanup
 ```
 ### Built-in Plugins Overview
 | Plugin | What it does | Files |
 |--------|-------------|-------|
 | **Themes** | Custom CSS themes and backgrounds | `src/plugins/built-in/themes/` |
 | **Global Search** | Search across all SEQTA content | `src/plugins/built-in/globalSearch/` |
 | **Timetable** | Enhanced timetable features | `src/plugins/built-in/timetable/` |
 | **Profile Picture** | Custom profile pictures | `src/plugins/built-in/profilePicture/` |
 | **Animated Background** | Moving background animations | `src/plugins/built-in/animatedBackground/` |
 ### Creating a Plugin
 Every plugin follows this structure:
 ```typescript
 const myPlugin: Plugin = {
  id: "unique-plugin-id",
  name: "Human Readable Name",
  description: "What does this plugin do?",
  version: "1.0.0",
  settings: { /* user configurable options */ },
  run: async (api) => {
    // Your plugin code goes here!
  }
 };
 ```
 ## File Structure Explained
 ```
 src/
 ├── SEQTA.ts              # 🚀 Main entry point - start reading here!
 ├── background.ts         # 🔧 Background script for extension
 ├── manifests/           # 📦 Browser extension manifests
 ├── plugins/             # 🧩 Plugin system (the magic happens here!)
 │   ├── core/           # 🏗️  Plugin infrastructure 
 │   ├── built-in/       # 🎁 Pre-made plugins
 │   └── index.ts        # 📋 Plugin registration
 ├── interface/          # 🎨 Settings UI (Svelte app)
 │   ├── pages/          # 📄 Settings pages
 │   ├── components/     # 🧱 Reusable UI components
 │   └── main.ts         # 🏠 Settings app entry point
 ├── seqta/              # 🔗 SEQTA-specific utilities
 │   ├── main.ts         # 🎯 Core SEQTA modifications
 │   ├── ui/             # 🎨 UI manipulation helpers
 │   └── utils/          # 🛠️  Helper functions
 └── css/                # 💄 Styles and themes
 ```
 ### Where to Start Reading?
 1. **New to the project?** Start with `src/SEQTA.ts`
 2. **Want to understand plugins?** Look at `src/plugins/core/types.ts`
 3. **Want to see a simple plugin?** Check out `src/plugins/built-in/profilePicture/`
 4. **Interested in the UI?** Explore `src/interface/main.ts`
 ## Data Flow
 Here's how data flows through the system:
 ```
 User visits SEQTA → SEQTA.ts detects page → Loads settings from storage
                                                        │
                                                        ▼
 Plugin Manager initializes → Each plugin gets API access → Plugins modify SEQTA
                                                        │
                                                        ▼
 User opens settings → Svelte UI loads → Settings changed → Storage updated
                                                        │
                                                        ▼
 Storage change detected → Plugins notified → UI updates automatically
 ```
 ## Browser Extension Basics
 Never worked on a browser extension before? Here's what you need to know:
 ### Content Scripts vs Background Scripts
 - **Content Script** (`SEQTA.ts`): Runs on SEQTA pages, can access and modify the page
 - **Background Script** (`background.ts`): Runs in the background, handles storage and messaging
 ### Manifest Files
 Each browser needs a slightly different manifest file:
 - `manifests/chrome.ts` - Chrome, Edge, Brave
 - `manifests/firefox.ts` - Firefox
 - `manifests/safari.ts` - Safari (experimental)
 ### Communication
 Different parts of the extension communicate using:
 - `browser.runtime.sendMessage()` - Send messages
 - `browser.storage` - Shared storage, but we have created a custom storage system that is easier to use:
 ```ts
 settingsState.[the setting name] = [whatever you want to set it to]
 console.log(settingsState.[the setting name])
 ```
 - Custom events for plugin communication
 ## Development Tips
 ### Debugging
 1. **Chrome DevTools**: Right-click → Inspect → Console tab
 2. **Extension Console**: `chrome://extensions` → BetterSEQTA+ → "Inspect views: background page"
 3. **Look for logs**: We log everything with `[BetterSEQTA+]` prefix
 ### Making Changes
 1. Edit code → Save → Browser auto-reloads extension → Refresh SEQTA page
 2. For UI changes: The dev server hot-reloads automatically
 3. For plugin changes: May need to disable/enable the plugin in settings
 ### Common Gotchas
 - Settings take a moment to load (use `api.settings.loaded` promise)
 - Some SEQTA elements load dynamically (use `api.seqta.onMount()`)
 - Plugin cleanup is important (always return a cleanup function)
 ## Next Steps
 Ready to contribute? Here's what to do next:
 1. **Read the code**: Start with `src/SEQTA.ts` and follow the flow
 2. **Try creating a simple plugin**: Follow the [plugin documentation](https://docs.betterseqta.org/plugins/)
 3. **Look at existing issues**: Check our [GitHub issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) for "good first issue" labels
 4. **Join our Discord**: Get help from the community!
 ## Questions?
 Still confused about something? That's totally normal! Here are your options:
 - 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
 - 🐛 Open an issue on GitHub
 - 📧 Email us at betterseqta.plus@gmail.com
 Remember: **Every expert was once a beginner!** We're here to help you learn and contribute. 🚀 
@@ -1,141 +0,0 @@
 # BetterSEQTA Cloud — settings sync (server specification)
 This document describes the HTTP API the BetterSEQTA+ extension expects for **cloud backup of extension settings**. The client is implemented in the extension repo; the accounts service (`accounts.betterseqta.org`) must implement these endpoints.
 ## Purpose
 - Store **one JSON document per authenticated BetterSEQTA Cloud user** representing a snapshot of the extension’s `chrome.storage.local` data (theme, layout, plugin settings, `plugin.*` keys, etc.).
 - The extension **does not upload OAuth tokens** (`bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`). Those remain only on the client.
 - **Download** replaces local storage with the stored snapshot, then the client reapplies the current device’s session tokens so the user stays signed in.
 ## Base URL
 All routes below are relative to:
 `https://accounts.betterseqta.org`
 ## Authentication
 Every request must include:
 ```http
 Authorization: Bearer <access_token>
 ```
 Use the same **access tokens** issued by the existing BetterSEQTA+ OAuth flows (`/api/bsplus/login`, `/api/bsplus/refresh`). Resolve the user from the token; the document is scoped to that user.
 ## Endpoints
 ### `PUT /api/bsplus/settings/sync`
 Upserts the caller’s settings backup.
 **Request body (JSON):**
 ```json
 {
  "schemaVersion": 1,
  "themeId": "uuid-string-or-empty",
  "data": {
    "...": "flat key-value map mirroring extension storage (see Payload shape)",
    "selectedTheme": "uuid-or-empty-string"
  }
 }
 ```
 - **`schemaVersion`**: integer. The extension currently sends `1`. The server may reject unknown major versions or store it for future migrations.
 - **`themeId`**: optional but recommended duplicate of **`data.selectedTheme`**. Should be the UUID of the **installed** BetterSEQTA store theme (`selectedTheme`). This may be a normal theme id **or** a **flavour (slave) variant** id from themes with **`flavours[]`** — the extension uses it after restore to prefetch `theme.json` when missing locally (same **`GET …/themes/{id}/download`** as the store UI). Persist and return **`themeId`** in sync with **`data.selectedTheme`**.
 - **`data`**: object whose keys are storage keys (strings) and values are JSON-serializable values (same types as stored in `chrome.storage.local`).
 **Success response:** HTTP `200` (or `201` if you prefer create semantics). Example:
 ```json
 {
  "updated_at": "2026-04-07T12:00:00.000Z"
 }
 ```
 `updated_at` should be an ISO 8601 timestamp of the save time. The extension displays success without requiring extra fields.
 **Error responses:** Standard JSON error body if applicable, e.g. `{ "error": "message" }`, with appropriate HTTP status (`401`, `413`, `422`, etc.).
 ---
 ### `GET /api/bsplus/settings/sync`
 Returns the caller’s latest settings backup.
 **Success response:** HTTP `200` with body:
 ```json
 {
  "schemaVersion": 1,
  "themeId": "uuid-string-or-empty",
  "data": { },
  "updated_at": "2026-04-07T12:00:00.000Z"
 }
 ```
 - **`data`**: required for restore; must be the same shape as accepted in `PUT` (flat map of storage keys).
 - **`themeId`**: optional; if present must match **`data.selectedTheme`** (see `PUT`).
 - **`schemaVersion`**: optional but recommended; should match what was stored.
 - **`updated_at`**: optional; included for UX if the client shows “last backup” time.
 The extension resolves **`themeId`** (if non-empty), else **`data.selectedTheme`,** to [`resolveThemeIdForPostSyncDownload`](../src/seqta/utils/cloudSettingsSync.ts) after downloading the envelope — used only to reinstall theme assets from **`betterseqta.org`** when IndexedDB lacks that id (see **BetterSEQTA Cloud** flavour note in **[THEME_STORE_FLAVOURS_API](./THEME_STORE_FLAVOURS_API.md)** section “Cloud settings sync compatibility”).
 **No backup yet:** HTTP **`404`**. The extension treats this as “nothing in the cloud” and shows an error to the user.
 **Error responses:** `401` if the token is invalid, etc.
 ---
 ## Suggested database shape
 Example relational layout:
 | Column        | Type        | Notes |
 |---------------|-------------|--------|
 | `user_id`     | FK → users  | Unique per backup row (one row per user). |
 | `payload`     | JSON / JSONB| Store `{ "schemaVersion", "data" }` or only `data` + separate `schema_version` column. |
 | `updated_at`  | timestamptz | Set on each successful `PUT`. |
 Unique constraint on `user_id`.
 ## Semantics
 - **Last write wins:** each `PUT` replaces the stored backup for that user.
 - **Optional later:** `If-Unmodified-Since` or a `revision` field for conflict detection (not required for v1).
 ## Security and privacy
 - **Encryption at rest** for `payload` is recommended.
 - Payload may contain **school-related UI preferences** and plugin data; treat as **user data** under your privacy policy.
 - **Do not require or store** refresh/access tokens in the payload; the extension already strips them on upload.
 ### Never included in the sync payload (`chrome.storage.local` only)
 The backup is a flat JSON map of **`chrome.storage.local`** keys. It does **not** include:
 - **IndexedDB** — e.g. the Global Search index (`betterseqta-index` and related DBs) lives outside extension storage and is never serialized here.
 - **OAuth / session keys** — `bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`, plus legacy `cloudAccessToken` / `cloudUsername`.
 - **Assessment Averages caches** — `plugin.assessments-average.storage.assessments`, `plugin.assessments-average.storage.weightings` (school assessment data).
 - **Keys under** `plugin.global-search.storage.*` — reserved so any future plugin storage cache there is not synced.
 - **Grade Analytics** — keys under `bsplus.analytics.*` (synced assessment cache and per-school chart preferences).
 - **`bsplus_cloud_settings_known_remote_updated_at`** — client-only watermark for auto-sync (not part of the cloud backup blob).
 On restore, those keys are **not** taken from the server; the device keeps its current local values.
 ## Related endpoint: `GET /api/user/cloud-summary`
 The extension may call **`GET /api/user/cloud-summary`** (same host, `Authorization: Bearer`) for a **small** JSON summary (e.g. whether DesQTA / BetterSEQTA+ cloud settings exist and **`bsplus.updated_at`** / **`schemaVersion`**). It does **not** return the large settings `data` blob.
 - **Auto-sync flow:** compare `bsplus.updated_at` to a **client-only** watermark stored in extension storage as **`bsplus_cloud_settings_known_remote_updated_at`** (never uploaded, never applied from the server payload; preserved on restore).
 - If the server timestamp is newer (and `schemaVersion` is not ahead of the client), the client then calls **`GET /api/bsplus/settings/sync`** and applies the full envelope as usual.
 This uses standard **WebExtension** APIs (`browser.alarms`, `runtime` messages, `storage`) and works on **Chromium and Firefox** builds (see `webextension-polyfill`).
 ## Client reference (extension)
 - Upload / dev export: `buildUploadPayload` / `getSnapshotForUpload` in `src/seqta/utils/cloudSettingsSync.ts` (strips OAuth-related keys, sensitive device keys, **`bsplus_pending_theme_ensure_after_cloud`**, and **`bsplus_cloud_settings_known_remote_updated_at`** — includes **`themeId`** aligned with **`selectedTheme`**).
 - Download: resolve id via **`resolveThemeIdForPostSyncDownload`** → **`applyDownloadedEnvelope`** after `GET` → prefetch theme blobs in page context if needed (**`prepareThemeAfterCloudSync`** in **`ThemeManager`**) → reload SEQTA tabs; local auth keys, sensitive device keys, client-only watermark, and **`bsplus_pending_theme_ensure_after_cloud`** semantics preserved as documented above.
 - Auto sync (summary, debounced upload, alarms): `src/background/cloudSettingsAutoSync.ts`; content script triggers a poll on each verified SEQTA Learn/Engage page load (top frame) via `cloudSettingsPoll`.
@@ -1,287 +0,0 @@
 # Getting Started as a Contributor
 **Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
 Welcome to BetterSEQTA+! 🎉 This guide will walk you through making your first contribution, even if you're completely new to the project.
 ## Table of Contents
 - [Before You Start](#before-you-start)
 - [Your First 30 Minutes](#your-first-30-minutes)
 - [Making Your First Contribution](#making-your-first-contribution)
 - [Types of Contributions](#types-of-contributions)
 - [Finding Something to Work On](#finding-something-to-work-on)
 - [Development Workflow](#development-workflow)
 - [Getting Help](#getting-help)
 ## Before You Start
 ### What You'll Need
 - **Node.js** (v16 or higher) - [Download here](https://nodejs.org/)
 - **Git** - [Download here](https://git-scm.com/)
 - **A code editor** - We recommend [VS Code](https://code.visualstudio.com/)
 - **A Chromium browser** (Chrome, Edge, Brave) for testing (recommended, however you can use firefox although it requires being built every time you make a change)
 ### Helpful Background (but not required!)
 - Basic JavaScript/TypeScript knowledge
 - Some familiarity with HTML/CSS
 - Understanding of browser extensions (we'll teach you!)
 **Don't worry if you're missing some of these!** We're happy to help you learn. 🤗
 ## Your First 30 Minutes
 Let's get you up and running quickly:
 ### 1. Get the Code (3 minutes)
 ```bash
 # Fork the repository on GitHub first, then:
 git clone https://github.com/YOUR_USERNAME/BetterSEQTA-plus.git
 cd BetterSEQTA-plus
 ```
 ### 2. Install Dependencies (3 minutes)
 ```bash
 npm install --legacy-peer-deps
 ```
 ### 3. Start Development Server (2 minutes)
 ```bash
 npm run dev
 ```
 ### 4. Load Extension in Browser (4 minutes)
 1. Open Chrome and go to `chrome://extensions`
 2. Enable "Developer mode" (toggle in top right)
 3. Click "Load unpacked"
 4. Select the `dist` folder in your project
 5. Visit a SEQTA Learn page to see BetterSEQTA+ in action!
 ### 5. Make a Tiny Change (5 minutes)
 Let's prove everything works:
 1. Open `src/SEQTA.ts`
 2. Find the line that says `"[BetterSEQTA+] Successfully initialised"`
 3. Change it to `"[BetterSEQTA+] Successfully initialised - Hello [YOUR_NAME]!"`
 4. Save the file
 5. Go to `chrome://extensions`, click the refresh icon on BetterSEQTA+
 6. Refresh a SEQTA page and check the browser console (F12) - you should see your message!
 ### 6. Reset Your Change (3 minutes)
 ```bash
 git checkout -- src/SEQTA.ts
 ```
 **Congratulations! 🎉 You've successfully set up BetterSEQTA+ for development!**
 ## Making Your First Contribution
 ### Easy First Contributions
 Here are some great starter contributions:
 1. **Fix a typo in documentation** - Super easy and always appreciated!
 2. **Improve error messages** - Make them more helpful
 3. **Add comments to code** - Help other contributors understand
 4. **Create a simple plugin** - Follow our plugin guide
 5. **Fix a bug you found** - If you found a bug, fix it!
 ### Step-by-Step: Your First Pull Request
 #### Step 1: Pick an Issue
 - Go to our [Issues page](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
 - Look for labels like:
  - `good first issue` - Perfect for beginners
  - `help wanted` - We'd love help with these
  - `documentation` - Improve our docs
  - `bug` - Fix something broken
 #### Step 2: Claim the Issue
 Comment on the issue saying "I'd like to work on this!" We'll assign it to you.
 #### Step 3: Create a Branch
 ```bash
 git checkout -b fix-issue-123  # Replace 123 with the issue number
 ```
 #### Step 4: Make Your Changes
 - Follow the patterns you see in existing code
 - Test your changes thoroughly
 - Keep changes focused and small
 #### Step 5: Test Everything
 ```bash
 # Test the extension still loads
 npm run dev
 # Test in browser
 # 1. Reload extension at chrome://extensions
 # 2. Visit SEQTA page
 # 3. Verify everything still works
 ```
 #### Step 6: Commit Your Changes
 ```bash
 git add .
 git commit -m "Fix issue #123: Brief description of what you fixed"
 ```
 #### Step 7: Push and Create Pull Request
 ```bash
 git push origin fix-issue-123
 ```
 Then go to GitHub and create a pull request with:
 - **Clear title**: "Fix issue #123: Brief description"
 - **Description**: Explain what you changed and why
 - **Testing**: Describe how you tested it
 ## Types of Contributions
 ### 🐛 Bug Fixes
 - Fix broken features
 - Improve error handling
 - Resolve compatibility issues
 **Example**: "The theme selector doesn't work on Firefox"
 ### ✨ New Features
 - Add new plugins
 - Enhance existing functionality
 - Improve user experience
 **Example**: "Add keyboard shortcuts for common actions"
 ### 📚 Documentation
 - Fix typos and unclear explanations
 - Add examples and tutorials
 - Improve code comments
 **Example**: "Add more examples to the plugin guide"
 ### 🎨 Design & UI
 - Improve the settings interface
 - Make things more user-friendly
 - Add animations and polish
 **Example**: "Make the theme creator more intuitive"
 ### 🔧 Technical Improvements
 - Refactor code for clarity
 - Add tests
 - Improve performance
 **Example**: "Simplify the plugin loading logic"
 ## Finding Something to Work On
 ### Browse Issues by Label
 - [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) - Perfect for beginners
 - [`help wanted`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/help%20wanted) - We need help with these
 - [`documentation`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/documentation) - Improve our docs
 - [`bug`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/bug) - Fix something broken
 - [`enhancement`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/enhancement) - Add new features
 ### Create Your Own Issue
 Found a bug or have an idea? Create an issue first to discuss it!
 ### Plugin Ideas
 Want to create a plugin? Here are some ideas:
 - **Study Timer**: Track study time across SEQTA pages
 - **Grade Tracker**: Better visualization of grades over time
 - **Quick Notes**: Add notes to any SEQTA page
 - **Homework Reminder**: Smart notifications for upcoming due dates
 - **Custom Shortcuts**: User-defined keyboard shortcuts
 ## Development Workflow
 ### Daily Development
 ```bash
 # Start working
 git pull origin main
 npm run dev
 # Make changes, test, commit
 git add .
 git commit -m "Descriptive commit message"
 # Push when ready
 git push origin your-branch-name
 ```
 ### Before Submitting PR
 1. **Test thoroughly** - Make sure nothing breaks
 2. **Check console** - No new errors
 3. **Test in different browsers** - Chrome and Firefox
 4. **Update documentation** - If you changed how something works
 ### Code Style
 - Use TypeScript where possible
 - Follow existing naming conventions
 - Add comments for complex logic
 - Keep functions small and focused
 ## Getting Help
 ### Stuck? Here's How to Get Unstuck
 1. **Check the docs** - The [architecture guide](https://docs.betterseqta.org/architecture/) explains everything
 2. **Search existing issues** - Someone might have had the same problem
 3. **Ask in Discord** - Our community is super helpful
 4. **Create an issue** - If you found a bug or need help
 ### Discord Community
 Join our [Discord server](https://discord.gg/YzmbnCDkat) for:
 - Real-time help and discussion
 - Collaboration on features
 - Sharing ideas and feedback
 - Getting to know the community
 ### Code Review Process
 - All contributions need code review
 - We'll provide helpful feedback
 - Don't worry about making mistakes - we're here to help!
 - Reviews usually happen within 24-48 hours
 ## Common Questions
 **Q: I'm new to browser extensions. Is this too advanced for me?**
 A: Not at all! We have lots of beginner-friendly issues, and our plugin system makes it easy to add features without understanding all the browser extension complexities.
 **Q: How long does it take to get my first PR merged?**
 A: For simple fixes, usually 1-3 days. For larger features, it might take a week or two as we discuss the best approach.
 **Q: I made a mistake in my PR. What do I do?**
 A: No worries! Just push more commits to the same branch and they'll be added to your PR automatically.
 **Q: Can I work on multiple issues at once?**
 A: It's better to focus on one issue at a time, especially when starting out. This makes code review easier and reduces conflicts.
 **Q: What if I start working on something and get stuck?**
 A: Ask for help! Create a draft PR with what you have so far, and we'll help you figure out the next steps.
 ## Recognition
 All contributors get:
 - Recognition in our README
 - Contributor badge in Discord
 - Our eternal gratitude! 🙏
 Significant contributors may also get:
 - Special Discord roles
 - Input on project direction
 - Maintainer status
 ## Next Steps
 Ready to contribute? Here's what to do:
 1. ✅ **Set up your development environment** (follow the 30-minute guide above)
 2. 🔍 **Find an issue to work on** (check the "good first issue" label)
 3. 💬 **Join our Discord** and introduce yourself
 4. 🚀 **Make your first contribution** and submit a PR
 Remember: **Every expert was once a beginner!** We're excited to help you learn and grow as a contributor. Welcome to the team! 🎉
 ---
 *Questions? Suggestions for improving this guide? Open an issue or message us on Discord!* 
@@ -1,37 +1,27 @@
 # BetterSEQTA+ Documentation
-**Canonical documentation lives at [docs.betterseqta.org](https://docs.betterseqta.org/).** The pages below are the same topics; use the site for search, navigation, and the latest updates.
+🚧 DOCS UNDER CONSTRUCTION! 🚧
 Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
 ## Table of Contents
 ### Getting Started
- [Documentation home](https://docs.betterseqta.org/)
+- [Project Overview](./README.md) - This file
- [Installation](https://docs.betterseqta.org/install/)
+- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
- [Contributing](https://docs.betterseqta.org/contributing/)
+- [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
 - [GitHub releases & CI](RELEASES.md) — workflows, nightly builds, update detector
 - [Architecture](https://docs.betterseqta.org/architecture/)
 - [Contribution guidelines (repository)](../CONTRIBUTING.md)
 - [Troubleshooting](https://docs.betterseqta.org/troubleshooting/)
-### Features & customization
+### Plugin System
- [Features](https://docs.betterseqta.org/features/)
+- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
- [Themes & customization](https://docs.betterseqta.org/customization/)
+- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
 - [Theme creation](https://docs.betterseqta.org/theme-creation/)
 ### Plugin system
 - [Plugins overview](https://docs.betterseqta.org/plugins/)
 - [Plugin development](https://docs.betterseqta.org/plugin-development/)
 - [Plugin API](https://docs.betterseqta.org/plugin-api/)
 - [Example plugin](https://docs.betterseqta.org/example-plugin/)
 ## Core Concepts
 BetterSEQTA+ is built around several core concepts:
-1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. See the [plugins documentation](https://docs.betterseqta.org/plugins/).
+1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. Check out our [plugin guide](./plugins/README.md) to learn how to create your own!
 2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
@@ -43,13 +33,19 @@ BetterSEQTA+ is built around several core concepts:
 If you need help with BetterSEQTA+, you can:
- [Open an Issue](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) - Report bugs or request features
+- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
 - [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
 - [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
 ## Contributing to the Documentation
-We welcome contributions to the documentation. The published site is built from the documentation repository; see [Contributing](https://docs.betterseqta.org/contributing/) for how to help.
+We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
 To contribute to the documentation:
 1. Fork the repository
 2. Make your changes to the documentation files
 3. Submit a pull request with a clear description of your changes
 ## License
@@ -1,266 +0,0 @@
 # GitHub releases, CI, and the update detector
 BetterSEQTA+ is distributed on the Chrome Web Store and Firefox Add-ons, but some users sideload builds from GitHub. This document explains how automated builds, releases, and the in-extension update badge work.
 All published releases target the upstream repository: **[BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus)**.
 ---
 ## Overview
 ```mermaid
 flowchart TB
  subgraph ci [Continuous integration]
    PrCi[pr-ci.yml — every PR]
    Mvp[mvp.yml — push to main]
  end
  subgraph releases [GitHub releases]
    Manual[release.yml — manual stable]
    Nightly[nightly.yml — daily cron]
  end
  subgraph output [Outputs]
    Zips["betterseqtaplus-VERSION-chrome.zip\nbetterseqtaplus-VERSION-firefox.zip"]
    GhStable["Release tag: 3.7.0"]
    GhNightly["Release tag: nightly"]
    Badge[Update badge in settings]
  end
  PrCi -->|build only| NoRelease[No release]
  Mvp -->|artifact| DistZip[dist.zip artifact]
  Manual --> Zips
  Manual --> GhStable
  Manual --> Badge
  Nightly --> Zips
  Nightly --> GhNightly
  Nightly --> Badge
 ```
 | Workflow | Trigger | Creates a release? | Update detector in build? |
 |----------|---------|------------------|---------------------------|
 | `pr-ci.yml` | Every pull request to `main` | No | No |
 | `mvp.yml` | Every push to `main` | No | No |
 | `release.yml` | Manual (`workflow_dispatch`) | Yes — stable version tag | Yes — stable channel |
 | `nightly.yml` | Daily at 03:00 UTC + manual | Yes — reuses `nightly` tag | Yes — nightly channel |
 ---
 ## Shared build action
 All release and CI builds that need packaged extensions use the composite action at [`.github/actions/build-extension/action.yml`](../.github/actions/build-extension/action.yml).
 It:
 1. Installs dependencies (`npm install --legacy-peer-deps`)
 2. Runs `npm run build` (Chrome then Firefox via Vite)
 3. Zips each unpacked folder into sideload-ready archives:
   - `dist/betterseqtaplus-{version}-chrome.zip`
   - `dist/betterseqtaplus-{version}-firefox.zip`
 The `{version}` comes from `package.json`.
 ### Build-time flags (release builds only)
 Release and nightly workflows pass environment variables into Vite, which bakes them into the extension at compile time via `define` in [`vite.config.ts`](../vite.config.ts):
 | Variable | Stable release | Nightly | PR / local dev |
 |----------|----------------|---------|----------------|
 | `GH_RELEASE_UPDATE_CHECK` | `true` | `true` | `false` / unset |
 | `UPDATE_CHANNEL` | `stable` | `nightly` | `stable` (unused) |
 | `GH_RELEASE_REPO` | `BetterSEQTA/BetterSEQTA-Plus` | same | same |
 | `BUILD_LABEL` | empty | GitHub run number | empty |
 When `GH_RELEASE_UPDATE_CHECK` is not `true`, the update-checker code is tree-shaken out of the bundle. PR CI builds and local `npm run build` do **not** include the update badge.
 To test a release-style build locally:
 ```bash
 # PowerShell
 $env:GH_RELEASE_UPDATE_CHECK="true"
 $env:UPDATE_CHANNEL="stable"
 npm run build
 # bash
 GH_RELEASE_UPDATE_CHECK=true UPDATE_CHANNEL=stable npm run build
 ```
 ---
 ## Stable release (`release.yml`)
 **Purpose:** A safe, manual way to publish versioned builds that users can download from GitHub.
 **Trigger:** Manual only — Actions → **Release** → **Run workflow**. There is no schedule or automatic trigger.
 When dispatching, check **“I have already updated the version in package.json”**. The workflow will not run without that confirmation.
 ### Before you run it
 1. Merge your changes to `main`.
 2. Bump `version` in [`package.json`](../package.json) (e.g. `3.7.0` → `3.8.0`).
 3. Commit and push that bump.
 ### What the workflow does
 1. Aborts if the version confirmation was not checked.
 2. Reads the version from `package.json`.
 3. Builds Chrome and Firefox with the update detector enabled (stable channel).
 4. If no release exists for that tag: creates one (e.g. `3.8.0`) with a placeholder description.
 5. If a release already exists for that tag: **only replaces the zip assets** (`--clobber`). Title and body are left unchanged.
 6. Uploads `betterseqtaplus-{version}-chrome.zip` and `-firefox.zip`.
 On first publish, edit the **title** and **release notes** on GitHub afterward. Re-running for the same version refreshes the files only.
 ### Downloading and installing
 1. Open [github.com/BetterSEQTA/BetterSEQTA-Plus/releases](https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases).
 2. Pick the version you want.
 3. Download `betterseqtaplus-{version}-chrome.zip` or `-firefox.zip`.
 4. Unzip and load the unpacked folder as a temporary extension (Chrome: Extensions → Load unpacked; Firefox: `about:debugging` → Load Temporary Add-on).
 **These GitHub builds are for sideloading only. Do not upload them to the Chrome Web Store or Firefox Add-ons.**
 ---
 ## Nightly release (`nightly.yml`)
 **Purpose:** Continuous experimental builds from `main` so testers always have a single place to get the latest code.
 **Trigger:**
 - Automatically every day at **03:00 UTC**
 - Manually via Actions → **Nightly Release** → **Run workflow**
 ### What the workflow does
 1. Builds from the current `main` branch with the update detector enabled (nightly channel).
 2. Uses a fixed release tag: **`nightly`** (marked as prerelease).
 3. On first run: creates the `nightly` release with the text in [`.github/nightly-release-notes.md`](../.github/nightly-release-notes.md).
 4. On every subsequent run: **replaces** the zip assets on the same release (`--clobber`). The release title and body are not rewritten.
 The nightly release body warns that builds are experimental and must not be uploaded to extension stores.
 ---
 ## PR CI (`pr-ci.yml`)
 **Purpose:** Verify that every pull request builds cleanly in a fresh environment.
 **Trigger:** Every pull request targeting `main`.
 **Steps:**
 1. `npm install --legacy-peer-deps`
 2. `npm run lint` (ESLint on `src/**/*.{js,ts}`)
 3. Build via the shared action with **no** update detector
 No release is created and no artifacts are published for end users.
 ---
 ## Push CI (`mvp.yml`)
 **Purpose:** Build verification when code lands on `main`.
 **Trigger:** Push to `main` only (not pull requests — those use `pr-ci.yml`).
 Uploads a `dist.zip` artifact containing the full `dist/` folder for debugging. No release, no update detector.
 ---
 ## Authentication
 Release workflows run **only on [BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus)**. They use the default `GITHUB_TOKEN` with `contents: write` — no extra secrets or PATs required.
 ---
 ## Update detector (in-extension)
 GitHub release builds include a small feature that tells sideload users when a newer build is available, so they do not have to check GitHub manually.
 ### Where it appears
 In the **settings popup** header (top-right): an amber **“Update available — X.X.X”** pill when an update exists, plus a muted line:
 > GitHub release build — do not upload to extension stores.
 Clicking the badge opens the relevant GitHub releases page.
 ### How it checks for updates
 Implementation: [`src/utils/githubReleaseUpdate.ts`](../src/utils/githubReleaseUpdate.ts)
 **Stable channel** (from `release.yml` builds):
 1. Fetches releases from the GitHub API for `BetterSEQTA/BetterSEQTA-Plus`.
 2. Ignores the `nightly` tag and any non-semver tags.
 3. Finds the highest semver tag.
 4. Compares it to `browser.runtime.getManifest().version`.
 5. Shows the badge if the remote version is newer.
 **Nightly channel** (from `nightly.yml` builds):
 1. Fetches the `nightly` release.
 2. Compares its `published_at` timestamp to `lastSeenNightlyPublishedAt` in extension storage.
 3. On first install, records the current publish time without showing a badge.
 4. Shows **“Update available — nightly #123”** (run number) when a newer nightly has been published.
 Checks are throttled to once every **6 hours** per browser profile (`localStorage` key `bsplus_lastGhReleaseCheck`). Recent results are cached in memory for the session.
 ### Dev override (testing)
 To test the badge without publishing a real release:
 1. Open settings and unlock **dev mode** (click the logo, type `dev`).
 2. In the developer section, set **GitHub latest version override** to a version higher than your installed one (e.g. `9.9.9`).
 3. Reopen settings — the badge should appear.
 This only applies when dev mode is on. Clear the field to return to normal API checks.
 ---
 ## File reference
 | Path | Role |
 |------|------|
 | `.github/actions/build-extension/action.yml` | Shared install, build, zip |
 | `.github/workflows/release.yml` | Manual stable releases |
 | `.github/workflows/nightly.yml` | Nightly releases |
 | `.github/workflows/pr-ci.yml` | PR lint + build |
 | `.github/workflows/mvp.yml` | Push-to-main build artifact |
 | `.github/nightly-release-notes.md` | Static body for the `nightly` release |
 | `vite.config.ts` | Injects build-time `define` flags |
 | `src/env.d.ts` | TypeScript declarations for those flags |
 | `src/utils/githubReleaseUpdate.ts` | Update check logic |
 | `src/interface/pages/settings.svelte` | Badge and disclaimer UI |
 | `src/interface/pages/settings/general.svelte` | Dev override input |
 | `src/types/storage.ts` | `devGhReleaseVersionOverride`, `lastSeenNightlyPublishedAt` |
 ---
 ## Quick reference
 ### Publish a stable release
 ```text
 1. Bump version in package.json on main
 2. Actions → Release → Run workflow → confirm version checkbox
 3. Edit release title/notes on GitHub (first time only)
 4. Re-run with same version to refresh zips without changing release text
 ```
 ### Get the latest nightly
 ```text
 https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases/tag/nightly
 ```
 ### Verify a PR locally
 ```bash
 npm run lint
 npm run build
 ```
@@ -1,587 +0,0 @@
 # Theme Creation Guide
 **Published version:** [docs.betterseqta.org/theme-creation/](https://docs.betterseqta.org/theme-creation/)
 This guide covers everything you need to know about creating custom themes for BetterSEQTA+.
 ## Table of Contents
 1. [Overview](#overview)
 2. [Theme Structure](#theme-structure)
 3. [CSS Variables](#css-variables)
 4. [CSS Selectors & Classes](#css-selectors--classes)
 5. [Custom Images](#custom-images)
 6. [Theme Settings](#theme-settings)
 7. [Best Practices](#best-practices)
 8. [Examples](#examples)
 ## Overview
 Themes in BetterSEQTA+ allow you to completely customize the appearance of SEQTA Learn. A theme consists of:
 - **Custom CSS**: CSS rules that override default styles
 - **Custom Images**: Images that can be referenced via CSS variables
 - **Theme Metadata**: Name, description, default color, etc.
 - **Theme Settings**: Options like forcing dark/light mode
 Themes are applied by injecting CSS into the SEQTA page and setting CSS custom properties (variables) on the document root.
 ## CSS Variables
 BetterSEQTA+ provides a comprehensive set of CSS variables that you can use in your themes. These variables automatically adapt to light/dark mode and user preferences.
 ### Core Background Variables
 | Variable | Light Mode | Dark Mode | Description |
 |----------|------------|-----------|-------------|
 | `--background-primary` | `#ffffff` | `#232323` | Main background color |
 | `--background-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary background color |
 | `--theme-primary` | `#ffffff` | `#232323` | Primary theme color (same as background-primary) |
 | `--theme-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary theme color (same as background-secondary) |
 | `--text-primary` | `black` | `white` | Primary text color |
 | `--text-color` | `black` | `white` | Text color (alias for text-primary) |
 ### BetterSEQTA+ Specific Variables
 | Variable | Description | Notes |
 |----------|-------------|-------|
 | `--better-main` | User's selected accent color | Dynamically set based on color picker |
 | `--better-sub` | Dark navy color | Always `#161616` |
 | `--better-pale` | Lightened version of accent color | Only available in light mode |
 | `--better-light` | Lighter version of accent color | Calculated based on brightness |
 | `--better-alert-highlight` | Alert/highlight color | `#c61851` |
 | `--betterseqta-logo` | Logo URL | Changes based on dark/light mode |
 | `--auto-background` | Auto background color | Falls back to `--better-pale` or `--background-secondary` |
 | `--navy` | Navy color | `#1a1a1a` |
 | `--theme-fg-parts` | Theme foreground parts | `white` |
 ### Subject/Item Color Variables
 | Variable | Description |
 |----------|-------------|
 | `--item-colour` | Subject/item color | Set dynamically per subject/item |
 | `--colour` | Generic color variable | Used in various contexts |
 | `--person-colour` | Person/avatar color | `var(--better-light)` for staff |
 ### Transparency Effects
 When transparency effects are enabled, background variables become semi-transparent:
 | Variable | Light Mode (Transparent) | Dark Mode (Transparent) |
 |----------|--------------------------|-------------------------|
 | `--background-primary` | `rgba(255, 255, 255, 0.6)` | `rgba(35, 35, 35, 0.6)` |
 | `--background-secondary` | `rgba(229, 231, 235, 0.6)` | `rgba(26, 26, 26, 0.6)` |
 ### Using CSS Variables
 You can use these variables in your custom CSS:
 ```css
 /* Example: Style a custom element */
 .my-custom-element {
  background: var(--background-primary);
  color: var(--text-primary);
  border: 1px solid var(--better-main);
 }
 /* Example: Create a gradient */
 .gradient-box {
  background: linear-gradient(
    to bottom,
    var(--better-main),
    var(--background-secondary)
  );
 }
 ```
 ## CSS Selectors & Classes
 BetterSEQTA+ uses specific CSS selectors and classes that you can target in your themes. Here are the most important ones:
 ### Main Layout Elements
 | Selector | Description |
 |----------|-------------|
 | `#container` | Main container element |
 | `#content` | Content area |
 | `#main` | Main content wrapper |
 | `#title` | Top title bar |
 | `#menu` | Sidebar menu |
 ### Dark Mode
 The `dark` class is added to `html` when dark mode is active:
 ```css
 /* Target dark mode specifically */
 html.dark #main {
  background: var(--background-primary);
 }
 /* Target light mode */
 html:not(.dark) #main {
  background: var(--background-primary);
 }
 ```
 ### Transparency Effects
 When transparency effects are enabled, the `transparencyEffects` class is added to `html`:
 ```css
 html.transparencyEffects .notice {
  backdrop-filter: blur(80px);
 }
 ```
 ### Common SEQTA Classes
 | Class/Selector | Description |
 |----------------|-------------|
 | `.notice` | Notice cards |
 | `.day` | Day containers in timetable |
 | `.dashboard` | Dashboard sections |
 | `.dashlet` | Dashboard widgets |
 | `.document` | Document elements |
 | `.quickbar` | Quick action bar |
 | `.calendar` | Calendar elements |
 | `.message` | Message elements |
 | `.thread` | Forum threads |
 | `.shortcut` | Shortcut buttons |
 | `.upcoming-assessment` | Upcoming assessments |
 | `.entry.class` | Timetable entries |
 ### BetterSEQTA+ Specific Classes
 | Class | Description |
 |-------|-------------|
 | `.addedButton` | BetterSEQTA+ added buttons |
 | `.tooltip` | Tooltip elements |
 | `.notice-unified-content` | Unified notice content |
 | `.home-container` | Home page container |
 | `.timetable-container` | Timetable container |
 | `.notices-container` | Notices container |
 ### Attribute Selectors
 SEQTA uses data attributes that you can target:
 ```css
 /* Target specific data types */
 [data-type="student"] .header {
  color: var(--text-primary);
 }
 /* Target specific labels */
 [data-label="inbox"] {
  /* Styles */
 }
 ```
 ### CSS Modules
 SEQTA uses CSS modules with hashed class names. You can target them using attribute selectors:
 ```css
 /* Target CSS module classes */
 [class*="MessageList__MessageList___"] {
  background: var(--background-primary);
 }
 [class*="BasicPanel__BasicPanel___"] {
  border-radius: 16px;
 }
 ```
 ## Custom Images
 Themes can include custom images that are made available as CSS variables.
 ### Adding Images
 1. Upload an image in the theme creator
 2. Set a CSS variable name (e.g., `custom-background`)
 3. The image will be available as `var(--custom-background)`
 ### Using Image Variables
 ```css
 /* Use as background */
 .my-element {
  background-image: var(--custom-background);
  background-size: cover;
  background-position: center;
 }
 /* Use in content */
 .my-icon::before {
  content: '';
  background-image: var(--custom-icon);
  width: 24px;
  height: 24px;
 }
 ```
 ### Image Variable Format
 Images are stored as `url()` values:
 ```css
 /* The variable contains: url(blob:...) */
 --custom-background: url(blob:chrome-extension://...);
 ```
 ## Theme Settings
 ### Force Dark/Light Mode
 You can force a theme to always use dark or light mode:
 ```typescript
 forceDark: true   // Force dark mode
 forceDark: false  // Force light mode
 forceDark: undefined  // Use user's preference (default)
 ```
 When `forceDark` is set, users cannot toggle dark/light mode while the theme is active.
 ### Default Color
 Set a default accent color for your theme:
 ```typescript
 defaultColour: "rgba(0, 123, 255, 1)"  // Blue
 defaultColour: "#ff6b6b"                // Red (hex format)
 ```
 ### Allow Color Changes
 Control whether users can change the accent color:
 ```typescript
 CanChangeColour: true   // Users can change color
 CanChangeColour: false  // Color is locked
 ```
 ## Best Practices
 ### 1. Use CSS Variables
 Always use CSS variables instead of hardcoded colors:
 ```css
 /* Good */
 .my-element {
  background: var(--background-primary);
  color: var(--text-primary);
 }
 /* Bad */
 .my-element {
  background: #ffffff;
  color: #000000;
 }
 ```
 ### 2. Support Both Light and Dark Modes
 Unless your theme forces a specific mode, ensure it works in both:
 ```css
 /* Use variables that adapt automatically */
 .my-element {
  background: var(--background-primary);
  color: var(--text-primary);
 }
 /* Or explicitly handle both modes */
 html.dark .my-element {
  background: #1a1a1a;
 }
 html:not(.dark) .my-element {
  background: #ffffff;
 }
 ```
 ### 3. Use !important Sparingly
 Only use `!important` when necessary to override SEQTA's default styles:
 ```css
 /* Good - necessary override */
 #title {
  background: var(--background-primary) !important;
 }
 /* Bad - unnecessary */
 .my-element {
  color: var(--text-primary) !important;
 }
 ```
 ### 4. Test Responsive Design
 SEQTA is responsive. Test your theme at different screen sizes:
 ```css
 /* Example: Mobile-specific styles */
@media (max-width: 900px) {
  #menu {
    transform: translate(-270px);
  }
 }
 ```
 ### 5. Use Semantic Selectors
 Prefer semantic selectors over fragile ones:
 ```css
 /* Good - stable selector */
 #main > .dashboard > section {
  border-radius: 16px;
 }
 /* Caution - CSS module classes may change */
 [class*="Dashboard__Dashboard___"] {
  border-radius: 16px;
 }
 ```
 ### 6. Optimize Images
 Keep image file sizes reasonable:
 - Use appropriate formats (PNG for transparency, JPG for photos)
 - Compress images before uploading
 - Consider using CSS for simple graphics instead of images
 ### 7. Document Your Theme
 Include comments in your CSS explaining complex styles:
 ```css
 /* 
 * Custom gradient background for dashboard
 * Uses the user's accent color for a cohesive look
 */
 #main > .dashboard {
  background: linear-gradient(
    135deg,
    var(--better-main),
    var(--background-secondary)
  );
 }
 ```
 ## Examples
 ### Example 1: Simple Color Theme
 ```css
 /* Change accent color throughout */
 :root {
  --better-main: #ff6b6b;
 }
 /* Style the menu */
 #menu {
  background: var(--background-primary);
  border-right: 3px solid var(--better-main);
 }
 /* Style buttons */
 .uiButton {
  background: var(--better-main);
  color: var(--text-color);
  border-radius: 8px;
 }
 ```
 ### Example 2: Custom Background Image
 ```css
 /* Use a custom background image */
 body {
  background-image: var(--custom-background);
  background-size: cover;
  background-attachment: fixed;
 }
 /* Add overlay for readability */
 #main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
 }
 ```
 ### Example 3: Rounded Corners Theme
 ```css
 /* Make everything more rounded */
 #main > .dashboard > section,
 .dashlet,
 .notice,
 .document {
  border-radius: 20px !important;
 }
 /* Round buttons */
 .uiButton {
  border-radius: 25px !important;
 }
 ```
 ### Example 4: Minimal Theme
 ```css
 /* Remove shadows and borders */
 #main > .dashboard > section,
 .dashlet,
 .notice {
  box-shadow: none !important;
  border: 1px solid var(--background-secondary) !important;
 }
 /* Simplify colors */
 #menu {
  background: var(--background-primary) !important;
 }
 /* Remove gradients */
 .day {
  background: var(--background-primary) !important;
 }
 ```
 ### Example 5: High Contrast Theme
 ```css
 /* Increase contrast */
 :root {
  --background-primary: #000000;
  --background-secondary: #1a1a1a;
  --text-primary: #ffffff;
 }
 html:not(.dark) {
  --background-primary: #ffffff;
  --background-secondary: #f0f0f0;
  --text-primary: #000000;
 }
 /* Add borders for clarity */
 .dashlet,
 .notice,
 .document {
  border: 2px solid var(--better-main) !important;
 }
 ```
 ## Advanced Techniques
 ### CSS Custom Properties Override
 You can override CSS variables in your theme:
 ```css
 /* Override a variable */
 :root {
  --better-main: #your-color;
 }
 /* Override conditionally */
 html.dark {
  --background-primary: #your-dark-color;
 }
 ```
 ### Animations
 Add smooth transitions:
 ```css
 /* Smooth color transitions */
 #menu li {
  transition: background-color 0.3s ease;
 }
 /* Hover effects */
 .dashlet:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
 }
 ```
 ### Pseudo-elements
 Use pseudo-elements for decorative elements:
 ```css
 /* Add decorative border */
 .notice::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--better-main);
 }
 ```
 ## Troubleshooting
 ### Theme Not Applying
 1. Check browser console for CSS errors
 2. Verify CSS syntax is correct
 3. Ensure selectors are specific enough
 4. Check if `!important` is needed
 ### Colors Not Changing
 1. Verify you're using CSS variables
 2. Check if `forceDark` is overriding your styles
 3. Ensure variables are set on `:root` or `html`
 ### Images Not Showing
 1. Verify image variable name matches CSS
 2. Check image format is supported
 3. Ensure image size is reasonable
 4. Verify `url()` wrapper in CSS
 ### Dark Mode Issues
 1. Test with `forceDark: true` and `forceDark: false`
 2. Check if transparency effects are interfering
 3. Verify `html.dark` selector is correct
 ## Resources
 - **Theme Creator**: Access via BetterSEQTA+ settings
 - **CSS Variables Reference**: See [CSS Variables](#css-variables) section above
 - **SEQTA DOM Structure**: Inspect SEQTA pages in browser DevTools
 - **BetterSEQTA+ Source**: Check `src/css/injected.scss` for default styles
 ## Contributing Themes
 If you create a great theme, consider sharing it:
 1. Export your theme (Share button in theme creator)
 2. Submit to the BetterSEQTA+ theme store
 3. Or share on GitHub/Discord
 ---
 **Note**: This documentation is based on BetterSEQTA+ v3.4.13. Some details may change in future versions.
@@ -1,350 +0,0 @@
 # Troubleshooting Guide
 **Published version:** [docs.betterseqta.org/troubleshooting/](https://docs.betterseqta.org/troubleshooting/)
 Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
 ## Table of Contents
 - [Installation Issues](#installation-issues)
 - [Development Server Issues](#development-server-issues)
 - [Browser Extension Issues](#browser-extension-issues)
 - [Plugin Development Issues](#plugin-development-issues)
 - [Build Issues](#build-issues)
 - [Still Stuck?](#still-stuck)
 ## Installation Issues
 ### ❌ "npm install" fails with peer dependency errors
 **Problem**: You see errors about peer dependencies or conflicting packages.
 **Solution**:
 ```bash
 rm -rf node_modules package-lock.json
 npm install --legacy-peer-deps
 ```
 ### ❌ "Cannot find module" errors
 **Problem**: Node.js can't find required packages.
 **Solutions**:
 1. **Clear and reinstall**:
   ```bash
   rm -rf node_modules
   npm install --legacy-peer-deps
   ```
 2. **Check Node.js version**:
   ```bash
   node --version  # Should be v16 or higher
   ```
 3. **Try with npm cache clean**:
   ```bash
   npm cache clean --force
   npm install --legacy-peer-deps
   ```
 ### ❌ Permission errors on macOS/Linux
 **Problem**: "EACCES" or permission denied errors.
 **Solution**:
 ```bash
 sudo chown -R $(whoami) ~/.npm
 sudo chown -R $(whoami) /usr/local/lib/node_modules
 ```
 ## Development Server Issues
 ### ❌ "npm run dev" fails
 **Problem**: Development server won't start.
 **Solutions**:
 1. **Check if port is in use**:
   ```bash
   lsof -i :5173  # Kill the process using the port
   ```
 2. **Clear dist folder**:
   ```bash
   rm -rf dist
   npm run dev
   ```
 3. **Check for TypeScript errors**:
   ```bash
   npx tsc --noEmit  # Check for type errors
   ```
 ### ❌ Changes not reflecting in browser
 **Problem**: You make code changes but don't see them in the browser.
 **Solutions**:
 1. **Reload the extension**:
   - Go to `chrome://extensions`
   - Find BetterSEQTA+ and click the refresh icon
   - Refresh your SEQTA page
 2. **Check if dev server is running**:
   - Look for "Build completed" in your terminal
   - If not, restart `npm run dev`
 3. **Hard refresh the page**:
   - Press `Ctrl+Shift+R` (or `Cmd+Shift+R` on Mac)
 ## Browser Extension Issues
 ### ❌ Extension doesn't load in Chrome
 **Problem**: Extension appears in `chrome://extensions` but doesn't work.
 **Solutions**:
 1. **Check for errors**:
   - Go to `chrome://extensions`
   - Click "Errors" button on BetterSEQTA+
   - Fix any JavaScript errors shown
 2. **Verify manifest**:
   - Check if `dist/manifest.json` exists
   - Ensure it has proper structure
 3. **Check permissions**:
   - Extension needs permission to access SEQTA pages
   - Click "Details" → "Site access" → "On all sites"
 ### ❌ Extension doesn't appear on SEQTA pages
 **Problem**: Extension loads but doesn't modify SEQTA.
 **Solutions**:
 1. **Check if you're on a SEQTA Learn page**:
   - URL should contain "seqta" or "learn"
   - Page title should include "SEQTA Learn"
 2. **Check browser console**:
   - Press `F12` → Console tab
   - Look for "[BetterSEQTA+]" messages
   - If no messages, extension isn't running
 3. **Verify page detection**:
   - Extension only runs on actual SEQTA Learn pages
   - Test on a real SEQTA instance
 ### ❌ Settings page won't open
 **Problem**: Clicking the extension icon doesn't open settings.
 **Solutions**:
 1. **Check popup errors**:
   - Right-click extension icon → "Inspect popup"
   - Look for JavaScript errors
 2. **Clear extension storage**:
   ```javascript
   // In browser console on any page:
   chrome.storage.local.clear()
   ```
 3. **Reload extension and try again**
 ## Plugin Development Issues
 ### ❌ My plugin doesn't appear in settings
 **Problem**: Created a plugin but it's not showing up.
 **Solutions**:
 1. **Check plugin registration**:
   - Ensure your plugin is imported in `src/plugins/index.ts`
   - Verify `pluginManager.registerPlugin(yourPlugin)` is called
 2. **Check plugin structure**:
   ```typescript
   // Ensure your plugin has all required fields
   const myPlugin: Plugin = {
     id: "unique-id",      // Must be unique
     name: "Display Name",
     description: "What it does",
     version: "1.0.0",
     run: async (api) => {
       // Your code here
     }
   };
   ```
 3. **Check for errors**:
   - Look in browser console for plugin loading errors
 ### ❌ Plugin settings not working
 **Problem**: Plugin settings don't save or load properly.
 **Solutions**:
 1. **Check settings definition**:
   ```typescript
   import { defineSettings, booleanSetting } from "@/plugins/core/settingsHelpers";
   const settings = defineSettings({
     myOption: booleanSetting({
       default: true,
       title: "My Option",
       description: "What this does"
     })
   });
   ```
 2. **Wait for settings to load**:
   ```typescript
   run: async (api) => {
     await api.settings.loaded;  // Wait for settings to load
     console.log(api.settings.myOption);  // Now you can use settings
   }
   ```
 ### ❌ Plugin API functions not working
 **Problem**: `api.seqta.onMount()` or other API functions don't work.
 **Solutions**:
 1. **Check selector specificity**:
   ```typescript
   // Be specific with selectors
   api.seqta.onMount(".home-page", (element) => {
     // Your code
   });
   ```
 2. **Wait for elements**:
   ```typescript
   // Some elements load after page navigation
   api.seqta.onPageChange((page) => {
     if (page === "home") {
       api.seqta.onMount(".home-content", (element) => {
         // Now element should exist
       });
     }
   });
   ```
 ## Build Issues
 ### ❌ "npm run build" fails
 **Problem**: Production build fails with errors.
 **Solutions**:
 1. **Check TypeScript errors**:
   ```bash
   npx tsc --noEmit
   ```
 2. **Clear cache and rebuild**:
   ```bash
   rm -rf dist node_modules
   npm install --legacy-peer-deps
   npm run build
   ```
 3. **Check for import errors**:
   - Ensure all imports use correct paths
   - Check for missing files
 ### ❌ Built extension doesn't work
 **Problem**: `npm run build` succeeds but extension doesn't work.
 **Solutions**:
 1. **Test the built extension**:
   - Load the `dist` folder as unpacked extension
   - Check console for errors
 2. **Compare with dev version**:
   - If dev works but build doesn't, there might be a build configuration issue
 3. **Check manifest generation**:
   - Verify `dist/manifest.json` looks correct
   - Compare with working version
 ## Common Error Messages
 ### "Cannot access contents of the URL"
 - **Cause**: Extension permissions issue
 - **Fix**: Go to `chrome://extensions` → BetterSEQTA+ → Details → Site access → "On all sites"
 ### "Extension context invalidated"
 - **Cause**: Extension was reloaded while page was open
 - **Fix**: Refresh the SEQTA page
 ### "Uncaught ReferenceError: browser is not defined"
 - **Cause**: Missing webextension-polyfill import
 - **Fix**: Add `import browser from "webextension-polyfill";` at top of file
 ### "Module not found: Can't resolve '@/...' "
 - **Cause**: TypeScript path mapping issue
 - **Fix**: Check `tsconfig.json` and `vite.config.ts` for path configuration
 ## Performance Issues
 ### Extension makes SEQTA slow
 1. **Check for memory leaks**:
   - Use Chrome DevTools → Performance tab
   - Look for growing memory usage
 2. **Optimize plugin code**:
   - Remove unnecessary listeners
   - Clean up intervals/timeouts
   - Use efficient selectors
 3. **Profile your changes**:
   - Test with extension disabled vs enabled
   - Identify which plugin is causing issues
 ## Still Stuck?
 If none of these solutions work:
 1. **🔍 Search existing issues**: [GitHub Issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
 2. **💬 Ask on Discord**: [Join our server](https://discord.gg/YzmbnCDkat) - fastest way to get help!
 3. **📝 Create a new issue**: Include:
   - Your operating system
   - Node.js version (`node --version`)
   - Browser version
   - Exact error message
   - Steps to reproduce
   - What you've already tried
 4. **📧 Email us**: betterseqta.plus@gmail.com for urgent issues
 ## Getting More Debug Info
 ### Enable verbose logging
 Add this to your plugin's `run` function:
 ```typescript
 console.log("[DEBUG] Plugin starting:", api);
 ```
 ### Check extension background page
 1. Go to `chrome://extensions`
 2. Click "Details" on BetterSEQTA+
 3. Click "Inspect views: background page"
 4. Check console for background script errors
 ### Export debug info
 Run this in browser console on a SEQTA page:
 ```javascript
 console.log("Extension info:", {
  version: chrome.runtime.getManifest().version,
  url: window.location.href,
  userAgent: navigator.userAgent,
  storage: await chrome.storage.local.get()
 });
 ```
 Remember: **Don't give up!** Every developer faces these issues. The community is here to help, and solving these problems makes you a better developer. 💪 
@@ -1,7 +1,5 @@
 # Contributing to BetterSEQTA+
 **Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
 Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
 ## Table of Contents
@@ -59,7 +57,7 @@ Key points:
 5. **Install in Chrome/Firefox**
-   Follow the [installation instructions](https://docs.betterseqta.org/install/) to load the development version into your browser.
+   Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
 ### Project Structure
@@ -119,13 +117,12 @@ git checkout -b feature/my-new-feature
   If your changes require documentation updates, include them in the same PR.
-4. **Run CI checks locally**
+4. **Run Tests**
-   Pull requests trigger **PR CI**, which lints and builds in a clean environment:
+   Make sure all tests pass before submitting your PR:
   ```bash
-   npm run lint
+   npm test
   npm run build
   ```
 5. **Submit Your PR**
@@ -140,25 +137,6 @@ git checkout -b feature/my-new-feature
   Once approved, a maintainer will merge your PR.
 ### GitHub Actions workflows
 See [RELEASES.md](RELEASES.md) for a full guide (workflows, sideload installs, and update detector).
 | Workflow | Trigger | Purpose |
 |----------|---------|---------|
 | `pr-ci.yml` | Every PR to `main` | Typecheck, lint, and build (no release) |
 | `mvp.yml` | Push to `main` | Build and upload `dist.zip` artifact |
 | `release.yml` | Manual (`workflow_dispatch`) | Stable release on [BetterSEQTA/BetterSEQTA-Plus](https://github.com/BetterSEQTA/BetterSEQTA-Plus) tagged with `package.json` version |
 | `nightly.yml` | Daily cron + manual | Updates the fixed `nightly` prerelease with latest `main` builds |
 **Releasing a stable version:** bump `version` in `package.json` on `main`, then manually run the **Release** workflow and confirm the version checkbox. Edit the release title and notes on GitHub after the first publish. Re-running for the same tag only updates the zip files. Assets are `betterseqtaplus-{version}-chrome.zip` and `-firefox.zip`.
 **Nightly builds** replace assets on the same `nightly` release. The release body warns that builds are experimental and must not be uploaded to extension stores.
 **GitHub release builds** include an in-extension update checker (settings header badge). **PR CI and local dev builds do not.**
 Release workflows are dispatched only on the main **BetterSEQTA/BetterSEQTA-Plus** repository and use the default `GITHUB_TOKEN`.
 ### Coding Standards
 We follow TypeScript best practices and have a consistent code style:
@@ -268,8 +246,8 @@ Join our community channels to discuss the project, get help, and connect with o
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
+- [Creating Your First Plugin](./plugins/creating-plugins.md)
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
+- [Plugin API Reference](./advanced/plugin-api.md)
 ## Recognition
@@ -1,7 +1,5 @@
 # Installing BetterSEQTA+
 **Published version:** [docs.betterseqta.org/install/](https://docs.betterseqta.org/install/)
 This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
 ## Prerequisites
@@ -180,5 +178,5 @@ bun run dev
 Now that you have BetterSEQTA+ installed, you can:
- [Plugins](https://docs.betterseqta.org/plugins/)
+- [Getting Started with Plugins](./plugins/getting-started.md)
- [Contribute to the project](https://docs.betterseqta.org/contributing/) · [Repository CONTRIBUTING.md](../CONTRIBUTING.md)
+- [Contribute to the project](../CONTRIBUTING.md)
@@ -1,337 +0,0 @@
 # Example Plugin Template
 **Published version:** [docs.betterseqta.org/example-plugin/](https://docs.betterseqta.org/example-plugin/)
 This is a complete, working example of a simple BetterSEQTA+ plugin. You can copy this code and modify it to create your own plugin!
 ## What This Example Does
 This plugin adds a friendly welcome message to the SEQTA homepage and lets users customize the message through settings.
 ## Complete Plugin Code
 Create a new file in `src/plugins/built-in/my-first-plugin/index.ts`:
 ```typescript
 import type { Plugin } from "@/plugins/core/types";
 import { BasePlugin } from "@/plugins/core/settings";
 import { 
  defineSettings, 
  booleanSetting, 
  stringSetting 
 } from "@/plugins/core/settingsHelpers";
 import { Setting } from "@/plugins/core/settingsHelpers";
 // Define the plugin settings
 const settings = defineSettings({
  enabled: booleanSetting({
    default: true,
    title: "Show Welcome Message",
    description: "Display a welcome message on the SEQTA homepage"
  }),
  customMessage: stringSetting({
    default: "Welcome to SEQTA! 🎉",
    title: "Custom Message",
    description: "The message to display on the homepage",
    maxLength: 100
  }),
  showEmoji: booleanSetting({
    default: true,
    title: "Show Emoji",
    description: "Include emojis in the welcome message"
  })
 });
 // Create settings class
 class MyFirstPluginSettings extends BasePlugin<typeof settings> {
  @Setting(settings.enabled)
  enabled!: boolean;
  @Setting(settings.customMessage)
  customMessage!: string;
  @Setting(settings.showEmoji)
  showEmoji!: boolean;
 }
 // Create settings instance
 const settingsInstance = new MyFirstPluginSettings();
 // Define the plugin
 const myFirstPlugin: Plugin<typeof settings> = {
  id: "my-first-plugin",
  name: "My First Plugin",
  description: "Adds a customizable welcome message to the SEQTA homepage",
  version: "1.0.0",
  // Link our settings
  settings: settingsInstance.settings,
  // Mark as beta (optional)
  beta: true,
  // Add some CSS styles (optional)
  styles: `
    .my-plugin-welcome {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px;
      border-radius: 12px;
      margin: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
      font-size: 18px;
      animation: slideIn 0.5s ease-out;
    }
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .my-plugin-welcome .close-btn {
      float: right;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      padding: 5px 10px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 12px;
    }
    .my-plugin-welcome .close-btn:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  `,
  // Main plugin function
  run: async (api) => {
    console.log("[My First Plugin] Starting up! 🚀");
    // Wait for settings to load
    await api.settings.loaded;
    let welcomeElement: HTMLElement | null = null;
    // Function to create the welcome message
    const createWelcomeMessage = () => {
      // Only show if enabled in settings
      if (!api.settings.enabled) {
        return;
      }
      // Remove existing message if it exists
      if (welcomeElement) {
        welcomeElement.remove();
      }
      // Create the message element
      welcomeElement = document.createElement("div");
      welcomeElement.className = "my-plugin-welcome";
      // Build the message content
      let message = api.settings.customMessage;
      if (!api.settings.showEmoji) {
        // Remove emojis if disabled
        message = message.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
      }
      welcomeElement.innerHTML = `
        <button class="close-btn" onclick="this.parentElement.remove()">×</button>
        <div>${message}</div>
        <small style="opacity: 0.8; margin-top: 10px; display: block;">
          Powered by My First Plugin
        </small>
      `;
      return welcomeElement;
    };
    // Function to add message to homepage
    const addToHomepage = () => {
      api.seqta.onMount(".home-page, .dashboard, [class*='home']", (homePage) => {
        console.log("[My First Plugin] Found homepage, adding welcome message");
        const message = createWelcomeMessage();
        if (message) {
          // Add to the top of the homepage
          homePage.insertBefore(message, homePage.firstChild);
        }
      });
    };
    // Add message when plugin starts
    addToHomepage();
    // Re-add message when user navigates to homepage
    api.seqta.onPageChange((page) => {
      console.log("[My First Plugin] Page changed to:", page);
      if (page.includes("home") || page.includes("dashboard")) {
        // Small delay to let the page load
        setTimeout(addToHomepage, 500);
      }
    });
    // Listen for settings changes and update the message
    api.settings.onChange("enabled", (enabled) => {
      console.log("[My First Plugin] Enabled setting changed:", enabled);
      if (enabled) {
        addToHomepage();
      } else if (welcomeElement) {
        welcomeElement.remove();
        welcomeElement = null;
      }
    });
    api.settings.onChange("customMessage", (newMessage) => {
      console.log("[My First Plugin] Message changed:", newMessage);
      if (welcomeElement && api.settings.enabled) {
        // Update existing message
        addToHomepage();
      }
    });
    api.settings.onChange("showEmoji", (showEmoji) => {
      console.log("[My First Plugin] Show emoji changed:", showEmoji);
      if (welcomeElement && api.settings.enabled) {
        // Update existing message
        addToHomepage();
      }
    });
    // Return cleanup function (called when plugin is disabled)
    return () => {
      console.log("[My First Plugin] Cleaning up...");
      if (welcomeElement) {
        welcomeElement.remove();
        welcomeElement = null;
      }
    };
  }
 };
 export default myFirstPlugin;
 ```
 ## How to Use This Example
 ### Step 1: Create the Plugin File
 1. Create a new folder: `src/plugins/built-in/my-first-plugin/`
 2. Create `index.ts` in that folder
 3. Copy the code above into `index.ts`
 ### Step 2: Register the Plugin
 Add this to `src/plugins/index.ts`:
 ```typescript
 // Add this import at the top
 import myFirstPlugin from "./built-in/my-first-plugin";
 // Add this line where other plugins are registered
 pluginManager.registerPlugin(myFirstPlugin);
 ```
 ### Step 3: Test It
 1. Run `npm run dev`
 2. Reload your extension in Chrome
 3. Visit a SEQTA page
 4. You should see your welcome message!
 5. Open BetterSEQTA+ settings to customize it
 ## Key Concepts Explained
 ### 1. Plugin Structure
 ```typescript
 const myPlugin: Plugin = {
  id: "unique-id",           // Must be unique across all plugins
  name: "Display Name",      // Shown in settings
  description: "What it does", // Shown in settings
  version: "1.0.0",         // Plugin version
  settings: settingsObject, // User-configurable options
  styles: "/* CSS here */", // Optional CSS styles
  run: async (api) => {     // Main plugin code
    // Your code here
  }
 };
 ```
 ### 2. Settings System
 ```typescript
 // Define what settings your plugin has
 const settings = defineSettings({
  myOption: booleanSetting({
    default: true,
    title: "My Option",
    description: "What this option does"
  })
 });
 // Use in your plugin
 if (api.settings.myOption) {
  // Do something
 }
 ```
 ### 3. SEQTA Integration
 ```typescript
 // Wait for elements to appear
 api.seqta.onMount(".some-selector", (element) => {
  // Modify the element
 });
 // Detect page changes
 api.seqta.onPageChange((page) => {
  if (page === "home") {
    // User navigated to homepage
  }
 });
 ```
 ### 4. Cleanup
 Always return a cleanup function to remove your changes when the plugin is disabled:
 ```typescript
 run: async (api) => {
  // Add your features
  return () => {
    // Remove your features
  };
 }
 ```
 ## Customization Ideas
 Want to modify this example? Here are some ideas:
 1. **Change the styling**: Modify the CSS to use different colors, animations, or layouts
 2. **Add more settings**: Number settings, select dropdowns, hotkeys
 3. **Different trigger**: Show on different pages, or based on time of day
 4. **Add interactions**: Buttons that do things when clicked
 5. **Store data**: Use `api.storage` to remember user preferences
 6. **Communicate with other plugins**: Use `api.events` to send/receive events
 ## Next Steps
 Once you've got this working:
 1. **Experiment**: Try changing things and see what happens
 2. **Read other plugins**: Look at the built-in plugins for inspiration
 3. **Check the API docs**: Learn about all available API functions
 4. **Share your creation**: Show it off in Discord!
 ## Need Help?
 - 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
 - 📚 Read the [plugin documentation](https://docs.betterseqta.org/plugins/)
 - 🐛 Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
 - 📝 Open an issue on GitHub
 Happy coding! 🎉 
@@ -1,7 +1,5 @@
 # Creating Plugins for BetterSEQTA+
 **Published version:** [docs.betterseqta.org/plugins/](https://docs.betterseqta.org/plugins/) · [Plugin development](https://docs.betterseqta.org/plugin-development/) · [Plugin API](https://docs.betterseqta.org/plugin-api/)
 Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome! This guide will walk you through everything you need to know, from the very basics to more advanced features. Don't worry if you're new to this - we'll explain everything step by step.
 ## What is a Plugin?
@@ -296,4 +294,4 @@ Got stuck? No worries! Here's where you can get help:
 - Check out the built-in plugins in the `src/plugins/built-in` folder
 - Open an issue on our [GitHub page](https://github.com/betterseqta/betterseqta-plus/issues)
-Happy coding and feel free to check out the [plugin API](https://docs.betterseqta.org/plugin-api/) on the documentation site.
+Happy coding and feel free to checkout the api reference [here](./api-reference.md)
@@ -1,8 +1,6 @@
 # Plugin API Reference
-**Published version:** [docs.betterseqta.org/plugin-api/](https://docs.betterseqta.org/plugin-api/)
+This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see [Creating Your First Plugin](./README.md).
 This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see the [plugins section](https://docs.betterseqta.org/plugins/) at [docs.betterseqta.org](https://docs.betterseqta.org/).
 ## Plugin Structure
@@ -1,43 +0,0 @@
 import type { Plugin } from "vite";
 /**
 * Firefox extension pages forbid eval / `Function` constructor. Some deps still emit:
 * - `Function(\`return this\`)()` (lodash-style global)
 * - `try { return Function(\`\`) / new Function("") … }` (feature probes, e.g. PDF.js / ORT)
 */
 export function firefoxStripFunctionProbe(): Plugin {
  return {
    name: "firefox-strip-function-probe",
    apply: "build",
    enforce: "post",
    generateBundle(_options, bundle) {
      if ((process.env.MODE || "chrome").toLowerCase() !== "firefox") return;
      const literalReplacements: [string, string][] = [
        ['try{return new Function(""),!0}catch{return!1}', "return!1"],
        ["try{return new Function(''),!0}catch{return!1}", "return!1"],
        ['try{return new Function(""),true}catch{return false}', "return false"],
        ["try{return new Function(''),true}catch{return false}", "return false"],
        // Empty template literal probe (minifier output)
        ["try{return Function(``),!0}catch{return!1}", "return!1"],
      ];
      for (const chunk of Object.values(bundle)) {
        if (chunk.type !== "chunk" || typeof chunk.code !== "string") continue;
        let { code } = chunk;
        code = code.replace(/Function\(`return this`\)\(\)/g, "(globalThis)");
        code = code.replace(/Function\("return this"\)\(\)/g, "(globalThis)");
        code = code.replace(/Function\('return this'\)\(\)/g, "(globalThis)");
        for (const [from, to] of literalReplacements) {
          if (code.includes(from)) {
            code = code.split(from).join(to);
          }
        }
        chunk.code = code;
      }
    },
  };
 }
@@ -1,15 +1,12 @@
 {
  "name": "betterseqtaplus",
-  "version": "3.7.0",
+  "version": "3.4.7",
  "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development and add heaps more features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "postinstall": "node scripts/copy-pdfjs-assets.mjs",
    "autoaudit": "npm audit && npm audit fix && npm run build",
    "dev": "cross-env MODE=chrome vite dev",
    "dev:firefox": "cross-env MODE=firefox vite build --watch",
    "compile": "npm i && npm run build",
    "build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build",
    "build:chrome": "cross-env MODE=chrome vite build",
    "build:firefox": "cross-env MODE=firefox vite build",
@@ -17,8 +14,7 @@
    "build:dev": "cross-env MODE=chrome SOURCEMAP=true vite build && cross-env MODE=firefox SOURCEMAP=true vite build",
    "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
-    "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint \"src/**/*.{js,ts}\"",
+    "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
    "release": "gh release create $npm_package_version --repo BetterSEQTA/BetterSEQTA-Plus ./dist/*.zip --generate-notes",
    "publish": "bun lib/publish.js --b",
    "zip": "bedframe zip"
  },
@@ -32,31 +28,26 @@
  "keywords": [],
  "author": {
    "name": "SethBurkart123",
-    "email": "betterseqta.plus@gmail.com",
+    "email": "betterseqta@betterseqta.com",
-    "url": "https://github.com/BetterSEQTA/BetterSEQTA-Plus"
+    "url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.26.9",
    "@babel/runtime": "^7.26.9",
-    "@bedframe/cli": "^0.1.2",
+    "@bedframe/cli": "^0.0.91",
-    "@crxjs/vite-plugin": "^2.4.0",
+    "@crxjs/vite-plugin": "2.0.0-beta.32",
-    "@types/d3-scale": "^4.0.9",
+    "@types/mime-types": "^2.1.4",
    "@types/d3-shape": "^3.1.8",
    "@types/mime-types": "^3.0.1",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "cross-env": "^7.0.3",
-    "@typescript-eslint/parser": "^8.60.1",
+    "dependency-cruiser": "^16.10.0",
-    "cross-env": "^10.0.0",
+    "eslint": "9.22.0",
    "dependency-cruiser": "^17.0.1",
    "eslint": "^9.33.0",
    "eslint-plugin-import": "^2.31.0",
    "glob": "^11.0.1",
-    "mime-types": "^3.0.1",
+    "mime-types": "^2.1.35",
    "prettier": "^3.5.3",
    "process": "^0.11.10",
-    "publish-browser-extension": "^4.0.4",
+    "publish-browser-extension": "^3.0.0",
    "sass": "^1.85.1",
    "sass-loader": "^16.0.5",
    "semver": "^7.7.1",
@@ -64,7 +55,6 @@
    "url": "^0.11.4"
  },
  "dependencies": {
    "@bedframe/core": "^0.1.0",
    "@codemirror/autocomplete": "^6.18.6",
    "@codemirror/commands": "^6.8.0",
    "@codemirror/lang-css": "^6.3.1",
@@ -72,14 +62,24 @@
    "@codemirror/search": "^6.5.10",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.36.4",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tailwindcss/forms": "^0.5.10",
    "@tiptap/core": "^2.14.0",
    "@tiptap/extension-bubble-menu": "^2.14.0",
    "@tiptap/extension-dropcursor": "^2.14.0",
    "@tiptap/extension-image": "^2.14.0",
    "@tiptap/extension-link": "^2.14.0",
    "@tiptap/extension-placeholder": "^2.14.0",
    "@tiptap/extension-task-item": "^2.14.0",
    "@tiptap/extension-task-list": "^2.14.0",
    "@tiptap/extension-typography": "^2.14.0",
    "@tiptap/starter-kit": "^2.14.0",
    "@tiptap/suggestion": "^2.14.0",
    "@tsconfig/svelte": "^5.0.4",
-    "@types/chrome": "^0.1.4",
+    "@types/chrome": "^0.0.308",
    "@types/color": "^4.2.0",
    "@types/lodash": "^4.17.16",
-    "@types/node": "^24.3.0",
+    "@types/node": "^22.13.10",
    "@types/qrcode": "^1.5.6",
    "@types/sortablejs": "^1.15.8",
    "@types/uuid": "^10.0.0",
    "@types/webextension-polyfill": "^0.12.3",
@@ -89,10 +89,8 @@
    "canvas-confetti": "^1.9.3",
    "codemirror": "^6.0.1",
    "color": "^5.0.0",
    "d3-scale": "^4.0.2",
    "d3-shape": "^3.2.0",
    "dompurify": "^3.2.4",
-    "embeddia": "^1.3.0",
+    "embeddia": "^1.2.1",
    "embla-carousel-autoplay": "^8.5.2",
    "embla-carousel-svelte": "^8.5.2",
    "esbuild": "^0.25.3",
@@ -100,24 +98,23 @@
    "flexsearch": "^0.8.147",
    "fuse.js": "^7.1.0",
    "idb": "^8.0.2",
    "layerchart": "2.0.0-next.27",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "mathjs": "^14.4.0",
    "million": "^3.1.11",
    "motion": "^12.4.12",
-    "pdfjs-dist": "^5.4.530",
+    "motion-start": "^0.1.15",
    "postcss": "^8.5.3",
    "qrcode": "^1.5.4",
    "react": "17",
    "react-best-gradient-color-picker": "3.0.11",
    "react-dom": "17",
    "rss-parser": "^3.13.0",
    "sortablejs": "^1.15.6",
-    "svelte": "^5.46.4",
+    "svelte": "^5.22.6",
    "svelte-hero-icons": "^5.2.0",
    "typescript": "^5.8.2",
    "uuid": "^11.1.0",
-    "vite": "^8.0.5",
+    "vite": "^6.2.1",
    "webextension-polyfill": "^0.12.0"
  }
 }
@@ -1,17 +0,0 @@
 import { copyFileSync, mkdirSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const pdfjsRoot = join(root, "node_modules", "pdfjs-dist");
 const outDir = join(root, "src", "public", "resources", "pdfjs");
 mkdirSync(outDir, { recursive: true });
 copyFileSync(
  join(pdfjsRoot, "build", "pdf.worker.min.mjs"),
  join(outDir, "pdf.worker.min.mjs"),
 );
 copyFileSync(
  join(pdfjsRoot, "legacy", "build", "pdf.min.mjs"),
  join(outDir, "pdf.legacy.min.mjs"),
 );
@@ -0,0 +1,126 @@
 --- a/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
 +++ b/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
@@ -2,7 +2,7 @@
 // Base interfaces for our settings
 interface BaseSettingOptions {
 -  title: string;
 +  readonly title: string; // Mark as readonly where appropriate
   description?: string;
 }
@@ -11,21 +11,21 @@
 }
 interface StringSettingOptions extends BaseSettingOptions {
 -  default: string;
 +  readonly default: string;
   maxLength?: number;
   pattern?: string;
 }
 interface NumberSettingOptions extends BaseSettingOptions {
 -  default: number;
 +  readonly default: number;
   min?: number;
   max?: number;
   step?: number;
 }
 interface SelectSettingOptions<T extends string> extends BaseSettingOptions {
 -  default: T;
 -  options: readonly T[];
 +  readonly default: T;
 +  readonly options: readonly T[];
 }
 // The actual decorators
@@ -34,14 +34,16 @@
     // Ensure the settings property exists on the constructor's prototype
     const proto = target.constructor.prototype;
     if (!proto.hasOwnProperty('settings')) {
 -      proto.settings = {};
 +      // Initialize with a base type that can be extended
 +      Object.defineProperty(proto, 'settings', {
 +        value: {},
 +        writable: true, // Allows adding properties
 +        configurable: true,
 +        enumerable: true
 +      });
     }
 -    
 +
     // Add the setting to the prototype's settings object with const assertion
     proto.settings[propertyKey] = {
       type: 'boolean' as const,
       ...options
     };
 -  };
 -}
 -
 -export function StringSetting(options: StringSettingOptions): PropertyDecorator {
 -  return (target: Object, propertyKey: string | symbol) => {
 -    // Ensure the settings property exists on the constructor's prototype
 -    const proto = target.constructor.prototype;
 -    if (!proto.hasOwnProperty('settings')) {
 -      proto.settings = {};
 -    }
 -    
 -    // Add the setting to the prototype's settings object with const assertion
 -    proto.settings[propertyKey] = {
 -      type: 'string' as const,
 -      ...options
 -    };
   };
 }
@@ -50,14 +52,16 @@
     // Ensure the settings property exists on the constructor's prototype
     const proto = target.constructor.prototype;
     if (!proto.hasOwnProperty('settings')) {
 -      proto.settings = {};
 +       Object.defineProperty(proto, 'settings', {
 +        value: {},
 +        writable: true,
 +        configurable: true,
 +        enumerable: true
 +      });
     }
 -    
 +
     // Add the setting to the prototype's settings object with const assertion
     proto.settings[propertyKey] = {
       type: 'number' as const,
       ...options
     };
 -  };
 -}
 -
 -export function SelectSetting<T extends string>(options: SelectSettingOptions<T>): PropertyDecorator {
 -  return (target: Object, propertyKey: string | symbol) => {
 -    // Ensure the settings property exists on the constructor's prototype
 -    const proto = target.constructor.prototype;
 -    if (!proto.hasOwnProperty('settings')) {
 -      proto.settings = {};
 -    }
 -    
 -    // Add the setting to the prototype's settings object with const assertion
 -    proto.settings[propertyKey] = {
 -      type: 'select' as const,
 -      ...options
 -    };
   };
 }
 // Base plugin class that handles settings
 export abstract class BasePlugin<T extends PluginSettings = PluginSettings> {
   // The settings property will be populated by decorators
 -  settings!: T;
 -  
 +  // Keep the instance property and constructor logic as is,
 +  // as changing it would require changing animated-background/index.ts
 +  settings!: T; // Use definite assignment assertion
 +
   constructor() {
     // Copy settings from the prototype to the instance
     // This ensures that each instance has its own settings object
@@ -9,31 +9,6 @@ import browser from "webextension-polyfill";
 import * as plugins from "@/plugins";
 import { main } from "@/seqta/main";
 import { delay } from "./seqta/utils/delay";
 import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
 function registerFetchSeqtaAppLinkListener() {
  browser.runtime.onMessage.addListener((request, _sender, sendResponse) => {
    if (request?.type !== "fetchSeqtaAppLink") return false;
    void (async () => {
      try {
        const res = await fetch(`${location.origin}/seqta/student/load/profile`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
          body: JSON.stringify({}),
        });
        const data = await res.json();
        const statusOk = data?.status === "200" || data?.status === 200;
        const raw = data?.payload?.app_link;
        const appLink = typeof raw === "string" && raw.length > 0 ? raw : null;
        sendResponse({ appLink: statusOk ? appLink : null });
      } catch {
        sendResponse({ appLink: null });
      }
    })();
    return true;
  });
 }
 export let MenuOptionsOpen = false;
@@ -49,50 +24,35 @@ if (document.childNodes[1]) {
  init();
 }
 /**
 * Initializes BetterSEQTA+ on a SEQTA page.
 *
 * This function performs the following steps:
 * 1. Verifies that the current page is a SEQTA page.
 * 2. Injects CSS styles for document loading.
 * 3. Changes the page's favicon.
 * 4. Initializes the extension's settings state.
 * 5. Sets default storage if settings are not already defined.
 * 6. Calls the main function to apply core BetterSEQTA+ modifications.
 * 7. Initializes legacy and new plugins if the extension is enabled.
 * 8. Logs success or error messages during initialization.
 */
 async function init() {
-  if (
+  const hasSEQTATitle = document.title.includes("SEQTA Learn");
-    hasSEQTAText &&
+
-    (document.title.includes("SEQTA Learn") ||
+  if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
-      document.title.includes("SEQTA Engage")) &&
+    // Verify we are on a SEQTA page
    !IsSEQTAPage
  ) {
    IsSEQTAPage = true;
    console.info("[BetterSEQTA+] Verified SEQTA Page");
    if (typeof window !== "undefined" && window === window.top) {
      void browser.runtime.sendMessage({ type: "cloudSettingsPoll" }).catch(() => {});
    }
    registerFetchSeqtaAppLinkListener();
    const documentLoadStyle = document.createElement("style");
    documentLoadStyle.textContent = documentLoadCSS;
    document.head.appendChild(documentLoadStyle);
-    replaceIcons();
+    const icon = document.querySelector(
-
+      'link[rel*="icon"]',
-    const observer = new MutationObserver((mutations) => {
+    )! as HTMLLinkElement;
-      for (const mutation of mutations) {
+    icon.href = icon48; // Change the icon
        if (
          mutation.type === "attributes" &&
          mutation.target instanceof HTMLLinkElement &&
          mutation.target.rel.includes("icon") &&
          mutation.attributeName === "href"
        ) {
          replaceIcons();
          return;
        }
      }
    });
    observer.observe(document.head, {
      subtree: true,
      attributes: true,
      attributeFilter: ["href"],
    });
    try {
      await initializeSettingsState();
@@ -110,25 +70,11 @@ async function init() {
        await plugins.initializePlugins();
      }
      if (settingsState.devMode) {
        initializeHideSensitiveToggle();
      }
      console.info(
        "[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
      );
-    } catch (error) {
+    } catch (error: any) {
      console.error(error);
    }
  }
 }
 function replaceIcons() {
  document
    .querySelectorAll<HTMLLinkElement>('link[rel*="icon"]')
    .forEach((link) => {
      if (link.href !== icon48) {
        link.href = icon48;
      }
    });
 }
@@ -1,38 +1,12 @@
 import browser from "webextension-polyfill";
 import semver from "semver";
 import type { SettingsState } from "@/types/storage";
 import { fetchNews } from "./background/news";
 import {
  initCloudSettingsAutoSync,
  performCloudSettingsDownloadWithRetry,
  performCloudSettingsUploadWithRetry,
  requestCloudSettingsDebouncedUpload,
  runCloudSettingsPoll,
 } from "./background/cloudSettingsAutoSync";
 /**
 * Session-only dev-mode override of the content API base.
 *
 * Stored in a module-level variable (not `chrome.storage`) so it is wiped
 * automatically when the browser/service-worker process restarts. Content
 * scripts re-sync this on every page load via `setDevApiBase` so the value
 * survives transient service-worker terminations within the same browser
 * session.
 */
 const DEFAULT_API_BASE = "https://betterseqta.org";
 let DEV_API_BASE: string | null = null;
 function apiBase(): string {
  return DEV_API_BASE ?? DEFAULT_API_BASE;
 }
 function reloadSeqtaPages() {
  const result = browser.tabs.query({});
  function open(tabs: any) {
    for (let tab of tabs) {
-      if (
+      if (tab.title.includes("SEQTA Learn")) {
        tab.title?.includes("SEQTA Learn") ||
        tab.title?.includes("SEQTA Engage")
      ) {
        browser.tabs.reload(tab.id);
      }
    }
@@ -40,514 +14,109 @@ function reloadSeqtaPages() {
  result.then(open, console.error);
 }
-/** Callback for sending a response back to the message sender */
+// @ts-ignore
 type MessageSender = { (response?: unknown): void };
 /** Accept API + GitHub fallback shapes; always return `{ success, data?: { themes } }`. */
 function normalizeFetchThemesResponse(json: unknown): {
  success: boolean;
  data?: { themes: unknown[] };
  error?: string;
 } {
  if (!json || typeof json !== "object") {
    return { success: false, error: "Invalid themes response" };
  }
  const body = json as Record<string, unknown>;
  if (body.success === false) {
    return {
      success: false,
      error: typeof body.error === "string" ? body.error : "Failed to fetch themes",
    };
  }
  const data = body.data;
  let themes: unknown[] | null = null;
  if (data && typeof data === "object" && !Array.isArray(data)) {
    const nested = (data as Record<string, unknown>).themes;
    if (Array.isArray(nested)) themes = nested;
  } else if (Array.isArray(data)) {
    themes = data;
  }
  if (!themes && Array.isArray(body.themes)) {
    themes = body.themes;
  }
  if (!themes) {
    return { success: false, error: "Themes list missing from response" };
  }
  return { success: true, data: { themes } };
 }
 function handleFetchThemes(request: any, sendResponse: MessageSender): boolean {
  const { token } = request;
  const apiUrl = `${apiBase()}/api/themes?type=betterseqta&limit=100&nocache=${Date.now()}`;
  const githubUrl = `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${Date.now()}`;
  const headers: Record<string, string> = {};
  if (token) headers["Authorization"] = `Bearer ${token}`;
  fetch(apiUrl, { cache: "no-store", headers })
    .then(async (r) => {
      const json = await r.json();
      if (!r.ok) {
        throw new Error(
          (json && typeof json === "object" && "error" in json && typeof (json as { error?: string }).error === "string"
            ? (json as { error: string }).error
            : null) ?? `Themes API HTTP ${r.status}`,
        );
      }
      return normalizeFetchThemesResponse(json);
    })
    .then(sendResponse)
    .catch((err) => {
      console.warn("[Background] fetchThemes API failed, trying GitHub fallback:", err?.message);
      fetch(githubUrl, { cache: "no-store" })
        .then(async (r) => {
          if (!r.ok) throw new Error(`GitHub fallback HTTP ${r.status}`);
          const data = await r.json();
          const themes = Array.isArray(data) ? data : (data?.themes ?? []);
          return normalizeFetchThemesResponse({ success: true, data: { themes } });
        })
        .then(sendResponse)
        .catch((fallbackErr) => {
          console.error("[Background] fetchThemes GitHub fallback error:", fallbackErr);
          sendResponse({ success: false, error: fallbackErr?.message });
        });
    });
  return true;
 }
 function handleFetchThemeDetails(request: any, sendResponse: MessageSender): boolean {
  const { themeId, token } = request;
  if (!themeId || typeof themeId !== "string") {
    sendResponse({ success: false, error: "Missing themeId" });
    return false;
  }
  const headers: Record<string, string> = {};
  if (token) headers["Authorization"] = `Bearer ${token}`;
  fetch(`${apiBase()}/api/themes/${themeId}`, { cache: "no-store", headers })
    .then((r) => r.json())
    .then(sendResponse)
    .catch((err) => {
      console.error("[Background] fetchThemeDetails error:", err);
      sendResponse({ success: false, error: err?.message });
    });
  return true;
 }
 function handleFetchFromUrl(request: any, sendResponse: MessageSender): boolean {
  const { url } = request;
  if (!url || typeof url !== "string") {
    sendResponse({ error: "Missing url" });
    return false;
  }
  fetch(url, { cache: "no-store" })
    .then((r) => r.json())
    .then((data) => sendResponse({ data }))
    .catch((err) => {
      console.error("[Background] fetchFromUrl error:", err);
      sendResponse({ error: err?.message });
    });
  return true;
 }
 async function parseJsonResponse(r: Response): Promise<any> {
  const text = await r.text();
  try {
    return text ? JSON.parse(text) : {};
  } catch {
    return {};
  }
 }
 function handleCloudReserveClient(request: any, sendResponse: MessageSender): boolean {
  const redirect_uri = request.redirect_uri ?? "https://accounts.betterseqta.org/auth/bsplus/callback";
  fetch("https://accounts.betterseqta.org/api/bsplus/client/reserve", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ redirect_uri }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? `Reserve failed (${r.status})` });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudReserveClient error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudLogin(request: any, sendResponse: MessageSender): boolean {
  const { client_id, redirect_uri, login, password } = request;
  if (!client_id || !redirect_uri || !login || !password) {
    sendResponse({ error: "Missing client_id, redirect_uri, login, or password" });
    return false;
  }
  fetch("https://accounts.betterseqta.org/api/bsplus/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ client_id, redirect_uri, login, password }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? "Login failed" });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudLogin error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudStartLogin(request: any, sendResponse: MessageSender): boolean {
  const { client_id, redirect_uri } = request;
  if (!client_id || !redirect_uri) {
    sendResponse({ error: "Missing client_id or redirect_uri" });
    return true;
  }
  const authorizeUrl = `https://accounts.betterseqta.org/login?redirect=${encodeURIComponent(`/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}`)}`;
  browser.tabs.create({ url: authorizeUrl }).then(() => {
    sendResponse({ success: true });
  }).catch((err) => {
    console.error("[Background] cloudStartLogin error:", err);
    sendResponse({ error: err?.message ?? "Failed to open login page" });
  });
  return true;
 }
 const CALLBACK_URL_PREFIX = "https://accounts.betterseqta.org/auth/bsplus/callback";
 function initCloudLoginCallbackListener() {
  browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url && changeInfo.url.startsWith(CALLBACK_URL_PREFIX)) {
      try {
        const url = new URL(changeInfo.url);
        const token = url.searchParams.get("token");
        const refreshToken = url.searchParams.get("refresh_token");
        const userId = url.searchParams.get("user_id");
        if (token && refreshToken) {
          // Store tokens
          void (async () => {
            try {
              await browser.storage.local.set({
                bsplus_token: token,
                bsplus_refresh_token: refreshToken,
              });
              // Fetch full user info
              const userRes = await fetch("https://accounts.betterseqta.org/api/auth/me", {
                headers: { Authorization: `Bearer ${token}` },
              });
              if (userRes.ok) {
                const user = await userRes.json();
                await browser.storage.local.set({ bsplus_user: user });
              } else if (userId) {
                await browser.storage.local.set({ bsplus_user: { id: userId } });
              }
              // Trigger cloud settings download
              void performCloudSettingsDownloadWithRetry(token).catch((err) => {
                console.warn("[Background] Cloud settings download after login:", err);
              });
            } catch (err) {
              console.error("[Background] Failed to process login callback:", err);
            }
          })();
          // Close the callback tab
          void browser.tabs.remove(tabId);
        }
      } catch (err) {
        console.error("[Background] Error parsing callback URL:", err);
      }
    }
  });
 }
 initCloudLoginCallbackListener();
 function handleCloudRefresh(request: any, sendResponse: MessageSender): boolean {
  const { refresh_token, client_id } = request;
  if (!refresh_token || !client_id) {
    sendResponse({ error: "Missing refresh_token or client_id" });
    return false;
  }
  fetch("https://accounts.betterseqta.org/api/bsplus/refresh", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ refresh_token, client_id }),
  })
    .then(async (r) => {
      const data = await parseJsonResponse(r);
      if (!r.ok) sendResponse({ error: data?.error ?? "Refresh failed" });
      else sendResponse(data);
    })
    .catch((err) => {
      console.error("[Background] cloudRefresh error:", err);
      sendResponse({ error: err?.message ?? "Network error" });
    });
  return true;
 }
 function handleCloudSettingsUpload(request: any, sendResponse: MessageSender): boolean {
  void (async () => {
    try {
      const token = request.token as string | undefined;
      if (!token) {
        sendResponse({ success: false, error: "Not authenticated" });
        return;
      }
      const res = await performCloudSettingsUploadWithRetry(token);
      sendResponse({
        success: res.success,
        error: res.error,
        updated_at: res.updated_at,
      });
    } catch (err) {
      console.error("[Background] cloudSettingsUpload error:", err);
      sendResponse({
        success: false,
        error: err instanceof Error ? err.message : "Upload failed",
      });
    }
  })();
  return true;
 }
 function handleCloudSettingsDownload(request: any, sendResponse: MessageSender): boolean {
  void (async () => {
    try {
      const token = request.token as string | undefined;
      if (!token) {
        sendResponse({ success: false, error: "Not authenticated" });
        return;
      }
      const res = await performCloudSettingsDownloadWithRetry(token);
      sendResponse({
        success: res.success,
        notFound: res.notFound,
        error: res.error,
        updated_at: res.updated_at,
      });
    } catch (err) {
      console.error("[Background] cloudSettingsDownload error:", err);
      sendResponse({
        success: false,
        error: err instanceof Error ? err.message : "Download failed",
      });
    }
  })();
  return true;
 }
 function handleCloudFavorite(request: any, sendResponse: MessageSender): boolean {
  const { themeId, token, action } = request;
  if (!themeId || !token) {
    sendResponse({ success: false, error: "Theme ID and token required" });
    return false;
  }
  const isFavorite = action === "favorite";
  fetch(`${apiBase()}/api/themes/${themeId}/favorite`, {
    method: isFavorite ? "POST" : "DELETE",
    headers: { Authorization: `Bearer ${token}` },
  })
    .then((r) => r.json())
    .then(sendResponse)
    .catch((err) => {
      console.error("[Background] cloudFavorite error:", err);
      sendResponse({ success: false, error: err?.message });
    });
  return true;
 }
 /** Handler for a message type; receives request, sendResponse, and optional sender (for tab routing) */
 type MessageHandler = {
  (request: any, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender): boolean | void;
 };
 function isSeqtaOrigin(origin: string): boolean {
  try {
    const u = new URL(origin);
    return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
  } catch {
    return false;
  }
 }
 function handleSetDevApiBase(request: any): boolean {
  const url = typeof request?.url === "string" ? request.url.trim() : null;
  if (url && /^https?:\/\//.test(url)) {
    DEV_API_BASE = url.replace(/\/$/, "");
  } else {
    DEV_API_BASE = null;
  }
  return false;
 }
 const MESSAGE_HANDLERS: Record<string, MessageHandler> = {
  reloadTabs: () => reloadSeqtaPages(),
  setDevApiBase: handleSetDevApiBase,
  extensionPages: (req) => {
    browser.tabs.query({}).then((tabs) => {
      for (const tab of tabs) {
        if (tab.url?.includes("chrome-extension://")) browser.tabs.sendMessage(tab.id!, req);
      }
    });
  },
  currentTab: (req, sendResponse) => {
    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
      browser.tabs.sendMessage(tabs[0].id!, req).then(sendResponse);
    });
    return true;
  },
  githubTab: () => {
    void browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
  },
  setDefaultStorage: () => SetStorageValue(getDefaultValues()),
  sendNews: (req, sendResponse) => {
    fetchNews(req.source ?? "australia", sendResponse);
    return true;
  },
  fetchThemes: handleFetchThemes,
  fetchThemeDetails: handleFetchThemeDetails,
  fetchFromUrl: handleFetchFromUrl,
  cloudReserveClient: handleCloudReserveClient,
  cloudLogin: handleCloudLogin,
  cloudStartLogin: handleCloudStartLogin,
  cloudRefresh: handleCloudRefresh,
  cloudFavorite: handleCloudFavorite,
  cloudSettingsUpload: handleCloudSettingsUpload,
  cloudSettingsDownload: handleCloudSettingsDownload,
  cloudSettingsPoll: () => {
    void runCloudSettingsPoll();
    return false;
  },
  cloudSettingsRequestDebouncedUpload: () => {
    requestCloudSettingsDebouncedUpload();
    return false;
  },
  getSeqtaSession: (req: { baseUrl?: string }, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender) => {
    (async () => {
      try {
        let tabId = sender?.tab?.id;
        let originForCheck: string | undefined = req.baseUrl;
        if (tabId == null) {
          const tabs = await browser.tabs.query({ active: true, lastFocusedWindow: true });
          const tab = tabs[0];
          if (!tab?.id || !tab.url) {
            sendResponse({ appLink: null });
            return;
          }
          tabId = tab.id;
          if (!originForCheck) originForCheck = new URL(tab.url).origin;
        } else if (!originForCheck && sender?.tab?.url) {
          originForCheck = new URL(sender.tab.url).origin;
        }
        if (!originForCheck || !isSeqtaOrigin(originForCheck)) {
          sendResponse({ appLink: null });
          return;
        }
        const reply = (await browser.tabs.sendMessage(tabId, { type: "fetchSeqtaAppLink" })) as
          | { appLink?: string | null }
          | undefined;
        const appLink = typeof reply?.appLink === "string" && reply.appLink.length > 0 ? reply.appLink : null;
        sendResponse({ appLink });
      } catch (err) {
        console.error("[Background] getSeqtaSession error:", err);
        sendResponse({ appLink: null });
      }
    })();
    return true;
  },
 };
 browser.runtime.onMessage.addListener(
-  // @ts-ignore - OnMessageListener expects literal true for async, we return boolean
+  (request: any, _: any, sendResponse: (response?: any) => void) => {
-  (request: any, sender: browser.Runtime.MessageSender, sendResponse: MessageSender) => {
+    switch (request.type) {
-    const handler = MESSAGE_HANDLERS[request.type];
+      case "reloadTabs":
-    if (handler) {
+        reloadSeqtaPages();
-      const result = handler(request, sendResponse, sender);
+        break;
-      return result === true;
+
      case "extensionPages":
        browser.tabs.query({}).then(function (tabs) {
          for (let tab of tabs) {
            if (tab.url?.includes("chrome-extension://")) {
              browser.tabs.sendMessage(tab.id!, request);
            }
          }
        });
        break;
      case "currentTab":
        browser.tabs
          .query({ active: true, currentWindow: true })
          .then(function (tabs) {
            browser.tabs
              .sendMessage(tabs[0].id!, request)
              .then(function (response) {
                sendResponse(response);
              });
          });
        return true;
      case "githubTab":
        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
        break;
      case "setDefaultStorage":
        SetStorageValue(DefaultValues);
        break;
      case "sendNews":
        fetchNews(request.source ?? "australia", sendResponse);
        return true;
      default:
        console.log("Unknown request type");
    }
-    console.log("Unknown request type");
+
    return false;
  },
 );
-function detectLowEndDevice(): boolean {
+const DefaultValues: SettingsState = {
-  // Check for low-end hardware indicators
+  onoff: true,
-  const lowCoreCount = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4;
+  animatedbk: true,
-  const lowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory <= 2;
+  bksliderinput: "50",
-  
+  transparencyEffects: false,
-  return lowCoreCount || lowMemory;
+  lessonalert: true,
-}
+  defaultmenuorder: [],
-
+  menuitems: {
-function getDefaultValues(): SettingsState {
+    assessments: { toggle: true },
-  const isLowEndDevice = detectLowEndDevice();
+    courses: { toggle: true },
-
+    dashboard: { toggle: true },
-  return {
+    documents: { toggle: true },
-    onoff: true,
+    forums: { toggle: true },
-    animatedbk: true,
+    goals: { toggle: true },
-    bksliderinput: "50",
+    home: { toggle: true },
-    transparencyEffects: false,
+    messages: { toggle: true },
-    lessonalert: true,
+    myed: { toggle: true },
-    defaultmenuorder: [],
+    news: { toggle: true },
-    menuitems: {
+    notices: { toggle: true },
-      assessments: { toggle: true },
+    portals: { toggle: true },
-      courses: { toggle: true },
+    reports: { toggle: true },
-      dashboard: { toggle: true },
+    settings: { toggle: true },
-      documents: { toggle: true },
+    timetable: { toggle: true },
-      forums: { toggle: true },
+    welcome: { toggle: true },
-      goals: { toggle: true },
+  },
-      home: { toggle: true },
+  menuorder: [],
-      messages: { toggle: true },
+  subjectfilters: {},
-      myed: { toggle: true },
+  selectedTheme: "",
-      news: { toggle: true },
+  selectedColor:
-      notices: { toggle: true },
+    "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
-      portals: { toggle: true },
+  originalSelectedColor: "",
-      reports: { toggle: true },
+  DarkMode: true,
-      settings: { toggle: true },
+  animations: true,
-      timetable: { toggle: true },
+  assessmentsAverage: true,
-      welcome: { toggle: true },
+  defaultPage: "home",
  shortcuts: [
    {
      name: "Outlook",
      enabled: true,
    },
-    menuorder: [],
+    {
-    subjectfilters: {},
+      name: "Office",
-    selectedTheme: "",
+      enabled: true,
-    selectedColor:
+    },
-      "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+    {
-    originalSelectedColor: "",
+      name: "Google",
-    DarkMode: true,
+      enabled: true,
-    animations: !isLowEndDevice,
+    },
-    assessmentsAverage: false,
+  ],
-    defaultPage: "home",
+  customshortcuts: [],
-    shortcuts: [
+  lettergrade: false,
-      {
+  newsSource: "australia",
-        name: "Outlook",
+};
        enabled: true,
      },
      {
        name: "Office",
        enabled: true,
      },
      {
        name: "Google",
        enabled: true,
      },
    ],
    customshortcuts: [],
    lettergrade: false,
    newsSource: "australia",
    iconOnlySidebar: false,
    adaptiveThemeColour: false,
    adaptiveThemeGradient: false,
    adaptiveThemeColourTransition: true,
    themeOfTheMonthDisabled: false,
    autoCloudSettingsSync: true,
  };
 }
 function SetStorageValue(object: any) {
  for (var i in object) {
@@ -555,118 +124,70 @@ function SetStorageValue(object: any) {
  }
 }
-/** One-time migration for 3.6.5: opt upgraders into Global Search + indexing + transparency defaults. */
+function convertBksliderToSpeed(bksliderinput: number): number {
-const GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY = "plugin.global-search.settings";
+  const minBase = 50;
-const GLOBAL_SEARCH_MIGRATION_VERSION = "3.6.5";
+  const maxBase = 150;
-async function migrateGlobalSearchDefaultsFor365Upgrade(
+  const scaledValue =
-  previousVersion: string,
+    2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
-): Promise<void> {
+  const baseSpeed = 3;
  try {
    const currRaw = browser.runtime.getManifest().version;
    const prev = semver.coerce(previousVersion);
    const curr = semver.coerce(currRaw);
    if (
      prev == null ||
      curr == null ||
      semver.lt(curr, GLOBAL_SEARCH_MIGRATION_VERSION) ||
      !semver.lt(prev, GLOBAL_SEARCH_MIGRATION_VERSION)
    ) {
      return;
    }
-    const got = await browser.storage.local.get(GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY);
+  const speed = baseSpeed / scaledValue;
-    const existing = (got[GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY] ?? {}) as Record<
+  return speed;
      string,
      unknown
    >;
    await browser.storage.local.set({
      [GLOBAL_SEARCH_PLUGIN_SETTINGS_KEY]: {
        ...existing,
        enabled: true,
        transparencyEffects: true,
        runIndexingOnLoad: true,
        passiveIndexing: true,
      },
    });
    console.info(
      `[BetterSEQTA+] Migration ${GLOBAL_SEARCH_MIGRATION_VERSION}: Global Search and related settings enabled (from ${previousVersion}).`,
    );
  } catch (e) {
    console.warn("[BetterSEQTA+] Global Search 3.6.5 settings migration failed:", e);
  }
 }
-/** One-time reset for 3.6.6: re-enable Theme of the Month for existing users. */
+async function migrateLegacySettings() {
-const THEME_OF_THE_MONTH_RESET_VERSION = "3.6.6";
+  const storage = (await browser.storage.local.get(
-
+    null,
-async function resetThemeOfTheMonthDisabledFor366Upgrade(
+  )) as unknown as SettingsState;
  previousVersion: string,
 ): Promise<void> {
  try {
    const currRaw = browser.runtime.getManifest().version;
    const prev = semver.coerce(previousVersion);
    const curr = semver.coerce(currRaw);
    if (
      prev == null ||
      curr == null ||
      semver.lt(curr, THEME_OF_THE_MONTH_RESET_VERSION) ||
      !semver.lt(prev, THEME_OF_THE_MONTH_RESET_VERSION)
    ) {
      return;
    }
  // Animated Background Migration
  if ("animatedbk" in storage || "bksliderinput" in storage) {
    const animatedSettings = {
      enabled: storage.animatedbk ?? true,
      speed: storage.bksliderinput
        ? convertBksliderToSpeed(parseFloat(storage.bksliderinput))
        : 1,
    };
    await browser.storage.local.set({
-      themeOfTheMonthDisabled: false,
+      "plugin.animated-background.settings": animatedSettings,
      themeOfTheMonthLastSeenId: undefined,
    });
    console.info(
      `[BetterSEQTA+] Migration ${THEME_OF_THE_MONTH_RESET_VERSION}: Theme of the Month re-enabled (from ${previousVersion}).`,
    );
  } catch (e) {
    console.warn(
      "[BetterSEQTA+] Theme of the Month 3.6.6 reset migration failed:",
      e,
    );
  }
 }
 /** 3.7.0: Close no longer marks entries seen — clear legacy dismissal keys. */
 const THEME_OF_THE_MONTH_RELOAD_VERSION = "3.7.0";
 async function resetThemeOfTheMonthDismissalFor370Upgrade(
  previousVersion: string,
 ): Promise<void> {
  try {
    const currRaw = browser.runtime.getManifest().version;
    const prev = semver.coerce(previousVersion);
    const curr = semver.coerce(currRaw);
    if (
      prev == null ||
      curr == null ||
      semver.lt(curr, THEME_OF_THE_MONTH_RELOAD_VERSION) ||
      !semver.lt(prev, THEME_OF_THE_MONTH_RELOAD_VERSION)
    ) {
      return;
    }
  // Assessments Average Migration
  if ("assessmentsAverage" in storage || "lettergrade" in storage) {
    const assessmentsSettings = {
      enabled: storage.assessmentsAverage ?? true,
      lettergrade: storage.lettergrade ?? false,
    };
    await browser.storage.local.set({
-      themeOfTheMonthLastSeenId: undefined,
+      "plugin.assessments-average.settings": assessmentsSettings,
      themeOfTheMonthDismissedMonth: undefined,
    });
    console.info(
      `[BetterSEQTA+] Migration ${THEME_OF_THE_MONTH_RELOAD_VERSION}: Theme of the Month shows again until dismissed for the month (from ${previousVersion}).`,
    );
  } catch (e) {
    console.warn(
      "[BetterSEQTA+] Theme of the Month 3.7.0 dismissal migration failed:",
      e,
    );
  }
  if ("selectedTheme" in storage) {
    const themesSettings = { enabled: true };
    await browser.storage.local.set({
      "plugin.themes.settings": themesSettings,
    });
  }
  if (storage.notificationCollector !== false) {
    await browser.storage.local.set({
      "plugin.notificationCollector.settings": { enabled: true },
    });
  } else {
    await browser.storage.local.set({
      "plugin.notificationCollector.settings": { enabled: false },
    });
  }
  const keysToRemove = [
    "animatedbk",
    "bksliderinput",
    "assessmentsAverage",
    "lettergrade",
  ];
  await browser.storage.local.remove(keysToRemove);
 }
 browser.runtime.onInstalled.addListener(function (event) {
@@ -675,13 +196,6 @@ browser.runtime.onInstalled.addListener(function (event) {
  if (event.reason == "install" || event.reason == "update") {
    browser.storage.local.set({ justupdated: true });
-  }
+    migrateLegacySettings();
  if (event.reason === "update" && event.previousVersion) {
    void migrateGlobalSearchDefaultsFor365Upgrade(event.previousVersion);
    void resetThemeOfTheMonthDisabledFor366Upgrade(event.previousVersion);
    void resetThemeOfTheMonthDismissalFor370Upgrade(event.previousVersion);
  }
 });
 initCloudSettingsAutoSync({ reloadSeqtaPages });
@@ -1,420 +0,0 @@
 import browser from "webextension-polyfill";
 import {
  applyDownloadedEnvelope,
  buildUploadPayload,
  BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY,
  BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY,
  CLOUD_SETTINGS_SYNC_SCHEMA_VERSION,
  isKeyIncludedInCloudUploadPayload,
  resolveThemeIdForPostSyncDownload,
  setKnownRemoteUpdatedAt,
 } from "@/seqta/utils/cloudSettingsSync";
 const ACCOUNTS_BASE = "https://accounts.betterseqta.org";
 export const CLOUD_SUMMARY_URL = `${ACCOUNTS_BASE}/api/user/cloud-summary`;
 const CLOUD_SETTINGS_SYNC_URL = `${ACCOUNTS_BASE}/api/bsplus/settings/sync`;
 const REFRESH_URL = `${ACCOUNTS_BASE}/api/bsplus/refresh`;
 const UPLOAD_DEBOUNCE_MS = 2000;
 const POLL_THROTTLE_MS = 24 * 60 * 60 * 1000;
 const POLL_THROTTLE_KEY = "bsplus_lastCloudPoll";
 type CloudSummaryResponse = {
  desqta?: unknown;
  bsplus?: { updated_at: string; schemaVersion: number } | null;
 };
 let reloadSeqtaPagesFn: (() => void) | null = null;
 let suppressAutoUploadDuringRestore = false;
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let pollInFlight: Promise<void> | null = null;
 function isAutoCloudSyncEnabled(all: Record<string, unknown>): boolean {
  return all.autoCloudSettingsSync !== false;
 }
 async function parseJsonResponse(r: Response): Promise<any> {
  const text = await r.text();
  try {
    return text ? JSON.parse(text) : {};
  } catch {
    return {};
  }
 }
 async function getAccessToken(): Promise<string | null> {
  const { bsplus_token } = await browser.storage.local.get("bsplus_token");
  return typeof bsplus_token === "string" && bsplus_token.length > 0 ? bsplus_token : null;
 }
 async function tryRefreshTokens(): Promise<boolean> {
  const result = await browser.storage.local.get([
    "bsplus_refresh_token",
    "bsplus_client_id",
    "bsplus_user",
  ]);
  const refresh_token = result.bsplus_refresh_token as string | undefined;
  const client_id = result.bsplus_client_id as string | undefined;
  if (!refresh_token || !client_id) return false;
  try {
    const r = await fetch(REFRESH_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refresh_token, client_id }),
    });
    const data = await parseJsonResponse(r);
    if (!r.ok || !data.access_token || !data.refresh_token) return false;
    await browser.storage.local.set({
      bsplus_token: data.access_token,
      bsplus_refresh_token: data.refresh_token,
      bsplus_user: data.user ?? result.bsplus_user,
    });
    return true;
  } catch {
    return false;
  }
 }
 function isServerTimestampNewer(serverIso: string, localIso: string | undefined): boolean {
  const a = Date.parse(serverIso);
  if (Number.isNaN(a)) return false;
  if (localIso === undefined || localIso === "") return true;
  const b = Date.parse(localIso);
  if (Number.isNaN(b)) return true;
  return a > b;
 }
 async function fetchCloudSummaryOnce(
  token: string,
 ): Promise<
  | { ok: true; data: CloudSummaryResponse }
  | { ok: false; unauthorized: boolean; error?: string }
 > {
  try {
    const r = await fetch(CLOUD_SUMMARY_URL, {
      headers: { Authorization: `Bearer ${token}` },
      cache: "no-store",
    });
    const data = (await parseJsonResponse(r)) as CloudSummaryResponse;
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: (data as { error?: string })?.error ?? `Summary failed (${r.status})`,
      };
    }
    return { ok: true, data };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Network error",
    };
  }
 }
 async function fetchCloudSummaryWithAuthRetry(
  token: string,
 ): Promise<CloudSummaryResponse | null> {
  let t = token;
  for (let attempt = 0; attempt < 2; attempt++) {
    const res = await fetchCloudSummaryOnce(t);
    if (res.ok) return res.data;
    if (res.unauthorized && attempt === 0) {
      const refreshed = await tryRefreshTokens();
      if (!refreshed) break;
      const next = await getAccessToken();
      if (!next) break;
      t = next;
      continue;
    }
    if (res.error) console.warn("[BS+ cloud sync] cloud-summary:", res.error);
    break;
  }
  return null;
 }
 type PutResult =
  | { ok: true; updated_at?: string }
  | { ok: false; unauthorized: boolean; error?: string };
 async function putSettingsOnce(token: string): Promise<PutResult> {
  try {
    const all = await browser.storage.local.get();
    const payload = buildUploadPayload(all as Record<string, unknown>);
    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    const data = await parseJsonResponse(r);
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: data?.error ?? `Upload failed (${r.status})`,
      };
    }
    const updated_at = data?.updated_at as string | undefined;
    await setKnownRemoteUpdatedAt(updated_at);
    return { ok: true, updated_at };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Upload failed",
    };
  }
 }
 export async function performCloudSettingsUploadWithRetry(
  token: string,
 ): Promise<{ success: boolean; error?: string; updated_at?: string }> {
  let t = token;
  for (let attempt = 0; attempt < 2; attempt++) {
    const res = await putSettingsOnce(t);
    if (res.ok) return { success: true, updated_at: res.updated_at };
    if (res.unauthorized && attempt === 0) {
      const refreshed = await tryRefreshTokens();
      if (!refreshed) return { success: false, error: "Not authenticated" };
      const next = await getAccessToken();
      if (!next) return { success: false, error: "Not authenticated" };
      t = next;
      continue;
    }
    return { success: false, error: res.error ?? "Upload failed" };
  }
  return { success: false, error: "Upload failed" };
 }
 type GetResult =
  | { ok: true; updated_at?: string }
  | { ok: false; notFound?: boolean; unauthorized: boolean; error?: string };
 async function getSettingsAndApplyOnce(token: string): Promise<GetResult> {
  try {
    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
      method: "GET",
      headers: { Authorization: `Bearer ${token}` },
      cache: "no-store",
    });
    const data = await parseJsonResponse(r);
    if (r.status === 401) return { ok: false, unauthorized: true };
    if (r.status === 404) {
      return {
        ok: false,
        notFound: true,
        unauthorized: false,
        error: "No settings backup found in the cloud",
      };
    }
    if (!r.ok) {
      return {
        ok: false,
        unauthorized: false,
        error: data?.error ?? `Download failed (${r.status})`,
      };
    }
    const themeIdToEnsure = resolveThemeIdForPostSyncDownload(data);
    await applyDownloadedEnvelope(data);
    if (themeIdToEnsure) {
      await browser.storage.local.set({
        [BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY]: themeIdToEnsure,
      });
    } else {
      await browser.storage.local.remove(BSPLUS_PENDING_THEME_ENSURE_AFTER_CLOUD_KEY);
    }
    reloadSeqtaPagesFn?.();
    const updated_at = data?.updated_at as string | undefined;
    await setKnownRemoteUpdatedAt(updated_at);
    return { ok: true, updated_at };
  } catch (e) {
    return {
      ok: false,
      unauthorized: false,
      error: e instanceof Error ? e.message : "Download failed",
    };
  }
 }
 export async function performCloudSettingsDownloadWithRetry(
  token: string,
 ): Promise<{ success: boolean; notFound?: boolean; error?: string; updated_at?: string }> {
  suppressAutoUploadDuringRestore = true;
  try {
    let t = token;
    for (let attempt = 0; attempt < 2; attempt++) {
      const res = await getSettingsAndApplyOnce(t);
      if (res.ok) return { success: true, updated_at: res.updated_at };
      if (res.unauthorized && attempt === 0) {
        const refreshed = await tryRefreshTokens();
        if (!refreshed) return { success: false, error: "Not authenticated" };
        const next = await getAccessToken();
        if (!next) return { success: false, error: "Not authenticated" };
        t = next;
        continue;
      }
      return {
        success: false,
        notFound: res.notFound,
        error: res.error ?? "Download failed",
      };
    }
    return { success: false, error: "Download failed" };
  } finally {
    suppressAutoUploadDuringRestore = false;
  }
 }
 async function maybeUploadBaseline(token: string): Promise<void> {
  const res = await performCloudSettingsUploadWithRetry(token);
  if (!res.success) {
    console.warn("[BS+ cloud sync] Baseline upload failed:", res.error);
  }
 }
 async function downloadIfNeeded(token: string): Promise<void> {
  const res = await performCloudSettingsDownloadWithRetry(token);
  if (!res.success && !res.notFound) {
    console.warn("[BS+ cloud sync] Auto-download failed:", res.error);
  }
 }
 async function runCloudSettingsPollInner(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) return;
  let token = await getAccessToken();
  if (!token) return;
  const summary = await fetchCloudSummaryWithAuthRetry(token);
  if (!summary) return;
  const bsplus = summary.bsplus;
  const watermark = all[BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY] as string | undefined;
  if (
    bsplus &&
    typeof bsplus.schemaVersion === "number" &&
    bsplus.schemaVersion > CLOUD_SETTINGS_SYNC_SCHEMA_VERSION
  ) {
    console.warn(
      "[BS+ cloud sync] Server schemaVersion newer than client; skip auto-download",
    );
    return;
  }
  token = (await getAccessToken()) ?? token;
  if (!watermark) {
    if (!bsplus?.updated_at) {
      await maybeUploadBaseline(token);
      return;
    }
    await downloadIfNeeded(token);
    return;
  }
  if (!bsplus?.updated_at) return;
  if (isServerTimestampNewer(bsplus.updated_at, watermark)) {
    await downloadIfNeeded(token);
  }
 }
 export function runCloudSettingsPoll(): Promise<void> {
  if (pollInFlight) return pollInFlight;
  pollInFlight = (async () => {
    try {
      const { [POLL_THROTTLE_KEY]: last } = await browser.storage.local.get(POLL_THROTTLE_KEY);
      if (Date.now() - (Number(last) || 0) < POLL_THROTTLE_MS) return;
      await browser.storage.local.set({ [POLL_THROTTLE_KEY]: Date.now() });
      await runCloudSettingsPollInner();
    } catch (e) {
      console.error("[BS+ cloud sync] Poll error:", e);
    } finally {
      pollInFlight = null;
    }
  })();
  return pollInFlight;
 }
 function clearUploadDebounce(): void {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = null;
  }
 }
 function scheduleDebouncedUpload(): void {
  if (suppressAutoUploadDuringRestore) return;
  clearUploadDebounce();
  debounceTimer = setTimeout(() => {
    debounceTimer = null;
    void runDebouncedUploadJob();
  }, UPLOAD_DEBOUNCE_MS);
 }
 /** Call after store theme install (and similar) so cloud upload runs even if storage events are flaky. */
 export function requestCloudSettingsDebouncedUpload(): void {
  void (async () => {
    const all = (await browser.storage.local.get()) as Record<string, unknown>;
    if (!isAutoCloudSyncEnabled(all)) return;
    if (suppressAutoUploadDuringRestore) return;
    if (!(await getAccessToken())) return;
    scheduleDebouncedUpload();
  })();
 }
 async function runDebouncedUploadJob(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) return;
  const token = await getAccessToken();
  if (!token) return;
  const res = await performCloudSettingsUploadWithRetry(token);
  if (!res.success) {
    console.warn("[BS+ cloud sync] Auto-upload failed:", res.error);
  }
 }
 async function syncAutoUploadWithStorage(): Promise<void> {
  const all = (await browser.storage.local.get()) as Record<string, unknown>;
  if (!isAutoCloudSyncEnabled(all)) {
    clearUploadDebounce();
  }
 }
 function onStorageChanged(
  changes: Record<string, browser.storage.StorageChange>,
  area: string,
 ): void {
  if (area !== "local") return;
  if (Object.prototype.hasOwnProperty.call(changes, "autoCloudSettingsSync")) {
    void syncAutoUploadWithStorage();
  }
  const keys = Object.keys(changes);
  if (!keys.some((k) => isKeyIncludedInCloudUploadPayload(k))) return;
  void (async () => {
    const all = (await browser.storage.local.get()) as Record<string, unknown>;
    if (!isAutoCloudSyncEnabled(all)) return;
    if (suppressAutoUploadDuringRestore) return;
    if (!(await getAccessToken())) return;
    scheduleDebouncedUpload();
  })();
 }
 export function initCloudSettingsAutoSync(deps: { reloadSeqtaPages: () => void }): void {
  reloadSeqtaPagesFn = deps.reloadSeqtaPages;
  browser.storage.onChanged.addListener(onStorageChanged);
 }
@@ -92,12 +92,8 @@ const rssFeedsByCountry: Record<string, string[]> = {
 *                           used to send the fetched news data back to the caller.
 *                           It's called with an object like `{ news: { articles: [...] } }`.
 */
-export async function fetchNews(source: string | undefined, sendResponse: any) {
+export async function fetchNews(source: string, sendResponse: any) {
-  const normalizedSource = typeof source === "string" && source.trim()
+  if (source === "australia") {
    ? source.trim()
    : "australia";
  if (normalizedSource === "australia") {
    const date = new Date();
    const from =
@@ -115,15 +111,18 @@ export async function fetchNews(source: string | undefined, sendResponse: any) {
  const parser = new Parser();
  let feeds: string[];
-  console.log("fetchNews", normalizedSource);
+  console.log("fetchNews", source);
-  if (rssFeedsByCountry[normalizedSource.toLowerCase()]) {
+  if (rssFeedsByCountry[source.toLowerCase()]) {
-    feeds = rssFeedsByCountry[normalizedSource.toLowerCase()];
+    // If the source is a country, fetch from predefined feeds
-  } else if (normalizedSource.startsWith("http")) {
+    feeds = rssFeedsByCountry[source.toLowerCase()];
-    feeds = [normalizedSource];
+  } else if (source.startsWith("http")) {
    // If the source is a URL, use it directly
    feeds = [source];
  } else {
-    console.warn("[BetterSEQTA+] Invalid news source, falling back to Australia", normalizedSource);
+    throw new Error(
-    return fetchNews("australia", sendResponse);
+      "Invalid source. Provide a country code or a valid RSS feed URL.",
    );
  }
  const articlesPromises = feeds.map(async (feedUrl) => {
@@ -17,43 +17,10 @@
@use "injected/popup.scss";
@font-face {
  font-family: "Roboto";
  src: url("https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: "IconFamily";
  src: url("@/resources/fonts/IconFamily.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
 }
@layer base, override;
@layer override {
  .legacy-root,
  .legacy-root * {
    font-family: var(--betterseqta-font-family, Rubik), sans-serif !important;
  }
  .iconFamily,
  .iconFamily *,
  [class~="iconFamily"],
  [class~="iconFamily"] * {
    font-family: "IconFamily" !important;
  }
 }
 html {
  background: #161616 !important;
  background-color: #161616;
-  font-family: Roboto, system-ui, -apple-system, sans-serif !important;
+  font-family: Rubik, Roboto !important;
 }
 .tooltip svg {
@@ -127,57 +94,3 @@ body:has(.outside-container:not(.hide))
  background: var(--text-primary) !important;
  color: var(--theme-primary) !important;
 }
 .fixed-tooltip {
  display: inline-block;
  z-index: 5 !important;
  width: 28px;
  background: none;
  box-shadow: none;
  padding: 2px;
  position: absolute;
 }
 .fixed-tooltip svg {
  fill: var(--theme-primary);
 }
 .tooltiptext-fixed {
  width: 120px;
  transform: scale(0);
  transition: transform 0.2s;
  transform-origin: top;
  background: var(--background-primary);
  color: var(--text-primary);
  text-align: center;
  border-radius: 6px;
  padding: 2px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  margin-left: -62px;
 }
 .tooltiptext-fixed::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--text-primary) transparent;
 }
 .tooltiptext-fixed.show {
  transform: scale(1);
  transform-origin: top;
  transition: transform 0.2s;
 }
 .tooltiptext-fixed p:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3) !important;
  transition: 200ms;
 }
 .tooltiptext-fixed p {
  border-radius: 8px !important;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 2px;
 }
@@ -116,7 +116,8 @@ body {
 }
 .cke_panel_listItem > a {
  &:hover {
    background: #3d3d3e !important;
  }
-}
+}
@@ -35,19 +35,9 @@
 }
 #menu .sub {
-  transition: transform 0.3s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.3s ease;
 }
 #menu > ul:has(li.hasChildren.active) > li.active {
  background: transparent !important;
 }
 /* Icon-only collapsed: submenu slides over narrow icons */
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
 body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
  transform: translateX(-70px);
 }
@@ -46,7 +46,6 @@ html.transparencyEffects {
  }
  .filter-select,
  .uiShortText.search,
  .report {
    backdrop-filter: blur(10px) !important;
  }
@@ -1,4 +0,0 @@
 declare const __ENABLE_GH_RELEASE_UPDATE_CHECK__: boolean;
 declare const __GH_RELEASE_REPO__: string;
 declare const __UPDATE_CHANNEL__: "stable" | "nightly";
 declare const __BUILD_LABEL__: string;
@@ -1,4 +0,0 @@
 {
    "last_updated": "2024-06-15T12:00:00Z",
    "whatsnew_html": "<div class=\"whatsnewTextContainer\" style=\"overflow-y: auto; font-size: 1.3rem; line-height: 1.6;\"><p>It has come to our attention that several schools have expressed concerns about BetterSEQTA+. This is very disheartening, so we have decided to release a statement on the situation.</p><p>To view our privacy policy, please click the <strong>shield icon</strong> in the settings&nbsp;menu, or <a href=\"https://betterseqta.org/privacy\" target=\"_blank\" rel=\"noopener noreferrer\" id=\"privacy-link\" style=\"color: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap;\">click here</a>.</p><p style=\"font-weight: bold; margin-top: 15px;\">We never collect any information from you, and aim to provide the best features possible.</p></div>"
 }
@@ -1,20 +1,7 @@
 <script lang="ts">
-  let {
+  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
    onClick,
    text,
    disabled = false,
  } = $props<{
    onClick: () => void;
    text: string;
    disabled?: boolean;
  }>();
 </script>
-<button
+<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
  type="button"
  onclick={onClick}
  disabled={disabled}
  class="px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:cursor-not-allowed disabled:opacity-50"
 >
  {text}
 </button>
@@ -1,158 +0,0 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { animate } from "motion";
  import { delay } from "@/seqta/utils/delay.ts";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  import CloudPfpAvatar from "@/interface/components/CloudPfpAvatar.svelte";
  const { hidePanel } = $props<{
    hidePanel: () => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let background = $state<HTMLDivElement | null>(null);
  let content = $state<HTMLDivElement | null>(null);
  let loginError = $state<string | null>(null);
  onMount(() => {
    const unsub = cloudAuth.subscribe((s) => {
      cloudState = s;
    });
    if (background && content) {
      animate(
        background,
        { opacity: [0, 1] },
        { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
      );
      animate(
        content,
        { scale: [0.4, 1], opacity: [0, 1] },
        { type: "spring", stiffness: 400, damping: 30 }
      );
    }
    const handleEscapeKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closePanel();
    };
    document.addEventListener("keydown", handleEscapeKey);
    return () => {
      unsub();
      document.removeEventListener("keydown", handleEscapeKey);
    };
  });
  async function closePanel() {
    if (!background || !content) return;
    animate(
      content,
      { scale: [1, 0.4], opacity: [1, 0] },
      { type: "spring", stiffness: 400, damping: 30 }
    );
    animate(
      background,
      { opacity: [1, 0] },
      { ease: [0.4, 0, 0.2, 1] }
    );
    await delay(400);
    hidePanel();
  }
  function handleBackgroundClick(event: MouseEvent) {
    if (event.target === background) closePanel();
  }
  async function handleSignIn() {
    loginError = null;
    const result = await cloudAuth.startLogin();
    if (result.success) {
      closePanel();
    } else {
      loginError = result.error ?? "Failed to open login page";
    }
  }
  async function handleLogout() {
    await cloudAuth.logout();
  }
  function getInitials(): string {
    const u = cloudState.user;
    if (!u) return "?";
    if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
    if (u.username) return u.username.slice(0, 2).toUpperCase();
    if (u.email) return u.email.slice(0, 2).toUpperCase();
    return "?";
  }
 </script>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
  bind:this={background}
  class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full cursor-pointer bg-black/50"
  onclick={handleBackgroundClick}
  onkeydown={(e) => { if (e.key === "Enter") handleBackgroundClick; }}
 >
  <div
    bind:this={content}
    class="p-5 w-[320px] bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
  >
    <h3 class="text-lg font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
    <p class="mt-0.5 text-sm text-zinc-500 dark:text-zinc-400">Account & sync</p>
    <div class="mt-4">
      {#if cloudState.isLoggedIn}
        <div class="flex flex-col gap-4">
          <div class="flex items-center gap-3">
            {#if cloudState.user?.pfpUrl}
              <CloudPfpAvatar
                user={cloudState.user}
                class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
              />
            {/if}
            {#if !cloudState.user?.pfpUrl}
              <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                {getInitials()}
              </div>
            {/if}
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-zinc-900 dark:text-white truncate">
                {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
              </p>
              {#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
                <p class="text-xs text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
              {/if}
            </div>
          </div>
          <button
            type="button"
            onclick={handleLogout}
            class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
          >
            Sign out
          </button>
        </div>
      {:else}
        <div class="flex flex-col gap-3">
          <p class="text-sm text-zinc-600 dark:text-zinc-400">
            Sign in to sync settings across devices, use your cloud profile picture, and more.
          </p>
          <button
            type="button"
            onclick={handleSignIn}
            class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
          >
            Sign in with BetterSEQTA Cloud
          </button>
          {#if loginError}
            <p class="text-xs text-red-600 dark:text-red-400">{loginError}</p>
          {/if}
          <p class="text-xs text-center text-zinc-400 dark:text-zinc-500">
            Opens accounts.betterseqta.org in a new tab
          </p>
        </div>
      {/if}
    </div>
  </div>
 </div>
@@ -1,44 +0,0 @@
 <script lang="ts">
  import { resolveCloudPfp } from "@/seqta/utils/cloudPfpCache";
  import type { CloudUser } from "@/seqta/utils/CloudAuth";
  const { user, class: className = "" } = $props<{
    user: CloudUser | null | undefined;
    class?: string;
  }>();
  let avatarSrc = $state<string | undefined>(undefined);
  let revokeUrl: string | undefined;
  $effect(() => {
    const u = user;
    if (revokeUrl) {
      URL.revokeObjectURL(revokeUrl);
      revokeUrl = undefined;
    }
    avatarSrc = undefined;
    if (!u?.pfpUrl || !u.id) return;
    let cancelled = false;
    void resolveCloudPfp(u.id, u.pfpUrl).then((resolved) => {
      if (cancelled || !resolved) return;
      if (resolved.fromCache) {
        revokeUrl = resolved.src;
      }
      avatarSrc = resolved.src;
    });
    return () => {
      cancelled = true;
      if (revokeUrl) {
        URL.revokeObjectURL(revokeUrl);
        revokeUrl = undefined;
      }
    };
  });
 </script>
 {#if avatarSrc}
  <img src={avatarSrc} alt="" class={className} />
 {/if}
@@ -1,120 +0,0 @@
 <script lang="ts">
  import browser from "webextension-polyfill";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
  import Button from "./Button.svelte";
  import Switch from "./Switch.svelte";
  let { showDisclaimer } = $props<{
    showDisclaimer: (onConfirm: () => void, onCancel: () => void) => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let busy = $state(false);
  let statusMessage = $state<string | null>(null);
  let statusError = $state<string | null>(null);
  $effect(() => {
    const unsub = cloudAuth.subscribe((s) => {
      cloudState = s;
    });
    return unsub;
  });
  async function upload() {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    busy = true;
    statusError = null;
    statusMessage = null;
    try {
      const res = (await browser.runtime.sendMessage({
        type: "cloudSettingsUpload",
        token,
      })) as { success?: boolean; error?: string };
      if (res?.success) {
        statusMessage = "Settings uploaded.";
      } else {
        statusError = res?.error ?? "Upload failed";
      }
    } catch (e) {
      statusError = e instanceof Error ? e.message : "Upload failed";
    } finally {
      busy = false;
    }
  }
  function promptDownload() {
    showDisclaimer(confirmDownload, () => {});
  }
  async function confirmDownload() {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    busy = true;
    statusError = null;
    statusMessage = null;
    try {
      const res = (await browser.runtime.sendMessage({
        type: "cloudSettingsDownload",
        token,
      })) as { success?: boolean; error?: string; notFound?: boolean };
      if (res?.success) {
        statusMessage = "Settings restored.";
      } else {
        statusError = res?.error ?? "Download failed";
      }
    } catch (e) {
      statusError = e instanceof Error ? e.message : "Download failed";
    } finally {
      busy = false;
    }
  }
 </script>
 {#if cloudState.isLoggedIn}
  <div class="flex flex-col gap-2.5">
    <div class="flex items-center justify-between gap-3">
      <div>
        <p class="text-[11px] font-semibold text-zinc-800 dark:text-zinc-100">Automatic sync</p>
        <p class="text-[10px] text-zinc-500 dark:text-zinc-400">Syncs settings when SEQTA loads and when you make changes</p>
      </div>
      <div class="shrink-0">
        <Switch
          state={$settingsState.autoCloudSettingsSync !== false}
          onChange={(isOn: boolean) => (settingsState.autoCloudSettingsSync = isOn)}
        />
      </div>
    </div>
    <div class="flex flex-wrap gap-2">
      <Button
        text={busy ? "Please wait\u2026" : "Upload"}
        onClick={upload}
        disabled={busy}
      />
      <Button
        text={busy ? "Please wait\u2026" : "Download"}
        onClick={promptDownload}
        disabled={busy}
      />
    </div>
    {#if statusMessage}
      <p class="text-[11px] text-emerald-600 dark:text-emerald-400">{statusMessage}</p>
    {/if}
    {#if statusError}
      <p class="text-[11px] text-red-600 dark:text-red-400">{statusError}</p>
    {/if}
    <p class="text-[10px] text-zinc-400 dark:text-zinc-500">
      Passwords and tokens are never synced.
      <a
        href="https://betterseqta.org/privacy"
        target="_blank"
        rel="noopener noreferrer"
        class="font-medium text-emerald-600 underline decoration-emerald-600/50 underline-offset-2 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 rounded-sm"
      >Privacy policy</a>
    </p>
  </div>
 {/if}
@@ -2,16 +2,6 @@ div:has(> #rbgcp-wrapper) {
  background: transparent !important;
 }
 #rbgcp-inputs-wrap {
  padding-top: 4px !important;
  margin-bottom: -8px;
  #rbgcp-hex-input,
  #rbgcp-input {
    height: 28px !important;
  }
 }
 .dark {
  #rbgcp-wrapper {
    div[style="padding-top: 11px; position: relative;"] div {
@@ -108,6 +108,7 @@ export default function Picker({
    <ColorPicker
      disableDarkMode={true}
      presets={presets}
      hideInputs={customOnChange ? false : true}
      value={customThemeColor ?? ""}
      onChange={(color: string) => {
        if (customOnChange) {
@@ -1,172 +0,0 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
  import browser from "webextension-polyfill";
  import QRCode from "qrcode";
  import { portal } from "../utils/portal";
  let showQrModal = $state(false);
  let qrDataUrl = $state<string | null>(null);
  let appLink = $state<string | null>(null);
  let errorMessage = $state<string | null>(null);
  let isLoading = $state(false);
  let isStandalone = $state(false);
  function isExtensionPage(): boolean {
    return (
      window.location.protocol === "chrome-extension:" ||
      window.location.protocol === "moz-extension:"
    );
  }
  function isSeqtaUrl(url: string): boolean {
    try {
      const u = new URL(url);
      return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
    } catch {
      return false;
    }
  }
  function normalizeBaseUrl(url: string): string {
    try {
      const u = new URL(url);
      return u.origin;
    } catch {
      return url;
    }
  }
  async function getAppLink(): Promise<string | null> {
    let baseUrl: string | undefined;
    if (isExtensionPage()) {
      baseUrl = undefined;
    } else {
      baseUrl = normalizeBaseUrl(window.location.href);
      if (!isSeqtaUrl(baseUrl)) return null;
    }
    const { appLink: link } = (await browser.runtime.sendMessage({
      type: "getSeqtaSession",
      baseUrl,
    })) as { appLink: string | null };
    return link ?? null;
  }
  async function generateQrCode() {
    errorMessage = null;
    qrDataUrl = null;
    isLoading = true;
    try {
      isStandalone = isExtensionPage();
      const link = await getAppLink();
      if (!link) {
        if (isStandalone) {
          errorMessage =
            "Open SEQTA Learn in a tab and log in, then open settings from that tab to generate a QR code.";
        } else {
          errorMessage = "Please log in to SEQTA Learn first.";
        }
        return;
      }
      const dataUrl = await QRCode.toDataURL(link, { width: 256, margin: 2 });
      appLink = link;
      qrDataUrl = dataUrl;
      showQrModal = true;
    } catch (err) {
      console.error("[ConnectMobileApp] Failed to generate QR:", err);
      errorMessage = "Failed to generate QR code. Please try again.";
    } finally {
      isLoading = false;
    }
  }
  function closeModal() {
    showQrModal = false;
    qrDataUrl = null;
    appLink = null;
    errorMessage = null;
  }
  function openAppLink() {
    if (appLink) window.location.href = appLink;
  }
  function downloadQrImage() {
    if (!qrDataUrl) return;
    const link = document.createElement("a");
    link.href = qrDataUrl;
    link.download = "desqta-login-qr.png";
    link.click();
  }
 </script>
 <div class="flex flex-col gap-1 items-end">
  <button
    type="button"
    onclick={generateQrCode}
    disabled={isLoading}
    class="px-5 py-1.5 text-[0.75rem] text-nowrap shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
    {isLoading ? "Generating..." : "Generate QR"}
  </button>
  {#if errorMessage}
    <p class="text-xs text-right text-amber-600 dark:text-amber-400">{errorMessage}</p>
  {/if}
 </div>
 {#if showQrModal && qrDataUrl}
  <div
    use:portal
    class="fixed cursor-auto inset-0 z-[10000] flex justify-center items-center bg-black/50 {isStandalone ? 'backdrop-blur-sm' : ''}"
    role="button"
    tabindex="-1"
    onclick={(e) => {
      if (e.target === e.currentTarget) closeModal();
    }}
    onkeydown={(e) => {
      if (e.key === "Escape") closeModal();
    }}
    transition:fade={{ duration: 150 }}>
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="p-6 mx-4 w-full max-w-sm bg-white rounded-2xl shadow-2xl dark:bg-zinc-800"
      onclick={(e) => e.stopPropagation()}
      onkeydown={(e) => e.stopPropagation()}>
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold text-zinc-900 dark:text-white">Scan with DesQTA</h2>
        <button
          type="button"
          onclick={closeModal}
          class="p-2 rounded-lg transition-colors text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-400 dark:hover:bg-zinc-700"
          aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex justify-center p-4 bg-white rounded-xl dark:bg-zinc-900">
        <img src={qrDataUrl} alt="SEQTA Learn app link QR code" class="w-64 h-64" />
      </div>
      <div class="flex flex-col gap-2 mt-4">
        <button
          type="button"
          onclick={openAppLink}
          class="px-4 py-2.5 w-full text-sm font-medium text-white bg-indigo-600 rounded-lg transition-colors dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
          Sign into DesQTA Desktop
        </button>
        <button
          type="button"
          onclick={downloadQrImage}
          class="px-4 py-2 w-full text-xs font-medium rounded-lg border transition-colors text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
          Download QR as image
        </button>
      </div>
      <p class="mt-2 text-sm text-center text-zinc-600 dark:text-zinc-400">
        Or scan this QR code with DesQTA on your phone.
      </p>
    </div>
  </div>
 {/if}
@@ -1,73 +0,0 @@
 <script lang="ts">
  import { fade } from 'svelte/transition';
  import { animate } from 'motion';
  let { onConfirm, onCancel, title, message } = $props<{
    onConfirm: () => void;
    onCancel: () => void;
    title: string;
    message: string;
  }>();
  let modalElement: HTMLElement;
  $effect(() => {
    if (modalElement) {
      animate(
        modalElement,
        { scale: [0.9, 1], opacity: [0, 1] },
        {
          type: 'spring',
          stiffness: 300,
          damping: 25
        }
      );
    }
  });
 </script>
 <div 
  class="flex fixed inset-0 z-[10000] justify-center items-center bg-black/50" 
  style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"
  onclick={(e) => {
    if (e.target === e.currentTarget) onCancel();
  }} 
  onkeydown={(e) => {
    if (e.key === 'Escape') onCancel();
  }} 
  role="button" 
  tabindex="-1" 
  transition:fade={{ duration: 150 }}
 >
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    bind:this={modalElement}
    class="p-4 mx-4 w-full max-w-md bg-white rounded-2xl shadow-2xl dark:bg-zinc-800" 
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
  >
    <h2 class="mb-3 text-xl font-bold text-gray-900 dark:text-white">
      {title}
    </h2>
    <div class="mb-6 text-lg text-gray-700 whitespace-pre-line dark:text-gray-300">
      {message}
    </div>
    <div class="flex gap-3 justify-end">
      <button
        onclick={onCancel}
        class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg transition-colors hover:bg-gray-200 dark:bg-zinc-700 dark:text-gray-200 dark:hover:bg-zinc-600"
      >
        Cancel
      </button>
      <button
        onclick={onConfirm}
        class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg shadow-inner transition-colors hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
      >
        Enable
      </button>
    </div>
  </div>
 </div>
@@ -1,141 +0,0 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
  import { onMount } from "svelte";
  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
  import { FONT_PRESETS, DEFAULT_FONT_ID, getFontPreset } from "@/seqta/ui/fonts/presets";
  import {
    applySelectedFont,
    buildFontPreviewCss,
    ensureFontPickerFontsLoaded,
  } from "@/seqta/ui/fonts/Manager";
  import { portal } from "@/interface/utils/portal";
  import { syncPageThemeToElement } from "@/interface/utils/syncPageTheme";
  import fontPickerStyles from "./fontPickerModal.css?inline";
  let { hidePicker } = $props<{ hidePicker: () => void }>();
  let rootEl = $state<HTMLElement | null>(null);
  let selectedId = $state(getFontPreset($settingsState.selectedFont).id);
  let styleEl: HTMLStyleElement | null = null;
  function selectFont(id: string) {
    selectedId = id;
    settingsState.selectedFont = id;
    applySelectedFont(id);
  }
  function resetToDefault() {
    selectFont(DEFAULT_FONT_ID);
  }
  function handleBackdropClick(event: MouseEvent) {
    if (event.target === event.currentTarget) hidePicker();
  }
  function syncTheme() {
    if (rootEl) syncPageThemeToElement(rootEl);
  }
  onMount(() => {
    void ensureFontPickerFontsLoaded();
    styleEl = document.getElementById(
      "betterseqta-font-picker-styles",
    ) as HTMLStyleElement | null;
    if (!styleEl) {
      styleEl = document.createElement("style");
      styleEl.id = "betterseqta-font-picker-styles";
      document.head.appendChild(styleEl);
    }
    styleEl.textContent = `${fontPickerStyles}\n${buildFontPreviewCss()}`;
    syncTheme();
    const themeObserver = new MutationObserver(() => syncTheme());
    themeObserver.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["style", "class"],
    });
    const handleEscapeKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") hidePicker();
    };
    document.addEventListener("keydown", handleEscapeKey);
    return () => {
      themeObserver.disconnect();
      document.removeEventListener("keydown", handleEscapeKey);
    };
  });
 </script>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
  bind:this={rootEl}
  use:portal={document.body}
  class="bsplus-font-picker-overlay bsplus-font-picker-root"
  onclick={handleBackdropClick}
  onkeydown={(event) => {
    if (event.key === "Enter" || event.key === " ") handleBackdropClick(event as unknown as MouseEvent);
  }}
  role="presentation"
  transition:fade={{ duration: 200 }}
 >
  <div
    class="bsplus-font-picker-dialog"
    onclick={(event) => event.stopPropagation()}
    onkeydown={(event) => event.stopPropagation()}
    role="dialog"
    aria-modal="true"
    aria-labelledby="font-picker-title"
  >
    <header class="bsplus-font-picker-header">
      <div class="bsplus-font-picker-header-actions">
        <button
          type="button"
          onclick={resetToDefault}
          disabled={selectedId === DEFAULT_FONT_ID}
          class="bsplus-font-picker-reset"
          aria-label="Reset font to default"
        >
          Reset to default
        </button>
        <button
          type="button"
          onclick={hidePicker}
          class="bsplus-font-picker-done"
          aria-label="Close font picker"
        >
          Done
        </button>
      </div>
      <div class="bsplus-font-picker-header-text">
        <h2 id="font-picker-title" class="bsplus-font-picker-title">
          Choose a font
        </h2>
        <p class="bsplus-font-picker-desc">
          Choose a typeface for SEQTA Learn.
        </p>
      </div>
    </header>
    <div class="bsplus-font-picker-list">
      {#each FONT_PRESETS as preset (preset.id)}
        <button
          type="button"
          onclick={() => selectFont(preset.id)}
          class="bsplus-font-picker-option {selectedId === preset.id ? 'is-selected' : ''}"
          data-font-id={preset.id}
        >
          <div class="bsplus-font-picker-option-head">
            <span class="bsplus-font-picker-option-name">{preset.name}</span>
            {#if selectedId === preset.id}
              <span class="bsplus-font-picker-badge">Selected</span>
            {/if}
          </div>
        </button>
      {/each}
    </div>
  </div>
 </div>
@@ -8,12 +8,12 @@
  let select: HTMLSelectElement;
 </script>
-<div class="select-wrapper relative w-full overflow-hidden rounded-2xl border shadow-2xl">
+<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
  <select
    bind:this={select}
    value={state}
    onchange={() => onChange(select.value)}
-    class="select-input w-full appearance-none border-none bg-transparent px-4 py-2.5 pr-10 text-[0.875rem] font-medium transition-colors"
+    class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
  >
    {#each options as option}
      <option value={option.value}>
@@ -21,62 +21,4 @@
      </option>
    {/each}
  </select>
  <span class="select-icon pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" aria-hidden="true">
    <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"></path>
    </svg>
  </span>
 </div>
 <style>
  .select-wrapper {
    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 72%, transparent);
    border-radius: 18px;
    color: var(--text-primary);
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }
  .select-wrapper:hover {
    background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%);
    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 88%, transparent);
  }
  .select-wrapper:focus-within {
    background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%);
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-offset-bg, var(--background-secondary)) 78%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
  .select-input {
    color: var(--text-primary);
    outline: none;
    text-overflow: ellipsis;
  }
  .select-input:hover,
  .select-input:focus {
    background: transparent;
  }
  .select-input option {
    background: var(--background-primary);
    color: var(--text-primary);
  }
  .select-icon {
    color: color-mix(in srgb, var(--text-primary) 60%, transparent);
  }
  .select-input {
    color-scheme: light;
  }
  :global(.dark) .select-input {
    color-scheme: dark;
  }
 </style>
@@ -1,79 +0,0 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
  import { animate } from "motion";
  import { onMount } from "svelte";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  let { onClose } = $props<{ onClose: () => void }>();
  let modalElement: HTMLElement;
  onMount(() => {
    return cloudAuth.subscribe((s) => {
      if (s.isLoggedIn) onClose();
    });
  });
  $effect(() => {
    if (modalElement) {
      animate(
        modalElement,
        { scale: [0.9, 1], opacity: [0, 1] },
        { type: "spring", stiffness: 300, damping: 25 },
      );
    }
  });
  async function handleSignIn() {
    await cloudAuth.startLogin();
  }
 </script>
 <div
  class="flex fixed inset-0 z-[99999] justify-center items-center bg-black/50"
  onclick={(e) => {
    if (e.target === e.currentTarget) onClose();
  }}
  onkeydown={(e) => {
    if (e.key === "Escape") onClose();
  }}
  role="button"
  tabindex="-1"
  transition:fade={{ duration: 150 }}
 >
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    bind:this={modalElement}
    class="p-4 mx-4 w-full max-w-md max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
  >
    <h2 class="mb-3 text-xl font-bold text-zinc-900 dark:text-white">
      Sign in to favorite themes
    </h2>
    <p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
      Sign in to the Theme Store to save favorites across devices, or create an account to get started.
    </p>
    <button
      type="button"
      onclick={handleSignIn}
      class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
    >
      Sign in with BetterSEQTA Cloud
    </button>
    <p class="mt-2 text-xs text-center text-zinc-400 dark:text-zinc-500">
      Opens accounts.betterseqta.org in a new tab
    </p>
    <div class="flex justify-end mt-4">
      <button
        type="button"
        onclick={onClose}
        class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
      >
        Close
      </button>
    </div>
  </div>
 </div>
@@ -9,7 +9,7 @@
  let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
-<div class="relative w-full min-w-0">
+<div class="relative mx-auto w-full max-w-lg">
  <input
    type="range"
    min={min}
@@ -3,7 +3,8 @@
  import './TabbedContainer.css';
  import { onMount } from 'svelte';
-  let { tabs, activeTab = $bindable(0) } = $props<{ tabs: { title: string, Content: any, props?: any }[]; activeTab?: number }>();
+  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
  let activeTab = $state(0);
  let containerRef: HTMLElement | null = null;
  let tabWidth = $state(0);
@@ -1,311 +0,0 @@
 /* Font picker — analytics design tokens & components */
 .bsplus-font-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  cursor: pointer;
  background: color-mix(in srgb, #000 52%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
 }
 .bsplus-font-picker-root {
  --bsplus-analytics-radius: 16px;
  --bsplus-analytics-radius-sm: 12px;
  --bsplus-analytics-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bsplus-analytics-surface: var(--background-primary, #ffffff);
  --bsplus-analytics-surface-2: var(--background-secondary, #f8fafc);
  --bsplus-analytics-text: var(--text-primary, #1a1a1a);
  --bsplus-analytics-muted: color-mix(
    in srgb,
    var(--bsplus-analytics-text) 55%,
    transparent
  );
  --bsplus-analytics-border: color-mix(
    in srgb,
    var(--theme-offset-bg, var(--background-secondary, #e2e8f0)) 78%,
    transparent
  );
  --bsplus-analytics-shadow: 0 5px 16px 6px rgba(0, 0, 0, 0.12);
  --bsplus-analytics-shadow-hover: 0 8px 24px 8px rgba(0, 0, 0, 0.16);
  --bsplus-analytics-accent: var(--better-main, #007bff);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--bsplus-analytics-text);
 }
 .bsplus-font-picker-root.dark {
  --bsplus-analytics-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.45);
  --bsplus-analytics-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.55);
 }
@keyframes bsplus-font-picker-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 .bsplus-font-picker-dialog {
  width: min(100%, 22rem);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: auto;
  border-radius: var(--bsplus-analytics-radius);
  background: var(--bsplus-analytics-surface);
  border: 1px solid var(--bsplus-analytics-border);
  box-shadow: var(--bsplus-analytics-shadow-hover);
  animation: bsplus-font-picker-in 0.45s var(--bsplus-analytics-ease) forwards;
 }
@media (min-width: 640px) {
  .bsplus-font-picker-dialog {
    width: min(92vw, 22rem);
  }
 }
@media (prefers-reduced-motion: reduce) {
  .bsplus-font-picker-dialog {
    animation: none;
  }
 }
 .bsplus-font-picker-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  flex-shrink: 0;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--bsplus-analytics-border);
 }
 .bsplus-font-picker-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
 }
 .bsplus-font-picker-header-text {
  min-width: 0;
 }
 .bsplus-font-picker-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bsplus-analytics-text);
 }
 .bsplus-font-picker-desc {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--bsplus-analytics-muted);
  line-height: 1.5;
 }
 .bsplus-font-picker-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: var(--bsplus-analytics-radius-sm);
  border: 2px solid var(--bsplus-analytics-border);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  color: var(--bsplus-analytics-text);
  transition:
    transform 0.2s var(--bsplus-analytics-ease),
    background 0.2s var(--bsplus-analytics-ease),
    border-color 0.2s var(--bsplus-analytics-ease),
    opacity 0.2s ease;
 }
 .bsplus-font-picker-reset:hover:not(:disabled) {
  transform: scale(1.02);
  background: color-mix(
    in srgb,
    var(--bsplus-analytics-surface-2) 80%,
    transparent
  );
 }
 .bsplus-font-picker-reset:active:not(:disabled) {
  transform: scale(0.98);
 }
 .bsplus-font-picker-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
 }
 .bsplus-font-picker-reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
 }
 .bsplus-font-picker-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.65rem 1.25rem;
  border-radius: var(--bsplus-analytics-radius-sm);
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  background: var(--bsplus-analytics-accent);
  color: var(--text-color, #ffffff);
  box-shadow: 0 2px 8px
    color-mix(in srgb, var(--bsplus-analytics-accent) 40%, transparent);
  transition:
    transform 0.2s var(--bsplus-analytics-ease),
    box-shadow 0.2s var(--bsplus-analytics-ease);
 }
 .bsplus-font-picker-done:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--bsplus-analytics-accent) 45%, transparent);
 }
 .bsplus-font-picker-done:active {
  transform: scale(0.97);
 }
 .bsplus-font-picker-done:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
 }
 .bsplus-font-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent)
    transparent;
 }
 .bsplus-font-picker-list::-webkit-scrollbar {
  width: 8px;
 }
 .bsplus-font-picker-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
 }
 .bsplus-font-picker-option {
  width: 100%;
  padding: 0.9rem 1rem;
  text-align: left;
  border-radius: var(--bsplus-analytics-radius-sm);
  border: 1px solid var(--bsplus-analytics-border);
  background: var(--bsplus-analytics-surface);
  box-shadow: var(--bsplus-analytics-shadow);
  cursor: pointer;
  font-family: Rubik, system-ui, sans-serif;
  flex-shrink: 0;
  transition:
    transform 0.25s var(--bsplus-analytics-ease),
    box-shadow 0.25s var(--bsplus-analytics-ease),
    border-color 0.2s ease,
    background 0.2s ease;
 }
 .bsplus-font-picker-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--bsplus-analytics-shadow-hover);
  background: color-mix(
    in srgb,
    var(--bsplus-analytics-surface-2) 55%,
    var(--bsplus-analytics-surface)
  );
 }
 .bsplus-font-picker-option:focus-visible {
  outline: none;
  box-shadow:
    var(--bsplus-analytics-shadow-hover),
    0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 30%, transparent);
 }
 .bsplus-font-picker-option.is-selected {
  border-color: color-mix(
    in srgb,
    var(--bsplus-analytics-accent) 45%,
    var(--bsplus-analytics-border)
  );
  background: color-mix(
    in srgb,
    var(--bsplus-analytics-accent) 10%,
    var(--bsplus-analytics-surface)
  );
  box-shadow: 0 4px 16px
    color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
 }
 .bsplus-font-picker-option-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
 }
 .bsplus-font-picker-root .bsplus-font-picker-option-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bsplus-analytics-text);
  text-align: left;
  min-width: 0;
 }
 .bsplus-font-picker-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: color-mix(
    in srgb,
    var(--bsplus-analytics-accent) 18%,
    transparent
  );
  color: var(--bsplus-analytics-accent);
 }
@@ -1,162 +0,0 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  import CloudPfpAvatar from "@/interface/components/CloudPfpAvatar.svelte";
  let { alwaysShowUserName = false, onClick = undefined } = $props<{
    alwaysShowUserName?: boolean;
    onClick?: () => void;
  }>();
  let cloudState = $state(cloudAuth.state);
  let open = $state(false);
  let dropdownEl: HTMLElement;
  onMount(() => {
    const unsubscribe = cloudAuth.subscribe((state) => {
      cloudState = state;
    });
    return unsubscribe;
  });
  function handleClickOutside(e: MouseEvent) {
    if (dropdownEl && !dropdownEl.contains(e.target as Node)) {
      open = false;
    }
  }
  $effect(() => {
    if (open) {
      const timer = setTimeout(() => {
        document.addEventListener("click", handleClickOutside);
      }, 0);
      return () => {
        clearTimeout(timer);
        document.removeEventListener("click", handleClickOutside);
      };
    }
  });
  async function handleLogout() {
    await cloudAuth.logout();
    open = false;
  }
  async function handleSignIn() {
    await cloudAuth.startLogin();
    open = false;
  }
  function handleButtonClick() {
    if (onClick) {
      onClick();
    } else {
      open = !open;
    }
  }
  function getInitials(): string {
    const u = cloudState.user;
    if (!u) return "?";
    if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
    if (u.username) return u.username.slice(0, 2).toUpperCase();
    if (u.email) return u.email.slice(0, 2).toUpperCase();
    return "?";
  }
 </script>
 <div class="relative flex items-center" bind:this={dropdownEl}>
  <button
    type="button"
    onclick={handleButtonClick}
    class="flex items-center gap-2 px-3 py-1.5 text-[0.75rem] rounded-lg shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white transition-colors duration-200"
  >
    {#if cloudState.isLoggedIn}
      {#if cloudState.user?.pfpUrl}
        <CloudPfpAvatar
          user={cloudState.user}
          class="w-5 h-5 rounded-full object-cover ring-1 ring-zinc-200 dark:ring-zinc-600"
        />
      {/if}
      {#if !cloudState.user?.pfpUrl}
        <div class="flex items-center justify-center w-5 h-5 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-[0.6rem]">
          {getInitials()}
        </div>
      {/if}
      <span
        class={alwaysShowUserName
          ? "inline max-w-[10rem] truncate text-[0.75rem]"
          : "hidden max-w-24 truncate sm:inline text-[0.75rem]"}
      >
        {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
      </span>
    {:else}
      <span class="text-sm font-IconFamily" aria-hidden="true">{'\ued53'}</span>
      <span class="text-[0.75rem]">Sign in</span>
    {/if}
  </button>
  {#if !onClick && open}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="absolute right-0 top-full mt-2 w-80 rounded-xl border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 shadow-xl z-[100] overflow-hidden"
      onclick={(e) => e.stopPropagation()}
    >
      <div class="p-4 border-b border-zinc-200 dark:border-zinc-600">
        <h3 class="text-xl font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
        <p class="text-base text-zinc-500 dark:text-zinc-400">Sync favorites across devices</p>
      </div>
      <div class="p-4">
        {#if cloudState.isLoggedIn}
          <div class="flex flex-col gap-3">
            <div class="flex items-center gap-3">
              {#if cloudState.user?.pfpUrl}
                <CloudPfpAvatar
                  user={cloudState.user}
                  class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
                />
              {/if}
              {#if !cloudState.user?.pfpUrl}
                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                  {getInitials()}
                </div>
              {/if}
              <div class="min-w-0 flex-1">
                <p class="text-base font-medium text-zinc-900 dark:text-white truncate">
                  {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
                </p>
                {#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
                  <p class="text-base text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
                {/if}
              </div>
            </div>
            <button
              type="button"
              onclick={handleLogout}
              class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
            >
              Sign out
            </button>
          </div>
        {:else}
          <div class="flex flex-col gap-3">
            <p class="text-sm text-zinc-600 dark:text-zinc-400">
              Sign in to sync favorites across devices.
            </p>
            <button
              type="button"
              onclick={handleSignIn}
              class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
            >
              Sign in with BetterSEQTA Cloud
            </button>
            <p class="text-xs text-center text-zinc-400 dark:text-zinc-500">
              Opens accounts.betterseqta.org in a new tab
            </p>
          </div>
        {/if}
      </div>
    </div>
  {/if}
 </div>
@@ -1,111 +0,0 @@
 <script lang="ts">
  import { cloudAuth } from "@/seqta/utils/CloudAuth";
  let {
    introText,
    onSuccess,
    compact = false,
  } = $props<{
    introText?: string;
    onSuccess?: () => void;
    /** Smaller padding/text for overlays (e.g. SignInToFavoriteModal) */
    compact?: boolean;
  }>();
  let username = $state("");
  let password = $state("");
  let loading = $state(false);
  let error = $state<string | null>(null);
  const inputClass = $derived(
    compact
      ? "w-full px-4 py-2 text-sm rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200"
      : "w-full px-4 py-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200",
  );
  const btnClass = $derived(
    compact
      ? "w-full px-4 py-2 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200"
      : "w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200",
  );
  const linkClass = $derived(
    compact
      ? "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
      : "inline-flex items-center justify-center gap-2 px-4 py-3 text-base font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200",
  );
  async function handleLogin() {
    if (loading) return;
    error = null;
    if (!username.trim() || !password) {
      error = "Please enter username and password";
      return;
    }
    loading = true;
    try {
      const result = await cloudAuth.login(username.trim(), password);
      if (result.success) {
        password = "";
        onSuccess?.();
      } else {
        error = result.error ?? "Login failed";
      }
    } finally {
      loading = false;
    }
  }
 </script>
 {#if introText}
  <p
    class="mb-4 text-zinc-600 dark:text-zinc-400 {compact ? 'text-sm' : 'text-base'}"
  >
    {introText}
  </p>
 {/if}
 <form
  class="flex flex-col gap-3"
  autocomplete="off"
  onsubmit={(e) => {
    e.preventDefault();
    handleLogin();
  }}
 >
  <input
    type="text"
    name="betterseqta-cloud-username"
    autocomplete="off"
    placeholder="Email or username"
    bind:value={username}
    disabled={loading}
    readonly
    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
    class={inputClass}
  />
  <input
    type="password"
    name="betterseqta-cloud-password"
    autocomplete="new-password"
    placeholder="Password"
    bind:value={password}
    disabled={loading}
    readonly
    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
    class={inputClass}
  />
  {#if error}
    <p class="text-red-600 dark:text-red-400 {compact ? 'text-sm' : 'text-base'}">{error}</p>
  {/if}
  <button type="submit" disabled={loading} class={btnClass}>
    {loading ? "Signing in..." : "Sign in"}
  </button>
  <a
    href="https://accounts.betterseqta.org/register"
    target="_blank"
    rel="noopener noreferrer"
    class={linkClass}
  >
    Create account
  </a>
 </form>
@@ -1,27 +1,20 @@
 <script lang="ts">
  import { fade } from 'svelte/transition';
-  import type { ThemeCoverSlide } from '@/interface/types/Theme';
+  import type { Theme } from '@/interface/types/Theme';
  import emblaCarouselSvelte from 'embla-carousel-svelte';
  import Autoplay from 'embla-carousel-autoplay';
-  let { slides, setDisplayTheme } = $props<{
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void }>();
    slides: ThemeCoverSlide[];
    setDisplayTheme: (theme: import('@/interface/types/Theme').Theme) => void;
  }>();
  let emblaApi = $state();
-  const options = $derived({ loop: slides.length > 1 });
+  const options = { loop: true };
-  const plugins = $derived(
+  const plugins = [
-    slides.length > 1
+    Autoplay({
-      ? [
+      delay: 5000,
-          Autoplay({
+      stopOnInteraction: false,
-            delay: 5000,
+      stopOnMouseEnter: true
-            stopOnInteraction: false,
+    })
-            stopOnMouseEnter: true,
+  ];
          }),
        ]
      : [],
  );
  function onInit(event: CustomEvent) {
    emblaApi = event.detail;
@@ -33,77 +26,41 @@
  const slideNext = () => emblaApi?.scrollNext();
 </script>
-{#if slides.length > 0}
+{#if coverThemes.length > 0}
  <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
-    <div
+    <div 
-      class="w-full aspect-[5/1] max-h-[500px]"
+      class="w-full aspect-8/3" 
-      use:emblaCarouselSvelte={{ options, plugins }}
+      use:emblaCarouselSvelte={{ options, plugins }} 
      onemblaInit={onInit}
    >
      <div class="flex">
-        {#each slides as slide (slide.imageUrl + slide.title + (slide.subtitle ?? ''))}
+        {#each coverThemes as theme}
          <div
            class="relative flex-[0_0_100%] cursor-pointer rounded-xl overflow-clip"
            role="button"
            tabindex="0"
-            onkeydown={(e) => {
+            onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
-              if (e.key === 'Enter') setDisplayTheme(slide.openTheme);
+            onclick={() => setDisplayTheme(theme)}
            }}
            onclick={() => setDisplayTheme(slide.openTheme)}
          >
-            <img src={slide.imageUrl} alt="" class="object-cover w-full h-full" />
+            <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
-            {#if slide.badgeFeatured === true}
+            <div class='absolute bottom-0 left-0 p-8 z-[1]'>
-              <div class="absolute top-4 left-4 z-[2] pointer-events-none">
+              <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
-                <span
+              <p class='text-lg text-white'>{theme.description}</p>
                  class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
                  aria-label="Featured theme"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  Featured
                </span>
              </div>
            {/if}
            <div class="absolute bottom-0 left-0 p-8 z-[1]">
              <h2 class="text-4xl font-bold text-white">{slide.title}</h2>
              {#if slide.subtitle}
                <p class="text-lg font-medium text-white/95 mt-1 line-clamp-2">{slide.subtitle}</p>
              {/if}
              {#if slide.openTheme.author && !slide.subtitle}
                <p class="text-sm text-white/90 mt-1 mb-1 line-clamp-1">By {slide.openTheme.author}</p>
              {/if}
              {#if slide.openTheme.description && !slide.subtitle}
                <p class="text-lg text-white line-clamp-3">{slide.openTheme.description}</p>
              {/if}
            </div>
-            <div class="absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80"></div>
+            <div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>
          </div>
        {/each}
      </div>
    </div>
-    <div class="flex absolute right-2 bottom-2 z-10 gap-2">
+    <!-- Navigation buttons -->
-      <button
+    <div class='flex absolute right-2 bottom-2 z-10 gap-2'>
-        aria-label="Previous"
+      <button aria-label="Previous" onclick={slidePrev} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
        onclick={slidePrev}
        type="button"
        class="flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800 transition-all duration-200"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
        </svg>
      </button>
-      <button
+      <button aria-label="Next" onclick={slideNext} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
        aria-label="Next"
        onclick={slideNext}
        type="button"
        class="flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800 transition-all duration-200"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
@@ -3,7 +3,6 @@
  import logoDark from '@/resources/icons/betterseqta-light-full.png';
  import { closeStore } from '@/seqta/ui/renderStore'
  import browser from 'webextension-polyfill';
  import CloudHeader from './CloudHeader.svelte';
  // Props
  let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
@@ -40,8 +39,6 @@
      >
        Backgrounds
      </button>
      <CloudHeader />
    </div>
    <div class="flex relative gap-2">
@@ -1,201 +1,19 @@
 <script lang="ts">
  import type { Theme } from '@/interface/types/Theme'
-  import {
+
-    masterGridDisplayDownloadCount,
+  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
-    gridCardPreviewImageUrls,
+
  } from '@/interface/utils/themeStoreFlavours'
  import { fade } from 'svelte/transition';
  import { onMount } from 'svelte';
  import emblaCarouselSvelte from 'embla-carousel-svelte';
  import Autoplay from 'embla-carousel-autoplay';
  let { theme, onClick, toggleFavorite, isLoggedIn, onRequestSignIn, allStoreThemeRows } = $props<{
    theme: Theme;
    onClick: () => void;
    toggleFavorite: (theme: Theme) => void;
    isLoggedIn: boolean;
    onRequestSignIn?: () => void;
    /** Raw API themes (includes hidden slaves) for aggregated master download totals */
    allStoreThemeRows?: Theme[];
  }>();
  const displayDownloadCount = $derived(
    allStoreThemeRows != null
      ? masterGridDisplayDownloadCount(theme, allStoreThemeRows)
      : (theme.download_count ?? 0),
  );
  const gridRotatorUrls = $derived(gridCardPreviewImageUrls(theme, allStoreThemeRows));
  /** Mirrors CoverSwiper (featured bar): horizontal slides + autoplay */
  function prefersReducedMotion(): boolean {
    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }
  /** Read once synchronously where `window` exists so reduced-motion doesn’t briefly mount carousel */
  let allowSlideAutoplay = $state(!prefersReducedMotion());
  const gridEmblaKey = $derived(gridRotatorUrls.join('|'));
  const gridEmblaOptions = $derived({ loop: gridRotatorUrls.length > 1 });
  const gridEmblaPlugins = $derived.by(() => {
    if (!allowSlideAutoplay || gridRotatorUrls.length <= 1) return [];
    return [
      Autoplay({
        delay: 2000,
        stopOnInteraction: false,
        stopOnMouseEnter: true,
      }),
    ];
  });
  let menuOpen = $state(false);
  let menuRef: HTMLDivElement;
  onMount(() => {
    const closeMenu = (e: MouseEvent) => {
      if (menuOpen && menuRef && !menuRef.contains(e.target as Node)) {
        menuOpen = false;
      }
    };
    document.addEventListener('click', closeMenu);
    return () => document.removeEventListener('click', closeMenu);
  });
  function handleCardClick(e: MouseEvent) {
    if ((e.target as HTMLElement).closest('[data-theme-menu]')) return;
    onClick();
  }
  function handleFavoriteClick(e: MouseEvent) {
    e.stopPropagation();
    if (isLoggedIn) {
      toggleFavorite(theme);
    } else {
      onRequestSignIn?.();
    }
    menuOpen = false;
  }
 </script>
-<div
+<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
-  class="relative z-0 hover:z-20 w-full cursor-pointer"
+  <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
-  role="button"
+    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
-  tabindex="-1"
+      {theme.name}
  onkeydown={onClick}
  onclick={handleCardClick}
 >
  <div
    class="bg-gray-50 w-full transition-all duration-500 ease-out relative group flex flex-col rounded-xl overflow-clip border hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] dark:hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto"
    transition:fade
  >
    {#if theme.featured === true}
      <div class="absolute top-2 left-2 z-20 pointer-events-none">
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
          aria-label="Featured theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
          </svg>
          Featured
        </span>
      </div>
    {/if}
    <!-- Menu dropdown -->
    <div class="absolute top-2 right-2 z-20" data-theme-menu bind:this={menuRef}>
      <button
        type="button"
        class="flex justify-center items-center w-8 h-8 rounded-lg bg-black/40 hover:bg-black/60 text-white transition-all"
        onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
        aria-label="Theme options"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
      </button>
      {#if menuOpen}
        <div
          class="absolute right-0 top-full mt-1 py-1 min-w-[140px] rounded-lg bg-white dark:bg-zinc-800 shadow-lg border border-zinc-200 dark:border-zinc-700"
          role="menu"
        >
          <button
            type="button"
            class="flex gap-2 items-center w-full px-3 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700"
            role="menuitem"
            onclick={handleFavoriteClick}
            title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill={theme.is_favorited ? 'currentColor' : 'none'}
              stroke="currentColor"
              stroke-width="2"
              class="w-5 h-5 {theme.is_favorited ? 'text-red-500' : ''}"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
            {theme.is_favorited ? 'Favorited' : 'Favorite'}
          </button>
        </div>
      {/if}
    </div>
    <div class="absolute bottom-1 left-3 right-3 z-10 mb-1 flex flex-col gap-0.5">
      <span class="text-xl font-bold text-white drop-shadow-md">{theme.name}</span>
      {#if theme.author}
        <span class="text-xs text-white/85 drop-shadow-md line-clamp-1">By {theme.author}</span>
      {/if}
      <div class="flex gap-3 text-xs font-medium text-white/90 drop-shadow-sm">
        <span class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
          </svg>
          {displayDownloadCount.toLocaleString()}
        </span>
        <span class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-3.5 h-3.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          {(theme.favorite_count ?? 0).toLocaleString()}
        </span>
      </div>
    </div>
    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
-    {#if gridRotatorUrls.length === 0}
+    <div class='w-full'>
-      <div class="relative w-full h-48 overflow-hidden rounded-md bg-zinc-200 dark:bg-zinc-700" aria-hidden="true"></div>
+      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
-    {:else if !allowSlideAutoplay || gridRotatorUrls.length === 1}
+    </div>
      <div class="relative w-full h-48 overflow-hidden rounded-md">
        <img
          src={gridRotatorUrls[0] ?? theme.marqueeImage ?? theme.coverImage}
          alt=""
          class="object-cover w-full h-full"
          draggable="false"
        />
      </div>
    {:else}
      {#key gridEmblaKey}
        <div
          class="relative w-full h-48 overflow-hidden rounded-md"
          use:emblaCarouselSvelte={{
            options: gridEmblaOptions,
            plugins: gridEmblaPlugins,
          }}
        >
          <div class="flex h-full">
            {#each gridRotatorUrls as url (url)}
              <div class="relative flex-[0_0_100%] min-w-0 h-full shrink-0">
                <img
                  src={url}
                  alt=""
                  class="object-cover w-full h-full select-none"
                  draggable="false"
                />
              </div>
            {/each}
          </div>
        </div>
      {/key}
    {/if}
  </div>
 </div>
@@ -2,49 +2,22 @@
  import type { Theme } from '@/interface/types/Theme'
  import ThemeCard from './ThemeCard.svelte';
-  let {
+  let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
    themes,
    searchTerm,
    setDisplayTheme,
    toggleFavorite,
    isLoggedIn,
    onRequestSignIn,
    allStoreThemeRows,
  } = $props<{
    themes: Theme[];
    searchTerm: string;
    setDisplayTheme: (theme: Theme) => void;
    toggleFavorite: (theme: Theme) => void;
    isLoggedIn: boolean;
    onRequestSignIn?: () => void;
    /** Raw API list (includes `slave` rows) for master download aggregation */
    allStoreThemeRows?: Theme[];
  }>();
-  let filteredThemes = $derived(themes.filter((theme: Theme) => {
+  let filteredThemes = $derived(themes.filter((theme: Theme) =>
-    const q = searchTerm.toLowerCase();
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
-    const name = (theme.name ?? '').toLowerCase();
+  ));
    const description = (theme.description ?? '').toLowerCase();
    return name.includes(q) || description.includes(q);
  }));
 </script>
 <div class="relative" >
  <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
    {#each filteredThemes as theme (theme.id)}
-      <ThemeCard
+      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
        {theme}
        onClick={() => setDisplayTheme(theme)}
        {toggleFavorite}
        {isLoggedIn}
        {onRequestSignIn}
        {allStoreThemeRows}
      />
    {/each}
    {#if filteredThemes.length !== 0}
-      <a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
-        <div class="bg-zinc-50 h-48 w-full transition-all duration-500 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1]">
+        <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
          <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
          <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
            Got a Theme Idea?
@@ -59,7 +32,7 @@
    <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
      <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
-      <a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
        Show me how!
      </a>
    </div>
@@ -1,14 +1,11 @@
 <script lang="ts">
  import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
  import { onDestroy, onMount } from 'svelte'
  import browser from 'webextension-polyfill'
  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import { OpenStorePage } from '@/seqta/ui/renderStore'
  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  import { cloudAuth } from '@/seqta/utils/CloudAuth'
  import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte'
  const themeManager = ThemeManager.getInstance();
@@ -16,17 +13,6 @@
  let { isEditMode } = $props<{ isEditMode: boolean }>();
  let isDragging = $state(false);
  let tempTheme = $state(null);
  let favoriteStatus = $state<Record<string, boolean>>({});
  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
  let prevLoggedIn = $state(false);
  let showSignInModal = $state(false);
  cloudAuth.subscribe((s) => {
    const now = s.isLoggedIn;
    if (now && !prevLoggedIn && themes) void fetchThemes();
    prevLoggedIn = now;
    cloudLoggedIn = now;
  });
  const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
    if (isEditMode) return;
@@ -85,7 +71,7 @@
      try {
        const result = JSON.parse(event.target?.result as string);
        tempTheme = result;
-        await themeManager.installTheme(result, { fromStore: false });
+        await themeManager.installTheme(result);
        await fetchThemes();
      } catch (error) {
        console.error('Error parsing file:', error);
@@ -101,55 +87,11 @@
      themes: await themeManager.getAvailableThemes(),
      selectedTheme: themeManager.getSelectedThemeId() || '',
    }
    if (themes && cloudLoggedIn) {
      const token = await cloudAuth.getStoredToken();
      if (token) {
        const status: Record<string, boolean> = {};
        await Promise.all(
          themes.themes.map(async (t) => {
            try {
              const res = (await browser.runtime.sendMessage({
                type: 'fetchThemeDetails',
                themeId: t.id,
                token,
              })) as { success?: boolean; data?: { theme?: { is_favorited?: boolean } } };
              if (res?.success && res?.data?.theme) {
                status[t.id] = !!res.data.theme.is_favorited;
              }
            } catch {
              // Theme may not exist on store (e.g. locally created)
            }
          })
        );
        favoriteStatus = status;
      }
    } else {
      favoriteStatus = {};
    }
  }
  const handleToggleFavorite = async (theme: CustomTheme, e: MouseEvent) => {
    e.stopPropagation();
    if (!cloudLoggedIn) {
      showSignInModal = true;
      return;
    }
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    const isFavorite = !favoriteStatus[theme.id];
    const result = (await browser.runtime.sendMessage({
      type: 'cloudFavorite',
      themeId: theme.id,
      token,
      action: isFavorite ? 'favorite' : 'unfavorite',
    })) as { success?: boolean };
    if (result?.success) {
      favoriteStatus = { ...favoriteStatus, [theme.id]: isFavorite };
    }
  }
  onMount(async () => {
    await fetchThemes();
    themeUpdates.addListener(fetchThemes);
  })
@@ -202,18 +144,6 @@
          {/if}
          {#if !isEditMode}
            <div
              class="flex absolute right-24 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 group-hover:opacity-100 group-hover:top-1/2 {(favoriteStatus[theme.id] ?? false) ? 'text-red-400' : 'text-white/80'} bg-black/50"
              onclick={(event) => handleToggleFavorite(theme, event)}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleToggleFavorite(theme, event as any) }}
              role="button"
              tabindex="-1"
              title={cloudLoggedIn ? ((favoriteStatus[theme.id] ?? false) ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={(favoriteStatus[theme.id] ?? false) ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </div>
            <div
              class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
@@ -281,7 +211,3 @@
    </button>
  </div>
 </div>
 {#if showSignInModal}
  <SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
 {/if}
@@ -1,74 +1,43 @@
 <script lang="ts">
-  import TabbedContainer from "../components/TabbedContainer.svelte";
+  import TabbedContainer from '../components/TabbedContainer.svelte';
-  import Settings from "./settings/general.svelte";
+  import Settings from './settings/general.svelte';
-  import Shortcuts from "./settings/shortcuts.svelte";
+  import Shortcuts from './settings/shortcuts.svelte';
-  import Theme from "./settings/theme.svelte";
+  import Theme from './settings/theme.svelte';
-  import browser from "webextension-polyfill";
+  import browser from 'webextension-polyfill';
-  import { standalone as StandaloneStore } from "../utils/standalone.svelte";
+  import { standalone as StandaloneStore } from '../utils/standalone.svelte';
-  import { onMount } from "svelte";
+  import { onMount } from 'svelte'
-  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
-  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
+  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
-  import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
+  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
  //import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
-  import ColourPicker from "../components/ColourPicker.svelte";
+  import ColourPicker from '../components/ColourPicker.svelte'
-  import FontPickerModal from "../components/FontPickerModal.svelte";
+  import { settingsPopup } from '../hooks/SettingsPopup'
  import CloudPanel from "../components/CloudPanel.svelte";
  import DisclaimerModal from "../components/DisclaimerModal.svelte";
  import { settingsPopup } from "../hooks/SettingsPopup";
  import {
    checkGithubReleaseUpdate,
    dismissNightlyUpdate,
    isGhReleaseUpdateCheckEnabled,
    type GhReleaseUpdateInfo,
  } from "@/utils/githubReleaseUpdate";
-  let devModeSequence = "";
+  let devModeSequence = '';
  let settingsActiveTab = $state(0);
  let showDisclaimerModal = $state(false);
  let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
  let disclaimerTitle = $state("Confirm");
  let disclaimerMessage = $state("");
  const ghReleaseUpdateEnabled = isGhReleaseUpdateCheckEnabled();
  let ghReleaseUpdate = $state<GhReleaseUpdateInfo | null>(null);
  const openGhRelease = () => {
    const url = ghReleaseUpdate?.url
      ?? "https://github.com/BetterSEQTA/BetterSEQTA-Plus/releases";
    if (ghReleaseUpdate?.available) {
      dismissNightlyUpdate();
    }
    window.open(url, "_blank");
    closeExtensionPopup();
  };
  const handleDevModeToggle = () => {
    const handleKeyDown = (event: KeyboardEvent) => {
      devModeSequence += event.key.toLowerCase();
-      if (devModeSequence.includes("dev")) {
+      if (devModeSequence.includes('dev')) {
-        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener('keydown', handleKeyDown);
        settingsState.devMode = true;
-        alert("Dev mode is now enabled");
+        alert('Dev mode is now enabled');
      }
    };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener('keydown', handleKeyDown);
    setTimeout(() => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener('keydown', handleKeyDown);
-      devModeSequence = "";
+      devModeSequence = '';
    }, 10000);
  };
  const openColourPicker = () => {
    showColourPicker = true;
-  };
+  }
  const openFontPicker = () => {
    showFontPicker = true;
  };
  const openChangelog = () => {
    OpenWhatsNewPopup();
@@ -79,316 +48,44 @@
    OpenAboutPage();
    closeExtensionPopup();
  };
-
+    
  /* const openMinecraftServer = () => {
    OpenMinecraftServerPopup();
    closeExtensionPopup();
  }; */
  const openPrivacyStatement = () => {
    window.open("https://betterseqta.org/privacy", "_blank");
    closeExtensionPopup();
  };
  let { standalone } = $props<{ standalone?: boolean }>();
  let showColourPicker = $state<boolean>(false);
  let showFontPicker = $state<boolean>(false);
  let showCloudPanel = $state<boolean>(false);
-  const openCloudPanel = () => {
+  onMount(async () => {
    showCloudPanel = true;
  };
  const showDisclaimer = (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => {
    disclaimerCallbacks = { onConfirm, onCancel };
    disclaimerTitle = title ?? "Confirm";
    disclaimerMessage = message ?? "";
    showDisclaimerModal = true;
  };
  onMount(() => {
    settingsPopup.addListener(() => {
      showColourPicker = false;
      showFontPicker = false;
      showCloudPanel = false;
    });
-
+    
-    if (standalone) {
+    if (!standalone) return;
-      StandaloneStore.setStandalone(true);
+    StandaloneStore.setStandalone(true);
    }
    if (ghReleaseUpdateEnabled) {
      void checkGithubReleaseUpdate().then((info) => {
        ghReleaseUpdate = info;
      });
    }
  });
 </script>
-<div
+<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  class="relative w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
+  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
-    ? 'dark'
+    <div class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40">
    : ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
 >
  <div
    class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"
  >
    <div
      class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
    >
      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <img
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
        src={browser.runtime.getURL(
          "resources/icons/betterseqta-dark-full.png",
        )}
        class="w-4/5 dark:hidden"
        alt="Light logo"
        onclick={handleDevModeToggle}
      />
      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <img
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
-        src={browser.runtime.getURL(
+      
          "resources/icons/betterseqta-light-full.png",
        )}
        class="hidden w-4/5 dark:block"
        alt="Dark logo"
        onclick={handleDevModeToggle}
      />
      {#if !standalone}
-        <div class="flex absolute top-1 right-1 gap-1 items-start">
+        <button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
-          {#if ghReleaseUpdateEnabled}
+        <button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
            <div class="flex flex-col items-end gap-0.5 max-w-[9rem] mr-0.5">
              {#if ghReleaseUpdate?.available}
                <button
                  type="button"
                  onclick={openGhRelease}
                  class="px-1.5 py-0.5 text-[10px] font-semibold leading-tight text-white rounded-full bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500"
                  title="Open GitHub release"
                >
                  Update available — {ghReleaseUpdate.label}
                </button>
              {/if}
              <p class="text-[9px] leading-tight text-right text-zinc-500 dark:text-zinc-400">
                GitHub release build — do not upload to extension stores.
              </p>
            </div>
          {/if}
          <div class="flex gap-1 items-center">
          <button
            onclick={openAbout}
            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
          >
            {"\ueb73"}
          </button>
          <button
            onclick={openChangelog}
            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
          >
            {"\ue929"}
          </button>
          <button
            onclick={openPrivacyStatement}
            class="flex justify-center items-center w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
            aria-label="Privacy Statement"
          >
            {"\uecba"}
          </button>
          </div>
          <!-- <button
            onclick={openMinecraftServer}
            class="flex justify-center items-center p-1 w-8 h-8 rounded-xl bg-zinc-100 dark:bg-zinc-700"
            aria-label="Open Minecraft Server"
          >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 64 70"
            fill="none"
            class="w-full h-full"
          >
            <path
              d="M0 0 C3.96 0 7.92 0 12 0 C12 3.96 12 7.92 12 12 C10.68 12 9.36 12 8 12 C8 10.68 8 9.36 8 8 C6.68 8 5.36 8 4 8 C4 6.68 4 5.36 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(42,10)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 6.6 4 13.2 4 20 C2.68 20 1.36 20 0 20 C0 13.4 0 6.8 0 0 Z "
              fill="currentColor"
              transform="translate(54,22)"
            />
            <path
              d="M0 0 C6.6 0 13.2 0 20 0 C20 1.32 20 2.64 20 4 C13.4 4 6.8 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(22,6)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 5.28 4 10.56 4 16 C2.68 16 1.36 16 0 16 C0 10.72 0 5.44 0 0 Z "
              fill="currentColor"
              transform="translate(46,26)"
            />
            <path
              d="M0 0 C5.28 0 10.56 0 16 0 C16 1.32 16 2.64 16 4 C10.72 4 5.44 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(22,14)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C5.32 4 6.64 4 8 4 C8 5.32 8 6.64 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z "
              fill="currentColor"
              transform="translate(6,50)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(14,50)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(18,46)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(10,46)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(50,42)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(22,42)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(14,42)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(26,38)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(18,38)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(30,34)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(22,34)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(34,30)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(26,30)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(38,26)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(30,26)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(42,22)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(34,22)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(38,18)"
            />
            <path
              d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
              fill="currentColor"
              transform="translate(18,10)"
            />
          </svg>
        </button> -->
        </div>
      {/if}
    </div>
-    <TabbedContainer
+    <TabbedContainer tabs={[
-      bind:activeTab={settingsActiveTab}
+      { title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
-      tabs={[
+      { title: 'Shortcuts', Content: Shortcuts },
-        {
+      { title: 'Themes', Content: Theme },
-          title: "Settings",
+    ]} />
          Content: Settings,
          props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
        },
        { title: "Shortcuts", Content: Shortcuts },
        { title: "Themes", Content: Theme },
      ]}
    />
  </div>
  {#if showColourPicker}
-    <ColourPicker
+    <ColourPicker hidePicker={() => { showColourPicker = false }} />
      hidePicker={() => {
        showColourPicker = false;
      }}
    />
  {/if}
-
+</div>
  {#if showCloudPanel}
    <CloudPanel
      hidePanel={() => {
        showCloudPanel = false;
      }}
    />
  {/if}
 </div>
 {#if showFontPicker}
  <FontPickerModal
    hidePicker={() => {
      showFontPicker = false;
    }}
  />
 {/if}
 {#if showDisclaimerModal && disclaimerCallbacks}
  <DisclaimerModal
    title={disclaimerTitle}
    message={disclaimerMessage}
    onConfirm={() => {
      disclaimerCallbacks?.onConfirm();
      showDisclaimerModal = false;
      disclaimerCallbacks = null;
    }}
    onCancel={() => {
      disclaimerCallbacks?.onCancel();
      showDisclaimerModal = false;
      disclaimerCallbacks = null;
    }}
  />
 {/if}
@@ -10,42 +10,9 @@
  import type { SettingsList } from "@/interface/types/SettingsProps"
  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
  import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
-  import ConnectMobileApp from "@/interface/components/ConnectMobileApp.svelte"
+  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
  import CloudSettingsSync from "@/interface/components/CloudSettingsSync.svelte"
  import CloudHeader from "@/interface/components/store/CloudHeader.svelte"
  import { cloudAuth } from "@/seqta/utils/CloudAuth"
  import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
  import { showThemeOfTheMonthPopupNow } from "@/seqta/utils/Openers/OpenThemeOfTheMonthPopup"
  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
  import { getSnapshotForUpload } from "@/seqta/utils/cloudSettingsSync"
  import { getStoredOverride, setApiBase } from "@/seqta/utils/DevApiBase"
  let devApiBaseInput = $state<string>(getStoredOverride() ?? "")
  let devApiBaseActive = $state<string | null>(getStoredOverride())
  function applyDevApiBase() {
    const trimmed = devApiBaseInput.trim()
    if (trimmed === "") {
      setApiBase(null)
      devApiBaseActive = null
      return
    }
    if (!/^https?:\/\//.test(trimmed)) {
      alert("Please enter a full URL starting with http:// or https://")
      return
    }
    setApiBase(trimmed)
    devApiBaseActive = trimmed.replace(/\/$/, "")
  }
  function clearDevApiBase() {
    devApiBaseInput = ""
    setApiBase(null)
    devApiBaseActive = null
  }
  import { getAllPluginSettings } from "@/plugins"
  import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage"
  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
  // Union type representing all possible settings
@@ -80,16 +47,8 @@
    settings: Record<string, SettingType>;
  }
-  const pluginSettings = getAllPluginSettings().filter(
+  const pluginSettings = getAllPluginSettings() as Plugin[];
    (plugin) => !(isSeqtaEngageExperience() && plugin.pluginId === "global-search"),
  ) as Plugin[];
  const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
  let cloudState = $state(cloudAuth.state);
  $effect(() => {
    const unsub = cloudAuth.subscribe((s) => { cloudState = s; });
    return unsub;
  });
  async function loadPluginSettings() {
    for (const plugin of pluginSettings) {
@@ -132,25 +91,7 @@
    loadPluginSettings();
  })
-  const { showColourPicker, showFontPicker, showDisclaimer, showCloudPanel } = $props<{ 
+  const { showColourPicker } = $props<{ showColourPicker: () => void }>();
    showColourPicker: () => void;
    showFontPicker: () => void;
    showDisclaimer: (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => void;
    showCloudPanel: () => void;
  }>();
  async function exportCloudSettingsJsonToFile() {
    const payload = await getSnapshotForUpload();
    const blob = new Blob([JSON.stringify(payload, null, 2)], {
      type: "application/json",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `betterseqta-plus-settings-export-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }
 </script>
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -168,15 +109,27 @@
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
  {#each [
    {
-      title: "Connect Mobile App",
+      title: "Transparency Effects",
-      description: "Link your SEQTA session to DesQTA — the modern desktop and mobile app for SEQTA Learn",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
-      id: 0,
+      id: 1,
-      Component: ConnectMobileApp,
+      Component: Switch,
-      props: {}
+      props: {
        state: $settingsState.transparencyEffects,
        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
      }
    },
    {
      title: "Custom Theme Colour",
      description: "Customise the overall theme colour of SEQTA Learn.",
      id: 4,
      Component: PickerSwatch,
      props: {
        onClick: showColourPicker
      }
    },
    {
      title: "Edit Sidebar Layout",
-      description: "Reorder pages on the sidebar",
+      description: "Customise the sidebar layout.",
      id: 5,
      Component: Button,
      props: {
@@ -184,38 +137,9 @@
        text: "Edit"
      }
    },
    {
      title: "Custom Theme Colour",
      description: "Customise the overall theme colour of SEQTA Learn",
      id: 4,
      Component: PickerSwatch,
      props: {
        onClick: showColourPicker
      }
    },
    {
      title: "Interface Font",
      description: "Choose the typeface used across SEQTA Learn",
      id: 16,
      Component: Button,
      props: {
        onClick: showFontPicker,
        text: "Change"
      }
    },
    {
      title: "Icon Only Sidebar",
      description: "Show only icons in the sidebar for a compact layout",
      id: 14,
      Component: Switch,
      props: {
        state: $settingsState.iconOnlySidebar ?? false,
        onChange: (isOn: boolean) => settingsState.iconOnlySidebar = isOn
      }
    },
    {
      title: "Animations",
-      description: "Enable animations on certain pages",
+      description: "Enables animations on certain pages.",
      id: 6,
      Component: Switch,
      props: {
@@ -233,105 +157,51 @@
        onChange: (isOn: boolean) => settingsState.timeFormat = isOn ? "12" : "24"
      }
    },
    {
      title: "Transparency Effects",
      description: "Enable transparency effects on certain elements, such as blur (May impact battery life)",
      id: 1,
      Component: Switch,
      props: {
        state: $settingsState.transparencyEffects,
        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
      }
    },
    {
      title: "Default Page",
-      description: "Choose which page loads first when you open SEQTA",
+      description: "The page to load when SEQTA Learn is opened.",
      id: 10,
      Component: Select,
      props: {
-        state: $settingsState.defaultPage ?? "home",
+        state: $settingsState.defaultPage,
-        onChange: (value: string) => (settingsState.defaultPage = value),
+        onChange: (value: string) => settingsState.defaultPage = value,
        options: [
-          { value: "home", label: "Home" },
+          { value: 'home', label: 'Home' },
-          { value: "dashboard", label: "Dashboard" },
+          { value: 'dashboard', label: 'Dashboard' },
-          { value: "timetable", label: "Timetable" },
+          { value: 'timetable', label: 'Timetable' },
-          { value: "welcome", label: "Welcome" },
+          { value: 'welcome', label: 'Welcome' },
-          { value: "messages", label: "Messages" },
+          { value: 'messages', label: 'Messages' },
-          { value: "documents", label: "Documents" },
+          { value: 'documents', label: 'Documents' },
-          { value: "reports", label: "Reports" },
+          { value: 'reports', label: 'Reports' },
-        ],
+        ]
-      },
+      }
    },
    {
      title: "News Feed Source",
-      description: "Choose the sources for your news feed",
+      description: "Choose sources of your news feed.",
      id: 11,
      Component: Select,
      props: {
        state: $settingsState.newsSource,
        onChange: (value: string) => settingsState.newsSource = value,
-          options: [
+        options: [
-           { value: "australia", label: "Australia" },
+          { value: "australia", label: "Australia" },
-           { value: "usa", label: "USA" },
+          { value: "usa", label: "USA" },
-           { value: "uk", label: "UK" },
+          { value: "taiwan", label: "Taiwan" },
-           { value: "taiwan", label: "Taiwan" },
+          { value: "hong_kong", label: "Hong Kong" },
-           { value: "hong_kong", label: "Hong Kong" },
+          { value: "panama", label: "Panama" },
-           { value: "panama", label: "Panama" },
+          { value: "canada", label: "Canada" },
-           { value: "canada", label: "Canada" },
+          { value: "singapore", label: "Singapore" },
-           { value: "singapore", label: "Singapore" },
+          { value: "uk", label: "UK" },
-           { value: "japan", label: "Japan" },
+          { value: "japan", label: "Japan" },
-           { value: "netherlands", label: "Netherlands" }
+          { value: "netherlands", label: "Netherlands" }
        ]
      }
    }
  ] as option}
    {@render Setting(option)}
  {/each}
-
+  
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Adaptive Theme Colour</h2>
          <p class="text-xs">Change the theme colour based on the current class (e.g. when viewing a course or assessments page)</p>
        </div>
        <div>
          <Switch
            state={$settingsState.adaptiveThemeColour ?? false}
            onChange={(isOn: boolean) => settingsState.adaptiveThemeColour = isOn}
          />
        </div>
      </div>
      {#if $settingsState.adaptiveThemeColour}
        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
          <div class="pr-4">
            <h2 class="text-sm font-bold">Soft Gradient</h2>
            <p class="text-xs">Use a soft gradient instead of a solid colour when viewing a class</p>
          </div>
          <div>
            <Switch
              state={$settingsState.adaptiveThemeGradient ?? false}
              onChange={(isOn: boolean) => settingsState.adaptiveThemeGradient = isOn}
            />
          </div>
        </div>
        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
          <div class="pr-4">
            <h2 class="text-sm font-bold">Smooth colour transition</h2>
            <p class="text-xs">Ease between class/subject colours when navigating instead of switching instantly</p>
          </div>
          <div>
            <Switch
              state={$settingsState.adaptiveThemeColourTransition ?? true}
              onChange={(isOn: boolean) => settingsState.adaptiveThemeColourTransition = isOn}
            />
          </div>
        </div>
      {/if}
    </div>
  </div>
  {#each pluginSettings as plugin}
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
@@ -352,20 +222,7 @@
            <div>
              <Switch
                state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
-                onChange={async (value) => {
+                onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
                  if (plugin.pluginId === 'assessments-average' && value === true) {
                    showDisclaimer(
                      async () => {
                        await updatePluginSetting(plugin.pluginId, 'enabled', true);
                      },
                      () => {},
                      "Assessment Averages Disclaimer",
                      "This feature calculates a simple average of your assessment grades. It does not take into account:\n• Assessment weightings\n• Different grading scales\n• Other factors used in official reports\n\nThe displayed average may be inaccurate compared to your actual marks found in reports.\n\nDo you want to enable this feature?"
                    );
                    return;
                  }
                  await updatePluginSetting(plugin.pluginId, 'enabled', value);
                }}
              />
            </div>
          </div>
@@ -373,8 +230,8 @@
        {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
          {#each Object.entries(plugin.settings) as [key, setting]}
-            <!-- Skip the 'enabled' setting and hide cloud-only settings when not signed in -->
+            <!-- Skip the 'enabled' setting if it's part of the settings object -->
-            {#if key !== 'enabled' && !(key === 'useCloudPfp' && !cloudState.isLoggedIn)}
+            {#if key !== 'enabled'}
              <div class="flex justify-between items-center px-4 py-3">
                <div class="pr-4">
                  <h2 class="text-sm font-bold">{setting.title || key}</h2>
@@ -387,15 +244,13 @@
                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                    />
                  {:else if setting.type === 'number'}
-                    <div class="w-28 shrink-0">
+                    <Slider
-                      <Slider
+                      state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                        state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                        onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                      min={setting.min}
-                        min={setting.min}
+                      max={setting.max}
-                        max={setting.max}
+                      step={setting.step}
-                        step={setting.step}
+                    />
                      />
                    </div>
                  {:else if setting.type === 'string'}
                    <input
                      type="text"
@@ -434,40 +289,9 @@
          {/each}
        {/if}
      </div>
      {#if plugin.pluginId === 'global-search'}
        {@render Setting({
          title: "Theme of the Month",
          description: "Show the monthly featured theme popup when a new entry is available",
          id: 15,
          Component: Switch,
          props: {
            state: !($settingsState.themeOfTheMonthDisabled ?? false),
            onChange: (isOn: boolean) => settingsState.themeOfTheMonthDisabled = !isOn
          }
        })}
      {/if}
  </div>
  {/each}
  <div class="border-none">
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">BetterSEQTA Cloud</h2>
          <p class="text-xs">Account & sync</p>
        </div>
        <div>
          <CloudHeader alwaysShowUserName onClick={showCloudPanel} />
        </div>
      </div>
      {#if cloudState.isLoggedIn}
        <div class="px-3 pb-3">
          <CloudSettingsSync showDisclaimer={(onConfirm, onCancel) => showDisclaimer(onConfirm, onCancel, "Restore from cloud?", "This will replace your local settings with the cloud backup. Continue?")} />
        </div>
      {/if}
    </div>
  </div>
  <div class="p-1 border-none"></div>
  {@render Setting({
@@ -498,9 +322,9 @@
          <p class="text-xs">Replace sensitive content with mock data</p>
        </div>
        <div>
-          <Switch
+          <Button 
-            state={$settingsState.hideSensitiveContent ?? false}
+            onClick={() => hideSensitiveContent()}
-            onChange={(isOn: boolean) => settingsState.hideSensitiveContent = isOn}
+            text="Hide"
          />
        </div>
      </div>
@@ -516,90 +340,6 @@
          />
        </div>
      </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Show Privacy Notification</h2>
          <p class="text-xs">Show the privacy notification popup on next page load</p>
        </div>
        <div>
          <Button
            onClick={async () => {
              settingsState.privacyStatementShown = false;
              settingsState.privacyStatementLastUpdated = undefined;
              closeExtensionPopup();
              // Small delay to ensure popup is closed before showing notification
              await new Promise(resolve => setTimeout(resolve, 100));
              await showPrivacyNotification();
            }}
            text="Show Now"
          />
        </div>
      </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Show Theme of the Month</h2>
          <p class="text-xs">Fetch and show the current month's popup now (ignores dismissed state)</p>
        </div>
        <div>
          <Button
            onClick={async () => {
              closeExtensionPopup();
              await new Promise((resolve) => setTimeout(resolve, 100));
              await showThemeOfTheMonthPopupNow();
            }}
            text="Show Now"
          />
        </div>
      </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Export cloud settings JSON</h2>
          <p class="text-xs">Download the same payload as cloud sync (OAuth tokens stripped). For debugging and server testing.</p>
        </div>
        <div>
          <Button onClick={exportCloudSettingsJsonToFile} text="Export to file" />
        </div>
      </div>
      <div class="flex flex-col gap-2 px-4 py-3">
        <div class="flex justify-between items-start gap-3">
          <div class="pr-4">
            <h2 class="text-sm font-bold">API Base URL (session only)</h2>
            <p class="text-xs">Override the content API host for this browser session. Cleared on restart. Affects themes, theme of the month, and other server-driven content.</p>
            {#if devApiBaseActive}
              <p class="text-xs mt-1 text-amber-600 dark:text-amber-400">
                Override active: <span class="font-mono">{devApiBaseActive}</span>
              </p>
            {/if}
          </div>
        </div>
        <div class="flex gap-2 items-center">
          <input
            type="text"
            placeholder="https://betterseqta.org"
            bind:value={devApiBaseInput}
            class="flex-1 px-2 py-1 text-xs rounded border bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100"
          />
          <Button onClick={applyDevApiBase} text="Apply" />
          {#if devApiBaseActive}
            <Button onClick={clearDevApiBase} text="Clear" />
          {/if}
        </div>
      </div>
      <div class="flex flex-col gap-2 px-4 py-3">
        <div>
          <h2 class="text-sm font-bold">GitHub latest version override</h2>
          <p class="text-xs">Pretend a newer GitHub release exists to test the update badge. Only applies when dev mode is on.</p>
        </div>
        <input
          type="text"
          placeholder="e.g. 9.9.9"
          value={$settingsState.devGhReleaseVersionOverride ?? ""}
          oninput={(e) => {
            settingsState.devGhReleaseVersionOverride = e.currentTarget.value;
          }}
          class="px-2 py-1 text-xs rounded border bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100"
        />
      </div>
    </div>
  {/if}
 </div>
@@ -23,19 +23,13 @@
    });
  });
-  const switchChange = (shortcut: any) => {
+  const switchChange = (shortcut: any) => {    
-    const idx = $settingsState.shortcuts.findIndex(s => s.name === shortcut);
+    const value = $settingsState.shortcuts.find(s => s.name === shortcut);
-    if (idx !== -1) {
+    if (value) {
-      // Create a new array with the toggled value to ensure reactivity
+      value.enabled = !value.enabled;
-      const updated = settingsState.shortcuts.map(s =>
+      settingsState.shortcuts = settingsState.shortcuts;
        s.name === shortcut ? { ...s, enabled: !s.enabled } : s
      );
      settingsState.shortcuts = updated;
    } else {
-      settingsState.shortcuts = [
+      settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
        ...settingsState.shortcuts,
        { name: shortcut, enabled: true }
      ];
    }
  }
@@ -202,6 +196,16 @@
      </MotionDiv>
    </div>
    {#each Object.entries(Shortcuts) as shortcut}
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
        </div>
        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
      </div>
    {/each}
    <!-- Custom Shortcuts Section -->
    {#each $settingsState.customshortcuts as shortcut, index}
      <div class="flex justify-between items-center px-4 py-3">
@@ -213,16 +217,6 @@
        </button>
      </div>
    {/each}
    {#each Object.entries(Shortcuts) as shortcut}
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
        </div>
        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
      </div>
    {/each}
  {:else}
    <div class="p-4 text-center">
      Loading shortcuts...
@@ -21,19 +21,16 @@
    <div class="relative w-full">
      <button
        onclick={() => editMode = !editMode}
-        class="absolute top-0 right-0 z-10 px-2 h-8 text-lg rounded-xl bg-zinc-100 dark:bg-zinc-700">
+        class="absolute top-0 right-0 z-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{editMode ? '\ue9e4' : '\uec38'}</button>
        <span class="mr-2">{editMode ? 'Done' : 'Edit'}</span>
        <span class="font-IconFamily">{editMode ? '\ue9e4' : '\uec38'}</span>
      </button>
      <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
      <ThemeSelector isEditMode={editMode} />
    </div>
  {:else}
-    <div class="flex justify-center items-center w-full h-full">
+    <div class="flex items-center justify-center w-full h-full">
      <div class="text-lg">
        Open SEQTA and use the embedded settings to access theme settings. 🫠
      </div>
    </div>
  {/if}
-</div>
+</div>
@@ -7,7 +7,6 @@
  import SkeletonLoader from '../components/SkeletonLoader.svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
  import type { Theme } from '../types/Theme'
  import { visibleStoreThemes, buildCoverSlidesForThemes, normalizeStoreTheme } from '@/interface/utils/themeStoreFlavours'
  import browser from 'webextension-polyfill'
  import ThemeModal from '../components/store/ThemeModal.svelte'
  import Header from '../components/store/Header.svelte'
@@ -16,24 +15,13 @@
  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
  import Backgrounds from '../components/store/Backgrounds.svelte'
  import { cloudAuth } from '@/seqta/utils/CloudAuth'
  import SignInToFavoriteModal from '../components/SignInToFavoriteModal.svelte'
  import { consumePendingHighlightThemeId } from '@/seqta/utils/openThemeStoreWithHighlight'
  const themeManager = ThemeManager.getInstance();
  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
  cloudAuth.subscribe((s) => { cloudLoggedIn = s.isLoggedIn; });
  // State variables
  let searchTerm = $state('');
  let themes = $state<Theme[]>([]);
-
+  let coverThemes = $state<Theme[]>([]);
  /** Grid/search/cover: hides flat-listed slaves when API sends them */
  let listThemes = $derived(visibleStoreThemes(themes));
  /** Cover marquee slides (master + flavour imagery for top masters) */
  let coverSlides = $derived(buildCoverSlidesForThemes(listThemes.slice(0, 3)));
  let loading = $state(true);
  let darkMode = $state(false);
  let displayTheme = $state<Theme | null>(null);
@@ -41,21 +29,7 @@
  let activeTab = $state('themes');
  let error = $state<string | null>(null);
  let fetchAttempt = $state(0);
  let selectedBackground = $state<string | null>(null);
  let showSignInOverlay = $state(false);
  const MAX_FETCH_ATTEMPTS = 3;
  const FETCH_MESSAGE_TIMEOUT_MS = 25_000;
  function sendMessageWithTimeout<T>(message: object): Promise<T> {
    return Promise.race([
      browser.runtime.sendMessage(message) as Promise<T>,
      new Promise<T>((_, reject) => {
        setTimeout(() => reject(new Error('Theme store request timed out — reload the SEQTA page after updating the extension.')), FETCH_MESSAGE_TIMEOUT_MS);
      }),
    ]);
  }
  const fetchCurrentThemes = async () => {
    const themes = await themeManager.getAvailableThemes();
@@ -74,151 +48,38 @@
    activeTab = tab;
  };
-  /** Featured themes first; within each group, newest by `created_at` (API: Unix seconds). */
+  // Fetch themes and initialize app
-  function compareStoreThemes(a: Theme, b: Theme): number {
+  const fetchThemes = async () => {
    const fa = a.featured === true ? 1 : 0;
    const fb = b.featured === true ? 1 : 0;
    if (fa !== fb) return fb - fa;
    const ca = a.created_at ?? 0;
    const cb = b.created_at ?? 0;
    if (ca !== cb) return cb - ca;
    return a.name.localeCompare(b.name);
  }
  const toggleFavorite = async (theme: Theme) => {
    const token = await cloudAuth.getStoredToken();
    if (!token) return;
    const isFavorite = !theme.is_favorited;
    const result = (await browser.runtime.sendMessage({
      type: 'cloudFavorite',
      themeId: theme.id,
      token,
      action: isFavorite ? 'favorite' : 'unfavorite',
    })) as { success?: boolean };
    if (result?.success) {
      const delta = isFavorite ? 1 : -1;
      themes = themes.map((t) =>
        t.id === theme.id
          ? { ...t, is_favorited: isFavorite, favorite_count: Math.max(0, (t.favorite_count ?? 0) + delta) }
          : t
      );
      if (displayTheme?.id === theme.id) {
        displayTheme = {
          ...displayTheme,
          is_favorited: isFavorite,
          favorite_count: Math.max(0, (displayTheme.favorite_count ?? 0) + delta),
        };
      }
    }
  };
  // Fetch themes via background script (avoids CORS when store runs inside SEQTA page)
  const fetchThemes = async (isRetry = false) => {
    if (!isRetry) {
      fetchAttempt = 0;
      error = null;
    }
    try {
-      const token = await cloudAuth.getStoredToken();
+      const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${(new Date()).getTime()}`, { cache: 'no-store' });
-      const data = await sendMessageWithTimeout<{
+      const data = await response.json();
-        success?: boolean;
+      themes = data.themes;
-        data?: { themes: unknown[] };
+
-        error?: string;
+      // Shuffle for cover themes
-      }>({
+      const shuffled = [...themes].sort(() => 0.5 - Math.random());
-        type: 'fetchThemes',
+      coverThemes = shuffled.slice(0, 3);
-        token: token ?? undefined,
+
      });
      if (!data?.success || !Array.isArray(data?.data?.themes)) {
        throw new Error(data?.error || 'Failed to fetch themes');
      }
      themes = data.data.themes
        .map((row) => normalizeStoreTheme(row as Record<string, unknown>))
        .filter((t) => t.id.length > 0)
        .sort(compareStoreThemes);
      error = null;
      loading = false;
-    } catch (err) {
+    } catch (error) {
-      console.error('Failed to fetch themes', err);
+      console.error('Failed to fetch themes', error);
-      fetchAttempt += 1;
+      setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
      if (fetchAttempt >= MAX_FETCH_ATTEMPTS) {
        error =
          err instanceof Error
            ? err.message
            : 'Could not load themes. Reload the SEQTA page, then open the store again.';
        loading = false;
        return;
      }
      setTimeout(() => fetchThemes(true), 5000);
    }
  };
  function focusThemeById(themeId: string) {
    const match = themes.find((t) => t.id === themeId)
      ?? themes.find((t) => t.flavours?.some((f) => f.id === themeId));
    if (match) {
      activeTab = 'themes';
      searchTerm = '';
      displayTheme = match;
    }
  }
  function onHighlightThemeEvent(e: Event) {
    const detail = (e as CustomEvent).detail;
    if (detail?.themeId && typeof detail.themeId === 'string') {
      focusThemeById(detail.themeId);
    }
  }
  // On mount
  onMount(async () => {
    window.addEventListener('bsplus:highlight-theme', onHighlightThemeEvent);
    await fetchThemes();
    await fetchCurrentThemes();
    darkMode = (await browser.storage.local.get('DarkMode')).DarkMode === 'true';
    darkMode = $settingsState.DarkMode;
    const pending = consumePendingHighlightThemeId();
    if (pending) focusThemeById(pending);
    return () => {
      window.removeEventListener('bsplus:highlight-theme', onHighlightThemeEvent);
    };
  });
-  // Filter themes (list is already featured-first, then newest; filter preserves order)
+  // Filter themes based on search term
-  let filteredThemes = $derived(
+  let filteredThemes = $derived(themes.filter(theme =>
-    listThemes.filter((theme) => {
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
-      const q = searchTerm.toLowerCase();
+    theme.description.toLowerCase().includes(searchTerm.toLowerCase())
-      const name = (theme.name ?? '').toLowerCase();
+  ));
      const description = (theme.description ?? '').toLowerCase();
      return name.includes(q) || description.includes(q);
    }),
  );
  async function installThemeFromStore(themeId: string, meta: Theme) {
    const fullRow = themes.find((x) => x.id === themeId);
    if (fullRow) {
      await themeManager.downloadTheme(fullRow);
    } else {
      const flavour = meta.flavours?.find((f) => f.id === themeId);
      await themeManager.downloadTheme({
        id: themeId,
        name: flavour?.name ?? meta.name,
      } as Theme);
    }
    await themeManager.setTheme(themeId);
    themeUpdates.triggerUpdate();
    await fetchCurrentThemes();
    void browser.runtime.sendMessage({ type: 'cloudSettingsRequestDebouncedUpload' }).catch(() => {});
  }
  async function removeThemeFromStore(themeId: string) {
    await themeManager.deleteTheme(themeId);
    themeUpdates.triggerUpdate();
    await fetchCurrentThemes();
  }
  $effect(() => {
    loadBackground();
@@ -230,17 +91,6 @@
      console.error(error);
    }
  });
  // Refetch themes when user logs in (from another tab) to get is_favorited
  let lastLoggedIn = $state(false);
  $effect(() => {
    if (cloudLoggedIn && !lastLoggedIn) {
      lastLoggedIn = true;
      fetchThemes();
    } else if (!cloudLoggedIn) {
      lastLoggedIn = false;
    }
  });
 </script>
 <div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
@@ -251,64 +101,40 @@
      <!-- Loading State -->
      {#if loading}
        <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-          {#each Array(6) as _, i (i)}
+          <SkeletonLoader width="100%" height="200px" />
            <SkeletonLoader width="100%" height="200px" />
          {/each}
        </div>
      {:else if error}
        <div class="flex flex-col items-center justify-center py-24 text-center max-w-lg mx-auto">
          <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Couldn&apos;t load themes</h2>
          <p class="mt-3 text-zinc-600 dark:text-zinc-300">{error}</p>
          <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
            After an extension update, reload your SEQTA tab so the new version can talk to the browser.
          </p>
          <button
            type="button"
            class="mt-6 px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700"
            onclick={() => {
              loading = true;
              error = null;
              void fetchThemes();
            }}
          >
            Try again
          </button>
        </div>
      {:else}
        <!-- Themes Tab Content -->
        {#if activeTab === 'themes'}
          {#if searchTerm === ''}
-            <CoverSwiper slides={coverSlides} {setDisplayTheme} />
+            <CoverSwiper {coverThemes} {setDisplayTheme} />
          {/if}
          <!-- ThemeGrid to display filtered themes -->
-          <ThemeGrid
+          <ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
            themes={filteredThemes}
            allStoreThemeRows={themes}
            {searchTerm}
            {setDisplayTheme}
            {toggleFavorite}
            isLoggedIn={cloudLoggedIn}
            onRequestSignIn={() => (showSignInOverlay = true)}
          />
          {#if displayTheme}
            <ThemeModal
              currentThemes={currentThemes}
-              allThemes={listThemes}
+              allThemes={themes}
              allStoreThemeRows={themes}
              theme={displayTheme}
              {displayTheme}
              {setDisplayTheme}
-              {toggleFavorite}
+              onInstall={async () => {
-              isLoggedIn={cloudLoggedIn}
+                if (displayTheme) {
-              onRequestSignIn={() => (showSignInOverlay = true)}
+                  await themeManager.downloadTheme(displayTheme);
-              onInstall={async (themeId: string) => {
+                  await themeManager.setTheme(displayTheme.id);
-                if (displayTheme) await installThemeFromStore(themeId, displayTheme);
+                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
              }}
-              onRemove={async (themeId: string) => {
+              onRemove={async () => {
-                console.debug('deleting theme', themeId);
+                if (displayTheme?.id) {
-                await removeThemeFromStore(themeId);
+                  console.debug('deleting theme', displayTheme.id);
                  await themeManager.deleteTheme(displayTheme.id);
                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
              }}
            />
          {/if}
@@ -318,8 +144,4 @@
      {/if}
    </div>
  </div>
  {#if showSignInOverlay}
    <SignInToFavoriteModal onClose={() => (showSignInOverlay = false)} />
  {/if}
 </div>
@@ -4,10 +4,7 @@
  import { slide } from 'svelte/transition';
  import { fade } from 'svelte/transition';
-  import {
+  import { type LoadedCustomTheme } from '@/types/CustomThemes'
    type LoadedCustomTheme,
    shouldForceThemeAppearance,
  } from '@/types/CustomThemes'
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
@@ -24,9 +21,9 @@
    handleImageVariableChange,
    handleCoverImageUpload
  } from '../utils/themeImageHandlers';
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  const { themeID } = $props<{ themeID: string }>()
  const themeManager = ThemeManager.getInstance();
@@ -43,9 +40,7 @@
    coverImage: null,
    isEditable: true,
    hideThemeName: false,
-    forceTheme: undefined,
+    forceDark: undefined
    forceDark: undefined,
    adaptiveCssVariables: [],
  })
  let closedAccordions = $state<string[]>([])
  let themeLoaded = $state(false);
@@ -85,13 +80,7 @@
        }))
      }
-      theme = {
+      theme = loadedTheme
        ...loadedTheme,
        adaptiveCssVariables: loadedTheme.adaptiveCssVariables ?? [],
        forceTheme:
          loadedTheme.forceTheme ??
          (loadedTheme.forceDark !== undefined ? true : undefined),
      }
      themeLoaded = true
    } else {
      themeLoaded = true
@@ -125,14 +114,6 @@
      blob: image.blob
    }))
    themeClone.coverImage = theme.coverImage
    themeClone.userEdited = true
    if (shouldForceThemeAppearance(themeClone)) {
      themeClone.forceTheme = true;
    } else {
      themeClone.forceTheme = false;
      themeClone.forceDark = undefined;
    }
    themeManager.clearPreview();
    await themeManager.saveTheme(themeClone);
@@ -289,7 +270,7 @@
    <h1 class='text-xl font-semibold'>Theme Creator</h1>
-    <a href='https://docs.betterseqta.org/theme-creation/' target='_blank' rel='noopener noreferrer' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
+    <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
      <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
      <span class='underline'>
        Need help? Check out the docs!
@@ -336,27 +317,6 @@
    <Divider />
    <div class="py-3">
      <h2 class="text-sm font-bold">Adaptive CSS variables</h2>
      <p class="text-xs text-zinc-600 dark:text-zinc-400">
        One per line, each must start with <code class="text-xs">--</code>. These receive the same colour as the adaptive accent when &quot;Adaptive theme colour&quot; is enabled in general settings. Use them in Custom CSS, e.g. <code class="text-xs">border-color: var(--my-accent);</code>
      </p>
      <textarea
        placeholder="--my-accent&#10;--class-banner"
        value={theme.adaptiveCssVariables?.join('\n') ?? ''}
        oninput={(e) => {
          const lines = e.currentTarget.value
            .split(/\r?\n/)
            .map((s) => s.trim())
            .filter(Boolean);
          theme = { ...theme, adaptiveCssVariables: lines };
        }}
        class="p-2 mt-2 w-full min-h-[5rem] font-mono text-sm rounded-lg border-0 transition dark:placeholder-zinc-400 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
      ></textarea>
    </div>
    <Divider />
    {#each [
      {
        type: 'switch',
@@ -372,28 +332,21 @@
        title: 'Force Theme',
        description: 'Force users to use either dark or light mode',
        props: {
-          state: shouldForceThemeAppearance(theme),
+          state: theme.forceDark !== undefined,
-          onChange: (value: boolean) => {
+          onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
            if (value) {
              theme = { ...theme, forceTheme: true, forceDark: false };
            } else {
              theme = { ...theme, forceTheme: false, forceDark: undefined };
            }
          }
        }
      },
      {
        type: 'conditional',
        props: {
-          condition: shouldForceThemeAppearance(theme),
+          condition: theme.forceDark !== undefined,
          children: {
            type: 'lightDarkToggle',
            title: 'Mode',
            description: 'Choose whether to force light or dark mode',
            props: {
              state: theme.forceDark === true,
-              onChange: (value: boolean) =>
+              onChange: (value: boolean) => theme = { ...theme, forceDark: value }
                (theme = { ...theme, forceDark: value, forceTheme: true })
            }
          }
        }
@@ -1,50 +1,7 @@
 export type ThemeRole = "standard" | "master" | "slave";
 /** List/detail metadata for variants of a master theme (full theme.json fetched at install by id). */
 export type ThemeFlavour = {
  id: string;
  name: string;
  /** Mirrors theme.json accent (e.g. defaultColour); used for install picker buttons */
  accent_color: string;
  cover_image: string;
  marquee_image?: string;
  /** Per-variant installs when slaves are not returned as flat `theme_role` rows */
  download_count?: number;
 };
 export type Theme = {
  id: string;
  name: string;
  description: string;
  coverImage: string;
-  marqueeImage?: string;
+  marqueeImage: string;
-  theme_json_url?: string;
+  id: string;
  is_favorited?: boolean;
  favorite_count?: number;
  download_count?: number;
  author?: string;
  featured?: boolean;
  tags?: string[];
  /** Unix time in seconds (API list/detail). */
  created_at?: number;
  /** Unix seconds — last server update (GET /api/themes). */
  updated_at?: number;
  /** Omitted / `standard` — show in grid. `slave` hides from grid. `master` can list `flavours`. */
  theme_role?: ThemeRole;
  /** Present when `theme_role === "slave"` and API returns a flat list during migration */
  master_id?: string;
  /** Variants nested on master rows; installs use flavour `id` */
  flavours?: ThemeFlavour[];
 };
 /** One marquee slide (cover hero or modal carousel). */
 export type ThemeCoverSlide = {
  imageUrl: string;
  /** Main line — usually master name */
  title: string;
  /** Subline — flavour name when applicable */
  subtitle?: string;
  /** Opening the modal uses this theme (always the grid row / master object) */
  openTheme: Theme;
  badgeFeatured?: boolean;
 };
@@ -1,27 +0,0 @@
 import type { Action } from "svelte/action";
 /**
 * Svelte action that moves the element to a different DOM target.
 * Defaults to the nearest ShadowRoot so styles remain intact when the app
 * is rendered inside a shadow DOM. Falls back to document.body otherwise.
 * Pass `document.body` to escape transformed/contained settings popups entirely.
 */
 export const portal: Action<HTMLElement, HTMLElement | ShadowRoot | undefined> = (
  node,
  target,
 ) => {
  const root = node.getRootNode();
  const dest = target ?? (root instanceof ShadowRoot ? root : document.body);
  dest.appendChild(node);
  return {
    update(newTarget) {
      const nextDest =
        newTarget ?? (root instanceof ShadowRoot ? root : document.body);
      nextDest.appendChild(node);
    },
    destroy() {
      node.remove();
    },
  };
 };
@@ -1,74 +0,0 @@
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 const THEME_CSS_VARS = [
  "--better-main",
  "--better-pale",
  "--better-light",
  "--text-color",
  "--background-primary",
  "--background-secondary",
  "--text-primary",
  "--theme-offset-bg",
  "--better-sub",
 ] as const;
 const ACCENT_CSS_VARS = [
  "--better-main",
  "--accent-color-value",
  "--accentColor",
  "--colour-betterseqta-blue",
 ] as const;
 function extractSolidColor(value: string): string | null {
  const trimmed = value.trim();
  if (!trimmed || trimmed === "initial") return null;
  if (
    trimmed.startsWith("#") ||
    trimmed.startsWith("rgb") ||
    trimmed.startsWith("hsl")
  ) {
    return trimmed;
  }
  if (trimmed.includes("gradient")) {
    const match = trimmed.match(
      /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
    );
    return match?.[0] ?? null;
  }
  return null;
 }
 function resolvePageAccentColor(): string {
  const computed = getComputedStyle(document.documentElement);
  for (const name of ACCENT_CSS_VARS) {
    const solid = extractSolidColor(computed.getPropertyValue(name));
    if (solid) return solid;
  }
  const fromSettings = settingsState.selectedColor?.trim();
  if (fromSettings) {
    const solid = extractSolidColor(fromSettings);
    if (solid) return solid;
  }
  return "#007bff";
 }
 /** Copy SEQTA page theme tokens onto a portaled UI root (matches analytics sync). */
 export function syncPageThemeToElement(target: HTMLElement): void {
  const computed = getComputedStyle(document.documentElement);
  for (const name of THEME_CSS_VARS) {
    const value = computed.getPropertyValue(name).trim();
    if (value) {
      target.style.setProperty(name, value);
    }
  }
  const accent = resolvePageAccentColor();
  target.style.setProperty("--bsplus-analytics-accent", accent);
  target.style.setProperty("--better-main", accent);
  target.classList.toggle(
    "dark",
    document.documentElement.classList.contains("dark"),
  );
 }
@@ -1,246 +0,0 @@
 import type { Theme, ThemeCoverSlide, ThemeFlavour } from "@/interface/types/Theme";
 export function isHiddenStoreTheme(theme: Theme): boolean {
  return theme.theme_role === "slave";
 }
 /** Coerce API / fallback rows into the store `Theme` shape (camelCase images, safe strings). */
 export function normalizeStoreTheme(raw: Record<string, unknown>): Theme {
  const flavours = Array.isArray(raw.flavours)
    ? (raw.flavours as Record<string, unknown>[]).map(
        (f): ThemeFlavour => ({
          id: String(f.id ?? ""),
          name: String(f.name ?? ""),
          accent_color: String(f.accent_color ?? f.accentColor ?? ""),
          cover_image: String(f.cover_image ?? f.coverImage ?? ""),
          marquee_image:
            typeof (f.marquee_image ?? f.marqueeImage) === "string"
              ? String(f.marquee_image ?? f.marqueeImage)
              : undefined,
          download_count:
            typeof f.download_count === "number"
              ? f.download_count
              : typeof f.downloadCount === "number"
                ? f.downloadCount
                : undefined,
        }),
      )
    : undefined;
  return {
    id: String(raw.id ?? ""),
    name: String(raw.name ?? "Untitled"),
    description: String(raw.description ?? ""),
    coverImage: String(raw.coverImage ?? raw.cover_image ?? ""),
    marqueeImage:
      typeof (raw.marqueeImage ?? raw.marquee_image) === "string"
        ? String(raw.marqueeImage ?? raw.marquee_image)
        : undefined,
    theme_json_url:
      typeof (raw.theme_json_url ?? raw.themeJsonUrl) === "string"
        ? String(raw.theme_json_url ?? raw.themeJsonUrl)
        : undefined,
    is_favorited: raw.is_favorited === true || raw.isFavorited === true,
    favorite_count:
      typeof raw.favorite_count === "number"
        ? raw.favorite_count
        : typeof raw.favoriteCount === "number"
          ? raw.favoriteCount
          : undefined,
    download_count:
      typeof raw.download_count === "number"
        ? raw.download_count
        : typeof raw.downloadCount === "number"
          ? raw.downloadCount
          : undefined,
    author: typeof raw.author === "string" ? raw.author : undefined,
    featured: raw.featured === true,
    tags: Array.isArray(raw.tags) ? (raw.tags as string[]) : undefined,
    created_at:
      typeof raw.created_at === "number"
        ? raw.created_at
        : typeof raw.createdAt === "number"
          ? raw.createdAt
          : undefined,
    updated_at:
      typeof raw.updated_at === "number"
        ? raw.updated_at
        : typeof raw.updatedAt === "number"
          ? raw.updatedAt
          : undefined,
    theme_role:
      raw.theme_role === "master" || raw.theme_role === "slave" || raw.theme_role === "standard"
        ? raw.theme_role
        : undefined,
    master_id:
      typeof (raw.master_id ?? raw.masterId) === "string"
        ? String(raw.master_id ?? raw.masterId)
        : undefined,
    flavours,
  };
 }
 /** Grid and search: omit slave rows (when API sends a flattened list). */
 export function visibleStoreThemes(themes: Theme[]): Theme[] {
  const visible = themes.filter((t) => !isHiddenStoreTheme(t));
  // If every row is a slave (bad/migration payload), avoid an empty grid.
  if (visible.length === 0 && themes.length > 0) {
    return themes;
  }
  return visible;
 }
 function marqueeOrCoverUrl(t: { marqueeImage?: string; coverImage: string }): string {
  return t.marqueeImage || t.coverImage;
 }
 /**
 * Builds slides for CoverSwiper: for each top-N master, first master image then each flavour image.
 */
 export function buildCoverSlidesForThemes(topThemes: Theme[]): ThemeCoverSlide[] {
  const slides: ThemeCoverSlide[] = [];
  for (const theme of topThemes) {
    const flavours = theme.flavours ?? [];
    if (flavours.length === 0) {
      slides.push({
        imageUrl: marqueeOrCoverUrl(theme),
        title: theme.name,
        subtitle: theme.author ? `By ${theme.author}` : undefined,
        openTheme: theme,
        badgeFeatured: theme.featured === true,
      });
      continue;
    }
    slides.push({
      imageUrl: marqueeOrCoverUrl(theme),
      title: theme.name,
      subtitle: theme.author ? `By ${theme.author}` : undefined,
      openTheme: theme,
      badgeFeatured: theme.featured === true,
    });
    for (const f of flavours) {
      slides.push({
        imageUrl: f.marquee_image || f.cover_image,
        title: theme.name,
        subtitle: f.name,
        openTheme: theme,
        badgeFeatured: theme.featured === true,
      });
    }
  }
  return slides;
 }
 export type ModalHeroSlide = { imageUrl: string; caption: string };
 /** Preview image for carousel + flavour picker (matches hero slide order after master slide). */
 export function flavourCarouselImageUrl(f: ThemeFlavour): string {
  const u = (f.marquee_image || f.cover_image || "").trim();
  return u;
 }
 /** Preview image for master variant tile (modal hero slide 0). */
 export function masterCarouselImageUrl(t: Theme): string {
  return (marqueeOrCoverUrl(t) || "").trim();
 }
 /**
 * Ordered preview URLs for the store grid card rotator: master first, then each variant.
 * Uses nested `flavours` when present; otherwise flat `slave` rows (same order as modal when possible).
 */
 export function gridCardPreviewImageUrls(theme: Theme, allStoreRows?: Theme[]): string[] {
  const urls: string[] = [];
  const push = (raw: string) => {
    const u = raw.trim();
    if (u && !urls.includes(u)) urls.push(u);
  };
  push(marqueeOrCoverUrl(theme) || "");
  const flavours = theme.flavours ?? [];
  if (flavours.length > 0) {
    for (const f of flavours) {
      push(flavourCarouselImageUrl(f));
    }
    return urls.length > 0 ? urls : [(theme.coverImage || "").trim()].filter(Boolean);
  }
  if (allStoreRows) {
    const slaves = allStoreRows
      .filter((t) => t.theme_role === "slave" && t.master_id === theme.id)
      .sort((a, b) => a.id.localeCompare(b.id));
    for (const s of slaves) {
      push((marqueeOrCoverUrl(s) || "").trim());
    }
  }
  if (urls.length > 0) return urls;
  const fallback = (theme.coverImage || "").trim();
  return fallback ? [fallback] : [];
 }
 /**
 * Downloads shown on the grid card for a master row: master's count plus each slave
 * (flat `theme_role === "slave"` with `master_id`) and any flavour-only `download_count`
 * when there is no matching flat slave id (nested-only API shape).
 */
 export function masterGridDisplayDownloadCount(master: Theme, allStoreRows: Theme[]): number {
  let total = master.download_count ?? 0;
  const slaveRows = allStoreRows.filter(
    (t) => t.theme_role === "slave" && t.master_id === master.id,
  );
  const countedIds = new Set(slaveRows.map((r) => r.id));
  for (const r of slaveRows) {
    total += r.download_count ?? 0;
  }
  for (const f of master.flavours ?? []) {
    if (countedIds.has(f.id)) continue;
    total += f.download_count ?? 0;
  }
  return total;
 }
 /** Modal hero: master first, then each flavour (plan order). */
 export function buildModalHeroSlides(theme: Theme): ModalHeroSlide[] {
  const slides: ModalHeroSlide[] = [];
  slides.push({
    imageUrl: marqueeOrCoverUrl(theme),
    caption: theme.name,
  });
  const flavours = theme.flavours ?? [];
  for (const f of flavours) {
    slides.push({
      imageUrl: f.marquee_image || f.cover_image,
      caption: `${theme.name} — ${f.name}`,
    });
  }
  return slides;
 }
 /**
 * Relative luminance 0–1 for rgba/rgb/hex-ish strings; fallback 0.5 → white text
 */
 export function pickContrastingTextColor(backgroundCss: string): "#ffffff" | "#0a0a0a" {
  const s = backgroundCss.trim();
  const rgba = s.match(
    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i,
  );
  if (rgba) {
    const r = Number(rgba[1]) / 255;
    const g = Number(rgba[2]) / 255;
    const b = Number(rgba[3]) / 255;
    const a = rgba[4] !== undefined ? Number(rgba[4]) : 1;
    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    const effective = lum * a + 0.05 * (1 - a);
    return effective > 0.45 ? "#0a0a0a" : "#ffffff";
  }
  const hex = s.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
  if (hex) {
    const r = parseInt(hex[1], 16) / 255;
    const g = parseInt(hex[2], 16) / 255;
    const b = parseInt(hex[3], 16) / 255;
    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return lum > 0.45 ? "#0a0a0a" : "#ffffff";
  }
  return "#ffffff";
 }
@@ -1,27 +0,0 @@
 import * as pdfjs from "pdfjs-dist";
 import browser from "webextension-polyfill";
 /** Static copies in `src/public` (see `scripts/copy-pdfjs-assets.mjs`, manifest web_accessible_resources). */
 const PDF_WORKER_RESOURCE = "resources/pdfjs/pdf.worker.min.mjs";
 const PDF_LEGACY_RESOURCE = "resources/pdfjs/pdf.legacy.min.mjs";
 function extensionAssetUrl(relativePath: string): string {
  return browser.runtime.getURL(relativePath.replace(/^\/+/, ""));
 }
 let workerConfigured = false;
 /** Required before pdfjs spawns a worker (content-script / extension isolate). */
 export function ensurePdfjsWorker(): void {
  if (workerConfigured) return;
  pdfjs.GlobalWorkerOptions.workerSrc = extensionAssetUrl(PDF_WORKER_RESOURCE);
  workerConfigured = true;
 }
 /** Page-context script on Firefox must load these chrome-extension:// URLs (see web_accessible_resources). */
 export function getPdfjsPageContextUrls(): { lib: string; worker: string } {
  return {
    lib: extensionAssetUrl(PDF_LEGACY_RESOURCE),
    worker: extensionAssetUrl(PDF_WORKER_RESOURCE),
  };
 }
@@ -14,7 +14,7 @@ const updatedFirefoxManifest = {
  },
  browser_specific_settings: {
    gecko: {
-      id: "betterseqta@betterseqta.com",
+      id: pkg.author.email,
    },
  },
 };
@@ -16,12 +16,12 @@
    }
  },
  "permissions": ["tabs", "notifications", "storage"],
-  "host_permissions": ["https://newsapi.org/", "https://betterseqta.org/", "https://accounts.betterseqta.org/", "*://*/*"],
+  "host_permissions": ["https://newsapi.org/", "*://*/*"],
  "background": {
    "service_worker": "background.ts"
  },
  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' http: https: https://betterseqta.org https://accounts.betterseqta.org https://raw.githubusercontent.com https://newsapi.org"
+    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "content_scripts": [
    {
@@ -32,12 +32,7 @@
  ],
  "web_accessible_resources": [
    {
-      "resources": [
+      "resources": ["resources/icons/*", "resources/update-image.webp"],
        "resources/icons/*",
        "resources/update-image.webp",
        "resources/pdfjs/pdf.worker.min.mjs",
        "resources/pdfjs/pdf.legacy.min.mjs"
      ],
      "matches": ["*://*/*"]
    }
  ]
@@ -10,20 +10,6 @@ class ReactFiber {
      console.log("Selected Nodes:", this.nodes);
      console.log("🔍 Found Fibers:", this.fibers);
      console.log("🛠 Found Components:", this.components);
      // Debug fiber info
      this.fibers.forEach((fiber, index) => {
        if (fiber) {
          console.log(`Fiber ${index}:`, {
            tag: fiber.tag,
            type: fiber.type?.name || fiber.type,
            elementType: fiber.elementType,
            stateNode: fiber.stateNode,
            hasState: !!fiber.stateNode?.state,
            hasMemoizedState: !!fiber.memoizedState
          });
        }
      });
    }
  }
@@ -33,27 +19,10 @@ class ReactFiber {
  getFiberNode(node) {
    if (!node) return null;
    // Try multiple property name patterns for different React versions
    const possibleKeys = [
      '__reactFiber$',           // React 16+
      '__reactInternalFiber$',   // React 15
      '__reactInternalInstance$', // Older versions
      '__reactFiber',
      '__reactInternalInstance'
    ];
    // Check for exact matches first
    for (const key of possibleKeys) {
      if (node[key]) return node[key];
    }
    // Fall back to pattern matching
    const fiberKey = Object.getOwnPropertyNames(node).find(
      (name) =>
        name.startsWith("__reactFiber") ||
-        name.startsWith("__reactInternalInstance") ||
+        name.startsWith("__reactInternalInstance"),
        name.startsWith("__reactInternalFiber")
    );
    return fiberKey ? node[fiberKey] : null;
  }
@@ -61,71 +30,20 @@ class ReactFiber {
  getOwnerComponent(fiberNode) {
    let current = fiberNode;
    while (current) {
      // Use React's internal tag system to identify component types
      // Based on React's WorkTags: ClassComponent = 1, FunctionComponent = 0
      if (current.tag === 1) { // ClassComponent
        return current.stateNode; // For class components, stateNode is the component instance
      }
      // For function components, look for hooks in memoizedState
      if (current.tag === 0 || current.tag === 15) { // FunctionComponent or MemoComponent
        // Function components don't have setState, but we can still track them
        if (current.memoizedState && current.type) {
          return {
            type: 'function',
            hooks: current.memoizedState,
            fiber: current,
            forceUpdate: () => {
              // Trigger re-render by updating fiber
              if (current.alternate) {
                current.alternate.expirationTime = 1;
              }
              current.expirationTime = 1;
            }
          };
        }
      }
      // Legacy fallback: check if stateNode has React component methods
      if (
        current.stateNode &&
        current.stateNode !== null &&
        typeof current.stateNode === 'object' &&
        (current.stateNode.setState || current.stateNode.forceUpdate)
      ) {
        return current.stateNode;
      }
      current = current.return;
    }
    return null;
  }
  getState(key) {
-    if (!this.components.length && !this.fibers.length) return null;
+    if (!this.components.length) return null;
-    
+    const state = this.components[0]?.state || null;
    const component = this.components[0];
    const fiber = this.fibers[0];
    let state = null;
    // Handle class components
    if (component?.state) {
      state = component.state;
    }
    // Handle function components with hooks - look directly at fiber
    else if (fiber?.memoizedState) {
      if (this.debug) {
        console.log("🔍 Raw fiber.memoizedState:", fiber.memoizedState);
      }
      // Extract useState values from the hook chain
      const states = this.extractStateFromHooks(fiber.memoizedState);
      state = states.length === 1 ? states[0] : states;
    }
    // Fallback: try component hooks if available
    else if (component?.type === 'function' && component?.hooks) {
      const states = this.extractStateFromHooks(component.hooks);
      state = states.length === 1 ? states[0] : states;
    }
    if (key === undefined) {
      return state;
@@ -143,137 +61,8 @@ class ReactFiber {
    return null;
  }
  extractStateFromHooks(hookChain) {
    const states = [];
    let mainStateFound = false;
    let currentHook = hookChain;
    let hookIndex = 0;
    if (this.debug) {
      console.log("🔍 Hook chain analysis:");
    }
    while (currentHook) {
      if (this.debug) {
        console.log(`Hook ${hookIndex}:`, {
          type: currentHook.tag || 'unknown',
          memoizedState: currentHook.memoizedState,
          queue: currentHook.queue,
          next: !!currentHook.next
        });
      }
      // Try different approaches to extract state
      if (currentHook.memoizedState !== undefined && currentHook.memoizedState !== null) {
        const state = currentHook.memoizedState;
        // Priority 1: Check for useRef hooks with complex state in .current
        if (!currentHook.queue && 
            typeof state === 'object' && 
            state !== null && 
            state.current !== undefined &&
            typeof state.current === 'object' &&
            state.current !== null) {
          // Check if this looks like a substantial state object (has multiple properties)
          const currentKeys = Object.keys(state.current);
          if (currentKeys.length > 2) {
            states.push(state.current);
            mainStateFound = true;
            if (this.debug) console.log(`  🎯 Found main state in useRef:`, state.current);
          }
        }
        // Priority 2: useState hooks with queue
        else if (currentHook.queue && typeof state !== 'function') {
          states.push(state);
          if (this.debug) console.log(`  ✅ Found useState state:`, state);
        }
        // Priority 3: Other potential state objects (only if we haven't found main state)
        else if (!mainStateFound && !currentHook.queue && typeof state === 'object' && state !== null) {
          // Skip useEffect hooks (they have tag 36)
          if (!(state.tag === 36 && state.create)) {
            states.push(state);
            if (this.debug) console.log(`  📦 Found potential state object:`, state);
          }
        }
        // Priority 4: Simple primitive state
        else if (typeof state !== 'function' && typeof state !== 'object') {
          states.push(state);
          if (this.debug) console.log(`  🔹 Found primitive state:`, state);
        }
      }
      currentHook = currentHook.next;
      hookIndex++;
    }
    if (this.debug) {
      console.log(`🎯 Extracted ${states.length} state values:`, states);
    }
    // If we found main state objects, prioritize and deduplicate them
    if (mainStateFound && states.length > 1) {
      const mainStates = states.filter(state => 
        typeof state === 'object' && 
        state !== null && 
        Object.keys(state).length > 2
      );
      if (mainStates.length > 1) {
        // If we have multiple main state objects, find the most comprehensive one
        // or merge them if they seem complementary
        const largestState = mainStates.reduce((largest, current) => {
          const largestKeys = Object.keys(largest).length;
          const currentKeys = Object.keys(current).length;
          // Prefer the one with more properties
          if (currentKeys > largestKeys) return current;
          // If same number of properties, prefer the one with more complex data
          if (currentKeys === largestKeys) {
            const largestComplexity = this.calculateStateComplexity(largest);
            const currentComplexity = this.calculateStateComplexity(current);
            return currentComplexity > largestComplexity ? current : largest;
          }
          return largest;
        });
        if (this.debug) {
          console.log(`🎯 Selected most comprehensive state from ${mainStates.length} candidates:`, largestState);
        }
        return [largestState];
      }
      return mainStates;
    }
    return states;
  }
  calculateStateComplexity(state) {
    if (!state || typeof state !== 'object') return 0;
    let complexity = 0;
    for (const [key, value] of Object.entries(state)) {
      complexity += 1; // Base point for each property
      if (Array.isArray(value)) {
        complexity += value.length * 0.1; // Arrays get points based on length
      } else if (typeof value === 'object' && value !== null) {
        complexity += Object.keys(value).length * 0.5; // Nested objects get points
      } else if (typeof value === 'function') {
        complexity += 2; // Functions are valuable
      }
    }
    return complexity;
  }
  setState(update) {
    this.components.forEach((component) => {
      // Handle class components
      if (component?.setState) {
        if (typeof update === "function") {
          // Functional update
@@ -296,13 +85,6 @@ class ReactFiber {
          });
        }
      }
      // Handle function components - force re-render since we can't directly update hooks
      else if (component?.type === 'function' && component?.forceUpdate) {
        if (this.debug) {
          console.log("⚠️  Function component detected - triggering re-render. Direct state update not possible.");
        }
        component.forceUpdate();
      }
    });
    return this;
  }
@@ -317,7 +99,7 @@ class ReactFiber {
    return this.fibers[0]?.memoizedProps?.[propName];
  }
-  setProp(propName, value) {
+  setProp(propName) {
    this.fibers.forEach((fiber) => {
      if (fiber?.memoizedProps) {
        fiber.memoizedProps[propName] = value;
@@ -337,176 +119,38 @@ class ReactFiber {
  }
 }
-function makeSerializable(obj, visited = new WeakSet(), depth = 0, maxDepth = 10) {
+function makeSerializable(obj) {
-  // Handle primitives first
+  if (typeof obj !== "object" || obj === null) {
  if (obj === null || obj === undefined) {
    return obj;
  }
  // Catch ALL functions early
  if (typeof obj === "function") {
    return `[Function: ${obj.name || 'anonymous'}]`;
  }
  if (typeof obj !== "object") {
    // Handle other primitives
    if (typeof obj === "symbol") return obj.toString();
    if (typeof obj === "bigint") return obj.toString() + "n";
    return obj;
  }
-  // Prevent infinite recursion - depth limit
+  if (Array.isArray(obj)) {
-  if (depth > maxDepth) {
+    return obj.map((item) => makeSerializable(item));
    return "[Max Depth Reached]";
  }
-  // Prevent circular references
+  const serializableObj = {};
-  if (visited.has(obj)) {
+  for (const key in obj) {
-    return "[Circular Reference]";
+    if (Object.hasOwn(obj, key)) {
-  }
+      let value = obj[key];
  visited.add(obj);
-  try {
+      if (typeof value === "function") {
-    // Handle special objects first
+        value = "[Function]";
-    if (obj instanceof HTMLElement) {
+      } else if (value instanceof HTMLElement) {
-      return {
+        value = {
-        type: "HTMLElement",
+          type: "HTMLElement",
-        tagName: obj.tagName,
+          id: value.id,
-        id: obj.id || null,
+          tagName: value.tagName,
-        className: obj.className || null,
+        }; // Replace DOM node with ID/tag info
-        attributes: obj.attributes ? Array.from(obj.attributes).map(attr => ({ name: attr.name, value: attr.value })) : []
+      } else if (typeof value === "symbol") {
-      };
+        value = value.toString();
-    }
+      } else if (typeof value === "object" && value !== null) {
-
+        value = makeSerializable(value);
    if (obj instanceof Event) {
      return {
        type: "Event",
        eventType: obj.type,
        target: obj.target?.tagName || null
      };
    }
    if (obj instanceof Date) {
      return { type: "Date", value: obj.toISOString() };
    }
    if (obj instanceof RegExp) {
      return { type: "RegExp", source: obj.source, flags: obj.flags };
    }
    if (obj instanceof Error) {
      return { type: "Error", message: obj.message, name: obj.name };
    }
    // Handle React Fiber nodes - these are super circular
    if (obj.tag !== undefined && obj.elementType !== undefined) {
      return {
        type: "ReactFiber",
        tag: obj.tag,
        elementType: typeof obj.elementType === 'function' ? obj.elementType.name || 'AnonymousComponent' : String(obj.elementType),
        key: obj.key,
        hasState: !!obj.stateNode?.state,
        hasMemoizedState: !!obj.memoizedState,
        hasProps: !!obj.memoizedProps
      };
    }
    // Handle arrays
    if (Array.isArray(obj)) {
      return obj.slice(0, 50).map((item, index) => {
        if (index >= 25) return "[...truncated]"; // Smaller limit
        return makeSerializable(item, visited, depth + 1, maxDepth);
      });
    }
    // Handle regular objects
    const serializableObj = {};
    // Get own enumerable properties only to avoid prototype pollution
    const ownKeys = Object.getOwnPropertyNames(obj).filter(key => {
      try {
        return obj.propertyIsEnumerable(key);
      } catch {
        return false;
      }
    });
    // Limit number of properties to avoid huge objects
    const maxKeys = 30; // Smaller limit for safety
    const processedKeys = ownKeys.slice(0, maxKeys);
    for (const key of processedKeys) {
      try {
        // Skip problematic keys early
        const dangerousKeys = [
          'parentNode', 'parentElement', 'ownerDocument', 'children', 'childNodes',
          'return', 'child', 'sibling', 'alternate', 'ref', // React Fiber circular refs
          '_owner', '_source', '_self', '_debugOwner', '_debugSource', // React internals
          'window', 'document', 'global', 'self', 'top', 'parent', // Global objects
          'constructor', 'prototype', '__proto__', // Constructor/prototype chains
          'addEventListener', 'removeEventListener', // Event handlers
          'setState', 'forceUpdate', 'render' // React methods that might be functions
        ];
        if (dangerousKeys.includes(key)) {
          serializableObj[key] = `[Skipped: ${key}]`;
          continue;
        }
-        const descriptor = Object.getOwnPropertyDescriptor(obj, key);
+      serializableObj[key] = value;
        if (descriptor && (descriptor.get || descriptor.set)) {
          serializableObj[key] = "[Getter/Setter]";
          continue;
        }
        let value = obj[key];
        // Handle symbols specifically (React context symbols)
        if (typeof value === "symbol") {
          value = `[Symbol: ${value.description || 'anonymous'}]`;
        }
        // Extra function check
        else if (typeof value === "function") {
          value = `[Function: ${value.name || 'anonymous'}]`;
        } else if (value && typeof value === "object") {
          value = makeSerializable(value, visited, depth + 1, maxDepth);
        }
        serializableObj[key] = value;
      } catch (error) {
        serializableObj[key] = `[Error: ${error.message}]`;
      }
    }
    if (ownKeys.length > maxKeys) {
      serializableObj['...'] = `[${ownKeys.length - maxKeys} more properties]`;
    }
    return serializableObj;
  } catch (error) {
    return `[Serialization Error: ${error.message}]`;
  } finally {
    visited.delete(obj); // Clean up for potential reuse
  }
 }
 // Final safety check - recursively scan for any remaining functions
 function deepFunctionCheck(obj, path = "") {
  if (typeof obj === "function") {
    throw new Error(`Found function at path: ${path}`);
  }
  if (obj && typeof obj === "object") {
    if (Array.isArray(obj)) {
      obj.forEach((item, index) => {
        deepFunctionCheck(item, `${path}[${index}]`);
      });
    } else {
      Object.keys(obj).forEach(key => {
        deepFunctionCheck(obj[key], path ? `${path}.${key}` : key);
      });
    }
  }
  return serializableObj;
 }
 window.addEventListener("message", (event) => {
@@ -552,28 +196,6 @@ window.addEventListener("message", (event) => {
      response = makeSerializable(response);
    }
    // Final safety check before postMessage
    try {
      deepFunctionCheck(response);
    } catch (functionError) {
      console.warn("[pageState] Function detected in response, cleaning:", functionError.message);
      response = `[Cleaned Response - Function found at: ${functionError.message}]`;
    }
    // Additional structured clone test
    try {
      // Test if the object can be cloned (same algorithm as postMessage)
      if (typeof structuredClone === 'function') {
        structuredClone(response);
      } else {
        // Fallback for older browsers - try JSON round-trip
        JSON.parse(JSON.stringify(response));
      }
    } catch (cloneError) {
      console.warn("[pageState] Response not cloneable, fallback:", cloneError.message);
      response = `[Uncloneable Response: ${cloneError.message}]`;
    }
    window.postMessage(
      {
        type: "reactFiberResponse",
@@ -600,5 +222,23 @@ window.addEventListener("message", (event) => {
    });
    document.dispatchEvent(keyboardEvent);
  } else if (event.data.type === "ckeditorSetData") {
    // Handle CKEditor data setting
    const { editorId, content } = event.data;
    if (window.CKEDITOR && window.CKEDITOR.instances && window.CKEDITOR.instances[editorId]) {
      window.CKEDITOR.instances[editorId].setData(content);
    } else {
      console.warn(`[pageState] CKEditor instance '${editorId}' not found`);
    }
  } else if (event.data.type === "ckeditorGetData") {
    const { editorId } = event.data;
    if (window.CKEDITOR && window.CKEDITOR.instances && window.CKEDITOR.instances[editorId]) {
      const data = window.CKEDITOR.instances[editorId].getData();
      window.postMessage({
        type: "ckeditorGetDataResponse",
        data,
      }, "*");
    }
  }
 });
@@ -6,7 +6,6 @@ import {
  Setting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 const settings = defineSettings({
  speed: numberSetting({
@@ -36,10 +35,13 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
  settings: instance.settings,
  run: async (api) => {
-    const [container, menu] = await Promise.all([
+    // Create the background elements
-      waitForElm("#container", true),
+    const container = document.getElementById("container");
-      waitForElm("#menu", true),
+    const menu = document.getElementById("menu");
-    ]);
+
    if (!container || !menu) {
      return () => {};
    }
    const backgrounds = [
      { classes: ["bg"] },
@@ -1,46 +0,0 @@
 import { getEngageAssessmentStudentId } from "@/seqta/utils/engageAssessmentStudent";
 function randomEngagePdfFileName(): string {
  const token = Math.random().toString(36).slice(2, 10);
  return `${token}.pdf`;
 }
 export async function requestEngageAssessmentPdf(params: {
  assessmentID: string | number;
  metaclassID: string | number;
  studentID: string | number;
 }): Promise<string> {
  const fileName = randomEngagePdfFileName();
  const cacheBuster = Math.random().toString(36).slice(2, 10);
  const response = await fetch(
    `${location.origin}/seqta/parent/print/assessment?${cacheBuster}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json; charset=utf-8" },
      credentials: "include",
      body: JSON.stringify({
        id: params.assessmentID,
        metaclass: params.metaclassID,
        student: Number(params.studentID),
        fileName,
      }),
    },
  );
  if (!response.ok) {
    throw new Error(
      `Failed to generate PDF: ${response.status} ${response.statusText}`,
    );
  }
  const data = (await response.json()) as {
    payload?: { file?: string };
  };
  return data.payload?.file ?? fileName;
 }
 export function getEngageAssessmentReportUrl(fileName: string): string {
  return `${location.origin}/seqta/parent/report/get?file=${encodeURIComponent(fileName)}`;
 }
@@ -7,23 +7,6 @@ import {
 import { type Plugin } from "@/plugins/core/types";
 import stringToHTML from "@/seqta/utils/stringToHTML";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import {
  clearStuck,
  getClassByPattern,
  initStorage,
  injectWeightingsTab,
  letterToNumber,
  parseAssessments,
  processAssessments,
  type WeightingEntry,
 } from "./utils.ts";
 import { injectRubricCopyButtons } from "./rubricCopy.ts";
 interface weightingsStorage {
  weightings: Record<string, WeightingEntry>;
  assessments: Record<string, string>;
  weightingOverrides: Record<string, string>;
 }
 const settings = defineSettings({
  lettergrade: booleanSetting({
@@ -40,9 +23,7 @@ class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
 const instance = new AssessmentsAveragePluginClass();
-let overrideListenerController: AbortController | null = null;
+const assessmentsAveragePlugin: Plugin<typeof settings> = {
 const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
  id: "assessments-average",
  name: "Assessment Averages",
  description: "Adds an average grade to the Assessments page",
@@ -51,10 +32,8 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
  settings: instance.settings,
  run: async (api) => {
    await initStorage(api);
    clearStuck(api);
    api.seqta.onMount(".assessmentsWrapper", async () => {
      // Wait for any assessment item to load first
      await waitForElm(
        "#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
        true,
@@ -62,224 +41,164 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
        1000,
      );
-      // Wire listeners first so the very first re-render triggered by a
+      // Helper function to find actual class names by their base pattern
-      // background handleWeightings completion can find them.
+      const getClassByPattern = (
-      overrideListenerController?.abort();
+        element: Element | Document,
-      overrideListenerController = new AbortController();
+        basePattern: string,
-      document.addEventListener(
+      ): string => {
-        "betterseqta:overrideChanged",
+        // Find all classes on the element
-        () => renderSubjectAverage(api),
+        const classes = Array.from(element.querySelectorAll("*"))
-        { signal: overrideListenerController.signal },
+          .flatMap((el) => Array.from(el.classList))
          .filter((className) => className.startsWith(basePattern));
        return classes.length ? classes[0] : "";
      };
      // Find actual class names from the DOM
      const sampleAssessmentItem = document.querySelector(
        "[class*='AssessmentItem__AssessmentItem___']",
      );
-      document.addEventListener(
+      if (!sampleAssessmentItem) return;
-        "betterseqta:weightingsChanged",
+
-        () => renderSubjectAverage(api),
+      // Extract all necessary class patterns from a sample assessment item
-        { signal: overrideListenerController.signal },
+      const assessmentItemClass =
        Array.from(sampleAssessmentItem.classList).find((c) =>
          c.startsWith("AssessmentItem__AssessmentItem___"),
        ) || "";
      const metaContainerClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__metaContainer___",
      );
      const metaClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__meta___",
      );
      const simpleResultClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__simpleResult___",
      );
      const titleClass = getClassByPattern(
        sampleAssessmentItem,
        "AssessmentItem__title___",
      );
-      // Render immediately with whatever is already cached. Fresh entries
+      // Get Thermoscore classes
-      // and stale-with-previous-value entries both contribute their numeric
+      const thermoscoreElement = document.querySelector(
-      // weights, so the subject average appears without waiting on any
+        "[class*='Thermoscore__Thermoscore___']",
-      // background PDF refetches.
+      );
-      await renderSubjectAverage(api);
+      if (!thermoscoreElement) return;
-      // Kick off indexing in the background. Each completion dispatches
+      const thermoscoreClass =
-      // betterseqta:weightingsChanged, which triggers a fresh render.
+        Array.from(thermoscoreElement.classList).find((c) =>
-      void parseAssessments(api);
+          c.startsWith("Thermoscore__Thermoscore___"),
-      const wrapper = document.querySelector(".assessmentsWrapper");
+        ) || "";
-      if (wrapper) {
+      const fillClass = getClassByPattern(
-        const observer = new MutationObserver(() => {
+        thermoscoreElement,
-          applySubjectColourToOverallResult();
+        "Thermoscore__fill___",
-        });
+      );
-        observer.observe(wrapper, { childList: true, subtree: true });
+      const textClass = getClassByPattern(
-        setTimeout(() => observer.disconnect(), 10000);
+        thermoscoreElement,
        "Thermoscore__text___",
      );
      // Find assessment list
      const assessmentsList = document.querySelector(
        "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
      );
      if (!assessmentsList) return;
      const gradeElements = document.querySelectorAll(
        "[class*='Thermoscore__text___']",
      );
      if (!gradeElements.length) return;
      // Parse and average grades
      const letterToNumber: Record<string, number> = {
        "A+": 100,
        A: 95,
        "A-": 90,
        "B+": 85,
        B: 80,
        "B-": 75,
        "C+": 70,
        C: 65,
        "C-": 60,
        "D+": 55,
        D: 50,
        "D-": 45,
        "E+": 40,
        E: 35,
        "E-": 30,
        F: 0,
      };
      function parseGrade(text: string): number {
        const str = text.trim().toUpperCase();
        if (str.includes("/")) {
          const [raw, max] = str.split("/").map((n) => parseFloat(n));
          return (raw / max) * 100;
        }
        if (str.includes("%")) {
          return parseFloat(str.replace("%", "")) || 0;
        }
        return letterToNumber[str] ?? 0;
      }
-    });
+
-    api.seqta.onMount("[class*='SelectedAssessment__']", () => {
+      let total = 0;
-      injectWeightingsTab(api);
+      let count = 0;
-      injectRubricCopyButtons();
+      gradeElements.forEach((el) => {
        const grade = parseGrade(el.textContent || "");
        if (grade > 0) {
          total += grade;
          count++;
        }
      });
      if (!count) return;
      const avg = total / count;
      const rounded = Math.ceil(avg / 5) * 5;
      const numberToLetter = Object.entries(letterToNumber).reduce(
        (acc, [k, v]) => {
          acc[v] = k;
          return acc;
        },
        {} as Record<number, string>,
      );
      const letterAvg = numberToLetter[rounded] ?? "N/A";
      const display = api.settings.lettergrade
        ? letterAvg
        : `${avg.toFixed(2)}%`;
      // Prevent duplicate
      const existing = assessmentsList.querySelector(
        `[class*='AssessmentItem__title___']`,
      );
      if (existing?.textContent === "Subject Average") return;
      // Use the dynamic class names in the HTML template
      const averageElement = stringToHTML(/* html */ `
        <div class="${assessmentItemClass}">
          <div class="${metaContainerClass}">
            <div class="${metaClass}">
              <div class="${simpleResultClass}">
                <div class="${titleClass}">Subject Average</div>
              </div>
            </div>
          </div>
          <div class="${thermoscoreClass}">
            <div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
              <div class="${textClass}" title="${display}">${display}</div>
            </div>
          </div>
        </div>
      `).firstChild;
      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
    });
  },
 };
 let renderInFlight = false;
 let renderQueued = false;
 async function renderSubjectAverage(api: any) {
  if (renderInFlight) {
    // Coalesce: remember that fresh data arrived during this render and
    // re-run once the current pass finishes, so the UI catches up to the
    // latest storage state instead of silently dropping the event.
    renderQueued = true;
    return;
  }
  renderInFlight = true;
  try {
    const assessmentsList = document.querySelector(
      "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
    );
    if (!assessmentsList) return;
    // Remove existing subject average before re-rendering
    Array.from(
      assessmentsList.querySelectorAll(`[class*='AssessmentItem__title___']`),
    )
      .find((el) => el.textContent === "Subject Average")
      ?.closest("[class*='AssessmentItem__AssessmentItem___']")
      ?.remove();
    const sampleAssessmentItem = document.querySelector(
      "[class*='AssessmentItem__AssessmentItem___']",
    );
    if (!sampleAssessmentItem) return;
    const assessmentItemClass =
      Array.from(sampleAssessmentItem.classList).find((c) =>
        c.startsWith("AssessmentItem__AssessmentItem___"),
      ) || "";
    const metaContainerClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__metaContainer___",
    );
    const metaClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__meta___",
    );
    const simpleResultClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__simpleResult___",
    );
    const titleClass = getClassByPattern(
      sampleAssessmentItem,
      "AssessmentItem__title___",
    );
    const assessmentItems = Array.from(
      assessmentsList.querySelectorAll(
        `[class*='AssessmentItem__AssessmentItem___']`,
      ),
    ).filter(
      (item) =>
        !item
          .querySelector(`[class*='AssessmentItem__title___']`)
          ?.textContent?.includes("Subject Average"),
    );
    const {
      weightedTotal,
      totalWeight,
      hasInaccurateWeighting,
      hasRefreshingWeighting,
      count,
    } = await processAssessments(api, assessmentItems);
    if (!count || totalWeight === 0) return;
    const thermoscoreElement = document.querySelector(
      "[class*='Thermoscore__Thermoscore___']",
    );
    if (!thermoscoreElement) return;
    const thermoscoreClass =
      Array.from(thermoscoreElement.classList).find((c) =>
        c.startsWith("Thermoscore__Thermoscore___"),
      ) || "";
    const fillClass = getClassByPattern(
      thermoscoreElement,
      "Thermoscore__fill___",
    );
    const textClass = getClassByPattern(
      thermoscoreElement,
      "Thermoscore__text___",
    );
    const avg = weightedTotal / totalWeight;
    const rounded = Math.ceil(avg / 5) * 5;
    const numberToLetter = Object.entries(letterToNumber).reduce(
      (acc, [k, v]) => {
        acc[v] = k;
        return acc;
      },
      {} as Record<number, string>,
    );
    const letterAvg = numberToLetter[rounded] ?? "N/A";
    const display = api.settings.lettergrade ? letterAvg : `${avg.toFixed(2)}%`;
    let warningHTML = "";
    if (hasInaccurateWeighting) {
      warningHTML = /* html */ `
            <div style="margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.6); opacity: 0.8; line-height: 1.3; white-space: nowrap;">
              ⚠ Some weightings unavailable
            </div>
          `;
    } else if (hasRefreshingWeighting) {
      warningHTML = /* html */ `
            <div style="margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.55); opacity: 0.8; line-height: 1.3; white-space: nowrap;" title="Some weightings are being re-checked; the average may change shortly">
              ↻ Refreshing weightings
            </div>
          `;
    }
    const thermoscoreTitle = hasInaccurateWeighting
      ? `${display} (some weightings unavailable)`
      : hasRefreshingWeighting
        ? `${display} (re-checking weightings)`
        : display;
    assessmentsList.insertBefore(
      stringToHTML(/* html */ `
          <div class="${assessmentItemClass}">
            <div class="${metaContainerClass}">
              <div class="${metaClass}">
                <div class="${simpleResultClass}">
                  <div class="${titleClass}">Subject Average</div>
                  ${warningHTML}
                </div>
              </div>
            </div>
            <div class="${thermoscoreClass}">
              <div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
                <div class="${textClass}" title="${thermoscoreTitle}">${display}</div>
              </div>
            </div>
          </div>
        `).firstChild!,
      assessmentsList.firstChild,
    );
    applySubjectColourToOverallResult();
  } finally {
    renderInFlight = false;
    if (renderQueued) {
      renderQueued = false;
      void renderSubjectAverage(api);
    }
  }
 }
 function applySubjectColourToOverallResult() {
  const selectedAssessmentItem = document.querySelector(
    "[class*='AssessmentItem__AssessmentItem___'][class*='selected___']",
  ) || document.querySelector(
    "[class*='Collapsible__content___'] [class*='AssessmentItem__AssessmentItem___']",
  );
  const assessmentThermoscore = selectedAssessmentItem?.querySelector(
    "[class*='Thermoscore__Thermoscore___']",
  ) as HTMLElement | null;
  const overallResult = document.querySelector(
    "[class*='OverallResult__OverallResult___']",
  ) as HTMLElement | null;
  const assessableCriterionHeaders = document.querySelectorAll(
    "[class*='AssessableCriterion__header___']",
  );
  if (assessmentThermoscore && (overallResult || assessableCriterionHeaders.length > 0)) {
    const accentColour =
      getComputedStyle(assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
      getComputedStyle(assessmentThermoscore).getPropertyValue("--fill-colour").trim() ||
      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--item-colour").trim();
    if (accentColour) {
      overallResult?.style.setProperty("--assessment-accent-colour", accentColour);
      overallResult?.style.setProperty("--fill-colour", accentColour);
      assessableCriterionHeaders.forEach((el) => {
        (el as HTMLElement).style.setProperty("--assessment-accent-colour", accentColour);
        (el as HTMLElement).style.setProperty("--fill-colour", accentColour);
      });
    }
  }
 }
 export default assessmentsAveragePlugin;
@@ -1,388 +0,0 @@
 const RUBRIC_SELECTOR =
  "[class*='AssessableCriterion__rubric___'][class*='Rubric__Rubric___'], [class*='Rubric__Rubric___'][class*='AssessableCriterion__rubric___']";
 const ENHANCED_ATTR = "data-betterseqta-rubric-copy";
 const STYLE_ID = "betterseqta-rubric-copy-styles-v2";
 let observer: MutationObserver | null = null;
 function ensureStyles() {
  if (document.getElementById(STYLE_ID)) return;
  const style = document.createElement("style");
  style.id = STYLE_ID;
  style.textContent = `
    .betterseqta-rubric-copy-host {
      position: relative;
    }
    .betterseqta-rubric-copy-overlay {
      position: absolute;
      inset: auto 0 0 0;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 0.75rem 0.85rem;
      pointer-events: none;
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.42) 42%,
        rgba(0, 0, 0, 0.08) 72%,
        transparent 100%
      );
      border-radius: 0 0 8px 8px;
      z-index: 5;
    }
    .betterseqta-rubric-copy-host:hover .betterseqta-rubric-copy-overlay,
    .betterseqta-rubric-copy-host:focus-within .betterseqta-rubric-copy-overlay {
      opacity: 1;
      transform: translateY(0);
    }
    .betterseqta-rubric-copy-btn {
      pointer-events: auto;
      display: inline-flex !important;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.75rem !important;
      margin: 0 !important;
      border: 1px solid rgba(15, 23, 42, 0.12) !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      color: #0f172a !important;
      font-family: Rubik, system-ui, sans-serif !important;
      font-size: 0.8125rem !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
      transform: translateY(0) scale(1);
      transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    }
    .betterseqta-rubric-copy-btn:hover {
      transform: translateY(-1px) scale(1.04) !important;
      background: #f1f5f9 !important;
      color: #0f172a !important;
      border-color: rgba(15, 23, 42, 0.18) !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    }
    .betterseqta-rubric-copy-btn:active {
      transform: translateY(0) scale(0.98) !important;
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }
    .betterseqta-rubric-copy-btn:focus-visible {
      outline: none !important;
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 0 0 4px rgba(59, 130, 246, 0.85) !important;
    }
    .betterseqta-rubric-copy-btn svg {
      width: 1rem !important;
      height: 1rem !important;
      flex-shrink: 0;
      stroke: currentColor !important;
      fill: none !important;
    }
    .betterseqta-rubric-copy-btn.is-copied {
      background: #ecfdf5 !important;
      color: #047857 !important;
      border-color: rgba(4, 120, 87, 0.25) !important;
    }
    .betterseqta-rubric-copy-btn.is-copied:hover {
      background: #d1fae5 !important;
      color: #065f46 !important;
    }
    @media (prefers-reduced-motion: reduce) {
      .betterseqta-rubric-copy-overlay,
      .betterseqta-rubric-copy-btn {
        transition: none;
      }
    }
  `;
  document.head.appendChild(style);
 }
 function cellText(element: Element | null | undefined): string {
  return element?.textContent?.replace(/\s+/g, " ").trim() ?? "";
 }
 function escapeHtml(text: string): string {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
 }
 interface RubricCell {
  text: string;
  selected: boolean;
 }
 interface RubricTableData {
  header: string[];
  rows: RubricCell[][];
 }
 function parseRubricTable(rubric: Element): RubricTableData | null {
  const lines = rubric.querySelectorAll("[class*='Rubric__line___']");
  const rows: RubricCell[][] = [];
  lines.forEach((line) => {
    const meta = line.querySelector("[class*='Rubric__meta___']");
    const label = cellText(meta?.querySelector("[class*='Rubric__label___']"));
    const criterion = cellText(
      meta?.querySelector("[class*='Rubric__description___']"),
    );
    const row: RubricCell[] = [
      { text: label, selected: false },
      { text: criterion, selected: false },
    ];
    line.querySelectorAll("[class*='Rubric__descriptor___']").forEach((descriptor) => {
      const text = cellText(
        descriptor.querySelector("[class*='Rubric__description___']"),
      );
      const selected = Array.from(descriptor.classList).some((cls) =>
        cls.startsWith("Rubric__selected___"),
      );
      row.push({ text, selected });
    });
    if (row.some((cell) => cell.text)) rows.push(row);
  });
  if (!rows.length) return null;
  const maxCols = Math.max(...rows.map((row) => row.length));
  const normalized = rows.map((row) => {
    const copy = [...row];
    while (copy.length < maxCols) {
      copy.push({ text: "", selected: false });
    }
    return copy;
  });
  const header = [
    "Category",
    "Criterion",
    ...Array.from({ length: maxCols - 2 }, (_, i) => `Band ${i + 1}`),
  ].slice(0, maxCols);
  return { header, rows: normalized };
 }
 function rubricToPlainText(table: RubricTableData): string {
  const formatCell = (cell: RubricCell) =>
    cell.selected && cell.text ? `${cell.text} (selected)` : cell.text;
  return [
    table.header.join("\t"),
    ...table.rows.map((row) => row.map(formatCell).join("\t")),
  ].join("\n");
 }
 const RUBRIC_PASTE_FONT_PT = 7;
 function rubricPasteFontStyle(): string {
  return [
    `font-size:${RUBRIC_PASTE_FONT_PT}pt`,
    "mso-ansi-font-size:8.0pt",
    "mso-bidi-font-size:8.0pt",
    "font-family:Calibri,Arial,sans-serif",
    "line-height:1.2",
  ].join(";");
 }
 function rubricPasteCellContent(text: string): string {
  return `<span style="${rubricPasteFontStyle()}">${escapeHtml(text)}</span>`;
 }
 function rubricToHtmlTable(table: RubricTableData): string {
  const baseFont = rubricPasteFontStyle();
  const cellStyle =
    `border:1px solid #000000;border-collapse:collapse;padding:4px;vertical-align:top;${baseFont}`;
  const headerStyle = `${cellStyle}background:#f3f4f6;font-weight:700;`;
  const selectedStyle = `${cellStyle}background:#dbeafe;font-weight:600;`;
  const headerRow = table.header
    .map(
      (heading) =>
        `<th style="${headerStyle}">${rubricPasteCellContent(heading)}</th>`,
    )
    .join("");
  const bodyRows = table.rows
    .map((row) => {
      const cells = row
        .map((cell) => {
          const style = cell.selected ? selectedStyle : cellStyle;
          return `<td style="${style}">${rubricPasteCellContent(cell.text)}</td>`;
        })
        .join("");
      return `<tr>${cells}</tr>`;
    })
    .join("");
  return [
    `<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;${baseFont}">`,
    `<thead><tr>${headerRow}</tr></thead>`,
    `<tbody>${bodyRows}</tbody>`,
    "</table>",
  ].join("");
 }
 function rubricToHtmlDocument(table: RubricTableData): string {
  return [
    "<!DOCTYPE html>",
    "<html>",
    "<head><meta charset=\"utf-8\"></head>",
    `<body style="${rubricPasteFontStyle()}">`,
    rubricToHtmlTable(table),
    "</body>",
    "</html>",
  ].join("");
 }
 async function copyRubricTable(rubric: Element, button: HTMLButtonElement) {
  const table = parseRubricTable(rubric);
  if (!table) return;
  const plain = rubricToPlainText(table);
  const htmlTable = rubricToHtmlTable(table);
  const htmlDocument = rubricToHtmlDocument(table);
  let copied = false;
  if (navigator.clipboard?.write && typeof ClipboardItem !== "undefined") {
    try {
      await navigator.clipboard.write([
        new ClipboardItem({
          "text/plain": new Blob([plain], { type: "text/plain" }),
          "text/html": new Blob([htmlDocument], { type: "text/html" }),
        }),
      ]);
      copied = true;
    } catch {
      // Fall through to legacy rich-text copy.
    }
  }
  if (!copied) {
    const host = document.createElement("div");
    host.contentEditable = "true";
    host.innerHTML = htmlTable;
    host.style.position = "fixed";
    host.style.left = "-9999px";
    host.style.top = "0";
    document.body.appendChild(host);
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(host);
    selection?.removeAllRanges();
    selection?.addRange(range);
    copied = document.execCommand("copy");
    selection?.removeAllRanges();
    host.remove();
    if (!copied) {
      await navigator.clipboard.writeText(plain);
    }
  }
  const label = button.querySelector(".betterseqta-rubric-copy-label");
  const original = label?.textContent ?? "Copy rubric";
  button.classList.add("is-copied");
  if (label) label.textContent = "Copied!";
  window.setTimeout(() => {
    button.classList.remove("is-copied");
    if (label) label.textContent = original;
  }, 1800);
 }
 function createCopyButton(rubric: Element): HTMLButtonElement {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "betterseqta-rubric-copy-btn";
  button.setAttribute("aria-label", "Copy rubric");
  button.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
    </svg>
    <span class="betterseqta-rubric-copy-label">Copy rubric</span>
  `;
  button.addEventListener("click", (event) => {
    event.preventDefault();
    event.stopPropagation();
    void copyRubricTable(rubric, button);
  });
  return button;
 }
 function enhanceRubric(rubric: HTMLElement) {
  if (rubric.hasAttribute(ENHANCED_ATTR)) return;
  const host = document.createElement("div");
  host.className = "betterseqta-rubric-copy-host";
  rubric.parentElement?.insertBefore(host, rubric);
  host.appendChild(rubric);
  const overlay = document.createElement("div");
  overlay.className = "betterseqta-rubric-copy-overlay";
  overlay.appendChild(createCopyButton(rubric));
  host.appendChild(overlay);
  rubric.setAttribute(ENHANCED_ATTR, "true");
 }
 function enhanceRubrics(root: ParentNode = document) {
  ensureStyles();
  root.querySelectorAll<HTMLElement>(RUBRIC_SELECTOR).forEach(enhanceRubric);
 }
 function watchRubrics(root: ParentNode) {
  observer?.disconnect();
  enhanceRubrics(root);
  observer = new MutationObserver(() => {
    enhanceRubrics(root);
  });
  observer.observe(root, { childList: true, subtree: true });
 }
 export function injectRubricCopyButtons() {
  const root =
    document.querySelector("[class*='SelectedAssessment__']") ?? document;
  watchRubrics(root);
 }
 export function teardownRubricCopyButtons() {
  observer?.disconnect();
  observer = null;
 }
@@ -1,26 +1,15 @@
 <script lang="ts">
  import { determineStatus, formatDate, getGradeValue } from "./utils";
  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
  import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
  import { buildEngageAssessmentPagePath } from "@/seqta/utils/engageAssessmentStudent";
  import OverviewIcon from "./OverviewIcon.svelte";
  import {
    GROUP_SORT_ICONS,
    STATUS_COLUMN_ICONS,
    type OverviewIconName,
  } from "./icons";
  import confetti from "canvas-confetti";
  export let data: any;
  interface FilterOptions {
    subject: string;
-    student: string;
+    sortBy: "due" | "grade" | "subject" | "title";
    sortBy: "due" | "grade" | "subject" | "title" | "year";
  }
  const HIDDEN_ASSESSMENTS_KEY = "betterseqta-hidden-assessments";
  function percentageToLetter(percentage: number): string {
    const letterMap: Record<number, string> = {
      100: "A+",
@@ -47,142 +36,53 @@
  let currentFilters: FilterOptions = {
    subject: "all",
    student: "all",
    sortBy: "due",
  };
  const isEngage = isSeqtaEngageExperience();
  $: showStudentFilter = isEngage && (data?.students?.length ?? 0) > 1;
  let filteredAssessments: any[] = [];
  let statusGroups: Record<string, any[]> = {};
  let columns: {
    key: string;
    title: string;
    className: string;
    icon: OverviewIconName;
  }[] = [];
  function getAssessmentYear(a: any): number {
    const dateStr = a.due || a.date || a.dueDate || a.created;
    return dateStr ? new Date(dateStr).getFullYear() : 0;
  }
  function getAssessmentType(a: any): string {
    return (a.type || a.assessmentType || a.taskType || "Other").toString();
  }
  function getAssessmentGrade(a: any): string {
    const val = getGradeValue(a);
    if (val === null) return "No grade";
    return percentageToLetter(val);
  }
  function getGroupKey(assessment: any): string {
    switch (currentFilters.sortBy) {
      case "due":
        return determineStatus(assessment);
      case "year":
        return String(getAssessmentYear(assessment) || "Unknown");
      case "subject":
        return assessment.code || "Unknown";
      case "grade":
        return getAssessmentGrade(assessment);
      case "title":
        const first = (assessment.title || "?")[0].toUpperCase();
        return /[A-Z0-9]/.test(first) ? first : "#";
      default:
        return determineStatus(assessment);
    }
  }
  function sortCompare(a: any, b: any): number {
    return new Date(a.due || a.date || 0).getTime() - new Date(b.due || b.date || 0).getTime();
  }
  const STATUS_COLUMNS: {
    key: string;
    title: string;
    className: string;
    icon: OverviewIconName;
  }[] = [
    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "calendar-days" },
    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "clock" },
    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "exclamation-triangle" },
    { key: "SUBMITTED", title: "Submitted", className: "column-submitted", icon: "document-check" },
    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "check-circle" },
  ];
  function groupSortIcon(): OverviewIconName {
    return GROUP_SORT_ICONS[currentFilters.sortBy] ?? "queue-list";
  }
  function buildGroupsAndColumns() {
    if (!data?.assessments) return { filteredAssessments: [], statusGroups: {}, columns: [] };
    const subjectFilters = settingsState.subjectfilters || {};
    const hiddenAssessmentIds = new Set(
      (JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String)
    );
    const filtered = data.assessments.filter((a: any) => {
      if (hiddenAssessmentIds.has(String(a.id))) return false;
      if (subjectFilters[a.code] === false) return false;
      if (currentFilters.subject !== "all" && a.code !== currentFilters.subject) {
        return false;
      }
      if (
        isEngage &&
        currentFilters.student !== "all" &&
        String(a.studentId) !== currentFilters.student
      ) {
        return false;
      }
      return true;
    });
    const groups: Record<string, any[]> = {};
    filtered.forEach((assessment) => {
      const key = getGroupKey(assessment);
      if (!groups[key]) groups[key] = [];
      groups[key].push(assessment);
    });
    Object.keys(groups).forEach((key) => {
      groups[key].sort(sortCompare);
    });
    let cols: { key: string; title: string; className: string; icon: OverviewIconName }[];
    if (currentFilters.sortBy === "due") {
      cols = STATUS_COLUMNS;
    } else {
      const keys = Object.keys(groups).filter((k) => groups[k]?.length > 0);
      const sortIcon = groupSortIcon();
      if (currentFilters.sortBy === "year") {
        cols = keys.sort((a, b) => Number(b) - Number(a)).map((k) => ({ key: k, title: k, className: "column-custom", icon: sortIcon }));
      } else if (currentFilters.sortBy === "subject") {
        const subjectTitles = new Map(data?.subjects?.map((s: any) => [s.code, `${s.code} - ${s.title}`]) || []);
        cols = keys.sort().map((k) => ({ key: k, title: subjectTitles.get(k) || k, className: "column-custom", icon: sortIcon }));
      } else {
        cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: sortIcon }));
      }
    }
    return { filteredAssessments: filtered, statusGroups: groups, columns: cols };
  }
  $: if (data) {
    const _ = currentFilters.sortBy && currentFilters.subject;
    const result = buildGroupsAndColumns();
    filteredAssessments = result.filteredAssessments;
    statusGroups = result.statusGroups;
    columns = result.columns;
  }
  function updateAssessments() {
-    const result = buildGroupsAndColumns();
+    filteredAssessments = data.assessments.filter((a: any) => {
-    filteredAssessments = result.filteredAssessments;
+      const subjectMatch =
-    statusGroups = result.statusGroups;
+        currentFilters.subject === "all" || a.code === currentFilters.subject;
-    columns = result.columns;
+      return subjectMatch;
    });
    filteredAssessments.sort((a: any, b: any) => {
      switch (currentFilters.sortBy) {
        case "due":
          return new Date(a.due).getTime() - new Date(b.due).getTime();
        case "grade":
          const gradeA = getGradeValue(a);
          const gradeB = getGradeValue(b);
          if (gradeA === null && gradeB === null) return 0;
          if (gradeA === null) return 1;
          if (gradeB === null) return -1;
          return gradeB - gradeA;
        case "subject":
          return a.code.localeCompare(b.code);
        case "title":
          return a.title.localeCompare(b.title);
        default:
          return 0;
      }
    });
    statusGroups = {
      UPCOMING: [],
      DUE_SOON: [],
      OVERDUE: [],
      SUBMITTED: [],
      MARKS_RELEASED: [],
    };
    filteredAssessments.forEach((assessment) => {
      const status = determineStatus(assessment);
      if (statusGroups[status]) {
        statusGroups[status].push(assessment);
      }
    });
  }
  function getDueDateClass(assessment: any): string {
@@ -223,56 +123,6 @@
    }
  }
  function hideAssessment(assessment: any) {
    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
    const id = String(assessment.id);
    if (!hidden.includes(id)) {
      hidden.push(id);
      localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(hidden));
      visibilityRefresh++;
      closeAllMenus();
      updateAssessments();
    }
  }
  function hideSubject(subjectCode: string) {
    const filters = { ...(settingsState.subjectfilters || {}) };
    filters[subjectCode] = false;
    settingsState.subjectfilters = filters;
    closeAllMenus();
    updateAssessments();
  }
  function unhideSubject(subjectCode: string) {
    const filters = { ...(settingsState.subjectfilters || {}) };
    filters[subjectCode] = true;
    settingsState.subjectfilters = filters;
    updateAssessments();
  }
  function unhideAssessment(assessmentId: string) {
    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
    const idStr = String(assessmentId);
    const filtered = hidden.filter((id: string) => id !== idStr);
    localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(filtered));
    visibilityRefresh++;
    updateAssessments();
  }
  function initSubjectFilters() {
    const filters = settingsState.subjectfilters || {};
    let updated = false;
    data.subjects.forEach((s: any) => {
      if (!Object.prototype.hasOwnProperty.call(filters, s.code)) {
        filters[s.code] = true;
        updated = true;
      }
    });
    if (updated) {
      settingsState.subjectfilters = filters;
    }
  }
  function checkForCelebration() {
    const overdueCount = statusGroups.OVERDUE?.length || 0;
    const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
@@ -347,37 +197,10 @@
    if ((event.target as HTMLElement).closest(".card-menu")) {
      return;
    }
    if (isSeqtaEngageExperience()) {
      const studentId = assessment.studentId ?? data?.studentId;
      if (!studentId) return;
      window.location.hash = buildEngageAssessmentPagePath(
        studentId,
        assessment.programmeID,
        assessment.metaclassID,
        assessment.id,
      );
      return;
    }
    window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
  }
  let openMenuId: string | null = null;
  let showVisibilityPanel = false;
  let visibilityRefresh = 0;
  $: hiddenSubjects = data?.subjects?.filter(
    (s: any) => (settingsState.subjectfilters || {})[s.code] === false
  ) || [];
  $: hiddenAssessmentIds = (() => {
    visibilityRefresh; // Dependency for reactivity
    return new Set((JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String));
  })();
  $: hiddenAssessmentsWithInfo = data?.assessments?.filter(
    (a: any) => hiddenAssessmentIds.has(String(a.id))
  ) || [];
  $: hasHiddenItems = hiddenSubjects.length > 0 || hiddenAssessmentsWithInfo.length > 0;
  function toggleMenu(assessmentId: string, event: Event) {
    event.stopPropagation();
@@ -388,96 +211,71 @@
    openMenuId = null;
  }
-  $: if (data) {
+  $: {
-    initSubjectFilters();
+    if (data) {
-    updateAssessments();
+      updateAssessments();
-    void currentFilters.sortBy;
+    }
    void currentFilters.subject;
    void currentFilters.student;
  }
  const columns = [
    {
      key: "UPCOMING",
      title: "Upcoming",
      className: "column-upcoming",
      icon: "📅",
    },
    {
      key: "DUE_SOON",
      title: "Due Soon",
      className: "column-due-soon",
      icon: "⏰",
    },
    {
      key: "OVERDUE",
      title: "Overdue",
      className: "column-overdue",
      icon: "🚨",
    },
    {
      key: "SUBMITTED",
      title: "Submitted",
      className: "column-submitted",
      icon: "📝",
    },
    {
      key: "MARKS_RELEASED",
      title: "Marked",
      className: "column-marked",
      icon: "✅",
    },
  ];
 </script>
 <svelte:window on:click={closeAllMenus} />
-<div class="bsplus-overview-page">
+<div id="grid-view-container">
-  <header class="grid-view-header bsplus-overview-animate">
+  <div class="grid-view-header">
-    <div class="grid-view-header-text">
+    <h1 class="grid-view-title">Assessments</h1>
-      <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
      <p class="grid-view-subtitle">Track upcoming tasks, submissions, and released marks</p>
    </div>
    <div class="grid-view-filters bsplus-overview-toolbar">
      {#if showStudentFilter}
        <select class="filter-select" bind:value={currentFilters.student}>
          <option value="all">All Students</option>
          {#each data.students as student}
            <option value={String(student.id)}>{student.name}</option>
          {/each}
        </select>
      {/if}
      <select class="filter-select" bind:value={currentFilters.subject}>
        <option value="all">All Subjects</option>
        {#each data.subjects as subject}
          <option value={subject.code}>{subject.code} - {subject.title}</option>
        {/each}
      </select>
-      <select class="filter-select" bind:value={currentFilters.sortBy} title="Group by - columns change based on this">
+      <select class="filter-select" bind:value={currentFilters.sortBy}>
-        <option value="due">Group: Status</option>
+        <option value="due">Sort by Due Date</option>
-        <option value="year">Group: Year</option>
+        <option value="grade">Sort by Grade</option>
-        <option value="subject">Group: Subject</option>
+        <option value="subject">Sort by Subject</option>
-        <option value="grade">Group: Grade</option>
+        <option value="title">Sort by Title</option>
        <option value="title">Group: Title (A-Z)</option>
      </select>
      {#if hasHiddenItems}
        <button
          class="visibility-toggle"
          class:active={showVisibilityPanel}
          on:click={() => (showVisibilityPanel = !showVisibilityPanel)}
          title="Manage hidden subjects and assessments"
        >
          <OverviewIcon name="eye" size={18} />
          <span>Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})</span>
        </button>
      {/if}
    </div>
-  </header>
+  </div>
-  {#if showVisibilityPanel && hasHiddenItems}
+  <div id="main-grid-content">
    <div class="visibility-panel bsplus-overview-animate">
      <h4 class="visibility-panel-title">Hidden items</h4>
      {#if hiddenSubjects.length > 0}
        <div class="visibility-section">
          <span class="visibility-label">Subjects:</span>
          <div class="visibility-chips">
            {#each hiddenSubjects as subject}
              <span class="visibility-chip">
                {subject.code}
                <button class="visibility-unhide" on:click={() => unhideSubject(subject.code)}>Show</button>
              </span>
            {/each}
          </div>
        </div>
      {/if}
      {#if hiddenAssessmentsWithInfo.length > 0}
        <div class="visibility-section">
          <span class="visibility-label">Assessments:</span>
          <div class="visibility-chips">
            {#each hiddenAssessmentsWithInfo as assessment}
              <span class="visibility-chip">
                {assessment.title}
                <button class="visibility-unhide" on:click={() => unhideAssessment(assessment.id)}>Show</button>
              </span>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  {/if}
  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
    {#if filteredAssessments.length === 0}
      <div class="empty-state">
-        <OverviewIcon name="clipboard-document-list" size={40} class="empty-icon" />
+        <div class="empty-icon">📋</div>
        <p>No assessments found matching your filters</p>
      </div>
    {:else}
@@ -488,15 +286,9 @@
              <div class="kanban-column {column.className}">
                <div class="column-header">
                  <div class="column-title">
-                  <span class="column-title-main">
+                    {column.icon} {column.title}
-                    <OverviewIcon
+                    <span class="column-count">{statusGroups[column.key].length}</span>
-                      name={column.icon ?? STATUS_COLUMN_ICONS[column.key] ?? "queue-list"}
+                  </div>
                      size={18}
                    />
                    {column.title}
                  </span>
                  <span class="column-count">{statusGroups[column.key].length}</span>
                </div>
                </div>
                <div class="column-cards" id="{column.key.toLowerCase()}-cards">
                  {#each statusGroups[column.key] as assessment}
@@ -515,9 +307,6 @@
                      on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
                    >
                      <div class="card-labels">
                        {#if isEngage && assessment.studentName}
                          <span class="card-label label-student">{assessment.studentName}</span>
                        {/if}
                        <span class="card-label label-subject">{assessment.code}</span>
                        {#if assessment.submitted}
                          <span class="card-label label-submitted" style="background: #10b981; color: white;">Submitted</span>
@@ -535,7 +324,11 @@
                            on:click={(e) => toggleMenu(assessment.id, e)}
                            aria-label="Open menu"
                          >
-                            <OverviewIcon name="ellipsis-vertical" size={16} />
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                              <circle cx="12" cy="5" r="2"/>
                              <circle cx="12" cy="12" r="2"/>
                              <circle cx="12" cy="19" r="2"/>
                            </svg>
                          </button>
                          <div class="menu-dropdown" style="display: {openMenuId === assessment.id ? 'block' : 'none'};">
                            {#if status !== "MARKS_RELEASED"}
@@ -547,12 +340,6 @@
                                Mark as Not Complete
                              </button>
                            {/if}
                            <button class="menu-item menu-item-hide" on:click={() => hideAssessment(assessment)}>
                              Hide assessment
                            </button>
                            <button class="menu-item menu-item-hide" on:click={() => hideSubject(assessment.code)}>
                              Hide subject ({assessment.code})
                            </button>
                          </div>
                        </div>
                      {/if}
@@ -562,8 +349,7 @@
                      {#if !assessment.results && !isCompleted}
                        <div class="assessment-meta">
                          <div class="due-date {dueDateClass}">
-                            <OverviewIcon name="calendar-days" size={14} />
+                            📅 {formatDate(assessment.due, assessment.submitted)}
                            {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
                          </div>
                        </div>
                      {/if}
@@ -595,4 +381,4 @@
      </div>
    {/if}
  </div>
-</div>
+</div>
@@ -1,11 +1,8 @@
 <script lang="ts">
  import OverviewIcon from "./OverviewIcon.svelte";
  export let error: string;
 </script>
-<div class="error-container bsplus-overview-animate">
+<div class="error-container">
  <OverviewIcon name="exclamation-circle" size={40} class="error-icon" />
  <p class="error-text">Failed to load assessments</p>
-  <p class="error-detail">{error}</p>
+  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
-</div>
+</div>
@@ -1,32 +0,0 @@
 <script lang="ts">
  import { OVERVIEW_ICON_PATHS, type OverviewIconName } from "./icons";
  interface Props {
    name: OverviewIconName;
    class?: string;
    size?: number;
  }
  let { name, class: className = "", size = 20 }: Props = $props();
  const paths = $derived.by(() => {
    const raw = OVERVIEW_ICON_PATHS[name];
    return Array.isArray(raw) ? raw : [raw];
  });
 </script>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
  width={size}
  height={size}
  class="bsplus-overview-icon {className}"
  aria-hidden="true"
 >
  {#each paths as path, index (index)}
    <path stroke-linecap="round" stroke-linejoin="round" d={path} />
  {/each}
 </svg>
@@ -1,28 +1,7 @@
-<script lang="ts">
+<div id="grid-view-container">
-  import OverviewIcon from "./OverviewIcon.svelte";
+  <div class="grid-view-header">
-  import type { OverviewIconName } from "./icons";
+    <h1 class="grid-view-title">Assessments</h1>
-
+    <div class="grid-view-filters">
  const columns: {
    key: string;
    title: string;
    className: string;
    icon: OverviewIconName;
    skeletonCount: number;
  }[] = [
    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "calendar-days", skeletonCount: 3 },
    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "clock", skeletonCount: 2 },
    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "exclamation-triangle", skeletonCount: 1 },
    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "check-circle", skeletonCount: 4 },
  ];
 </script>
 <div class="bsplus-overview-page">
  <header class="grid-view-header bsplus-overview-animate">
    <div class="grid-view-header-text">
      <h1 class="grid-view-title">Assessments</h1>
      <p class="grid-view-subtitle">Loading your assessment overview…</p>
    </div>
    <div class="grid-view-filters bsplus-overview-toolbar">
      <select class="filter-select" disabled>
        <option value="all">Loading subjects...</option>
      </select>
@@ -30,20 +9,17 @@
        <option value="due">Sort by Due Date</option>
      </select>
    </div>
-  </header>
+  </div>
-  <div id="main-grid-content" class="bsplus-overview-animate bsplus-overview-delay-1">
+  <div id="main-grid-content">
    <div class="kanban-board">
      {#each columns as column}
        <div class="kanban-column-parent">
          <div class="kanban-column {column.className}">
            <div class="column-header">
              <div class="column-title">
-                <span class="column-title-main">
+                {column.icon} {column.title}
-                  <OverviewIcon name={column.icon} size={18} />
+                <span class="column-count">...</span>
                  {column.title}
                </span>
                <span class="column-count">…</span>
              </div>
            </div>
            <div class="column-cards" id="{column.key.toLowerCase()}-cards">
@@ -67,3 +43,36 @@
    </div>
  </div>
 </div>
 <script lang="ts">
  const columns = [
    {
      key: "UPCOMING",
      title: "Upcoming",
      className: "column-upcoming",
      icon: "📅",
      skeletonCount: 3,
    },
    {
      key: "DUE_SOON",
      title: "Due Soon",
      className: "column-due-soon",
      icon: "⏰",
      skeletonCount: 2,
    },
    {
      key: "OVERDUE",
      title: "Overdue",
      className: "column-overdue",
      icon: "🚨",
      skeletonCount: 1,
    },
    {
      key: "MARKS_RELEASED",
      title: "Marked",
      className: "column-marked",
      icon: "✅",
      skeletonCount: 4,
    },
  ];
 </script>
@@ -1,26 +1,17 @@
-import {
+interface Subject {
-  activeSubjectsFromLearnPayload,
+  code: string;
-  assessmentBelongsToActiveSubjects,
+  programme: number;
-  filterAssessmentsForActiveSubjects,
+  metaclass: number;
-  type OverviewSubject,
+  title: string;
-} from "./utils";
+}
 interface PrefItem {
  name: string;
  value: string;
 }
-import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
+let cache: { time: number; data: any } | null = null;
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { getMockAssessmentsData } from "@/seqta/ui/dev/hideSensitiveContent";
 import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import {
  getEngageAssessmentsData,
 } from "./engageApi";
 let cache: { time: number; engageAll?: boolean; studentId: number; data: any } | null =
  null;
 const CACHE_MS = 10 * 60 * 1000;
 const student = 69;
 async function fetchJSON(url: string, body: any) {
  const res = await fetch(`${location.origin}${url}`, {
@@ -32,9 +23,11 @@ async function fetchJSON(url: string, body: any) {
  return res.json();
 }
-async function loadSubjects(): Promise<OverviewSubject[]> {
+async function loadSubjects() {
  const res = await fetchJSON("/seqta/student/load/subjects?", {});
-  return activeSubjectsFromLearnPayload(res.payload);
+  return res.payload
    .filter((s: any) => s.active === 1)
    .flatMap((s: any) => s.subjects);
 }
 async function loadPrefs(student: number) {
@@ -60,18 +53,7 @@ async function loadUpcoming(student: number) {
  return res.payload;
 }
-function normalizeAssessmentDates(t: any, subject: OverviewSubject): any {
+async function loadPast(student: number, subjects: Subject[]) {
  const normalized = { ...t };
  if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
    normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
  }
  if (!normalized.programmeID) normalized.programmeID = subject.programme;
  if (!normalized.metaclassID) normalized.metaclassID = subject.metaclass;
  if (!normalized.code && t.subject) normalized.code = t.subject;
  return normalized;
 }
 async function loadPast(student: number, subjects: OverviewSubject[]) {
  const map: Record<number, any> = {};
  await Promise.all(
    subjects.map(async (s) => {
@@ -80,22 +62,10 @@ async function loadPast(student: number, subjects: OverviewSubject[]) {
        metaclass: s.metaclass,
        student,
      });
-      const processAssessment = (t: any) => {
+      if (res.payload.tasks) {
-        if (t && t.id) {
+        res.payload.tasks.forEach((t: any) => {
-          const merged = {
+          map[t.id] = t;
-            ...t,
+        });
            programmeID: t.programmeID || t.programme || s.programme,
            metaclassID: t.metaclassID || t.metaclass || s.metaclass,
            code: t.code || t.subject || s.code,
          };
          map[t.id] = normalizeAssessmentDates(merged, s);
        }
      };
      if (res.payload?.pending && Array.isArray(res.payload.pending)) {
        res.payload.pending.forEach(processAssessment);
      }
      if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
        res.payload.tasks.forEach(processAssessment);
      }
    }),
  );
@@ -131,65 +101,31 @@ async function loadSubmissions(student: number, assessments: any[]) {
  return submissionMap;
 }
-async function getLearnAssessmentsData(studentId: number) {
+export async function getAssessmentsData() {
  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
  const [subjects, colors, upcoming] = await Promise.all([
    loadSubjects(),
-    loadPrefs(studentId),
+    loadPrefs(student),
-    loadUpcoming(studentId),
+    loadUpcoming(student),
  ]);
-  const pastMap = await loadPast(studentId, subjects);
+  const pastMap = await loadPast(student, subjects);
  const map: Record<number, any> = {};
  upcoming.forEach((a: any) => {
-    if (assessmentBelongsToActiveSubjects(a, subjects)) {
+    map[a.id] = { ...a };
      map[a.id] = { ...a };
    }
  });
  Object.values(pastMap).forEach((t: any) => {
    if (!assessmentBelongsToActiveSubjects(t, subjects)) return;
    if (map[t.id]) Object.assign(map[t.id], t);
    else map[t.id] = t;
  });
-  const allAssessments = filterAssessmentsForActiveSubjects(
+  const allAssessments = Object.values(map);
-    Object.values(map),
+  const submissions = await loadSubmissions(student, allAssessments);
    subjects,
  );
  const submissions = await loadSubmissions(studentId, allAssessments);
  allAssessments.forEach((assessment: any) => {
    assessment.submitted = submissions[assessment.id] || false;
  });
-  return { assessments: allAssessments, subjects, colors, studentId };
+  const data = { assessments: allAssessments, subjects, colors };
-}
+  cache = { time: Date.now(), data };
 export async function getAssessmentsData() {
  if (settingsState.mockNotices) {
    return getMockAssessmentsData();
  }
  if (isSeqtaEngageExperience()) {
    if (cache && Date.now() - cache.time < CACHE_MS && cache.engageAll) {
      return cache.data;
    }
    const data = await getEngageAssessmentsData();
    cache = { time: Date.now(), studentId: 0, engageAll: true, data };
    return data;
  }
  const studentId = (await getUserInfo()).id;
  if (
    cache &&
    Date.now() - cache.time < CACHE_MS &&
    cache.studentId === studentId
  ) {
    return cache.data;
  }
  const data = await getLearnAssessmentsData(studentId);
  cache = { time: Date.now(), studentId, data };
  return data;
 }
@@ -1,235 +0,0 @@
 import { getEngageAssessmentStudentId } from "@/seqta/utils/engageAssessmentStudent";
 import {
  activeSubjectsFromEngageChild,
  assessmentBelongsToActiveSubjects,
  filterAssessmentsForActiveSubjects,
  type OverviewSubject,
 } from "./utils";
 interface PrefItem {
  name: string;
  value: string;
 }
 export interface EngageStudent {
  id: number;
  name: string;
 }
 interface EngageChildPayload {
  id?: number;
  name?: string;
  terms?: {
    active?: number;
    subjects?: {
      code?: string;
      programme?: number;
      metaclass?: number;
      title?: string;
      description?: string;
    }[];
  }[];
 }
 async function fetchJSON(url: string, body: unknown) {
  const res = await fetch(`${location.origin}${url}`, {
    method: "POST",
    credentials: "include",
    headers: { "Content-Type": "application/json; charset=utf-8" },
    body: JSON.stringify(body),
  });
  return res.json();
 }
 async function loadEngageChildrenPayload(): Promise<EngageChildPayload[]> {
  const res = await fetchJSON("/seqta/parent/load/subjects", {});
  return Array.isArray(res.payload) ? res.payload : [];
 }
 export async function resolveEngageStudentId(): Promise<number> {
  const fromUrlOrStorage = getEngageAssessmentStudentId();
  if (fromUrlOrStorage) return Number(fromUrlOrStorage);
  const children = await loadEngageChildrenPayload();
  const firstChild = children[0];
  if (firstChild?.id != null) return Number(firstChild.id);
  throw new Error("Could not resolve Engage student ID");
 }
 function subjectsFromChild(child: EngageChildPayload): OverviewSubject[] {
  return activeSubjectsFromEngageChild(child);
 }
 async function loadEngagePrefs(): Promise<Record<string, string>> {
  const res = await fetchJSON("/seqta/parent/load/prefs?", {
    request: "userPrefs",
    asArray: true,
  });
  const colors: Record<string, string> = {};
  (res.payload ?? []).forEach((pref: PrefItem) => {
    if (pref.name.startsWith("timetable.subject.colour.")) {
      const code = pref.name.replace("timetable.subject.colour.", "");
      colors[code] = pref.value;
    }
  });
  return colors;
 }
 async function loadEngageUpcoming(studentId: number) {
  const res = await fetchJSON("/seqta/parent/assessment/list/upcoming?", {
    student: studentId,
  });
  return res.payload ?? [];
 }
 function normalizeAssessmentDates(t: any, subject: OverviewSubject): any {
  const normalized = { ...t };
  if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
    normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
  }
  if (!normalized.programmeID) normalized.programmeID = subject.programme;
  if (!normalized.metaclassID) normalized.metaclassID = subject.metaclass;
  if (!normalized.code && t.subject) normalized.code = t.subject;
  return normalized;
 }
 async function loadEngagePast(studentId: number, subjects: OverviewSubject[]) {
  const map: Record<number, any> = {};
  await Promise.all(
    subjects.map(async (subject) => {
      const res = await fetchJSON("/seqta/parent/assessment/list/past?", {
        programme: subject.programme,
        metaclass: subject.metaclass,
        student: studentId,
      });
      const processAssessment = (task: any) => {
        if (task?.id) {
          const merged = {
            ...task,
            programmeID: task.programmeID || task.programme || subject.programme,
            metaclassID: task.metaclassID || task.metaclass || subject.metaclass,
            code: task.code || task.subject || subject.code,
          };
          map[task.id] = normalizeAssessmentDates(merged, subject);
        }
      };
      if (Array.isArray(res.payload?.pending)) {
        res.payload.pending.forEach(processAssessment);
      }
      if (Array.isArray(res.payload?.tasks)) {
        res.payload.tasks.forEach(processAssessment);
      }
    }),
  );
  return map;
 }
 async function loadEngageSubmissions(studentId: number, assessments: any[]) {
  const submissionMap: Record<number, boolean> = {};
  await Promise.all(
    assessments.map(async (assessment) => {
      try {
        const res = await fetchJSON("/seqta/parent/assessment/submissions/get", {
          assessment: assessment.id,
          metaclass: assessment.metaclassID,
          student: studentId,
        });
        submissionMap[assessment.id] =
          Array.isArray(res.payload) && res.payload.length > 0;
      } catch (error) {
        console.warn(
          `[BetterSEQTA+] Failed to fetch Engage submission for assessment ${assessment.id}:`,
          error,
        );
        submissionMap[assessment.id] = false;
      }
    }),
  );
  return submissionMap;
 }
 async function loadEngageAssessmentsForStudent(
  child: EngageChildPayload,
 ): Promise<any[]> {
  const studentId = Number(child.id);
  const studentName = child.name ?? "Student";
  const subjects = subjectsFromChild(child);
  const [upcoming, pastMap] = await Promise.all([
    loadEngageUpcoming(studentId),
    loadEngagePast(studentId, subjects),
  ]);
  const map: Record<number, any> = {};
  upcoming.forEach((assessment: any) => {
    if (assessmentBelongsToActiveSubjects(assessment, subjects)) {
      map[assessment.id] = { ...assessment };
    }
  });
  Object.values(pastMap).forEach((task: any) => {
    if (!assessmentBelongsToActiveSubjects(task, subjects)) return;
    if (map[task.id]) Object.assign(map[task.id], task);
    else map[task.id] = task;
  });
  const assessments = filterAssessmentsForActiveSubjects(
    Object.values(map),
    subjects,
  ).map((assessment) => ({
    ...assessment,
    studentId,
    studentName,
  }));
  const submissions = await loadEngageSubmissions(studentId, assessments);
  assessments.forEach((assessment) => {
    assessment.submitted = submissions[assessment.id] || false;
  });
  return assessments;
 }
 export async function getEngageAssessmentsData() {
  const childrenPayload = await loadEngageChildrenPayload();
  const students: EngageStudent[] = childrenPayload
    .filter((child) => child.id != null)
    .map((child) => ({
      id: Number(child.id),
      name: child.name ?? "Student",
    }));
  if (!students.length) {
    throw new Error("No Engage students found");
  }
  const [colors, assessmentsByChild] = await Promise.all([
    loadEngagePrefs(),
    Promise.all(childrenPayload.map((child) => loadEngageAssessmentsForStudent(child))),
  ]);
  const subjectsMap = new Map<string, OverviewSubject>();
  childrenPayload.forEach((child) => {
    subjectsFromChild(child).forEach((subject) => {
      if (!subjectsMap.has(subject.code)) {
        subjectsMap.set(subject.code, subject);
      }
    });
  });
  const defaultStudentId = await resolveEngageStudentId();
  return {
    assessments: assessmentsByChild.flat(),
    subjects: Array.from(subjectsMap.values()),
    colors,
    students,
    studentId: defaultStudentId,
  };
 }
@@ -1,65 +0,0 @@
 /** Heroicons v2 outline paths (https://heroicons.com) */
 export type OverviewIconName =
  | "calendar-days"
  | "clock"
  | "exclamation-triangle"
  | "document-check"
  | "check-circle"
  | "book-open"
  | "calendar"
  | "chart-bar"
  | "queue-list"
  | "eye"
  | "clipboard-document-list"
  | "ellipsis-vertical"
  | "exclamation-circle";
 export const OVERVIEW_ICON_PATHS: Record<
  OverviewIconName,
  string | string[]
 > = {
  "calendar-days":
    "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5",
  clock: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z",
  "exclamation-triangle":
    "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z",
  "document-check":
    "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 8.625a2.625 2.625 0 100-5.25 2.625 2.625 0 000 5.25zm0 0l-3 3m3-3l3 3",
  "check-circle":
    "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  "book-open":
    "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25",
  calendar:
    "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5",
  "chart-bar":
    "M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z",
  "queue-list":
    "M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z",
  eye: [
    "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z",
    "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
  ],
  "clipboard-document-list": [
    "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 17.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z",
    "M8.25 6.75V4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V6.75H8.25z",
  ],
  "ellipsis-vertical":
    "M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z",
  "exclamation-circle":
    "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z",
 };
 export const STATUS_COLUMN_ICONS: Record<string, OverviewIconName> = {
  UPCOMING: "calendar-days",
  DUE_SOON: "clock",
  OVERDUE: "exclamation-triangle",
  SUBMITTED: "document-check",
  MARKS_RELEASED: "check-circle",
 };
 export const GROUP_SORT_ICONS: Record<string, OverviewIconName> = {
  year: "calendar",
  subject: "book-open",
  grade: "chart-bar",
  title: "queue-list",
 };
@@ -1,50 +1,9 @@
 import type { Plugin } from "../../core/types";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import { getAssessmentsData } from "./api";
-import { renderErrorState, renderGrid, renderSkeletonLoader } from "./ui";
+import { renderSkeletonLoader, renderErrorState } from "./ui";
 import styles from "./styles.css?inline";
 import { delay } from "@/seqta/utils/delay";
 import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import {
  isEngageAssessmentOverviewRoute,
 } from "@/seqta/utils/engageAssessmentStudent";
 import { resolveEngageStudentId } from "./engageApi";
 const OVERVIEW_MENU_CLASS = "betterseqta-assessments-overview-item";
 function ensureOverviewMenuPosition(
  menu: HTMLElement,
  gridItem: HTMLElement,
 ) {
  if (menu.firstElementChild !== gridItem) {
    menu.insertBefore(gridItem, menu.firstChild);
  }
 }
 function isOverviewRoute() {
  if (isSeqtaEngageExperience()) {
    return isEngageAssessmentOverviewRoute();
  }
  return window.location.hash.includes("/assessments/overview");
 }
 async function waitForAssessmentsSubmenu(): Promise<HTMLElement> {
  if (!isSeqtaEngageExperience()) {
    return (await waitForElm(
      '[data-key="assessments"] > .sub > ul',
      true,
      100,
      60,
    )) as HTMLElement;
  }
  return (await waitForElm(
    '[data-key="assessments"] .sub ul, [data-key="assessments"] ul',
    true,
    100,
    350,
  )) as HTMLElement;
 }
 const assessmentsOverviewPlugin: Plugin<{}> = {
  id: "assessments-overview",
@@ -57,46 +16,33 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
  styles,
  run: async () => {
-    const menu = await waitForAssessmentsSubmenu();
+    const menu = (await waitForElm(
      '[data-key="assessments"] > .sub > ul',
      true,
      100,
      60,
    )) as HTMLElement;
    const gridItem = document.createElement("li");
    gridItem.className = "item";
    gridItem.classList.add(OVERVIEW_MENU_CLASS);
    const label = document.createElement("label");
    label.textContent = "Overview";
    gridItem.appendChild(label);
-    menu.insertBefore(gridItem, menu.firstChild);
+    menu.insertBefore(gridItem, menu.children[1] || null);
-    const menuObserver = new MutationObserver(() => {
+    if (window.location.hash.includes("/assessments/overview")) {
-      ensureOverviewMenuPosition(menu, gridItem);
+      loadGridView();
    });
    menuObserver.observe(menu, { childList: true });
    if (isOverviewRoute()) {
      void loadGridView();
    }
    const clickHandler = (e: Event) => {
      e.preventDefault();
-      void loadGridView();
+      loadGridView();
    };
    gridItem.addEventListener("click", clickHandler);
    async function loadGridView() {
      await delay(1);
-
+      window.history.pushState({}, "", "/#?page=/assessments/overview");
-      if (isSeqtaEngageExperience()) {
+      document.title = "Overview ― SEQTA Learn";
        const studentId = await resolveEngageStudentId();
        window.history.pushState(
          {},
          "",
          `/#?page=/assessments/${studentId}/overview`,
        );
        document.title = "Overview ― SEQTA Engage";
      } else {
        window.history.pushState({}, "", "/#?page=/assessments/overview");
        document.title = "Overview ― SEQTA Learn";
      }
      const main = document.getElementById("main");
      if (!main) return;
@@ -110,7 +56,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
        .querySelector('[data-key="assessments"]')
        ?.classList.add("active");
-  main.innerHTML = '<div id="grid-view-container" class="bsplus-overview-host"></div>';
+      main.innerHTML = '<div id="grid-view-container"></div>';
      const container = document.getElementById(
        "grid-view-container",
      ) as HTMLElement;
@@ -119,6 +65,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
      try {
        const data = await getAssessmentsData();
        const { renderGrid } = await import("./ui");
        renderGrid(container, data);
      } catch (err) {
        console.error("Failed to load assessments:", err);
@@ -130,7 +77,6 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
    }
    return () => {
      menuObserver.disconnect();
      gridItem.removeEventListener("click", clickHandler);
      gridItem.remove();
    };
@@ -1,191 +1,84 @@
-/* ─── Design tokens (aligned with Grade Analytics) ─── */
+#grid-view-container {
 .bsplus-overview-host,
 .bsplus-overview-root,
 #grid-view-container.bsplus-overview-root {
  --bsplus-overview-radius: 16px;
  --bsplus-overview-radius-sm: 12px;
  --bsplus-overview-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bsplus-overview-surface: var(--background-primary, #ffffff);
  --bsplus-overview-surface-2: var(--background-secondary, #f8fafc);
  --bsplus-overview-text: var(--text-primary, #1a1a1a);
  --bsplus-overview-muted: color-mix(
    in srgb,
    var(--bsplus-overview-text) 55%,
    transparent
  );
  --bsplus-overview-border: color-mix(
    in srgb,
    var(--theme-offset-bg, var(--background-secondary, #e2e8f0)) 78%,
    transparent
  );
  --bsplus-overview-shadow: 0 5px 16px 6px rgba(0, 0, 0, 0.08);
  --bsplus-overview-shadow-hover: 0 8px 24px 8px rgba(0, 0, 0, 0.12);
  --bsplus-overview-accent: var(--better-main, #007bff);
 }
 .bsplus-overview-root.dark {
  --bsplus-overview-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.35);
  --bsplus-overview-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.45);
 }
@keyframes bsplus-overview-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 .bsplus-overview-animate {
  animation: bsplus-overview-fade-in-up 0.5s var(--bsplus-overview-ease) forwards;
 }
@media (prefers-reduced-motion: reduce) {
  .bsplus-overview-animate {
    animation: none;
  }
 }
 .bsplus-overview-delay-1 {
  animation-delay: 80ms;
 }
 .bsplus-overview-icon {
  flex-shrink: 0;
 }
 #grid-view-container,
 .bsplus-overview-root {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-height: min(100%, calc(100vh - 6rem));
  box-sizing: border-box;
  padding: 1.5rem 1.25rem 2rem;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--bsplus-overview-text);
  gap: 1.25rem;
 }
 .grid-view-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  gap: 1.25rem;
+  padding: 1rem;
  flex-shrink: 0;
  padding: 0;
 }
 .grid-view-header-text {
  min-width: 0;
 }
 .grid-view-title {
  font-size: 1.875rem !important;
  font-weight: 700;
-  letter-spacing: -0.02em;
+  color: #1a1a1a;
  line-height: 1.2;
  color: var(--bsplus-overview-text);
  margin: 0 0 0.35rem;
 }
 .grid-view-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bsplus-overview-muted);
 }
-.grid-view-filters,
+/* Dark mode support */
-.bsplus-overview-toolbar {
+.dark .grid-view-title {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .grid-view-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: var(--bsplus-overview-radius);
  background: var(--bsplus-overview-surface);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
 .filter-select {
-  appearance: none;
+  background: #ffffff !important;
-  -webkit-appearance: none;
+  border: 2px solid #e2e8f0;
-  -moz-appearance: none;
+  border-radius: 8px;
-  background: var(--bsplus-overview-surface-2) !important;
+  color: #1a1a1a;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  padding: 0.75rem 1rem;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1rem !important;
  border: 2px solid var(--bsplus-overview-border);
  border-radius: var(--bsplus-overview-radius-sm);
  color: var(--bsplus-overview-text);
  color-scheme: light;
  padding: 0.65rem 2.25rem 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
-  font-family: inherit;
+  transition: all 0.2s ease;
  line-height: 1.2;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  min-width: 11rem;
+  min-width: 180px;
  min-height: 2.75rem;
 }
 .filter-select::-ms-expand {
  display: none;
 }
 .filter-select option {
  background: var(--bsplus-overview-surface);
  color: var(--bsplus-overview-text);
 }
 .filter-select:focus {
  outline: none;
-  border-color: var(--bsplus-overview-accent);
+  border-color: #d41e3a;
-  box-shadow: 0 0 0 3px
+  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
    color-mix(in srgb, var(--bsplus-overview-accent) 22%, transparent);
 }
 .filter-select:hover {
-  border-color: color-mix(
+  border-color: #cbd5e1;
-    in srgb,
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    var(--bsplus-overview-accent) 35%,
    var(--bsplus-overview-border)
  );
 }
 /* Dark mode dropdowns */
 .dark .filter-select {
-  background: var(--bsplus-overview-surface-2) !important;
+  background: var(--background-primary) !important;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  border-color: var(--background-secondary);
-  color-scheme: dark;
+  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .dark .filter-select:focus {
  border-color: #d41e3a;
  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.2);
 }
 .dark .filter-select:hover {
  border-color: var(--background-secondary);
  background: var(--background-secondary);
 }
 .dark .filter-select option {
-  background: var(--bsplus-overview-surface);
+  background: var(--background-primary);
-  color: var(--bsplus-overview-text);
+  color: var(--text-primary);
 }
 .bsplus-overview-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
 }
 #main-grid-content {
@@ -206,62 +99,68 @@
 .kanban-column-parent {
  flex: 0 0 320px;
 }
 .kanban-column {
  max-height: 100%;
-  background: color-mix(in srgb, var(--bsplus-overview-surface-2) 88%, transparent);
+  background: #f8fafc;
-  border-radius: var(--bsplus-overview-radius);
+  border-radius: 12px;
  box-shadow: 0 0 0 2px #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
-  border: 1px solid var(--bsplus-overview-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--bsplus-overview-shadow);
  overflow: hidden;
  transition:
    box-shadow 0.25s var(--bsplus-overview-ease),
    transform 0.25s var(--bsplus-overview-ease);
 }
-.kanban-column:hover {
+/* Dark mode columns */
-  box-shadow: var(--bsplus-overview-shadow-hover);
+.dark .kanban-column {
  background: var(--background-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
 .column-header {
-  padding: 1rem 1.15rem;
+  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--bsplus-overview-border);
+  border-bottom: 2px solid #e2e8f0;
-  border-radius: var(--bsplus-overview-radius) var(--bsplus-overview-radius) 0 0;
+  background: #ffffff;
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
 }
 /* Dark mode column headers */
 .dark .column-header {
  background: var(--background-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 .column-title {
-  font-size: 0.9375rem;
+  font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
 }
-.column-title-main {
+.dark .column-title {
-  display: inline-flex;
+  color: var(--text-primary);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
 }
 .column-count {
-  background: color-mix(in srgb, var(--bsplus-overview-muted) 18%, transparent);
+  background: #e2e8f0;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
-  padding: 0.2rem 0.55rem;
+  padding: 0.25rem 0.5rem;
-  border-radius: 999px;
+  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
-  flex-shrink: 0;
+}
 .dark .column-count {
  background: var(--background-secondary);
  color: var(--text-primary);
 }
 .column-cards {
@@ -275,28 +174,33 @@
 /* Assessment Cards */
 .assessment-card {
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border-radius: var(--bsplus-overview-radius-sm);
+  border-radius: 8px;
  padding: 1rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition:
+  transition: all 0.2s ease;
    transform 0.2s var(--bsplus-overview-ease),
    box-shadow 0.2s var(--bsplus-overview-ease),
    border-color 0.2s ease;
  cursor: pointer;
  position: relative;
-  border: 1px solid var(--bsplus-overview-border);
+  border-left: 4px solid var(--subject-color, #d41e3a);
-  border-left: 4px solid var(--subject-color, var(--bsplus-overview-accent));
+  border: 1px solid #e2e8f0;
 }
 .assessment-card:hover {
-  box-shadow: var(--bsplus-overview-shadow-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
-  border-color: color-mix(
+  border-color: #cbd5e1;
-    in srgb,
+}
-    var(--bsplus-overview-accent) 22%,
+
-    var(--bsplus-overview-border)
+/* Dark mode cards */
-  );
+.dark .assessment-card {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 .dark .assessment-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
 }
 .card-labels {
@@ -317,16 +221,7 @@
 }
 .label-subject {
-  background: color-mix(in srgb, var(--subject-color, var(--bsplus-overview-accent)) 88%, transparent);
+  background: var(--subject-color, #d41e3a);
 }
 .label-student {
  background: rgba(99, 102, 241, 0.9);
  text-transform: none;
 }
 .dark .label-student {
  background: rgba(99, 102, 241, 0.75);
 }
 .card-menu {
@@ -341,17 +236,14 @@
  border: none !important;
  padding: 0.25rem !important;
  cursor: pointer;
-  border-radius: 8px;
+  border-radius: 4px;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
-  transition:
+  transition: all 0.2s ease;
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  display: flex !important;
  align-items: center;
  justify-content: center;
-  width: 28px !important;
+  width: 24px !important;
-  height: 28px !important;
+  height: 24px !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
@@ -360,32 +252,44 @@
 }
 .menu-button:hover {
-  background: color-mix(
+  background: #f1f5f9 !important;
-    in srgb,
+  color: #1a1a1a;
    var(--bsplus-overview-surface-2) 90%,
    transparent
  ) !important;
  color: var(--bsplus-overview-text);
  transform: scale(1.05) !important;
 }
-.menu-button:focus-visible {
+.menu-button svg {
-  box-shadow: 0 0 0 2px
+  width: 16px !important;
-    color-mix(in srgb, var(--bsplus-overview-accent) 35%, transparent) !important;
+  height: 16px !important;
  fill: currentColor !important;
  display: block !important;
 }
 .dark .menu-button {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .dark .menu-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
 }
 .menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border: 1px solid var(--bsplus-overview-border);
+  border: 1px solid #e2e8f0;
-  border-radius: var(--bsplus-overview-radius-sm);
+  border-radius: 6px;
-  box-shadow: var(--bsplus-overview-shadow-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 160px;
+  min-width: 140px;
  z-index: 30;
  margin-top: 4px;
-  padding: 0.25rem;
+}
 .dark .menu-dropdown {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 .menu-item {
@@ -396,19 +300,22 @@
  border: none;
  text-align: left;
  cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.2s ease;
  white-space: nowrap;
  border-radius: 8px;
 }
 .menu-item:hover {
-  background: color-mix(
+  background: #f8fafc;
-    in srgb,
+}
-    var(--bsplus-overview-surface-2) 90%,
+
-    transparent
+.dark .menu-item {
-  );
+  color: var(--text-primary);
 }
 .dark .menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
 }
 .menu-item.mark-completed {
@@ -429,138 +336,17 @@
  color: #ef4444;
 }
 .menu-item.menu-item-hide {
  color: #64748b;
 }
 .dark .menu-item.menu-item-hide {
  color: var(--text-primary);
  opacity: 0.8;
 }
 .visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--bsplus-overview-radius-sm);
  border: 2px solid var(--bsplus-overview-border);
  background: var(--bsplus-overview-surface-2);
  color: var(--bsplus-overview-muted);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--bsplus-overview-ease);
  min-height: 2.75rem;
 }
 .visibility-toggle:hover {
  border-color: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 35%,
    var(--bsplus-overview-border)
  );
  color: var(--bsplus-overview-text);
  transform: scale(1.02);
 }
 .visibility-toggle.active {
  border-color: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 45%,
    var(--bsplus-overview-border)
  );
  background: color-mix(
    in srgb,
    var(--bsplus-overview-accent) 10%,
    var(--bsplus-overview-surface-2)
  );
  color: var(--bsplus-overview-accent);
 }
 .visibility-panel {
  padding: 1rem 1.15rem;
  margin: 0;
  background: var(--bsplus-overview-surface);
  border-radius: var(--bsplus-overview-radius);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
 .visibility-panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bsplus-overview-text);
  margin: 0 0 0.75rem;
 }
 .visibility-section {
  margin-bottom: 0.5rem;
 }
 .visibility-section:last-child {
  margin-bottom: 0;
 }
 .visibility-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bsplus-overview-muted);
  display: block;
  margin-bottom: 0.35rem;
 }
 .visibility-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
 }
 .visibility-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--bsplus-overview-surface-2) 92%, transparent);
  border: 1px solid var(--bsplus-overview-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--bsplus-overview-text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .visibility-unhide {
  padding: 0.125rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  background: var(--bsplus-overview-accent);
  color: var(--text-color, #fff);
  cursor: pointer;
  transition: transform 0.2s var(--bsplus-overview-ease);
  flex-shrink: 0;
 }
 .visibility-unhide:hover {
  transform: scale(1.05);
 }
 .assessment-title {
  font-size: 0.875rem;
  font-weight: 600;
-  color: var(--bsplus-overview-text);
+  color: #1a1a1a;
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.75rem 0;
-  line-height: 1.45;
+  line-height: 1.4;
-  padding-right: 2rem;
+  padding-right: 2rem; /* Make room for menu button */
 }
 .dark .assessment-title {
  color: var(--text-primary);
 }
 .assessment-meta {
@@ -569,7 +355,12 @@
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.75rem;
-  color: var(--bsplus-overview-muted);
+  color: #64748b;
 }
 .dark .assessment-meta {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .due-date {
@@ -597,7 +388,11 @@
  justify-content: flex-start;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
-  border-top: 1px solid var(--bsplus-overview-border);
+  border-top: 1px solid #e5e7eb;
 }
 .dark .card-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
 }
 .grade-display {
@@ -640,101 +435,46 @@
  border-color: var(--background-secondary);
 }
-/* Column header gradients — softer tints, same status colours */
+/* Column-specific styling */
 .column-upcoming .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #38bdf8 9%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-due-soon .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #fbbf24 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-overdue .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f87171 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-submitted .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f59e0b 9%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-marked .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #34d399 10%, var(--bsplus-overview-surface)) 100%
  );
 }
 .column-custom .column-header {
  background: linear-gradient(
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, var(--bsplus-overview-accent) 8%, var(--bsplus-overview-surface)) 100%
  );
 }
 /* Dark mode column headers */
 .dark .column-upcoming .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #3b82f6 14%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-due-soon .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #f59e0b 14%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-overdue .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #ef4444 13%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-submitted .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #d97706 12%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-marked .column-header {
-  background: linear-gradient(
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, #10b981 13%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 .dark .column-custom .column-header {
  background: linear-gradient(
    135deg,
    var(--bsplus-overview-surface) 0%,
    color-mix(in srgb, var(--bsplus-overview-accent) 12%, var(--bsplus-overview-surface-2)) 100%
  );
 }
 /* Subject filter view */
@@ -790,54 +530,73 @@
 }
 /* Loading and error states */
-.loading-container,
+.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .loading-container {
  background: var(--background-primary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #d41e3a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
 .dark .loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #d41e3a;
 }
 .loading-text {
  margin-top: 1rem;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
 }
 .dark .loading-text {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 3rem 2rem;
+  padding: 4rem 0;
-  background: var(--bsplus-overview-surface);
+  background: #ffffff;
-  border-radius: var(--bsplus-overview-radius);
+  border-radius: 12px;
-  border: 1px solid var(--bsplus-overview-border);
+  border: 2px solid #fecaca;
-  box-shadow: var(--bsplus-overview-shadow);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-.loading-spinner {
+.dark .error-container {
-  width: 3rem;
+  background: var(--background-primary);
-  height: 3rem;
+  border-color: #991b1b;
-  border: 4px solid var(--bsplus-overview-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-top-color: var(--bsplus-overview-accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
 }
 .loading-text {
  margin-top: 1rem;
  color: var(--bsplus-overview-muted);
  font-size: 0.875rem;
  font-weight: 500;
 }
 .error-icon {
  color: #ef4444;
  margin-bottom: 0.75rem;
  opacity: 0.85;
 }
 .error-text {
  color: #ef4444;
  font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
-  margin: 0 0 0.35rem;
+  margin-bottom: 0.5rem;
 }
 .error-detail {
  color: var(--bsplus-overview-muted);
  font-size: 0.875rem;
  margin: 0;
  text-align: center;
  max-width: 28rem;
 }
 .empty-state {
@@ -845,20 +604,15 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  gap: 0.75rem;
+  padding: 2rem;
-  padding: 3rem 2rem;
+  color: #64748b;
-  color: var(--bsplus-overview-muted);
+  font-size: 0.875rem;
  font-size: 0.9375rem;
  text-align: center;
  border-radius: var(--bsplus-overview-radius);
  background: var(--bsplus-overview-surface);
  border: 1px solid var(--bsplus-overview-border);
  box-shadow: var(--bsplus-overview-shadow);
 }
-.empty-icon {
+.dark .empty-state {
-  color: var(--bsplus-overview-muted);
+  color: var(--text-primary);
-  opacity: 0.55;
+  opacity: 0.7;
 }
 .empty-column {
@@ -878,6 +632,12 @@
  opacity: 0.7;
 }
 .empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
@@ -953,41 +713,33 @@
 /* Responsive design */
@media (max-width: 768px) {
-  #grid-view-container,
+  #grid-view-container {
-  .bsplus-overview-root {
+    padding: 1rem;
    padding: 1.25rem 1rem 1.5rem;
    gap: 1rem;
  }
-
+  
  .grid-view-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
-
+  
-  .grid-view-filters,
+  .grid-view-filters {
-  .bsplus-overview-toolbar {
+    justify-content: center;
-    justify-content: stretch;
+    flex-wrap: wrap;
  }
-
+  
  .kanban-board {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }
-
+  
  .kanban-column-parent {
    flex: none;
    width: 100%;
  }
  .kanban-column {
    flex: none;
    max-height: none;
  }
-
+  
  .filter-select {
-    min-width: 0;
+    min-width: 140px;
    flex: 1 1 140px;
  }
 }
@@ -1,155 +1,45 @@
 import renderSvelte from "@/interface/main";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import AssessmentsOverview from "./AssessmentsOverview.svelte";
 import SkeletonLoader from "./SkeletonLoader.svelte";
 import ErrorState from "./ErrorState.svelte";
 import { unmount } from "svelte";
 let currentApp: any = null;
 let themeObserver: MutationObserver | null = null;
 type ThemeSettingKey =
  | "selectedColor"
  | "DarkMode"
  | "adaptiveThemeColour"
  | "adaptiveThemeGradient"
  | "selectedTheme";
 let themeListeners: Array<{ key: ThemeSettingKey; listener: () => void }> = [];
 const THEME_CSS_VARS = [
  "--better-main",
  "--better-pale",
  "--better-light",
  "--text-color",
  "--background-primary",
  "--background-secondary",
  "--text-primary",
  "--theme-offset-bg",
  "--better-sub",
 ] as const;
 const ACCENT_CSS_VARS = [
  "--better-main",
  "--accent-color-value",
  "--accentColor",
  "--colour-betterseqta-blue",
 ] as const;
 function extractSolidColor(value: string): string | null {
  const trimmed = value.trim();
  if (!trimmed || trimmed === "initial") return null;
  if (
    trimmed.startsWith("#") ||
    trimmed.startsWith("rgb") ||
    trimmed.startsWith("hsl")
  ) {
    return trimmed;
  }
  if (trimmed.includes("gradient")) {
    const match = trimmed.match(
      /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
    );
    return match?.[0] ?? null;
  }
  return null;
 }
 function resolvePageAccentColor(): string {
  const computed = getComputedStyle(document.documentElement);
  for (const name of ACCENT_CSS_VARS) {
    const solid = extractSolidColor(computed.getPropertyValue(name));
    if (solid) return solid;
  }
  const fromSettings = settingsState.selectedColor?.trim();
  if (fromSettings) {
    const solid = extractSolidColor(fromSettings);
    if (solid) return solid;
  }
  return "#007bff";
 }
 function syncOverviewTheme(target: HTMLElement) {
  const computed = getComputedStyle(document.documentElement);
  for (const name of THEME_CSS_VARS) {
    const value = document.documentElement.style.getPropertyValue(name).trim()
      || computed.getPropertyValue(name).trim();
    if (value) target.style.setProperty(name, value);
  }
  const accent = resolvePageAccentColor();
  target.style.setProperty("--bsplus-overview-accent", accent);
  target.style.setProperty("--better-main", accent);
  target.classList.toggle(
    "dark",
    document.documentElement.classList.contains("dark"),
  );
 }
 function watchOverviewTheme(root: HTMLElement) {
  for (const { key, listener } of themeListeners) {
    settingsState.unregister(key, listener);
  }
  themeListeners = [];
  const listener = () => syncOverviewTheme(root);
  for (const key of [
    "selectedColor",
    "DarkMode",
    "adaptiveThemeColour",
    "adaptiveThemeGradient",
    "selectedTheme",
  ] satisfies ThemeSettingKey[]) {
    settingsState.register(key, listener);
    themeListeners.push({ key, listener });
  }
  themeObserver?.disconnect();
  themeObserver = new MutationObserver(() => syncOverviewTheme(root));
  themeObserver.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["style", "class"],
  });
 }
 function prepareContainer(container: HTMLElement) {
  container.innerHTML = "";
  container.className = "bsplus-overview-host";
  container.classList.add("bsplus-overview-root");
  syncOverviewTheme(container);
  watchOverviewTheme(container);
 }
 export function renderGrid(container: HTMLElement, data: any) {
-  if (currentApp) unmount(currentApp);
+  if (currentApp) {
-  prepareContainer(container);
+    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(AssessmentsOverview, container, { data });
 }
 export function renderSkeletonLoader(container: HTMLElement) {
-  if (currentApp) unmount(currentApp);
+  if (currentApp) {
-  prepareContainer(container);
+    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(SkeletonLoader, container);
 }
 export function renderLoadingState(container: HTMLElement) {
  renderSkeletonLoader(container);
 }
 export function renderErrorState(container: HTMLElement, error: string) {
  if (currentApp) unmount(currentApp);
  prepareContainer(container);
  currentApp = renderSvelte(ErrorState, container, { error });
 }
 export function teardownOverviewUi() {
  for (const { key, listener } of themeListeners) {
    settingsState.unregister(key, listener);
  }
  themeListeners = [];
  themeObserver?.disconnect();
  themeObserver = null;
  if (currentApp) {
    unmount(currentApp);
    currentApp = null;
  }
-}
+  
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(ErrorState, container, { error });
 }
@@ -1,115 +1,3 @@
 export interface OverviewSubject {
  code: string;
  programme: number;
  metaclass: number;
  title: string;
 }
 function isActiveTermFlag(active: unknown): boolean {
  return active === 1 || active === true;
 }
 export function normalizeOverviewSubject(raw: unknown): OverviewSubject | null {
  if (!raw || typeof raw !== "object") return null;
  const subject = raw as Record<string, unknown>;
  const programme = Number(subject.programme ?? subject.programmeID);
  const metaclass = Number(subject.metaclass ?? subject.metaclassID);
  if (!programme || !metaclass || Number.isNaN(programme) || Number.isNaN(metaclass)) {
    return null;
  }
  const code = String(subject.code ?? subject.subject ?? "").trim();
  if (!code) return null;
  return {
    code,
    programme,
    metaclass,
    title: String(subject.title ?? subject.description ?? code),
  };
 }
 /** Subjects from the active programme-year folder(s) in `/seqta/student/load/subjects`. */
 export function activeSubjectsFromLearnPayload(payload: unknown): OverviewSubject[] {
  if (!Array.isArray(payload)) return [];
  const subjects: OverviewSubject[] = [];
  const seen = new Set<string>();
  for (const folder of payload) {
    if (!folder || typeof folder !== "object") continue;
    const term = folder as { active?: unknown; subjects?: unknown[] };
    if (!isActiveTermFlag(term.active) || !Array.isArray(term.subjects)) continue;
    for (const raw of term.subjects) {
      const subject = normalizeOverviewSubject(raw);
      if (!subject) continue;
      const key = `${subject.programme}-${subject.metaclass}`;
      if (seen.has(key)) continue;
      seen.add(key);
      subjects.push(subject);
    }
  }
  return subjects;
 }
 export function activeSubjectsFromEngageChild(child: {
  terms?: { active?: number; subjects?: unknown[] }[];
 }): OverviewSubject[] {
  const subjects: OverviewSubject[] = [];
  const seen = new Set<string>();
  for (const term of child.terms ?? []) {
    if (term.active !== 1) continue;
    for (const raw of term.subjects ?? []) {
      const subject = normalizeOverviewSubject(raw);
      if (!subject) continue;
      const key = `${subject.programme}-${subject.metaclass}`;
      if (seen.has(key)) continue;
      seen.add(key);
      subjects.push(subject);
    }
  }
  return subjects;
 }
 export function assessmentBelongsToActiveSubjects(
  assessment: Record<string, unknown>,
  activeSubjects: OverviewSubject[],
 ): boolean {
  if (!activeSubjects.length) return false;
  const programme = Number(
    assessment.programmeID ?? assessment.programme,
  );
  const metaclass = Number(
    assessment.metaclassID ?? assessment.metaclass,
  );
  if (programme && metaclass && !Number.isNaN(programme) && !Number.isNaN(metaclass)) {
    return activeSubjects.some(
      (subject) =>
        subject.programme === programme && subject.metaclass === metaclass,
    );
  }
  const code = String(assessment.code ?? assessment.subject ?? "").trim();
  if (!code) return false;
  return activeSubjects.some((subject) => subject.code === code);
 }
 export function filterAssessmentsForActiveSubjects<T extends Record<string, unknown>>(
  assessments: T[],
  activeSubjects: OverviewSubject[],
 ): T[] {
  return assessments.filter((assessment) =>
    assessmentBelongsToActiveSubjects(assessment, activeSubjects),
  );
 }
 export function formatDate(dateStr: string, submitted?: boolean): string {
  const d = new Date(dateStr);
  const now = new Date();
@@ -1,120 +0,0 @@
 <script lang="ts">
  import localforage from 'localforage'
  import { onMount } from 'svelte'
  let fileInput = $state<HTMLInputElement | undefined>(undefined)
  let dragging = $state(false)
  let filename = $state<string | undefined>(undefined)
  let durationText = $state<string | undefined>(undefined)
  const store = localforage.createInstance({
    name: 'background-music-store',
    storeName: 'music',
  })
  async function loadExisting() {
    const name = await store.getItem<string>('audio-name')
    filename = name ?? undefined
  }
  onMount(() => { loadExisting() })
  function triggerSelect() { fileInput?.click() }
  async function handleFiles(files: FileList | null) {
    const file = files?.[0]
    if (!file) return
    // Accept WAV and MP3 files
    const isSupported = file.type === 'audio/wav' || file.type === 'audio/mpeg' || 
                       file.name.toLowerCase().endsWith('.wav') || file.name.toLowerCase().endsWith('.mp3')
    if (!isSupported) {
      alert('Please select a .wav or .mp3 audio file')
      return
    }
    await store.setItem('audio-blob', file)
    await store.setItem('audio-name', file.name)
    filename = file.name
    // Probe duration
    try {
      const url = URL.createObjectURL(file)
      const audio = new Audio(url)
      await new Promise<void>((resolve, reject) => {
        audio.onloadedmetadata = () => resolve()
        audio.onerror = () => reject()
      })
      if (!isNaN(audio.duration) && audio.duration !== Infinity) {
        const minutes = Math.floor(audio.duration / 60)
        const seconds = Math.round(audio.duration % 60)
        durationText = `${minutes}:${seconds.toString().padStart(2, '0')}`
      } else {
        durationText = undefined
      }
      URL.revokeObjectURL(url)
    } catch {
      durationText = undefined
    }
    window.dispatchEvent(new Event('betterseqta-background-music-updated'))
  }
  function onFileChange() { handleFiles(fileInput?.files || null) }
  function onDrop(event: DragEvent) {
    event.preventDefault()
    dragging = false
    handleFiles(event.dataTransfer?.files || null)
  }
  async function removeAudio() {
    await store.removeItem('audio-blob')
    await store.removeItem('audio-name')
    filename = undefined
    durationText = undefined
    window.dispatchEvent(new Event('betterseqta-background-music-stop'))
  }
 </script>
 <div
  class="relative cursor-pointer select-none"
  onclick={() => triggerSelect()}
  ondragover={(e) => { e.stopPropagation(); dragging = true }}
  ondragleave={() => dragging = false}
  ondrop={onDrop}
  onkeydown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      triggerSelect()
    }
  }}
  role="button"
  tabindex="0"
 >
  <div class="flex gap-3 items-center">
    {#if filename}
      <div class="flex items-center px-3 py-1 rounded-lg bg-zinc-200 dark:bg-zinc-800">
        <div class="text-xs text-zinc-600 dark:text-zinc-300">
          {filename}
          <p>{durationText}</p>
        </div>
        <button
          class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
          onclick={(e) => { e.stopPropagation(); removeAudio() }}
          aria-label="Remove audio"
        >&#215;</button>
      </div>
    {:else}
      <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 text-nowrap">
        <span class="text-lg font-IconFamily">{'\ued47'}</span>
        <span>Upload audio</span>
      </div>
    {/if}
  </div>
  <input type="file" accept="audio/wav,audio/mpeg" class="hidden" bind:this={fileInput} onchange={onFileChange} />
  {#if dragging}
    <div class="absolute inset-0 rounded-lg bg-zinc-200/40 dark:bg-zinc-700/40"></div>
  {/if}
 </div>
@@ -1,184 +0,0 @@
 import type { Plugin } from "@/plugins/core/types";
 import { booleanSetting, componentSetting, defineSettings, numberSetting } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import BackgroundMusicSetting from "./BackgroundMusicSetting.svelte";
 import localforage from "localforage";
 const settings = defineSettings({
  uploader: componentSetting({
    title: "Background Music",
    description: "Upload a .wav or .mp3 audio file to play in the background",
    component: BackgroundMusicSetting,
  }),
  volume: numberSetting({
    title: "Volume",
    description: "Set background music volume",
    default: 0.5,
    min: 0,
    max: 1,
    step: 0.05,
  }),
  pauseOnHidden: booleanSetting({
    title: "Pause when tab hidden",
    description: "Pause music when switching to another tab or minimizing the browser",
    default: true,
  }),
 });
 const store = localforage.createInstance({
  name: "background-music-store",
  storeName: "music",
 });
 let currentAudio: HTMLAudioElement | null = null;
 let currentObjectUrl: string | null = null;
 let cleanupRegistered = false;
 let pendingGestureCancel: (() => void) | null = null;
 let visibilityResumeTimeout: number | null = null;
 async function loadAudioBlob(): Promise<Blob | null> {
  const blob = await store.getItem<Blob>("audio-blob");
  return blob && blob instanceof Blob ? blob : null;
 }
 function stopAndCleanupAudio(): void {
  if (currentAudio) {
    currentAudio.pause();
    currentAudio.src = "";
    currentAudio.remove();
    currentAudio = null;
  }
  if (currentObjectUrl) {
    URL.revokeObjectURL(currentObjectUrl);
    currentObjectUrl = null;
  }
 }
 function ensureGestureStart(handler: () => void): () => void {
  const eventTypes = ["pointerdown", "keydown", "touchstart"]; // broad user gesture coverage
  const listener = () => {
    handler();
    for (const type of eventTypes) {
      window.removeEventListener(type, listener);
    }
  };
  for (const type of eventTypes) {
    window.addEventListener(type, listener, { once: true, passive: true });
  }
  return () => {
    for (const type of eventTypes) {
      window.removeEventListener(type, listener);
    }
  };
 }
 async function startPlayback(volume: number): Promise<void> {
  const blob = await loadAudioBlob();
  if (!blob) return;
  stopAndCleanupAudio();
  currentObjectUrl = URL.createObjectURL(blob);
  const audio = new Audio(currentObjectUrl);
  audio.loop = true;
  audio.volume = Math.max(0, Math.min(1, volume));
  audio.preload = "auto";
  audio.crossOrigin = "anonymous";
  audio.style.display = "none";
  document.body.appendChild(audio);
  currentAudio = audio;
  try {
    // Attempt immediate play; may be blocked until gesture
    await audio.play();
  } catch {
    // Ignore; will be started after gesture if enabled
  }
 }
 const backgroundMusicPlugin: Plugin<typeof settings> = {
  id: "background-music",
  name: "Background Music",
  description: "Play your own music in the background while SEQTA is open",
  version: "1.0.0",
  settings,
  styles,
  disableToggle: true,
  defaultEnabled: false,
  run: async (api) => {
    await api.storage.loaded;
    // react to specific setting changes
    api.settings.onChange("volume" as any, (value: any) => {
      const vol = (typeof value === "number" ? value : 0.5) as number;
      if (currentAudio) currentAudio.volume = Math.max(0, Math.min(1, vol));
    });
    api.settings.onChange("pauseOnHidden" as any, (value: any) => {
      const pauseOnHidden = (typeof value === "boolean" ? value : true) as boolean;
      // If the setting is disabled and audio is currently paused due to tab being hidden, resume it
      if (!pauseOnHidden && currentAudio && currentAudio.paused && document.visibilityState === "hidden") {
        currentAudio.play().catch(() => {});
      }
    });
    // Note: Stop button/event removed by user; no stop handling needed
    // Start if we have audio and autoplay is enabled
    const tryStart = async () => {
      const vol = (api.settings as any).volume ?? 0.5;
      await startPlayback(vol);
    };
    // Always arm gesture start and attempt immediate start
    const cancel = ensureGestureStart(() => { tryStart(); });
    cleanupRegistered = true;
    (window as any).__betterseqta_bg_music_cancel__ = cancel;
    tryStart();
    // Pause on tab hide, resume on show with a small delay (if enabled)
    const visHandler = () => {
      if (!currentAudio) return;
      const pauseOnHidden = (api.settings as any).pauseOnHidden ?? true;
      if (!pauseOnHidden) return;
      if (document.visibilityState === "hidden") {
        if (visibilityResumeTimeout !== null) {
          clearTimeout(visibilityResumeTimeout);
          visibilityResumeTimeout = null;
        }
        currentAudio.pause();
      } else if (document.visibilityState === "visible") {
        if (visibilityResumeTimeout !== null) {
          clearTimeout(visibilityResumeTimeout);
        }
        visibilityResumeTimeout = window.setTimeout(() => {
          visibilityResumeTimeout = null;
          currentAudio?.play().catch(() => {});
        }, 200);
      }
    };
    document.addEventListener("visibilitychange", visHandler);
    // Allow uploads to trigger refresh
    const uploadedHandler = () => {
      const vol = (api.settings as any).volume ?? 0.5;
      startPlayback(vol);
    };
    window.addEventListener("betterseqta-background-music-updated", uploadedHandler);
    return () => {
      document.removeEventListener("visibilitychange", visHandler);
      window.removeEventListener("betterseqta-background-music-updated", uploadedHandler);
      if (cleanupRegistered && (window as any).__betterseqta_bg_music_cancel__) {
        (window as any).__betterseqta_bg_music_cancel__();
        (window as any).__betterseqta_bg_music_cancel__ = undefined;
      }
      if (pendingGestureCancel) { pendingGestureCancel(); pendingGestureCancel = null; }
      if (visibilityResumeTimeout !== null) { clearTimeout(visibilityResumeTimeout); visibilityResumeTimeout = null; }
      stopAndCleanupAudio();
    };
  },
 };
 export default backgroundMusicPlugin;
@@ -1,2 +0,0 @@
 .background-music-hidden{display:none}
@@ -0,0 +1,65 @@
 <script lang="ts">
  import Editor from './Editor/Editor.svelte';
  import EditorStyles from './Editor/EditorStyles.css?raw';
  import EditorOverrideStyles from './Editor/EditorOverrideStyles.css?raw';
  import TiptapStyles from './Editor/TiptapStyles.css?raw';
  import { onMount } from 'svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState';
  interface Props {
    onchange: (value: string) => void;
    initialContent?: string;
    scale?: number; // Scale factor for the editor (1.0 = normal, 1.2 = 120%, etc.)
  }
  let { onchange, initialContent = '', scale = 1.3 }: Props = $props();
  let content = $state('');
  let betterEditor = $state<HTMLElement | null>(null);
  // Watch for content changes and call the callback
  $effect(() => {
    if (onchange) {
      onchange(content);
    }
  });
  onMount(async () => {
    if (betterEditor) {
      const styles = EditorStyles + EditorOverrideStyles + TiptapStyles;
      const scalingCSS = `
        .better-editor {
          --scale-factor: ${scale};
        }
        .better-editor .editor-prose {
          transform-origin: top left;
          zoom: ${scale};
          -moz-transform: scale(${scale});
          -moz-transform-origin: 0 0;
        }
        /* For Firefox which doesn't support zoom */
        @-moz-document url-prefix() {
          .better-editor .editor-prose {
            transform: scale(${scale});
            width: ${100 / scale}%;
          }
        }
      `;
      const styleElement = document.createElement('style');
      styleElement.textContent = styles + scalingCSS;
      betterEditor.appendChild(styleElement);
    }
  });
 </script>
 <div
  class="h-full better-editor {settingsState.DarkMode ? 'dark' : ''}" 
  bind:this={betterEditor}
  style="font-size: {scale * 16}px; --editor-scale: {scale};"
 >
  <Editor bind:content {initialContent} />
 </div>
@@ -0,0 +1,154 @@
 <script lang="ts">
  import Placeholder from '@tiptap/extension-placeholder';
  import Commands from './Plugins/Commands/command';
  import { Dropcursor } from '@tiptap/extension-dropcursor';
  import Image from '@tiptap/extension-image'
  import BubbleMenu from '@tiptap/extension-bubble-menu';
  import Typography from '@tiptap/extension-typography';
  import TaskList from '@tiptap/extension-task-list';
  import TaskItem from '@tiptap/extension-task-item';
  import StarterKit from '@tiptap/starter-kit';
  import Link from '@tiptap/extension-link';
  import { Editor } from '@tiptap/core';
  import CommandList from './Plugins/Commands/CommandList.svelte';
  import suggestion from './Plugins/Commands/suggestion';
  import { slashVisible } from './Plugins/Commands/stores';
  import { get } from 'svelte/store';
  import BubbleMenuComponent from './Plugins/BubbleMenu.svelte';
  import { onMount, onDestroy } from 'svelte';
  import EditorStyles from './EditorOverrideStyles.css?raw';
  // Make htmlContent bindable from parent components
  let { content = $bindable(''), initialContent = '' } = $props<{ content: string; initialContent?: string }>();
  let commandListInstance = $state<any>(null);
  let element = $state<HTMLElement | null>(null);
  let editor = $state<Editor | null>(null);
  onMount(() => {
    editor = new Editor({
      element: element!,
      content: initialContent || '',
      editorProps: {
        attributes: {
          class: 'focus:outline-none px-3 md:px-0',
        },
        handleKeyDown: (_, event) => {
          // Handle keyboard events when slash menu is visible
          if (get(slashVisible) && commandListInstance) {
            if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
              const handled = commandListInstance.handleKeydown(event, editor);
              if (handled) {
                return true; // Prevent TipTap from handling this event
              }
            }
          }
          return false; // Let TipTap handle other events
        },
      },
      extensions: [
        StarterKit,
        Placeholder.configure({
          placeholder: ({ node }: { node: any }) => {
            if (node.type.name === 'heading') {
              return 'Heading';
            } else if (node.type.name === 'paragraph') {
              return "Type '/' for commands";
            }
            return 'Type something...';
          },
        }),
        TaskList,
        TaskItem,
        Link,
        Typography,
        Commands.configure({
          suggestion,
        }),
        BubbleMenu.configure({
          element: document.querySelector('.menu') as HTMLElement,
        }),
        Dropcursor.configure({ width: 5, color: '#ddeeff' }),
        Image.configure({
          allowBase64: true,
        }),
      ],
      onTransaction: () => {
        // force re-render so `editor.isActive` works as expected
        editor = editor;
      },
      onUpdate: ({ editor }: { editor: Editor }) => {
        // Update the htmlContent with the editor's HTML plus CSS
        const editorHTML = editor.getHTML();
        content = `<div class="editor-prose">${editorHTML}<${''}style>${EditorStyles}</${''}style></div>`;
      },
    });
  });
  onMount(() => {
    if (initialContent) {
      content = initialContent;
    }
  });
  onDestroy(() => {
    if (editor) {
      editor.destroy();
    }
  });
  function handleKeydownCapture(event: KeyboardEvent) {
    if (commandListInstance && editor && get(slashVisible)) {
      if (event.key === 'Escape') {
        if (commandListInstance.handleKeydown(event, editor)) {
          event.preventDefault();
          event.stopPropagation();
        }
      }
    }
  }
  function handleClick(event: MouseEvent) {
    if (!editor) return;
    // Check if the click happened in empty space below content
    const editorElement = element;
    if (!editorElement) return;
    const clickY = event.clientY;
    // Get the last node in the editor
    const lastNode = editorElement.lastElementChild;
    if (lastNode) {
      const lastNodeRect = lastNode.getBoundingClientRect();
      // If click is below the last content node, move cursor to end
      if (clickY > lastNodeRect.bottom) {
        const docSize = editor.state.doc.content.size;
        editor.commands.setTextSelection(docSize);
        editor.commands.focus();
        event.preventDefault();
      }
    }
  }
 </script>
 <div class="relative h-full">
  <div
    class="w-full min-h-full editor-prose"
    bind:this={element}
    onkeydown={handleKeydownCapture}
    onclick={handleClick}
    role="textbox"
    tabindex="-1">
  </div>
  <CommandList bind:this={commandListInstance} />
 </div>
 <BubbleMenuComponent bind:editor />
@@ -0,0 +1,398 @@
 .editor-prose {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif !important;
  line-height: 1.6 !important;
  color: #374151 !important;
  font-size: 14px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  .dark & * {
    color: #d1d5db !important;
  }
  * {
    color: #374151 !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol {
    width: 100% !important;
    min-width: 2px !important;
    box-sizing: border-box !important;
  }
  h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0.75rem 0 0.5rem 0 !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #f9fafb !important;
    }
  }
  h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0.6rem 0 0.4rem 0 !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #e5e7eb !important;
    }
  }
  h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.3rem 0 !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #d1d5db !important;
    }
  }
  p {
    margin: 0.4rem 0 !important;
    line-height: 1.6 !important;
    font-size: 0.875rem !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: inherit !important;
    text-shadow: none !important;
  }
  ul {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
    list-style-type: disc !important;
    border: none !important;
    background: none !important;
    ul {
      list-style-type: circle !important;
      ul {
        list-style-type: square !important;
      }
    }
    &[data-type='taskList'] {
      list-style: none !important;
      padding: 0 !important;
      margin: 0.5rem 0 !important;
      border: none !important;
      background: none !important;
      p {
        margin: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        color: inherit !important;
        text-shadow: none !important;
      }
      li {
        display: flex !important;
        align-items: flex-start !important;
        margin: 0.25rem 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        color: inherit !important;
        text-shadow: none !important;
        list-style: none !important;
        > label {
          flex: 0 0 auto !important;
          margin-right: 0.5rem !important;
          margin-top: 0.125rem !important;
          user-select: none !important;
          padding: 0 !important;
          border: none !important;
          background: none !important;
          input[type='checkbox'] {
            width: 1rem !important;
            height: 1rem !important;
            border-radius: 0.25rem !important;
            border: 2px solid #d1d5db !important;
            background-color: #fff !important;
            cursor: pointer !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            position: relative !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            &:hover {
              border-color: #3b82f6 !important;
            }
            &:checked {
              background-color: #3b82f6 !important;
              border-color: #3b82f6 !important;
              &::after {
                content: '' !important;
                position: absolute !important;
                left: 0.125rem !important;
                top: 0.0625rem !important;
                width: 0.375rem !important;
                height: 0.625rem !important;
                border: 2px solid white !important;
                border-top: 0 !important;
                border-left: 0 !important;
                transform: rotate(45deg) !important;
              }
            }
            .dark & {
              border-color: #4b5563 !important;
              background-color: #374151 !important;
              &:hover {
                border-color: #60a5fa !important;
              }
              &:checked {
                background-color: #60a5fa !important;
                border-color: #60a5fa !important;
              }
            }
          }
        }
        > div {
          flex: 1 1 auto !important;
          margin: 0 !important;
          padding: 0 !important;
          border: none !important;
          background: none !important;
          color: inherit !important;
        }
      }
    }
    li {
      margin: 0.25rem 0 !important;
      line-height: 1.5 !important;
      font-size: 0.875rem !important;
      display: list-item !important;
      list-style-type: disc !important;
      padding: 0 !important;
      border: none !important;
      background: none !important;
      color: inherit !important;
      text-shadow: none !important;
    }
  }
  ol {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
    list-style-type: decimal !important;
    border: none !important;
    background: none !important;
    li {
      margin: 0.25rem 0 !important;
      line-height: 1.5 !important;
      font-size: 0.875rem !important;
      display: list-item !important;
      list-style-type: decimal !important;
      padding: 0 !important;
      border: none !important;
      background: none !important;
      color: inherit !important;
      text-shadow: none !important;
    }
  }
  strong {
    font-weight: 600 !important;
    color: #111827 !important;
    text-shadow: none !important;
    .dark & {
      color: #f9fafb !important;
    }
  }
  em {
    font-style: italic !important;
    text-shadow: none !important;
  }
  a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(59, 130, 246, 0.3) !important;
    text-shadow: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    &:hover {
      text-decoration-color: #3b82f6 !important;
      background: none !important;
    }
    .dark & {
      color: #60a5fa !important;
      &:hover {
        text-decoration-color: #60a5fa !important;
      }
    }
  }
  blockquote {
    padding: 0.2rem 1rem !important;
    margin: 1rem 0 !important;
    font-style: italic !important;
    color: #6b7280 !important;
    text-align: left !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: #d1d5db;
      z-index: 1;
      border-radius: 0.5rem;
    }
    .dark &::before {
      background-color: #4b5563;
    }
    .dark & {
      color: #9ca3af !important;
    }
  }
  pre {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin: 1rem 0 !important;
    overflow-x: auto !important;
    font-family:
      ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    white-space: pre !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    .dark & {
      background-color: rgba(35, 36, 41, 0.5) !important;
      border: 1px solid rgba(35, 36, 41, 0.5) !important;
      color: #e5e7eb !important;
    }
    code {
      background-color: transparent !important;
      color: inherit !important;
      padding: 0 !important;
      border-radius: 0 !important;
      font-size: inherit !important;
      font-family: inherit !important;
      border: none !important;
      margin: 0 !important;
      .dark & {
        background-color: transparent !important;
        color: inherit !important;
      }
    }
  }
  hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    background: none !important;
    height: 0 !important;
    padding: 0 !important;
    .dark & {
      border-top-color: #3f4854 !important;
    }
  }
  code {
    background-color: #f3f4f6 !important;
    color: #d97706 !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.8125rem !important;
    font-family:
      ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace !important;
    border: none !important;
    margin: 0 !important;
    text-shadow: none !important;
    .dark & {
      background-color: #374151 !important;
      color: #fbbf24 !important;
    }
  }
 }
@@ -0,0 +1,256 @@
 /* Editor-specific styles (animations, transitions, editor-only features) - !these are not applied to sent messages! */
 /* Nested content styling with animated borders */
 .editor-prose li > *:not(:first-child) {
  position: relative;
  margin-left: -0.5rem;
 }
 .editor-prose li:not(:has(> label)) > *:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background-color: #e5e7eb7e;
  transform-origin: top;
  animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .dark .editor-prose li > *:not(:first-child)::before {
  background-color: #4b55637b;
 }
 /* Special handling for nested lists to extend the line properly */
 .editor-prose li > ul,
 .editor-prose li > ol {
  margin-left: -0.5rem;
 }
 .editor-prose li > ul::before,
 .editor-prose li > ol::before {
  bottom: -0.25rem; /* Extend slightly below for better visual connection */
 }
@keyframes expandDown {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
 }
 /* Placeholders for editor-only */
 .editor-prose p::before,
 .editor-prose h1::before,
 .editor-prose h2::before,
 .editor-prose h3::before,
 .editor-prose h4::before,
 .editor-prose h5::before,
 .editor-prose h6::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  float: left;
  height: 0;
 }
 .dark .editor-prose p::before,
 .dark .editor-prose h1::before,
 .dark .editor-prose h2::before,
 .dark .editor-prose h3::before,
 .dark .editor-prose h4::before,
 .dark .editor-prose h5::before,
 .dark .editor-prose h6::before {
  color: #6b7280;
 }
 .bnEditor {
  outline: none;
  padding-inline: 50px;
  border-radius: 8px;
  /* Define a set of colors to be used throughout the app for consistency
  see https://atlassian.design/foundations/color for more info */
  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
 }
 /*
 bnRoot should be applied to all top-level elements
 This includes the Prosemirror editor, but also <div> element such as 
 Tippy popups that are appended to document.body directly
 */
 .bnRoot {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .bnRoot *,
 .bnRoot *::before,
 .bnRoot *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
 }
 /* reset styles, they will be set on blockContent */
 .defaultStyles p,
 .defaultStyles h1,
 .defaultStyles h2,
 .defaultStyles h3,
 .defaultStyles li {
  all: unset !important;
  margin: 0;
  padding: 0;
  font-size: inherit;
  /* min width to make sure cursor is always visible */
  min-width: 2px !important;
 }
 .defaultStyles {
  font-size: 16px;
  font-weight: normal;
  font-family:
    'Inter',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Open Sans',
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 .dragPreview {
  position: absolute;
  top: -1000px;
 }
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
 }
 /* Animate headers only */
 .editor-prose h1,
 .editor-prose h2,
 .editor-prose h3,
 .editor-prose h4,
 .editor-prose h5,
 .editor-prose h6 {
  animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
 }
 /* Smooth transitions for all interactive elements */
 .editor-prose {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Bold and italic transitions */
 .editor-prose strong,
 .editor-prose em {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Selected node styling (Notion-like) */
 .ProseMirror-selectednode {
  box-shadow: 0 0 0 4px #3b82f6;
  border-radius: 4px;
  background-color: rgba(59, 130, 246, 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
 }
 .dark .ProseMirror-selectednode {
  box-shadow: 0 0 0 2px #3a3e44;
  background-color: rgba(96, 165, 250, 0.08);
 }
 /* Ensure selected nodes have proper spacing */
 .ProseMirror-selectednode {
  margin: 2px;
 }
 /* Drag and drop containment */
 .editor-prose {
  position: relative;
  overflow: hidden;
  contain: layout style;
 }
 /* Image drag styling */
 .editor-prose img.tiptap-image {
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  max-width: 100%;
  height: auto;
 }
 .editor-prose img.tiptap-image:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
 }
 .editor-prose img.tiptap-image:active {
  cursor: grabbing;
  transform: scale(0.98);
 }
 /* Dropcursor styling */
 .tiptap-dropcursor {
  pointer-events: none;
  border-radius: 2px;
  animation: pulse 1.5s ease-in-out infinite;
 }
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
 }
 /* Prevent drag operations outside editor */
 .editor-prose * {
  -webkit-user-drag: auto;
  -moz-user-drag: auto;
  user-drag: auto;
 }
 /* Ensure only images within editor are draggable */
 .editor-prose img {
  -webkit-user-drag: element;
  -moz-user-drag: element;
  user-drag: element;
 }
 /* Prevent text selection during drag */
 .editor-prose.ProseMirror-dragover * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
 }
@@ -0,0 +1,196 @@
 <script lang="ts">
  import { Icon, Bold, Italic, Strikethrough, CodeBracket, ChevronDown } from 'svelte-hero-icons';
  import { M } from 'motion-start';
  import type { Editor } from '@tiptap/core';
  let { editor = $bindable() } = $props<{ editor: Editor | null }>();
  // Turn into dropdown state
  let showTurnInto = $state(false);
  // Turn into options
  const turnIntoOptions = [
    { id: 'paragraph', label: 'Text', icon: 'T', iconClass: 'font-mono' },
    { id: 'heading1', label: 'Heading 1', icon: 'H1', iconClass: 'font-bold' },
    { id: 'heading2', label: 'Heading 2', icon: 'H2', iconClass: 'font-bold' },
    { id: 'heading3', label: 'Heading 3', icon: 'H3', iconClass: 'font-bold' },
    { id: 'separator' },
    { id: 'bulletList', label: 'Bulleted list', icon: '•' },
    { id: 'orderedList', label: 'Numbered list', icon: '1.' },
    { id: 'taskList', label: 'To-do list', icon: '☐' },
    { id: 'separator' },
    { id: 'codeBlock', label: 'Code', icon: '</>' },
    { id: 'blockquote', label: 'Quote', icon: '"' }
  ];
  function getCurrentBlockType(): string {
    if (!editor) return 'Text';
    if (editor.isActive('heading', { level: 1 })) return 'Heading 1';
    if (editor.isActive('heading', { level: 2 })) return 'Heading 2';
    if (editor.isActive('heading', { level: 3 })) return 'Heading 3';
    if (editor.isActive('bulletList')) return 'Bulleted list';
    if (editor.isActive('orderedList')) return 'Numbered list';
    if (editor.isActive('taskList')) return 'To-do list';
    if (editor.isActive('codeBlock')) return 'Code';
    if (editor.isActive('blockquote')) return 'Quote';
    return 'Text';
  }
  function turnInto(type: string) {
    if (!editor) return;
    switch (type) {
      case 'paragraph':
        editor.chain().focus().setParagraph().run();
        break;
      case 'heading1':
        editor.chain().focus().toggleHeading({ level: 1 }).run();
        break;
      case 'heading2':
        editor.chain().focus().toggleHeading({ level: 2 }).run();
        break;
      case 'heading3':
        editor.chain().focus().toggleHeading({ level: 3 }).run();
        break;
      case 'bulletList':
        editor.chain().focus().toggleBulletList().run();
        break;
      case 'orderedList':
        editor.chain().focus().toggleOrderedList().run();
        break;
      case 'taskList':
        editor.chain().focus().toggleTaskList().run();
        break;
      case 'codeBlock':
        editor.chain().focus().toggleCodeBlock().run();
        break;
      case 'blockquote':
        editor.chain().focus().toggleBlockquote().run();
        break;
    }
    showTurnInto = false;
  }
  function handleKeydown(event: KeyboardEvent) {
    // Close modals/dropdowns on Escape
    if (event.key === 'Escape') {
      if (showTurnInto) {
        showTurnInto = false;
        event.preventDefault();
      }
    }
  }
  function handleClick(event: MouseEvent) {
    // Close turn into dropdown if clicking outside
    if (showTurnInto && !(event.target as Element).closest('.turn-into-dropdown')) {
      showTurnInto = false;
    }
  }
 </script>
 <svelte:window onkeydown={handleKeydown} onclick={handleClick} />
 <!-- Main Bubble Menu -->
 <M.div 
  class="flex gap-1 items-center p-1 rounded-lg border shadow-xl backdrop-blur-lg menu dark:bg-zinc-900/90 bg-white/90 dark:border-zinc-700/30 border-zinc-200/50"
  layout
  transition={{ duration: 0.3, ease: "easeInOut" }}
 >
  {#if editor}
    <M.div 
      class="flex gap-1 items-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.2 }}
    >
      <!-- Turn Into Dropdown -->
      <div class="relative turn-into-dropdown">
        <M.button
          onclick={() => showTurnInto = !showTurnInto}
          class="flex gap-1 items-center px-3 py-2 text-sm rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
          title="Turn into"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          {getCurrentBlockType()}
          <M.div
            animate={{ rotate: showTurnInto ? 180 : 0 }}
            transition={{ duration: 0.2 }}
          >
            <Icon src={ChevronDown} size="14" />
          </M.div>
        </M.button>
        {#if showTurnInto}
          <M.div 
            class="absolute left-0 top-full z-50 mt-1 w-48 bg-white rounded-lg border shadow-xl dark:bg-zinc-800 border-zinc-200/40 dark:border-zinc-700/40"
            initial={{ opacity: 0, y: -10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.95 }}
            transition={{ duration: 0.15 }}
          >
            {#each turnIntoOptions as option}
              {#if option.id === 'separator'}
                <div class="my-1 h-px bg-zinc-200/60 dark:bg-zinc-600/60"></div>
              {:else}
                <button 
                  onclick={() => turnInto(option.id)} 
                  class="flex gap-2 items-center px-3 py-2 w-full text-sm text-left transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-700/40"
                >
                  <span class="{option.iconClass || ''}">{option.icon}</span> 
                  {option.label}
                </button>
              {/if}
            {/each}
          </M.div>
        {/if}
      </div>
      <div class="mx-1 w-px h-6 bg-zinc-300 dark:bg-zinc-600"></div>
      <M.button
        onclick={() => editor.chain().focus().toggleBold().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('bold') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Bold"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Bold} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleItalic().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('italic') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Italic"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Italic} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleStrike().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('strike') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Strikethrough"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Strikethrough} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleCode().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('code') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Code"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={CodeBracket} size="16" />
      </M.button>
    </M.div>
  {/if}
 </M.div> 
--- a/Show More
+++ b/Show More
		`@@ -1 +0,0 @@`
			Experimental nightly build from `main`. May break. Do not upload to Chrome Web Store or Firefox Add-ons. Download, replace your sideloaded copy, and reload the extension.