Merge pull request #257 from BetterSEQTA/main

Merge main into global-search
Merge branch 'global-search' into main
2026-06-06 19:54:39 +00:00 · 2025-05-03 18:58:46 +10:00 · 2025-05-03 18:58:33 +10:00 · 2025-05-03 18:57:31 +10:00 · 2025-05-03 18:57:31 +10:00 · 2025-05-03 18:57:31 +10:00
161 changed files with 12536 additions and 4860 deletions
@@ -0,0 +1,414 @@
 /** @type {import('dependency-cruiser').IConfiguration} */
 module.exports = {
  forbidden: [
    {
      name: 'no-circular',
      severity: 'warn',
      comment:
        'This dependency is part of a circular relationship. You might want to revise ' +
        'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
      from: {},
      to: {
        circular: true
      }
    },
    {
      name: 'no-orphans',
      comment:
        "This is an orphan module - it's likely not used (anymore?). Either use it or " +
        "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
        "add an exception for it in your dependency-cruiser configuration. By default " +
        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
      severity: 'warn',
      from: {
        orphan: true,
        pathNot: [
          '(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$',                  // dot files
          '[.]d[.]ts$',                                                       // TypeScript declaration files
          '(^|/)tsconfig[.]json$',                                            // TypeScript config
          '(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs
        ]
      },
      to: {},
    },
    {
      name: 'no-deprecated-core',
      comment:
        'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
        "bound to exist - node doesn't deprecate lightly.",
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'core'
        ],
        path: [
          '^v8/tools/codemap$',
          '^v8/tools/consarray$',
          '^v8/tools/csvparser$',
          '^v8/tools/logreader$',
          '^v8/tools/profile_view$',
          '^v8/tools/profile$',
          '^v8/tools/SourceMap$',
          '^v8/tools/splaytree$',
          '^v8/tools/tickprocessor-driver$',
          '^v8/tools/tickprocessor$',
          '^node-inspect/lib/_inspect$',
          '^node-inspect/lib/internal/inspect_client$',
          '^node-inspect/lib/internal/inspect_repl$',
          '^async_hooks$',
          '^punycode$',
          '^domain$',
          '^constants$',
          '^sys$',
          '^_linklist$',
          '^_stream_wrap$'
        ],
      }
    },
    {
      name: 'not-to-deprecated',
      comment:
        'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
        'version of that module, or find an alternative. Deprecated modules are a security risk.',
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'deprecated'
        ]
      }
    },
    {
      name: 'no-non-package-json',
      severity: 'error',
      comment:
        "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
        "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
        "in your package.json.",
      from: {},
      to: {
        dependencyTypes: [
          'npm-no-pkg',
          'npm-unknown'
        ]
      }
    },
    {
      name: 'not-to-unresolvable',
      comment:
        "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
        'module: add it to your package.json. In all other cases you likely already know what to do.',
      severity: 'error',
      from: {},
      to: {
        couldNotResolve: true
      }
    },
    {
      name: 'no-duplicate-dep-types',
      comment:
        "Likely this module depends on an external ('npm') package that occurs more than once " +
        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
        "maintenance problems later on.",
      severity: 'warn',
      from: {},
      to: {
        moreThanOneDependencyType: true,
        // as it's pretty common to have a type import be a type only import 
        // _and_ (e.g.) a devDependency - don't consider type-only dependency
        // types for this rule
        dependencyTypesNot: ["type-only"]
      }
    },
    /* rules you might want to tweak for your specific situation: */
    {
      name: 'not-to-spec',
      comment:
        'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' +
        "If there's something in a spec that's of use to other modules, it doesn't have that single " +
        'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
      severity: 'error',
      from: {},
      to: {
        path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
      }
    },
    {
      name: 'not-to-dev-dep',
      severity: 'error',
      comment:
        "This module depends on an npm package from the 'devDependencies' section of your " +
        'package.json. It looks like something that ships to production, though. To prevent problems ' +
        "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
        'section of your package.json. If this module is development only - add it to the ' +
        'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
      from: {
        path: '^(src)',
        pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
      },
      to: {
        dependencyTypes: [
          'npm-dev',
        ],
        // type only dependencies are not a problem as they don't end up in the
        // production code or are ignored by the runtime.
        dependencyTypesNot: [
          'type-only'
        ],
        pathNot: [
          'node_modules/@types/'
        ]
      }
    },
    {
      name: 'optional-deps-used',
      severity: 'info',
      comment:
        "This module depends on an npm package that is declared as an optional dependency " +
        "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
        "If you're using an optional dependency here by design - add an exception to your" +
        "dependency-cruiser configuration.",
      from: {},
      to: {
        dependencyTypes: [
          'npm-optional'
        ]
      }
    },
    {
      name: 'peer-deps-used',
      comment:
        "This module depends on an npm package that is declared as a peer dependency " +
        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
        "add an exception to your dependency-cruiser configuration.",
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'npm-peer'
        ]
      }
    }
  ],
  options: {
    /* Which modules not to follow further when encountered */
    doNotFollow: {
      /* path: an array of regular expressions in strings to match against */
      path: ['node_modules']
    },
    /* Which modules to exclude */
    // exclude : {
    //   /* path: an array of regular expressions in strings to match against */
    //   path: '',
    // },
    /* Which modules to exclusively include (array of regular expressions in strings)
       dependency-cruiser will skip everything not matching this pattern
    */
    // includeOnly : [''],
    /* List of module systems to cruise.
       When left out dependency-cruiser will fall back to the list of _all_
       module systems it knows of. It's the default because it's the safe option
       It might come at a performance penalty, though.
       moduleSystems: ['amd', 'cjs', 'es6', 'tsd']
       As in practice only commonjs ('cjs') and ecmascript modules ('es6')
       are widely used, you can limit the moduleSystems to those.
     */
    // moduleSystems: ['cjs', 'es6'],
    /* 
      false: don't look at JSDoc imports (the default)
      true: dependency-cruiser will detect dependencies in JSDoc-style
      import statements. Implies "parser": "tsc", so the dependency-cruiser
      will use the typescript parser for JavaScript files.
      For this to work the typescript compiler will need to be installed in the
      same spot as you're running dependency-cruiser from.
     */
    // detectJSDocImports: true,
    /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/main/'
       to open it on your online repo or `vscode://file/${process.cwd()}/` to 
       open it in visual studio code),
     */
    // prefix: `vscode://file/${process.cwd()}/`,
    /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation
       true: also detect dependencies that only exist before typescript-to-javascript compilation
       "specify": for each dependency identify whether it only exists before compilation or also after
     */
    tsPreCompilationDeps: true,
    /* list of extensions to scan that aren't javascript or compile-to-javascript.
       Empty by default. Only put extensions in here that you want to take into
       account that are _not_ parsable.
    */
    // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"],
    /* if true combines the package.jsons found from the module up to the base
       folder the cruise is initiated from. Useful for how (some) mono-repos
       manage dependencies & dependency definitions.
     */
    // combinedDependencies: false,
    /* if true leave symlinks untouched, otherwise use the realpath */
    // preserveSymlinks: false,
    /* TypeScript project file ('tsconfig.json') to use for
       (1) compilation and
       (2) resolution (e.g. with the paths property)
       The (optional) fileName attribute specifies which file to take (relative to
       dependency-cruiser's current working directory). When not provided
       defaults to './tsconfig.json'.
     */
    tsConfig: {
      fileName: 'tsconfig.json'
    },
    /* Webpack configuration to use to get resolve options from.
       The (optional) fileName attribute specifies which file to take (relative
       to dependency-cruiser's current working directory. When not provided defaults
       to './webpack.conf.js'.
       The (optional) `env` and `arguments` attributes contain the parameters
       to be passed if your webpack config is a function and takes them (see 
        webpack documentation for details)
     */
    // webpackConfig: {
    //  fileName: 'webpack.config.js',
    //  env: {},
    //  arguments: {}
    // },
    /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use
      for compilation
     */
    // babelConfig: {
    //   fileName: '.babelrc',
    // },
    /* List of strings you have in use in addition to cjs/ es6 requires
       & imports to declare module dependencies. Use this e.g. if you've
       re-declared require, use a require-wrapper or use window.require as
       a hack.
    */
    // exoticRequireStrings: [],
    /* options to pass on to enhanced-resolve, the package dependency-cruiser
       uses to resolve module references to disk. The values below should be
       suitable for most situations
       If you use webpack: you can also set these in webpack.conf.js. The set
       there will override the ones specified here.
     */
    enhancedResolveOptions: {
      /* What to consider as an 'exports' field in package.jsons */ 
      exportsFields: ["exports"],
      /* List of conditions to check for in the exports field.
         Only works when the 'exportsFields' array is non-empty.
      */
      conditionNames: ["import", "require", "node", "default", "types"],
      /* The extensions, by default are the same as the ones dependency-cruiser
         can access (run `npx depcruise --info` to see which ones that are in
         _your_ environment). If that list is larger than you need you can pass
         the extensions you actually use (e.g. [".js", ".jsx"]). This can speed
         up module resolution, which is the most expensive step.
       */
      // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
      /* What to consider a 'main' field in package.json */
      mainFields: ["module", "main", "types", "typings"],
      /* A list of alias fields in package.jsons
         See [this specification](https://github.com/defunctzombie/package-browser-field-spec) and
         the webpack [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealiasfields)
         documentation.
         Defaults to an empty array (= don't use alias fields).
       */
      // aliasFields: ["browser"],
    },
    /* skipAnalysisNotInRules will make dependency-cruiser execute 
       analysis strictly necessary for checking the rule set only. 
       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#skipanalysisnotinrules
       for details
     */
    skipAnalysisNotInRules: true,
    /* List of built-in modules to use on top of the ones node declares.
       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#builtinmodules-influencing-what-to-consider-built-in--core-modules
       for details
    */
    builtInModules: { 
      add: [
        "bun",
        "bun:ffi",
        "bun:jsc",
        "bun:sqlite",
        "bun:test",
        "bun:wrap",
        "detect-libc",
        "undici",
        "ws"
      ]
    },
    reporterOptions: {
      dot: {
        /* pattern of modules that can be consolidated in the detailed
           graphical dependency graph. The default pattern in this configuration
           collapses everything in node_modules to one folder deep so you see
           the external modules, but their innards.
         */
        collapsePattern: 'node_modules/(?:@[^/]+/[^/]+|[^/]+)',
        /* Options to tweak the appearance of your graph.See
           https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions
           for details and some examples. If you don't specify a theme
           dependency-cruiser falls back to a built-in one.
        */
        // theme: {
        //   graph: {
        //     /* splines: "ortho" gives straight lines, but is slow on big graphs
        //        splines: "true" gives bezier curves (fast, not as nice as ortho)
        //    */
        //     splines: "true"
        //   },
        // }
      },
      archi: {
        /* pattern of modules that can be consolidated in the high level
           graphical dependency graph. If you use the high level graphical
           dependency graph reporter (`archi`) you probably want to tweak
           this collapsePattern to your situation.
        */
        collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)',
        /* Options to tweak the appearance of your graph. If you don't specify a
           theme for 'archi' dependency-cruiser will use the one specified in the
           dot section above and otherwise use the default one.
         */
        // theme: { },
      },
      "text": {
        "highlightFocused": true
      },
    }
  }
 };
 // generated: dependency-cruiser@16.10.0 on 2025-02-16T22:32:01.621Z
@@ -1,27 +0,0 @@
 ---
 name: Report A bug.
 about: Create a report of a present bug.
 title: "[BUG]"
 labels: bug
 assignees: ''
 ---
 **Describe the bug**
 A clear and concise description of what the bug is.
 **To Reproduce**
 Please indicate how did you make this happen.
 **Expected behaviuor**
 Please add a clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 **Desktop (please complete the following information):**
 - OS: [e.g. iOS]
 - If using Windows, the build number. Find this by using ```winver``` and copying down the build id.
 **Additional context**
 Add any other context about the problem here.
@@ -0,0 +1,56 @@
 name: Bug report
 description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
 labels: bug
 title: "[BUG]"
 body:
 - type: markdown
  attributes:
    value: |
      Before reporting an issue, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) to make sure it has not already been reported (make sure to search closed issues as well!). 
 - type: textarea
  attributes:
    label: Describe the bug
    description: Describe your issue. For general issues and questions you'll get a faster answer [from our Discord.](https://discord.gg/YzmbnCDkat)
  validations:
    required: true
 - type: input
  attributes:
    label: Extension version
    description: What version of the extension are you using?
    placeholder: Find it by opening the config menu and clicking the about icon in the top right.
  validations:
    required: true
 - type: dropdown
  attributes:
    label: Browser
    description: Which Browser are you using?
    options:
      - Chrome
      - Firefox
      - Brave
      - Safari
      - DuckDuckGO
      - Microsoft Edge
      - Other Chromium-Based Browser
      - Other Non-Chromium-Based Browser
  validations:
    required: true
 - type: checkboxes
  attributes:
    label: Confirm
    options:
      - label: This bug report is about an issue with the extension itself. I have not modified the extension nor added any unsupported plugins. If this is not the case, I know that I should post the issue to the extension's Discord support channel instead.
        required: true
 - type: textarea
  attributes:
    label: Additional context
    description: Screenshots, video or any other information. Include photos of the console if possible
    placeholder: |
      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
  validations:
    required: false
@@ -0,0 +1,4 @@
 contact_links:
  - name: BetterSEQTA Community Support
    url: https://discord.gg/YzmbnCDkat
    about: Join our discord for community updates, discussion, and more!
@@ -1,20 +0,0 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
 title: "[FR] "
 labels: enhancement
 assignees: ''
 ---
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Describe alternatives you've considered**
 A clear and concise description of any alternative solutions or features you've considered.
 **Additional context**
 Add any other context or screenshots about the feature request here.
@@ -0,0 +1,54 @@
 name: Feature request
 description: Suggest a new Feature to be added or replaced in BetterSeqtaPLUS
 labels: enhancement
 title: "[FR]"
 body:
 - type: checkboxes
  attributes:
    label: Confirm
    options:
      - label: "Is this feature request related to a Bug report?"
        required: false
 - type: input
  attributes:
      label: Bug report link
      description: "If this feature request is related to a bug report, please insert the link to the bug report here"
      placeholder: "https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/..."
  validations:
      required: false
 - type: markdown
  attributes:
    value: |
      ## Feature details
      Before you request a feature, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) if it has already been requested. (Make sure to check closed issues as well!)
 - type: dropdown
  attributes:
    label: Feature type
    multiple: false
    options:
      - Graphical
      - Functional
      - Not Sure
  validations:
    required: true
 - type: input
  attributes:
    label: Feature Details
    description: Please write, with as much detail as possible, what you would like to see from this mod.
    placeholder: I would like to see...
  validations:
    required: false
 - type: textarea
  attributes:
    label: Additional details
    description: Anything else you want to add?
  validations:
    required: false
@@ -1,17 +0,0 @@
 ---
 name: Vulnerability
 about: Report a vulnerability in this extension.
 title: "[VUL] "
 labels: ''
 assignees: ''
 ---
 **What is the vulnerability?**
 Describe the vulnerability in concise language.
 **Where is the vulnerability found?**
 Describe where the vulnerability is found.
 **What does this affect?**
 Explain what it affects. E.G: It opens up my school email to the world. etc.
@@ -0,0 +1,14 @@
 ## Description
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 Fixes # (issue)
 ## Type of change
 Please delete options that are not relevant.
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update
@@ -9,8 +9,11 @@ yarn.lock
 .env
 .env.submit
 dependency-graph.svg
 # Build
 extension.zip
 build/
 dist/
 betterseqtaplus-safari/
@@ -18,6 +21,3 @@ betterseqtaplus-safari/
 .vscode/
 **/.DS_Store
 # Electron
 electron-dist/
@@ -1,5 +0,0 @@
 {
  "plugins": {
    "tailwindcss": {}
  }
 }
@@ -1,5 +1,5 @@
 {
  "tabWidth": 2,
  "useTabs": false,
-  "semi": false
+  "semi": true
 }
@@ -3,6 +3,21 @@
 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.
 ## Community
 Join our community channels to discuss the project, get help, and connect with other contributors:
 - **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
 - **GitHub Discussions**: For longer-form conversations
 - **GitHub Issues**: For bug reports and feature requests
 ## Creating Plugins
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
 - [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
 - [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.
@@ -44,23 +44,18 @@
  - Assessments
 - Options to remove certain items from the side menu
 - Grades calculator
- Fully customisable themes and an offical theme store
+- Fully customisable themes and an official theme store
 - Notification for next lesson (sent 5 minutes before end of the lesson)
 - Browser Support
-  - Chrome Supported
+  - Chrome, Edge, Brave, Opera and other Chromium-Based browsers are supported
-  - Edge Supported
+  - Firefox Supported: [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/)!
-  - Brave Supported
+  - Safari (Experimental and not recommended - only available via compilation)
  - Opera Supported
  - Vivaldi Supported
  - Chromium-based browsers are supported
  - Firefox (Experimental - available [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/)
  - Safari (Experimental - only available via compilation)
 ## Creating Custom Themes
 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. We're open and happy to help out! Happy creating :)
+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 :)
 ## Getting started
@@ -70,20 +65,43 @@ Don't worry- if you get stuck feel free to ask around in the discord. We're open
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
-### Running Development
+
 1. Install dependencies
 You may install the dependencies like below:
 ```
 npm install # or your preferred package manager like pnpm or yarn
 ```
 But it is recommended to do it like this: 
 ```
 npm install --legacy-peer-deps # Only NPM supported
 ```
 ### Running Development
 2. Run the dev script (it updates as you save files)
 ```
-npm run dev
+npm run dev # or use your perferred package manager
 ```
 ### Building for production
 2. Run the build script
 ```
 npm run build # or use your perferred package manager
 ```
 2.1. Package it up (optional)
 ```
 npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your perferred package manager
 ```
 3. Load the extension into chrome
 - Go to `chrome://extensions`
@@ -91,33 +109,15 @@ npm run dev
 - Click `Load unpacked`
 - Select the `dist` folder
-Just remember, in order to update changes to the extension, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
+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.
 ### Building for production
 1. Install dependencies
 ```
 npm install # or your preferred package manager like pnpm or yarn
 ```
 2. Run the build script
 ```
 npm run build
 ```
 3. Package it up (optional)
 ```
 npm run zip # This requires 7-Zip to be installed in order to work
 ```
 ## 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.
@@ -136,4 +136,4 @@ This extension was initially developed by [Nulkem](https://github.com/Nulkem/bet
 ## Star History
-[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#sethburkart123/EvenBetterSEQTA&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#BetterSEQTA/BetterSEQTA-Plus&Date)
@@ -6,11 +6,10 @@ Below here is the supported versions of BetterSEQTA+. Anything older than this i
 | Version | Supported          |
 | ------- | ------------------ |
-| 3.4.0   | :white_check_mark: |
+| 3.4.3   | ✅ |
-| <= 3.3   | :x:                |
+| < 3.4.3   | :x:                |
 `*` May not work on other devices.
 ## Reporting a Vulnerability
-If you find vulnerabilities, REPORT IT IMMEDIATELY. Make an issue and use the template provided for vulnerabilities.
+If you find vulnerabilities, REPORT IT IMMEDIATELY. open the [advisories tab](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories) on the left and click the green "report a vulnerability" button or use [this quick-link](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories/new) to create a new report
@@ -0,0 +1,50 @@
 # BetterSEQTA+ Documentation
 🚧 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
 - [Project Overview](./README.md) - This file
 - [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
 - [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
 ### Plugin System
 - [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
 - [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
 ## 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. 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.
 3. **Storage API**: Plugins can use the Storage API to persist data between sessions. The Storage API is also type-safe, ensuring that plugins can only access their own data.
 4. **SEQTA Integration**: BetterSEQTA+ integrates with SEQTA Learn by injecting code into the page. This allows plugins to modify the SEQTA UI and add new features.
 ## Getting Help
 If you need help with BetterSEQTA+, you can:
 - [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! 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
 BetterSEQTA+ is licensed under the [MIT License](../LICENSE). 
@@ -0,0 +1,262 @@
 # Contributing to BetterSEQTA+
 Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
 ## Table of Contents
 - [Code of Conduct](#code-of-conduct)
 - [Getting Started](#getting-started)
  - [Setting Up Your Development Environment](#setting-up-your-development-environment)
  - [Project Structure](#project-structure)
 - [Contributing Code](#contributing-code)
  - [Branching Strategy](#branching-strategy)
  - [Pull Request Process](#pull-request-process)
  - [Coding Standards](#coding-standards)
 - [Reporting Bugs](#reporting-bugs)
 - [Suggesting Features](#suggesting-features)
 - [Writing Documentation](#writing-documentation)
 - [Community](#community)
 ## Code of Conduct
 BetterSEQTA+ is committed to providing a welcoming and inclusive environment for all contributors. We expect all participants to adhere to our Code of Conduct, which promotes respectful and harassment-free interaction.
 Key points:
 - Be respectful and inclusive
 - Focus on what is best for the community
 - Show empathy towards other community members
 - Be open to constructive feedback
 ## Getting Started
 ### Setting Up Your Development Environment
 1. **Fork the Repository**
   Start by forking the BetterSEQTA+ repository to your GitHub account.
 2. **Clone Your Fork**
   ```bash
   git clone https://github.com/yourusername/betterseqta-plus.git
   cd betterseqta-plus
   ```
 3. **Install Dependencies**
   ```bash
   npm install
   ```
 4. **Set Up Development Environment**
   ```bash
   npm run dev
   ```
 5. **Install in Chrome/Firefox**
   Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
 ### Project Structure
 Understanding the project structure will help you navigate the codebase:
 ```
 betterseqta-plus/
 ├── src/                  # Source code
 │   ├── plugins/          # Plugin system
 │   │   ├── built-in/     # Built-in plugins
 │   │   ├── core/         # Plugin core functionality
 │   ├── settings/         # Settings system
 │   ├── utils/            # Utility functions
 │   ├── extension/        # Browser extension code
 ├── docs/                 # Documentation
 ├── test/                 # Test files
 ├── dist/                 # Build output (generated)
 ├── package.json          # Project dependencies
 ├── tsconfig.json         # TypeScript configuration
 └── README.md             # Project README
 ```
 ## Contributing Code
 ### Branching Strategy
 We follow a simple branching strategy:
 - `main` - The main development branch
 - `feature/*` - Feature branches
 - `bugfix/*` - Bug fix branches
 - `docs/*` - Documentation branches
 Always create a new branch for your changes:
 ```bash
 git checkout -b feature/my-new-feature
 ```
 ### Pull Request Process
 1. **Keep PRs Focused**
   Each pull request should address a single concern. If you're working on multiple features, create separate PRs for each.
 2. **Write Clear Commit Messages**
   Follow the conventional commits format:
   ```
   feat: add new feature
   fix: resolve bug with timetable
   docs: update installation instructions
   ```
 3. **Update Documentation**
   If your changes require documentation updates, include them in the same PR.
 4. **Run Tests**
   Make sure all tests pass before submitting your PR:
   ```bash
   npm test
   ```
 5. **Submit Your PR**
   When you're ready, push your branch and create a pull request on GitHub.
 6. **Code Review**
   All PRs will be reviewed by maintainers. Be responsive to feedback and make requested changes.
 7. **Merge**
   Once approved, a maintainer will merge your PR.
 ### Coding Standards
 We follow TypeScript best practices and have a consistent code style:
 1. **Use TypeScript**
   All new code should be written in TypeScript with proper typing.
 2. **Follow Existing Patterns**
   Match the coding style of the existing codebase.
 3. **Write Tests**
   Add tests for new features and bug fixes.
 4. **Document Your Code**
   Add comments for complex logic and JSDoc comments for functions.
 5. **Use Linters**
   We use ESLint and Prettier. Run them before submitting your PR:
   ```bash
   npm run lint
   npm run format
   ```
 ## Reporting Bugs
 If you find a bug, please report it by creating an issue on GitHub:
 1. **Search Existing Issues**
   Check if the bug has already been reported.
 2. **Use the Bug Report Template**
   Fill in all sections of the bug report template:
   - Description
   - Steps to reproduce
   - Expected behavior
   - Actual behavior
   - Screenshots (if applicable)
   - Environment (browser, OS, etc.)
 3. **Be Specific**
   The more details you provide, the easier it will be to fix the bug.
 ## Suggesting Features
 We welcome feature suggestions! To suggest a new feature:
 1. **Search Existing Suggestions**
   Check if your idea has already been suggested.
 2. **Use the Feature Request Template**
   Fill in all sections of the feature request template:
   - Description
   - Use case
   - Potential implementation
   - Alternatives considered
 3. **Be Patient**
   Feature requests are evaluated based on alignment with project goals, feasibility, and maintainer bandwidth.
 ## Writing Documentation
 Good documentation is crucial for the project. To contribute to documentation:
 1. **Identify Gaps**
   Look for areas where documentation is missing or unclear.
 2. **Follow Documentation Style**
   Maintain a consistent style and format.
 3. **Use Clear Language**
   Write in simple, clear English. Avoid jargon when possible.
 4. **Include Examples**
   Code examples and screenshots help users understand.
 5. **Submit a PR**
   Follow the same process as code contributions, but create a branch with a `docs/` prefix.
 ## Community
 Join our community channels to discuss the project, get help, and connect with other contributors:
 - **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
 - **GitHub Discussions**: For longer-form conversations
 - **GitHub Issues**: For bug reports and feature requests
 ## Creating Plugins
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
 - [Creating Your First Plugin](./plugins/creating-plugins.md)
 - [Plugin API Reference](./advanced/plugin-api.md)
 ## Recognition
 Contributors are recognized in several ways:
 1. **CONTRIBUTORS.md**: All contributors are listed in this file
 2. **Release Notes**: Significant contributions are highlighted in release notes
 3. **Community Recognition**: Regular shout-outs in community channels
 ## Questions?
 If you have any questions about contributing, please:
 1. Check the documentation
 2. Ask in the Discord server
 3. Open a GitHub Discussion
 Thank you for contributing to BetterSEQTA+! Your efforts help make SEQTA better for students and teachers everywhere. 
@@ -0,0 +1,180 @@
 # Installing BetterSEQTA+
 This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
 ## Prerequisites
 Before you begin, make sure you have the following installed:
 - [npm](https://www.npmjs.com/) (v7 or higher) or [Bun](https://bun.sh/) (recommended)
 - A modern web browser (Chrome, Firefox, Edge, etc.)
 ## Installation Methods
 There are two ways to install BetterSEQTA+:
 1. **For Users**: Install the browser extension
 2. **For Developers**: Clone the repository and set up the development environment
 ## For Users: Installing the Browser Extension
 BetterSEQTA+ is available as a browser extension for Chrome, Firefox, and Edge.
 ### Chrome/Edge
 1. Visit the [Chrome Web Store page for BetterSEQTA+](https://chrome.google.com/webstore/detail/betterseqta)
 2. Click the "Add to Chrome" button
 3. Confirm the installation when prompted
 4. The extension will be installed and ready to use
 ### Firefox
 1. Visit the [Firefox Add-ons page for BetterSEQTA+](https://addons.mozilla.org/en-US/firefox/addon/betterseqta)
 2. Click the "Add to Firefox" button
 3. Confirm the installation when prompted
 4. The extension will be installed and ready to use
 ## For Developers: Setting Up the Development Environment
 If you want to develop for BetterSEQTA+ or modify the code, follow these steps:
 ### 1. Clone the Repository
 ```bash
 git clone https://github.com/SeqtaLearning/betterseqta-plus.git
 cd betterseqta-plus
 ```
 ### 2. Install Dependencies
 Using npm:
 ```bash
 npm install --legacy-peer-deps
 ```
 Using Bun (recommended):
 ```bash
 bun install
 ```
 ### 3. Set Up Environment Variables - Only required for pushing to extension stores from the command line
 Copy the example environment file:
 ```bash
 cp .env.submit.example .env
 ```
 Edit the `.env` file with your SEQTA credentials and settings.
 ### 4. Start the Development Server
 Using npm:
 ```bash
 npm run dev
 ```
 Using Bun:
 ```bash
 bun run dev
 ```
 This will start a development server and build the extension in watch mode.
 ### 5. Load the Extension in Your Browser
 #### Chrome/Edge
 1. Open Chrome/Edge and navigate to `chrome://extensions` or `edge://extensions`
 2. Enable "Developer mode" using the toggle in the top right
 3. Click "Load unpacked" and select the `dist` folder in your BetterSEQTA+ directory
 4. The extension should now appear in your extensions list
 #### Firefox
 1. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`
 2. Click "Load Temporary Add-on..."
 3. Select the `manifest.json` file in the `dist` folder
 4. The extension should now appear in your add-ons list
 ### 6. Test Your Changes
 After making changes to the code, the development server will automatically rebuild the extension. However, you may need to reload the extension in your browser to see the changes:
 1. Go to the extensions page in your browser
 2. Find BetterSEQTA+ and click the reload icon
 3. Refresh any SEQTA Learn pages you have open
 ## Troubleshooting Installation
 ### Common Issues
 #### "Cannot find module" errors
 If you see errors about missing modules, try:
 ```bash
 rm -rf node_modules
 npm install
 ```
 Or with Bun:
 ```bash
 rm -rf node_modules
 bun install
 ```
 #### Extension not appearing in SEQTA
 Make sure:
 - You're visiting a SEQTA Learn page
 - The extension is enabled
 - You've refreshed the page after installing the extension
 #### Development build not updating
 Try:
 1. Stopping the development server
 2. Clearing your browser cache
 3. Removing the extension from your browser
 4. Rebuilding the extension
 5. Loading it again
 ## Updating BetterSEQTA+
 ### For Users
 Browser extensions update automatically, but you can manually check for updates:
 - **Chrome/Edge**: Go to `chrome://extensions` or `edge://extensions`, enable Developer mode, and click "Update"
 - **Firefox**: Go to `about:addons`, click the gear icon, and select "Check for Updates"
 ### For Developers
 If you're working on the code, pull the latest changes and reinstall dependencies:
 ```bash
 git pull
 npm install
 npm run dev
 ```
 Or with Bun:
 ```bash
 git pull
 bun install
 bun run dev
 ```
 ## Next Steps
 Now that you have BetterSEQTA+ installed, you can:
 - [Getting Started with Plugins](./plugins/getting-started.md)
 - [Contribute to the project](../CONTRIBUTING.md) 
@@ -0,0 +1,257 @@
 # Creating Plugins for BetterSEQTA+
 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?
 In BetterSEQTA+, a plugin is like a mini-app that adds new features to SEQTA. Think of it as a piece of LEGO that you can snap onto SEQTA to make it do new things. For example, you could create a plugin that:
 - Changes how SEQTA looks
 - Adds new buttons or features
 - Shows extra information on your timetable
 - Collects notifications in a better way
 - Really, anything you can imagine!
 ## Your First Plugin
 Let's create a super simple plugin together. We'll make one that adds a friendly message to the SEQTA homepage. Here's what we'll need:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 const myFirstPlugin: Plugin = {
  // Every plugin needs these basic details
  id: 'my-first-plugin',
  name: 'My First Plugin',
  description: 'Adds a friendly message to SEQTA',
  version: '1.0.0',
  // This tells BetterSEQTA+ that users can turn our plugin on/off
  disableToggle: true,
  // This is where the magic happens! 
  run: async (api) => {
    // Wait for the homepage to load
    api.seqta.onMount('.home-page', (homePage) => {
      // Create our message
      const message = document.createElement('div');
      message.textContent = 'Hello from my first plugin! 🎉';
      message.style.padding = '20px';
      message.style.backgroundColor = '#e9f5ff';
      message.style.borderRadius = '8px';
      message.style.margin = '20px';
      // Add it to the page
      homePage.prepend(message);
    });
    // Return a cleanup function that removes our message when the plugin is disabled
    return () => {
      const message = document.querySelector('.home-page > div');
      message?.remove();
    };
  }
 };
 export default myFirstPlugin;
 ```
 Let's break down what's happening here:
 1. First, we import the `Plugin` type that tells TypeScript what a plugin should look like
 2. We create our plugin object with some basic information:
   - `id`: A unique name for your plugin (use lowercase and dashes)
   - `name`: A friendly name that users will see
   - `description`: Explain what your plugin does
   - `version`: Your plugin's version number
 3. We set `disableToggle: true` so users can turn our plugin on/off in settings
 4. The `run` function is where we put our plugin's code
 5. We use `api.seqta.onMount` to wait for the homepage to load
 6. We create and style a message element
 7. We return a cleanup function that removes our changes when the plugin is disabled
 ## The Plugin API
 When your plugin runs, it gets access to a powerful API that lets you do all sorts of things. Let's look at what you can do:
 ### SEQTA API (`api.seqta`)
 This helps you interact with SEQTA's pages:
 ```typescript
 // Wait for an element to appear on the page
 api.seqta.onMount('.some-class', (element) => {
  // Do something with the element
 });
 // Know when the user changes pages
 api.seqta.onPageChange((page) => {
  console.log('User went to:', page);
 });
 // Get the current page
 const currentPage = api.seqta.getCurrentPage();
 ```
 ### Settings API (`api.settings`)
 Want to let users customize your plugin? Use settings!
 ```typescript
 import { BasePlugin } from '@/plugins/core/settings';
 import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
 // Define your settings
 const settings = defineSettings({
  showMessage: booleanSetting({
    default: true,
    title: "Show Welcome Message",
    description: "Show a friendly message on the homepage",
  })
 });
 // Create a class for your plugin
 class MyPluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.showMessage)
  showMessage!: boolean;
 }
 // Create your plugin
 const settingsInstance = new MyPluginClass();
 const myPlugin: Plugin<typeof settings> = {
  // ... other plugin details ...
  settings: settingsInstance.settings,
  run: async (api) => {
    // Use the setting
    if (api.settings.showMessage) {
      // Show the message
    }
    // Listen for setting changes
    api.settings.onChange('showMessage', (newValue) => {
      if (newValue) {
        // Show the message
      } else {
        // Hide the message
      }
    });
  }
 };
 ```
 ### Storage API (`api.storage`)
 Need to save some data? The storage API has got you covered:
 ```typescript
 // Save some data
 await api.storage.set('lastVisit', new Date().toISOString());
 // Get it back later
 const lastVisit = await api.storage.get('lastVisit');
 // Listen for changes
 api.storage.onChange('lastVisit', (newValue) => {
  console.log('Last visit updated:', newValue);
 });
 ```
 ### Events API (`api.events`)
 Want your plugin to be able to interface with other plugins? Then use events!
 ```typescript
 // Listen for an event
 api.events.on('myCustomEvent', (data) => {
  console.log('Got event:', data);
 });
 // Send an event
 api.events.emit('myCustomEvent', { some: 'data' });
 ```
 ## Adding Styles
 Want to make your plugin look pretty? You can add CSS styles:
 ```typescript
 const myPlugin: Plugin = {
  // ... other plugin details ...
  // Add your CSS here
  styles: `
    .my-plugin-message {
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      color: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin: 20px;
      animation: slide-in 0.3s ease-out;
    }
    @keyframes slide-in {
      from { transform: translateY(-20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
  `,
  run: async (api) => {
    // Your plugin code here
  }
 };
 ```
 ## Best Practices
 Here are some tips to make your plugin awesome:
 1. **Always Clean Up**: When your plugin is disabled, clean up any changes you made:
   ```typescript
   run: async (api) => {
     // Add stuff to the page
     const element = document.createElement('div');
     document.body.appendChild(element);
     // Return a cleanup function
     return () => {
       element.remove();
     };
   }
   ```
 2. **Use TypeScript**: It helps catch errors before they happen and makes your code easier to understand.
 3. **Test Your Plugin**: Make sure it works in different situations:
   - When SEQTA is loading
   - When the user switches pages
   - When the plugin is enabled/disabled
   - When settings are changed
 4. **Keep It Fast**: Don't slow down SEQTA:
   - Use `onMount` instead of intervals or timeouts
   - Clean up event listeners when they're not needed
   - Don't do heavy calculations on the main thread
 5. **Make It User-Friendly**:
   - Add clear settings with good descriptions
   - Use `disableToggle: true` so users can turn it off if needed
   - Add helpful error messages if something goes wrong
 ## Examples
 Want to see more examples? Check out our built-in plugins:
 - [themes](../../src/plugins/built-in/themes/index.ts): Shows how to change SEQTA's appearance
 - [notificationCollector](../../src/plugins/built-in/notificationCollector/index.ts): Shows how to work with SEQTA's notifications
 - [timetable](../../src/plugins/built-in/timetable/index.ts): Shows how to modify SEQTA's timetable view
 - [assessmentsAverage](../../src/plugins/built-in/assessmentsAverage/index.ts): Shows how to add new features to existing pages
 ## Need Help?
 Got stuck? No worries! Here's where you can get help:
 - Join our [Discord server](https://discord.gg/YzmbnCDkat)
 - 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 checkout the api reference [here](./api-reference.md)
@@ -0,0 +1,314 @@
 # Plugin API Reference
 This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see [Creating Your First Plugin](./README.md).
 ## Plugin Structure
 Here's how a plugin is structured:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 import { BasePlugin } from '@/plugins/core/settings';
 import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
 // First, define your settings
 const settings = defineSettings({
  enabled: booleanSetting({
    default: true,
    title: "Enable Feature",
    description: "Turn this feature on or off",
  })
 });
 // Create a class to handle your settings
 class MyPluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.enabled)
  enabled!: boolean;
 }
 // Create an instance of your settings
 const settingsInstance = new MyPluginClass();
 // Create your plugin
 const myPlugin: Plugin<typeof settings> = {
  id: 'my-plugin',
  name: 'My Plugin',
  description: 'A cool plugin that does things',
  version: '1.0.0',
  settings: settingsInstance.settings,
  disableToggle: true,
  run: async (api) => {
    console.log('Plugin is running!');
    // Do stuff when settings change
    api.settings.onChange('enabled', (enabled) => {
      if (enabled) {
        console.log('Feature enabled!');
      }
    });
    // Return a cleanup function
    return () => {
      console.log('Plugin cleanup');
    };
  }
 };
 export default myPlugin;
 ```
 ## SEQTA API
 The SEQTA API helps you interact with SEQTA's pages:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 const seqtaPlugin: Plugin<typeof settings> = {
  id: 'seqta-example',
  name: 'SEQTA Example',
  description: 'Shows how to use the SEQTA API',
  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // Wait for elements to appear
    const { unregister: timetableUnregister } = api.seqta.onMount('.timetable', (timetable) => {
      const button = document.createElement('button');
      button.textContent = 'Export';
      timetable.appendChild(button);
    });
    // Track page changes
    const { unregister: pageUnregister } = api.seqta.onPageChange((page) => {
      console.log('User went to:', page);
    });
    // Clean up when disabled
    return () => {
      timetableUnregister();
      pageUnregister();
    };
  }
 };
 export default seqtaPlugin;
 ```
 ## Settings API
 Here's how to add settings to your plugin:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 import { BasePlugin } from '@/plugins/core/settings';
 import { booleanSetting, stringSetting, numberSetting, selectSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
 // Define your settings
 const settings = defineSettings({
  darkMode: booleanSetting({
    default: false,
    title: "Dark Mode",
    description: "Enable dark mode"
  }),
  userName: stringSetting({
    default: "",
    title: "User Name",
    description: "Your display name",
    placeholder: "Enter your name..."
  }),
  theme: selectSetting({
    default: "light",
    title: "Theme",
    description: "Choose your theme",
    options: [
      { value: "light", label: "Light" },
      { value: "dark", label: "Dark" }
    ]
  })
 });
 // Create your settings class
 class ThemePluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.darkMode)
  darkMode!: boolean;
  @Setting(settings.userName)
  userName!: string;
  @Setting(settings.theme)
  theme!: string;
 }
 // Create the plugin
 const themePlugin: Plugin<typeof settings> = {
  id: 'theme-example',
  name: 'Theme Example',
  description: 'Shows how to use settings',
  version: '1.0.0',
  settings: new ThemePluginClass().settings,
  disableToggle: true,
  run: async (api) => {
    // Apply initial settings
    if (api.settings.darkMode) {
      document.body.classList.add('dark');
    }
    // Listen for changes
    const { unregister } = api.settings.onChange('darkMode', (enabled) => {
      document.body.classList.toggle('dark', enabled);
    });
    return () => {
      unregister();
      document.body.classList.remove('dark');
    };
  }
 };
 export default themePlugin;
 ```
 ## Storage API
 Here's how to use storage in your plugin:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 const storagePlugin: Plugin<typeof settings> = {
  id: 'storage-example',
  name: 'Storage Example',
  description: 'Shows how to use storage',
  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // Wait for storage to be ready
    await api.storage.loaded;
    // Save some data
    await api.storage.set('lastVisit', new Date().toISOString());
    // Get saved data
    const lastVisit = await api.storage.get('lastVisit');
    console.log('Last visit:', lastVisit);
    // Listen for changes
    const { unregister } = api.storage.onChange('lastVisit', (newValue) => {
      console.log('Last visit updated:', newValue);
    });
    return () => {
      unregister();
    };
  }
 };
 export default storagePlugin;
 ```
 ## Events API
 Here's how to use events in your plugin:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 const eventsPlugin: Plugin<typeof settings> = {
  id: 'events-example',
  name: 'Events Example',
  description: 'Shows how to use events',
  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // Listen for theme changes
    const { unregister: themeListener } = api.events.on('theme.changed', (theme) => {
      console.log('Theme changed to:', theme);
    });
    // Listen for notifications
    const { unregister: notifyListener } = api.events.on('notification.new', (notification) => {
      console.log('New notification:', notification);
    });
    // Clean up listeners
    return () => {
      themeListener();
      notifyListener();
    };
  }
 };
 export default eventsPlugin;
 ```
 ## Performance Tips
 Here's how to write efficient plugins:
 ```typescript
 import type { Plugin } from '@/plugins/core/types';
 const efficientPlugin: Plugin<typeof settings> = {
  id: 'efficient-example',
  name: 'Efficient Example',
  description: 'Shows performance best practices',
  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // ✅ Good: Use onMount
    const { unregister } = api.seqta.onMount('.timetable', (el) => {
      el.classList.add('enhanced');
    });
    // ❌ Bad: Don't use intervals
    // const interval = setInterval(() => {
    //   const el = document.querySelector('.timetable');
    //   if (el) el.classList.add('enhanced');
    // }, 100);
    // ✅ Good: Cache DOM elements
    const header = document.querySelector('.header');
    if (header) {
      // Reuse header instead of querying again
    }
    // ✅ Good: Batch DOM updates
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 10; i++) {
      const div = document.createElement('div');
      fragment.appendChild(div);
    }
    document.body.appendChild(fragment);
    return () => {
      unregister();
      // clearInterval(interval); // If you used the bad approach
    };
  }
 };
 export default efficientPlugin;
 ```
 Each plugin should be in its own file and exported as the default export. The plugin should:
 1. Import necessary types and helpers
 2. Define settings if needed
 3. Create a settings class if using settings
 4. Create the plugin object with proper type annotation
 5. Export the plugin as default
 Remember to always:
 - Use proper TypeScript types
 - Clean up when your plugin is disabled
 - Handle errors gracefully
 - Follow the plugin structure shown above 
@@ -1,162 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>BetterSEQTA Settings</title>
    <style>
        :root {
            --background-primary: #ffffff;
            --background-secondary: #e5e7eb;
            --text-primary: black;
            --theme-primary: #4F46E5;
            --theme-hover: #4338CA;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --background-primary: #232323;
                --background-secondary: #1a1a1a;
                --text-primary: white;
                --theme-primary: #6366F1;
                --theme-hover: #818CF8;
            }
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        body {
            background: var(--background-primary);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        h1 {
            font-size: 1.75rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .subtitle {
            color: #666;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        label {
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 500;
            color: var(--text-primary);
        }
        input[type="url"] {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--background-secondary);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--background-secondary);
            color: var(--text-primary);
            transition: all 0.2s;
        }
        input[type="url"]:focus {
            outline: none;
            border-color: var(--theme-primary);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }
        button {
            margin-top: 1rem;
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 8px;
            background: var(--theme-primary);
            color: white;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        button:hover {
            background: var(--theme-hover);
        }
        #error-message {
            color: #EF4444;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>BetterSEQTA Settings</h1>
        <div class="subtitle">It's time to get started! To begin type in your school's SEQTA URL below.</div>
        <label for="seqtaUrl">SEQTA Website URL</label>
        <input type="url" id="seqtaUrl" placeholder="Enter your school's SEQTA URL (e.g https://seqta.school.edu.au)" required>
        <div id="error-message"></div>
        <button onclick="saveSettings()">Save Settings</button>
    </div>
    <script>
        const electron = window.require('electron');
        const { ipcRenderer } = electron;
        const Store = window.require('electron-store');
        const store = new Store();
        // Load saved URL on page load
        window.addEventListener('DOMContentLoaded', () => {
            const savedUrl = store.get('seqtaUrl') || '';
            document.getElementById('seqtaUrl').value = savedUrl;
        });
        // Handle error messages from main process
        ipcRenderer.on('seqta-url-error', (event, message) => {
            const errorElement = document.getElementById('error-message');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        });
        // Save settings
        function saveSettings() {
            const url = document.getElementById('seqtaUrl').value;
            const errorElement = document.getElementById('error-message');
            errorElement.style.display = 'none';
            if (url) {
                ipcRenderer.send('set-seqta-url', url);
            } else {
                errorElement.textContent = 'Please enter a URL';
                errorElement.style.display = 'block';
            }
        }
        // Handle enter key
        document.getElementById('seqtaUrl').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                saveSettings();
            }
        });
    </script>
 </body>
 </html> 
@@ -1,333 +0,0 @@
 import { app, BrowserWindow, ipcMain, session, Menu } from 'electron';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import Store from 'electron-store';
 // Fix for __dirname in ES modules
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const store = new Store();
 let mainWindow = null;
 let settingsWindow = null;
 // CSS to inject
 const customCSS = `
 #alertBar {
    display: none !important;
 }
 /* Match SEQTA's styling */
 body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
 }
 `;
 // Create the application menu
 function createAppMenu() {
    const isMac = process.platform === 'darwin';
    const template = [
        ...(isMac ? [{
            label: app.name,
            submenu: [
                { role: 'about' },
                { type: 'separator' },
                { role: 'services' },
                { type: 'separator' },
                { role: 'hide' },
                { role: 'hideOthers' },
                { role: 'unhide' },
                { type: 'separator' },
                { role: 'quit' }
            ]
        }] : []),
        {
            label: 'Settings',
            submenu: [
                {
                    label: 'Configure SEQTA URL',
                    accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
                    click: () => {
                        createSettingsWindow();
                    }
                }
            ]
        },
        {
            label: 'View',
            submenu: [
                { role: 'reload' },
                { role: 'forceReload' },
                { role: 'toggleDevTools' },
                { type: 'separator' },
                { role: 'resetZoom' },
                { role: 'zoomIn' },
                { role: 'zoomOut' },
                { type: 'separator' },
                { role: 'togglefullscreen' }
            ]
        }
    ];
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
 }
 // Validate SEQTA URL
 function isValidSeqtaUrl(url) {
    try {
        const urlObj = new URL(url);
        // Only ensure it's a valid HTTPS URL
        return urlObj.protocol === 'https:';
    } catch {
        return false;
    }
 }
 // Get the correct path for the extension based on whether we're in development or production
 function getExtensionPath() {
    if (app.isPackaged) {
        // In production, the extension is in the resources directory
        return path.join(process.resourcesPath, 'chrome-extension');
    } else {
        // In development, the extension is in the dist directory
        return path.join(__dirname, '..', 'dist', 'chrome');
    }
 }
 // Load the Chrome extension
 async function loadExtension() {
    try {
        const extensionPath = getExtensionPath();
        console.log('Loading extension from:', extensionPath);
        await session.defaultSession.loadExtension(extensionPath, {
            allowFileAccess: true
        });
        console.log('Extension loaded successfully!');
    } catch (err) {
        console.error('Failed to load extension:', err);
    }
 }
 function createMainWindow() {
    console.log('🚀 Creating main window...');
    if (mainWindow) {
        if (!mainWindow.isDestroyed()) {
            console.log('✨ Existing window found, focusing it');
            mainWindow.focus();
            return mainWindow;
        }
        console.log('🔄 Old window was destroyed, creating new one');
    }
    console.log('📦 Initializing new BrowserWindow');
    mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            backgroundThrottling: false,
            enableWebSQL: false,
            webgl: false,
            offscreen: false
        },
        show: false,
        backgroundColor: '#ffffff'
    });
    const seqtaUrl = store.get('seqtaUrl');
    console.log('📍 Stored SEQTA URL:', seqtaUrl);
    // Register keyboard shortcut for settings
    mainWindow.webContents.on('before-input-event', (event, input) => {
        if ((input.meta || input.control) && input.key === ',') {
            createSettingsWindow();
        }
    });
    // Inject CSS when the page loads
    mainWindow.webContents.on('did-finish-load', () => {
        console.log('🎨 Page loaded, injecting CSS');
        mainWindow.webContents.insertCSS(customCSS).catch(err => {
            console.error('Failed to inject CSS:', err);
        });
    });
    // Only show window when it's ready
    mainWindow.once('ready-to-show', () => {
        console.log('🎉 Window ready to show!');
        mainWindow.show();
        mainWindow.focus();
    });
    if (seqtaUrl) {
        if (!isValidSeqtaUrl(seqtaUrl)) {
            console.error('❌ Invalid SEQTA URL stored:', seqtaUrl);
            createSettingsWindow();
            return;
        }
        console.log('🌐 Loading SEQTA URL:', seqtaUrl);
        mainWindow.loadURL(seqtaUrl)
            .then(() => {
                console.log('✅ Successfully loaded SEQTA URL');
                mainWindow.show();
                mainWindow.focus();
            })
            .catch(err => {
                console.error('❌ Failed to load SEQTA URL:', err);
                createSettingsWindow();
            });
    } else {
        console.log('⚙️ No SEQTA URL found, opening settings');
        createSettingsWindow();
    }
    return mainWindow;
 }
 function createSettingsWindow() {
    if (settingsWindow) {
        settingsWindow.focus();
        return;
    }
    settingsWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
        show: false,
        backgroundColor: '#ffffff'
    });
    const settingsPath = path.join(__dirname, 'index.html');
    settingsWindow.loadFile(settingsPath);
    settingsWindow.once('ready-to-show', () => {
        settingsWindow.show();
        settingsWindow.focus();
    });
    // Only enable DevTools in development
    if (process.env.NODE_ENV === 'development') {
        settingsWindow.webContents.openDevTools();
    }
    settingsWindow.on('closed', () => {
        settingsWindow = null;
    });
 }
 // Performance optimization: Disable hardware acceleration if running on low-end device
 if (process.platform !== 'darwin') { // Skip for macOS
    app.disableHardwareAcceleration();
 }
 // Performance optimization: Disable smooth scrolling
 app.commandLine.appendSwitch('disable-smooth-scrolling');
 // Wait for app to be ready before creating windows
 app.whenReady().then(async () => {
    createAppMenu();
    await loadExtension();
    createMainWindow();
 });
 // Performance optimization: Quit immediately instead of gracefully
 app.on('window-all-closed', () => {
    app.quit();
 });
 app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createMainWindow();
    }
 });
 // Format and validate SEQTA URL
 function formatAndValidateUrl(url) {
    // Remove any whitespace
    url = url.trim();
    // If no protocol specified, add https://
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
        url = 'https://' + url;
    }
    // If it's http://, upgrade to https://
    if (url.startsWith('http://')) {
        url = 'https://' + url.slice(7);
    }
    try {
        const urlObj = new URL(url);
        // Ensure it's https
        if (urlObj.protocol !== 'https:') {
            throw new Error('URL must use HTTPS');
        }
        return { isValid: true, url: url };
    } catch (error) {
        return { isValid: false, url: url, error: error.message };
    }
 }
 // Handle setting the SEQTA URL
 ipcMain.on('set-seqta-url', (event, url) => {
    console.log('🔧 Received new SEQTA URL:', url);
    const { isValid, url: formattedUrl, error } = formatAndValidateUrl(url);
    if (!isValid) {
        console.error('❌ Invalid URL format:', error);
        event.reply('seqta-url-error', 'Please enter a valid URL');
        return;
    }
    console.log('💾 Saving URL to store:', formattedUrl);
    store.set('seqtaUrl', formattedUrl);
    // Create main window if it doesn't exist
    if (!mainWindow || mainWindow.isDestroyed()) {
        console.log('🆕 Creating new main window');
        createMainWindow();
    } else {
        console.log('🔄 Loading new URL in existing window:', formattedUrl);
        mainWindow.loadURL(formattedUrl).then(() => {
            console.log('✅ URL loaded successfully');
            console.log('🎨 Injecting CSS and settings button');
            mainWindow.webContents.insertCSS(customCSS).catch(err => {
                console.error('Failed to inject CSS:', err);
            });
            mainWindow.webContents.executeJavaScript(`
                if (!document.getElementById('bsp-settings-button')) {
                    document.body.insertAdjacentHTML('beforeend', ${JSON.stringify(settingsButtonHTML)});
                    document.getElementById('bsp-settings-button').addEventListener('click', () => {
                        window.postMessage('open-settings', '*');
                    });
                }
            `).catch(err => {
                console.error('Failed to inject settings button:', err);
            });
            console.log('👀 Showing and focusing window');
            mainWindow.show();
            mainWindow.focus();
        }).catch(err => {
            console.error('❌ Failed to load SEQTA URL:', err);
            event.reply('seqta-url-error', 'Failed to load SEQTA. Please check your connection and URL.');
        });
    }
    // Close settings window if it exists
    if (settingsWindow && !settingsWindow.isDestroyed()) {
        console.log('🚪 Closing settings window');
        settingsWindow.close();
    }
 }); 
@@ -0,0 +1,25 @@
 // ref: https://stackoverflow.com/a/76920975
 import type { Plugin } from 'vite';
 export default function ClosePlugin(): Plugin {
  return {
    name: 'ClosePlugin', // required, will show up in warnings and errors
    // use this to catch errors when building
    buildEnd(error) {
      if(error) {
        console.error('Error bundling')
        console.error(error)
        process.exit(1)
      } else {
        console.log('Build ended')
      }
    },
    // use this to catch the end of a build without errors
    closeBundle() {
      console.log('Bundle closed')
      process.exit(0)
    },
  }
 }
@@ -0,0 +1,37 @@
 // vite-plugin-inline-worker-dev.ts
 import { Plugin } from 'vite'
 import fs from 'fs/promises'
 import { build, transform } from 'esbuild'
 export default function InlineWorkerDevPlugin(): Plugin {
  return {
    name: 'vite:inline-worker-dev',
    async load(id) {
      if (id.includes('?inlineWorker')) {
        const [cleanPath] = id.split('?')
        console.log('cleanPath', cleanPath)
        const code = await fs.readFile(cleanPath, 'utf-8')
        const result = await build({
          entryPoints: [cleanPath],
          bundle: true,
          write: false,
          platform: 'browser',
          format: 'iife',
          target: 'esnext',
        })
        const workerCode = result.outputFiles[0].text        
        const workerBlobCode = `
          const code = ${JSON.stringify(workerCode)};
          export default function InlineWorker() {
            const blob = new Blob([code], { type: 'application/javascript' });
            return new Worker(URL.createObjectURL(blob), { type: 'module' });
          }
        `
        return workerBlobCode
      }
      return null
    }
  }
 }
@@ -25,17 +25,31 @@ export function updateManifestPlugin(): PluginOption {
          console.log('** updated **');
        }
        // Implement retry mechanism for file watching
        const watchWithRetry = () => {
          if (!fs.existsSync(manifestPath)) {
            console.log('Manifest not found, retrying in 1 second...');
            setTimeout(watchWithRetry, 1000);
            return;
          }
          fs.watchFile(manifestPath, () => {
-          console.log('** watchFile ** ');
+            try {
              const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
-          if (manifestContents.web_accessible_resources.some((resource: any) => resource.use_dynamic_url)) {
+              if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {
                const updated = forceDisableUseDynamicUrl();
                if (updated) {
                  server.ws.send({ type: 'full-reload' });
                  console.log('** updated **');
                }
              }
            } catch (error) {
              console.log('Error reading manifest, will retry on next change:', error.message);
            }
          });
        };
        watchWithRetry();
      });
    },
@@ -5,26 +5,44 @@ const path = require('path');
 function getLatestVersion(files) {
  console.log('Files passed to getLatestVersion:', files);
  const versions = files.map(file => {
-    const match = file.match(/@(\d+\.\d+\.\d+)-/);
+    const match = file.match(/@([\d\.]+)-/);
    console.log('Matching file:', file, 'Version found:', match ? match[1] : 'None');
-    return match ? match[1] : null;
+
    if (!match) return null;
    const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
    const semverVersion = fullVersion.split('.').slice(0, 3).join('.'); // Trim to 3.4.5
    return { fullVersion, semverVersion };
  }).filter(Boolean);
-  console.log('Extracted versions:', versions);
+  console.log('Extracted versions:', versions.map(v => v.semverVersion));
-  const latestVersion = semver.maxSatisfying(versions, '*');
+
-  console.log('Latest version:', latestVersion);
+  // Find latest version using the trimmed semver format
  const latestSemver = semver.maxSatisfying(versions.map(v => v.semverVersion), '*');
  console.log('Latest SemVer-compatible version:', latestSemver);
  // Get the full version that matches the latest SemVer version
  const latestVersion = versions.find(v => v.semverVersion === latestSemver)?.fullVersion || null;
  console.log('Final selected latest version:', latestVersion);
  return latestVersion;
 }
 function getLatestFiles(browser) {
  const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
  console.log('Glob pattern:', pattern);
  const files = glob.sync(pattern);
  console.log('Files found for browser', browser, ':', files);
  const latestVersion = getLatestVersion(files);
-  const latestFile = files.find(file => file.includes(latestVersion));
+  // Find the exact file by matching the original full version
  const latestFile = files.find(file => file.includes(`@${latestVersion}-`));
  console.log('Latest file for browser', browser, ':', latestFile);
  return latestFile;
 }
@@ -0,0 +1,17 @@
 import fs from 'fs';
 export default function touchGlobalCSSPlugin() {
  return {
    name: 'touch-global-css',
    handleHotUpdate({ modules }) {
      // log all of the staticImportedUrls
      const importers = modules[0]._clientModule.importers
      importers.forEach((importer) => {
        if (importer.file.includes('.css')) {
          console.log("touching", importer.file)
          fs.utimesSync(importer.file, new Date(), new Date())
        }
      })
    }
  };
 }
@@ -1,9 +1,8 @@
 {
  "name": "betterseqtaplus",
-  "version": "3.4.2",
+  "version": "3.4.6.1",
  "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, while incorporating a plethora of new and improved features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
  "main": "electron/main.js",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "dev": "cross-env MODE=chrome vite dev",
@@ -12,14 +11,12 @@
    "build:chrome": "cross-env MODE=chrome vite build",
    "build:firefox": "cross-env MODE=firefox vite build",
    "build:safari": "cross-env MODE=safari vite build",
    "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",
    "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
    "publish": "bun lib/publish.js --b",
-    "zip": "bedframe zip",
+    "zip": "bedframe zip"
    "electron-dev": "electron .",
    "electron-build": "electron-builder",
    "electron-pack": "npm run build:chrome && electron-builder --dir",
    "electron-dist": "npm run build:chrome && electron-builder"
  },
  "targets": {
    "prod": {
@@ -36,115 +33,73 @@
  },
  "license": "MIT",
  "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.9",
    "@bedframe/cli": "^0.0.91",
    "@crxjs/vite-plugin": "2.0.0-beta.25",
    "@types/mime-types": "^2.1.4",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "cross-env": "^7.0.3",
-    "electron": "^33.2.1",
+    "dependency-cruiser": "^16.10.0",
-    "electron-builder": "^25.1.8",
+    "eslint": "9.22.0",
-    "eslint": "^8.57.0",
+    "glob": "^11.0.1",
    "glob": "^11.0.0",
    "mime-types": "^2.1.35",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
    "process": "^0.11.10",
-    "sass": "^1.78.0",
+    "publish-browser-extension": "^3.0.0",
-    "sass-loader": "^13.3.3",
+    "sass": "^1.85.1",
-    "semver": "^7.6.3",
+    "sass-loader": "^16.0.5",
    "semver": "^7.7.1",
    "tailwindcss": "3",
    "url": "^0.11.4"
  },
  "dependencies": {
-    "@bedframe/cli": "^0.0.85",
+    "@codemirror/autocomplete": "^6.18.6",
-    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/commands": "^6.8.0",
-    "@codemirror/lang-less": "^6.0.2",
+    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/language": "^6.10.8",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@codemirror/search": "^6.5.10",
-    "@tailwindcss/forms": "^0.5.9",
+    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.36.4",
    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tailwindcss/forms": "^0.5.10",
    "@tsconfig/svelte": "^5.0.4",
-    "@types/chrome": "^0.0.270",
+    "@types/chrome": "^0.0.308",
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
-    "@types/dompurify": "^3.0.5",
+    "@types/lodash": "^4.17.16",
-    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.13.10",
    "@types/node": "^20.16.5",
    "@types/react": "17",
    "@types/react-dom": "17",
    "@types/sortablejs": "^1.15.8",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@types/webextension-polyfill": "^0.10.7",
+    "@types/webextension-polyfill": "^0.12.3",
-    "@uiw/codemirror-extensions-color": "^4.23.3",
+    "@uiw/codemirror-extensions-color": "^4.23.10",
-    "@uiw/codemirror-theme-github": "^4.23.3",
+    "@uiw/codemirror-theme-github": "^4.23.10",
-    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.21",
-    "autoprefixer": "^10.4.20",
+    "client-vector-search": "../client-vector-search",
    "caniuse-lite": "^1.0.30001684",
    "classnames": "^2.5.1",
    "codemirror": "^6.0.1",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.4",
-    "electron-store": "^10.0.0",
+    "embla-carousel-autoplay": "^8.5.2",
-    "embla-carousel-autoplay": "^8.3.1",
+    "embla-carousel-svelte": "^8.5.2",
-    "embla-carousel-svelte": "^8.3.1",
+    "events": "^3.3.0",
-    "fuse.js": "^7.0.0",
+    "flexsearch": "^0.8.147",
-    "idb": "^8.0.0",
+    "fuse.js": "^7.1.0",
-    "kolorist": "^1.8.0",
+    "idb": "^8.0.2",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "mathjs": "^14.4.0",
    "million": "^3.1.11",
-    "motion": "^11.12.0",
+    "motion": "^12.4.12",
-    "postcss": "^8.4.45",
+    "postcss": "^8.5.3",
    "publish-browser-extension": "^2.2.1",
    "react": "17",
-    "react-best-gradient-color-picker": "^3.0.10",
+    "react-best-gradient-color-picker": "3.0.11",
    "react-dom": "17",
-    "sortablejs": "^1.15.3",
+    "rss-parser": "^3.13.0",
-    "svelte": "^5.1.9",
+    "sortablejs": "^1.15.6",
-    "tailwindcss": "^3.4.11",
+    "svelte": "^5.22.6",
-    "typescript": "^5.6.2",
+    "typescript": "^5.8.2",
-    "uuid": "^9.0.1",
+    "uuid": "^11.1.0",
-    "vite": "^5.4.4",
+    "vite": "^6.2.1",
-    "webextension-polyfill": "^0.10.0"
+    "webextension-polyfill": "^0.12.0"
  },
  "build": {
    "appId": "com.betterseqta.app",
    "productName": "BetterSEQTA",
    "directories": {
      "output": "electron-dist",
      "buildResources": "build"
    },
    "files": [
      "dist/**/*",
      "electron/**/*",
      "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
      "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
      "!**/node_modules/*.d.ts",
      "!**/node_modules/.bin",
      "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
      "!.editorconfig",
      "!**/._*",
      "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
      "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
      "!**/{appveyor.yml,.travis.yml,circle.yml}",
      "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
    ],
    "extraResources": [
      {
        "from": "dist/chrome",
        "to": "chrome-extension",
        "filter": ["**/*"]
      }
    ],
    "mac": {
      "category": "public.app-category.education",
      "target": ["dmg", "zip"],
      "icon": "build/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }
 }
@@ -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
@@ -1,61 +1,6 @@
 import browser from 'webextension-polyfill'
 import type { SettingsState } from "@/types/storage";
-
+import { fetchNews } from './background/news';
 export const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    request.onupgradeneeded = (event: any) => {
      const db = event.target.result;
      db.createObjectStore('backgrounds', { keyPath: 'id' });
    };
    request.onsuccess = () => {
      resolve(request.result);
    };
    request.onerror = (event: any) => {
      reject('Error opening database: ' + event.target.errorCode);
    };
  });
 };
 export const writeData = async (type: any, data: any) => {
  const db: any = await openDB();
  const tx = db.transaction('backgrounds', 'readwrite');
  const store = tx.objectStore('backgrounds');
  const request = await store.put({ id: 'customBackground', type, data });
  return request.result;
 };
 export const readData = () => {
  return new Promise((resolve, reject) => {
    openDB()
      .then((db: any) => {
        const tx = db.transaction('backgrounds', 'readonly');
        const store = tx.objectStore('backgrounds');
        // Retrieve the custom background
        const getRequest = store.get('customBackground');
        // Attach success and error event handlers
        getRequest.onsuccess = function(event: any) {
          resolve(event.target.result);
        };
        getRequest.onerror = function(event: any) {
          console.error('An error occurred:', event);
          reject(event);
        };
      })
      .catch(error => {
        console.error('An error occurred:', error);
        reject(error);
      });
  });
 };
 function reloadSeqtaPages() {
  const result = browser.tabs.query({})
@@ -69,8 +14,9 @@ function reloadSeqtaPages() {
  result.then(open, console.error)
 }
-// Main message listener
+// @ts-ignore
-browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
+browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
  switch (request.type) {
    case 'reloadTabs':
      reloadSeqtaPages();
@@ -103,36 +49,15 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
      break;
    case 'sendNews':
-    const date = new Date();
+      fetchNews(request.source ?? 'australia', sendResponse);
    const from =
      date.getFullYear() +
      '-' +
      (date.getMonth() + 1) +
      '-' +
      (date.getDate() - 5);
    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
    GetNews(sendResponse, url);
      return true;
    default:
      console.log('Unknown request type');
  }
 });
-function GetNews(sendResponse: any, url: string) {
+  return false;
  fetch(url)
    .then((result) => result.json())
    .then((response) => {
      if (response.code == 'rateLimited') {
        GetNews(sendResponse, url += '%00');
      } else {
        sendResponse({ news: response });
      }
 });
 }
 const DefaultValues: SettingsState = {
  onoff: true,
@@ -140,7 +65,6 @@ const DefaultValues: SettingsState = {
  bksliderinput: "50",
  transparencyEffects: false,
  lessonalert: true,
  notificationcollector: true,
  defaultmenuorder: [],
  menuitems: {
    assessments: { toggle: true },
@@ -220,6 +144,8 @@ const DefaultValues: SettingsState = {
    },
  ],
  customshortcuts: [],
  lettergrade: false,
  newsSource: 'australia',
 };
 function SetStorageValue(object: any) {
@@ -228,54 +154,63 @@ function SetStorageValue(object: any) {
  }
 }
-async function UpdateCurrentValues() {
+function convertBksliderToSpeed(bksliderinput: number): number {
-  try {
+  const minBase = 50;
-    const items = await browser.storage.local.get();
+  const maxBase = 150;
    const CurrentValues = items;
-    const NewValue = Object.assign({}, DefaultValues, CurrentValues);
+  const scaledValue = 2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
  const baseSpeed = 3;
-    function CheckInnerElement(element: any) {
+  const speed = baseSpeed / scaledValue;
-      for (let i in element) {
+  return speed;
-        if (typeof element[i] === 'object') {
+}
-          // @ts-expect-error
+
-          if (!Array.isArray(DefaultValues[i])) {
+async function migrateLegacySettings() {
-            // @ts-expect-error
+  const storage = await browser.storage.local.get(null) as unknown as SettingsState;
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
+
  // 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({ 'plugin.animated-background.settings': animatedSettings });
  }
  // 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({ 'plugin.assessments-average.settings': assessmentsSettings });
  }
  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 {
-            // @ts-expect-error
+    await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: false } });
            const length = DefaultValues[i].length;
            // @ts-expect-error
            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
            let NewArray = [];
            for (let j = 0; j < length; j++) {
              NewArray.push(NewValue[i][j]);
            }
            NewValue[i] = NewArray;
          }
        }
      }
  }
-    CheckInnerElement(DefaultValues);
+  const keysToRemove = [
-
+    'animatedbk',
-    if (items['customshortcuts']) {
+    'bksliderinput',
-      NewValue['customshortcuts'] = items['customshortcuts'];
+    'assessmentsAverage',
-    }
+    'lettergrade'
-
+  ];
-    SetStorageValue(NewValue);
+  await browser.storage.local.remove(keysToRemove);
    console.log('[BetterSEQTA+] Values updated successfully');
  } catch (error) {
    console.error('[BetterSEQTA+] Error updating values:', error);
  }
 }
 browser.runtime.onInstalled.addListener(function (event) {
  browser.storage.local.remove(['justupdated']);
  browser.storage.local.remove(['data']);
-  UpdateCurrentValues();
+  if ( event.reason == 'install' || event.reason == 'update' ) {
  if ( event.reason == 'install', event.reason == 'update' ) {
    browser.storage.local.set({ justupdated: true });
    migrateLegacySettings();
  }
 });
@@ -0,0 +1,113 @@
 import Parser from 'rss-parser';
 const fetchAustraliaNews = async (url: string, sendResponse: any) => {
  fetch(url)
    .then((result) => result.json())
    .then((response) => {
      if (response.code == 'rateLimited') {
        fetchAustraliaNews(url += '%00', sendResponse);
      } else {
        sendResponse({ news: response });
      }
    });
 };
 const rssFeedsByCountry: Record<string, string[]> = {
  usa: [
    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
    "https://www.huffpost.com/section/front-page/feed",
    "https://www.npr.org/rss/rss.php",
  ],
  taiwan: [
    "https://news.ltn.com.tw/rss/all.xml",
    "https://www.taipeitimes.com/xml/index.rss",
    "https://international.thenewslens.com/rss",
  ],
  hong_kong: [
    "https://rthk9.rthk.hk/rthk/news/rss/e_expressnews_elocal.xml",
    "https://www.scmp.com/rss/91/feed",
  ],
  panama: [
    "https://critica.com.pa/rss.xml",
    "https://www.panamaamerica.com.pa/rss.xml",
    "https://noticiassin.com/feed/",
    "https://elcapitalfinanciero.com/feed/"
  ],
  canada: [
    "https://www.cbc.ca/cmlink/rss-topstories",
    "https://calgaryherald.com/feed",
    "https://ottawacitizen.com/feed",
    "https://www.montrealgazette.com/feed"
  ],
  singapore: [
    "https://www.straitstimes.com/news/singapore/rss.xml",
    "https://www.channelnewsasia.com/rssfeeds/8395986",
  ],
  uk: [
    "http://feeds.bbci.co.uk/news/rss.xml",
    "https://www.theguardian.com/uk/rss",
  ],
  japan: [
    "https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
    "https://news.livedoor.com/topics/rss/int.xml"
  ],
  netherlands: [
    "https://www.dutchnews.nl/feed/",
    "https://www.nrc.nl/rss/"
  ],
 };
 export async function fetchNews(source: string, sendResponse: any) {
  if (source === "australia") {
    const date = new Date();
    const from =
      date.getFullYear() +
      '-' +
      (date.getMonth() + 1) +
      '-' +
      (date.getDate() - 5);
    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
    fetchAustraliaNews(url, sendResponse);
    return;
  }
  const parser = new Parser();
  let feeds: string[];
  console.log('fetchNews', source)
  if (rssFeedsByCountry[source.toLowerCase()]) {
    // If the source is a country, fetch from predefined feeds
    feeds = rssFeedsByCountry[source.toLowerCase()];
  } else if (source.startsWith("http")) {
    // If the source is a URL, use it directly
    feeds = [source];
  } else {
    throw new Error("Invalid source. Provide a country code or a valid RSS feed URL.");
  }
  const articlesPromises = feeds.map(async (feedUrl) => {
    try {
      const response = await fetch(feedUrl);
      const feedString = await response.text();
      const feed = await parser.parseString(feedString);
      return feed.items.map((item) => ({
        title: item.title || "",
        description: item.contentSnippet || "",
        url: item.link || "",
        urlToImage: null,
      }));
    } catch (error) {
      console.error(`Failed to fetch RSS feed: ${feedUrl}`, error);
      return [];
    }
  });
  const articlesArray = await Promise.all(articlesPromises);
  const articles = articlesArray.flat();
  sendResponse({ news: { articles } });
 }
@@ -11,7 +11,7 @@ html.transparencyEffects:not(.dark) {
 html.transparencyEffects {
  /* Background Fixes */
-  .notifications__item___2ErJN,
+  [class*="notifications__item___"],
  #shortcuts {
    backdrop-filter: unset !important;
  }
@@ -24,21 +24,21 @@ html.transparencyEffects {
  /* Blurs */
  .draggable,
  .notice,
-  .BasicPanel__BasicPanel___1GP6s,
+  [class*="BasicPanel__BasicPanel___"],
  .message.addMessage,
  .singleSelect,
  .uiFileHandlerPanel,
-  .Module__wrapper___2sbOo,
+  [class*="Module__wrapper___"],
-  .notifications__list___rp2L2,
+  [class*="notifications__list___"],
  .thread,
  .calendar,
  .navigator,
  #title,
-  .LabelList__selected___3Egk7,
+  [class*="LabelList__selected___"],
  .buttonChecklist,
  .pane,
  .legacy-root button, .legacy-root a,
-  .MessageList__MessageList___3DxoC {
+  [class*="MessageList__MessageList___"] {
    backdrop-filter: blur(80px);
  }
@@ -47,7 +47,7 @@ html.transparencyEffects {
  }
  .whatsnewContainer,
-  .Message__Message___3oJaU {
+  [class*="Message__Message___"] {
    backdrop-filter: blur(50px);
  }
@@ -3,6 +3,12 @@ declare module '*.woff';
 declare module '*.scss';
 declare module '*.png';
 declare module '*.html';
 declare module '*.svelte';
 declare module '*?inlineWorker' {
  const value: () => Worker;
  export default value;
 }
 declare module "*.png?base64" {
  const value: string;
@@ -20,7 +20,7 @@
  let editor = $state<HTMLDivElement | null>(null)
  let view: EditorView | null = null;
  let editorTheme = new Compartment();
-  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
+  let { value, onChange, className } = $props<{value: string, onChange: (value: string) => void, className?: string}>()
  function createEditorState(initialContents: string) {
      let extensions = [
@@ -91,4 +91,4 @@
  })
 </script>
-<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>
+<div class={`rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900 ${className}`} bind:this={editor}></div>
@@ -8,6 +8,13 @@ div:has(> #rbgcp-wrapper) {
      color: white !important;
    }
    #rbgcp-inputs-wrap #rbgcp-hex-input,
    #rbgcp-inputs-wrap #rbgcp-input {
      color: white !important;
      background-color: #37373b !important;
      border: none !important;
    }
    div:has(> #rbgcp-solid-btn),
    div:has(> #rbgcp-advanced-btn),
    #rbgcp-color-model-btn > div,
@@ -93,7 +93,7 @@ export default function Picker({
    <ColorPicker
      disableDarkMode={true}
      presets={presets}
-      hideInputs={true}
+      hideInputs={customOnChange ? false : true}
      value={customThemeColor ?? ""}
      onChange={(color: string) => {
        if (customOnChange) {
@@ -5,6 +5,7 @@
 </script>
 <button
  aria-label="Color Picker Swatch"
  onclick={onClick}
  style="background: {$settingsState.selectedColor}"
  class="w-16 h-8 rounded-md"
@@ -1,13 +1,20 @@
 <script lang="ts">
-  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let { state, onChange, min = 0, max = 100, step = 1 } = $props<{ 
-  let percentage = $derived((state / 100) * 100);
+    state: number, 
    onChange: (value: number) => void,
    min?: number,
    max?: number,
    step?: number
  }>();
  let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
-<div class="relative w-full max-w-lg mx-auto">
+<div class="relative mx-auto w-full max-w-lg">
  <input
    type="range"
-    min="0"
+    min={min}
-    max="100"
+    max={max}
    step={step}
    bind:value={state}
    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
    onchange={(e) => onChange(Number(e.currentTarget.value))}
@@ -5,7 +5,6 @@
  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
  let activeTab = $state(0);
  let hoveredTab = $state<number | null>(null);
  let containerRef: HTMLElement | null = null;
  let tabWidth = $state(0);
@@ -24,10 +23,6 @@
    return 0;
  };
  $effect(() => {
    calcXPos(hoveredTab);
  });
  onMount(() => {
    updateTabWidth();
@@ -45,26 +40,24 @@
 </script>
 <div class="flex flex-col h-full">
-  <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
+  <div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container">
-    <div class="relative flex">
+    <div bind:this={containerRef} class="flex relative">
      <MotionDiv
        class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
-        animate={{ x: calcXPos(hoveredTab) }}
+        animate={{ x: calcXPos(activeTab) }}
        transition={springTransition}
      />
      {#each tabs as { title }, index}
        <button
          class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
          onclick={() => activeTab = index}
          onmouseenter={() => hoveredTab = index}
          onmouseleave={() => hoveredTab = null}
        >
          {title}
        </button>
      {/each}
    </div>
  </div>
-  <div class="h-full px-4 overflow-hidden">
+  <div class="overflow-hidden px-4 h-full">
    <MotionDiv
      class="h-full"
      animate={{ x: `${-activeTab * 100}%` }}
@@ -1,10 +1,12 @@
 <script lang="ts">
  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
  import { setTheme } from '@/seqta/ui/themes/setTheme';
  import Spinner from '../Spinner.svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import Fuse from 'fuse.js';
+  import { Index } from 'flexsearch';
  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  const themeManager = ThemeManager.getInstance();
  type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
  let { searchTerm } = $props<{ searchTerm: string }>();
@@ -18,19 +20,12 @@
  let savedBackgrounds = $state<string[]>([]);
  let installingBackgrounds = $state<Set<string>>(new Set());
  let debugInfo = $state<string>('');
  let searchIndex = $state<Index | null>(null);
  // New state variables
  let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
  let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
  // Add Fuse.js options
  const fuseOptions = {
    keys: ['name', 'description'],
    threshold: 0.4,
    ignoreLocation: true
  };
  let fuse: Fuse<Background>;
  // Existing functions
  const loadStore = async () => {
    try {
@@ -41,7 +36,19 @@
      }
      const data = await response.json();
      backgrounds = data.backgrounds;
-      fuse = new Fuse(backgrounds, fuseOptions);
+      
      // Initialize FlexSearch index
      const index = new Index({
        tokenize: "forward",
        preset: "score"
      });
      // Add backgrounds to the index
      backgrounds.forEach((bg, i) => {
        index.add(i, bg.name + " " + bg.description);
      });
      searchIndex = index;
      debugInfo = `Loaded ${backgrounds.length} backgrounds`;
      await loadSavedBackgrounds();
    } catch (e) {
@@ -72,14 +79,10 @@
  let filteredBackgrounds = $derived((() => {
    let filtered = backgrounds;
-    // Use Fuse.js search if there's a search term
+    // Use FlexSearch if there's a search term
-    if (searchTerm.trim()) {
+    if (searchTerm.trim() && searchIndex) {
-      // @ts-ignore
+      const results = searchIndex.search(searchTerm) as number[];
-      if (fuse) {
+      filtered = results.map(i => backgrounds[i]);
        filtered = fuse.search(searchTerm).map((result: any) => result.item) ?? [];
      } else {
        filtered = backgrounds.filter(bg => bg.name.toLowerCase().includes(searchTerm.toLowerCase()));
      }
    }
    // Apply category filtering
@@ -170,13 +173,13 @@
  function selectNoBackground() {
    selectedBackground = null;
-    setTheme('');
+    themeManager.setTheme('');
  }
 </script>
 <div class="flex h-full">
  <!-- Sidebar -->
-  <div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
+  <div class="p-4 w-64 h-full border-r border-zinc-200 dark:border-zinc-700">
    <div class="mb-8">
      <h2 class="mb-4 text-lg font-semibold">Categories</h2>
      <nav class="space-y-2">
@@ -208,15 +211,15 @@
  </div>
  <!-- Main Content -->
-  <div class="flex-1 overflow-auto">
+  <div class="overflow-auto flex-1">
    <!-- Header -->
    <div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
-      <div class="flex items-center justify-between mb-4">
+      <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
-        <div class="flex items-center gap-4">
+        <div class="flex gap-4 items-center">
          <select 
            bind:value={sortBy} 
-            class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
+            class="p-2 rounded-lg border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
          >
            <option value="newest">Newest</option>
            <option value="name">Name</option>
@@ -230,7 +233,7 @@
          <button
            class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
              ${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' : 
-                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
+                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
            onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
          >
            {tab}
@@ -244,15 +247,15 @@
      {#if isLoading}
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {#each Array(9) as _}
-            <div class="relative overflow-hidden rounded-lg animate-pulse">
+            <div class="overflow-hidden relative rounded-lg animate-pulse">
              <!-- Image placeholder -->
              <div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
              <!-- Gradient overlay -->
-              <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
+              <div class="absolute right-0 bottom-0 left-0 h-16 to-transparent bg-linear-to-t from-zinc-300 dark:from-zinc-700">
                <!-- Title placeholder -->
-                <div class="absolute bottom-2 left-2 right-2">
+                <div class="absolute right-2 bottom-2 left-2">
                  <div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
-                  <div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                  <div class="mt-2 w-1/2 h-3 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
                </div>
              </div>
            </div>
@@ -271,7 +274,7 @@
            return true;
          }) as background (background.id)}
            <div
-              class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
+              class="overflow-hidden relative rounded-lg shadow-lg cursor-pointer group"
              onclick={() => toggleBackgroundInstallation(background)}
              onkeydown={(event) => {
                if (event.key === 'Enter' || event.key === ' ') {
@@ -286,7 +289,7 @@
              {:else}
                <video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
              {/if}
-              <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
+              <div class={`flex absolute inset-0 justify-center items-center opacity-0 transition-opacity duration-300 bg-black/50 group-hover:opacity-100 ${installingBackgrounds.has(background.id) ? 'opacity-100' : ''}`}>
                {#if installingBackgrounds.has(background.id)}
                  <Spinner />
                {:else if savedBackgrounds.includes(background.id)}
@@ -27,9 +27,9 @@
 </script>
 {#if coverThemes.length > 0}
-  <div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
+  <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
    <div 
-      class="w-full aspect-[8/3]" 
+      class="w-full aspect-8/3" 
      use:emblaCarouselSvelte={{ options, plugins }} 
      onemblaInit={onInit}
    >
@@ -47,20 +47,20 @@
              <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
              <p class='text-lg text-white'>{theme.description}</p>
            </div>
-            <div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></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>
    <!-- Navigation buttons -->
-    <div class='absolute z-10 flex gap-2 bottom-2 right-2'>
+    <div class='flex absolute right-2 bottom-2 z-10 gap-2'>
-      <button aria-label="Previous" onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+      <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'>
        <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 aria-label="Next" onclick={slideNext} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+      <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'>
        <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>
@@ -1,9 +1,5 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import type { Background } from './types';
  export let filteredBackgrounds: Background[];
  let dispatch = createEventDispatcher();
  let filters = $state({
@@ -13,9 +9,9 @@
    orientation: [] as string[]
  });
-  $: {
+  $effect(() => {
    dispatch('filter', filters);
-  }
+  });
  function toggleFilter(category: keyof typeof filters, value: string) {
    if (filters[category].includes(value)) {
@@ -42,21 +38,19 @@
    <h3 class="mb-2 font-medium">Type</h3>
    <div class="space-y-2">
      <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
+        <input type="checkbox" checked={filters.type.includes('image')} onchange={() => toggleFilter('type', 'image')}>
        <span class="ml-2">Image</span>
      </label>
      <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
+        <input type="checkbox" checked={filters.type.includes('video')} onchange={() => toggleFilter('type', 'video')}>
        <span class="ml-2">Video</span>
      </label>
    </div>
  </div>
  <!-- Add similar sections for color, resolution, and orientation -->
  <button 
    class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
-    on:click={clearFilters}
+    onclick={clearFilters}
  >
    Clear Filters
  </button>
@@ -20,8 +20,8 @@
 </script>
 <header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
-  <div class="flex items-center justify-between px-4 py-1">
+  <div class="flex justify-between items-center px-4 py-1">
-    <div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
+    <div class="flex gap-4 place-items-center cursor-pointer" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
      <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
      <img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
@@ -41,7 +41,7 @@
      </button>
    </div>
-    <div class="relative flex gap-2">
+    <div class="flex relative gap-2">
      <input
        type="text"
        placeholder="Search themes..."
@@ -49,7 +49,7 @@
        oninput={(e: any) => setSearchTerm(e.target.value)}
        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
      <svg
-        class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
+        class="absolute left-3 top-1/2 w-5 h-5 text-gray-400 transform -translate-y-1/2 dark:text-gray-200"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
@@ -1,4 +1,6 @@
 <script lang="ts">
  import type { Theme } from '@/interface/types/Theme'
  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
  import { fade } from 'svelte/transition';
@@ -6,12 +8,12 @@
 <div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
  <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>
-    <div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
+    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
      {theme.name}
    </div>
-    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
+    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
    <div class='w-full'>
-      <img src={theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
    </div>
  </div>
 </div>
@@ -54,7 +54,7 @@
 </script>
 <div 
-  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  class="flex fixed inset-0 z-50 justify-center items-end bg-black/70" 
  onclick={(e) => {
    if (e.target === e.currentTarget) hideModal();
  }} 
@@ -79,12 +79,12 @@
      <h2 class="mb-4 text-2xl font-bold">
        {theme.name}
      </h2>
-      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
      <p class="mb-4 text-gray-700 dark:text-gray-300">
        {theme.description}
      </p>
      {#if currentThemes.includes(theme.id)}
-        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
          {#if installing}
            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -93,7 +93,7 @@
          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
        </button>
      {:else}
-        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
          {#if installing}
            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -112,11 +112,11 @@
        {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
          <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
            <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative 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] h-auto rounded-xl overflow-clip border">
-              <div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
+              <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
                {relatedTheme.name}
              </div>
-              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent"></div>
+              <div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
-              <img src={relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
+              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
            </div>
          </button>
        {/each}
@@ -15,7 +15,7 @@
  onkeydown={onClick}
  tabindex="-1"
  role="button"
-  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
+  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring-3 dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
 >
  {#if isEditMode}
    <div
@@ -1,16 +1,13 @@
 <script lang="ts">
  import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
  import { onDestroy, onMount } from 'svelte'
-  import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import shareTheme from '@/seqta/ui/themes/shareTheme'
  import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
  import { setTheme } from '@/seqta/ui/themes/setTheme'
  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
  import { OpenStorePage } from '@/seqta/ui/renderStore'
  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
-  import { closeExtensionPopup } from '@/SEQTA'
+  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  const themeManager = ThemeManager.getInstance();
  let themes = $state<ThemeList | null>(null);
  let { isEditMode } = $props<{ isEditMode: boolean }>();
@@ -20,10 +17,10 @@
  const handleThemeClick = async (theme: CustomTheme) => {
    if (isEditMode) return;
    if (theme.id === themes?.selectedTheme) {
-      await disableTheme();
+      await themeManager.disableTheme();
      themes.selectedTheme = '';
    } else {
-      await setTheme(theme.id);
+      await themeManager.setTheme(theme.id);
      if (!themes) return;
      themes.selectedTheme = theme.id;
    }
@@ -31,13 +28,13 @@
  const handleThemeDelete = async (themeId: string) => {
    try {
-      await deleteTheme(themeId);
+      await themeManager.deleteTheme(themeId);
      if (!themes) return;
      themes.themes = themes.themes.filter(theme => theme.id !== themeId);
      if (themeId === themes.selectedTheme) {
        themes.selectedTheme = '';
-        await disableTheme();
+        await themeManager.disableTheme();
      }
    } catch (error) {
      console.error('Error deleting theme:', error);
@@ -46,7 +43,7 @@
  const handleShareTheme = async (theme: CustomTheme) => {
    try {
-      await shareTheme(theme.id);
+      await themeManager.shareTheme(theme.id);
    } catch (error) {
      console.error('Error sharing theme:', error);
    }
@@ -72,9 +69,10 @@
      try {
        const result = JSON.parse(event.target?.result as string);
        tempTheme = result;
-        await InstallTheme(result);
+        await themeManager.installTheme(result);
        await fetchThemes();
      } catch (error) {
        console.error('Error parsing file:', error);
        alert('Error parsing file. Please upload a valid JSON theme file.');
      }
      tempTheme = null;
@@ -83,7 +81,10 @@
  }
  const fetchThemes = async () => {
-    themes = await getAvailableThemes();
+    themes = {
      themes: await themeManager.getAvailableThemes(),
      selectedTheme: themeManager.getSelectedThemeId() || '',
    }
  }
  onMount(async () => {
@@ -98,7 +99,7 @@
 </script>
 <div
-  class="w-full pt-5 mb-1"
+  class="pt-5 mb-1 w-full"
  role="list"
  tabindex="-1"
  ondragover={handleDragOver}
@@ -106,9 +107,9 @@
  ondrop={handleDrop}
 >
  <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
-    <div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+    <div class="sticky top-5 w-full h-64 bg-white rounded-xl shadow-xl dark:bg-zinc-900 dark:text-white outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
-      <div class="flex items-center justify-center h-full">
+      <div class="flex justify-center items-center h-full">
-        <div class="flex flex-col items-center justify-center">
+        <div class="flex flex-col justify-center items-center">
          <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <g fill="currentColor">
              <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
@@ -130,7 +131,7 @@
        >
          {#if isEditMode}
            <div
-              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
+              class="flex absolute top-2 right-2 z-20 place-items-center p-2 w-6 h-6 text-white bg-red-600 rounded-full opacity-100"
              onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
              role="button"
@@ -152,7 +153,7 @@
            </div>
            <div
-              class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
+              class="flex absolute right-12 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 text-white/80 bg-black/50 group-hover:opacity-100 group-hover:top-1/2"
              onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
              role="button"
@@ -167,7 +168,7 @@
              <img
                src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
                alt={theme.name}
-                class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
+                class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
              />
            {/if}
            {#if !theme.hideThemeName}
@@ -179,7 +180,7 @@
    {/if}
    {#if tempTheme}
-      <div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
+      <div class="flex justify-center place-items-center w-full bg-gray-200 rounded-xl animate-pulse dark:bg-zinc-700/50 aspect-theme">
        <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -193,7 +194,7 @@
    <button
      onclick={() => OpenStorePage()}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
    >
      <span class="text-xl font-IconFamily">&#xecc5;</span>
      <span class="ml-2">Theme Store</span>
@@ -201,7 +202,7 @@
    <button
      onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
    >
      <span class="text-xl font-IconFamily">&#xec60;</span>
      <span class="ml-2">Create your own</span>
@@ -4,14 +4,8 @@
@tailwind components;
@tailwind utilities;
-:root {
+button {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  @apply cursor-pointer;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
 }
 ::-webkit-scrollbar {
@@ -48,5 +42,9 @@ input {
 .cm-editor {
  width: 100%;
  min-height: 100px;
-  max-height: 400px;
+  height: inherit;
 }
 .editorHeight {
  height: calc(100vh - 58px);
 }
@@ -5,8 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BetterSEQTA+ Settings</title>
  </head>
-  <body>
+  <body class="h-[600px]">
-    <div id="app"></div>
+    <div id="app" style="height: 100%;"></div>
    <script type="module" src="./index.ts"></script>
  </body>
 </html>
@@ -1,25 +1,8 @@
 import "./index.css"
 import { mount } from "svelte"
 import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
 import IconFamily from '@/resources/fonts/IconFamily.woff'
 import browser from "webextension-polyfill"
-
+import renderSvelte from "./main"
 export default function renderSvelte(
  Component: ComponentType | any,
  mountPoint: ShadowRoot | HTMLElement,
  props: Record<string, any> = {},
 ) {
  const app = mount(Component, {
    target: mountPoint,
    props: {
      standalone: true,
      ...props,
    },
  })
  return app
 }
 function InjectCustomIcons() {
  console.info('[BetterSEQTA+] Injecting Icons')
@@ -43,4 +26,4 @@ if (!mountPoint) {
 }
 InjectCustomIcons()
-renderSvelte(Settings, mountPoint)
+renderSvelte(Settings, mountPoint, { standalone: true })
@@ -1,9 +1,9 @@
 import styles from "./index.css?inline"
 import { mount } from "svelte"
-import type { ComponentType } from "svelte"
+import type { SvelteComponent } from "svelte"
 import style from './index.css?inline'
 export default function renderSvelte(
-  Component: ComponentType | any,
+  Component: SvelteComponent | any,
  mountPoint: ShadowRoot | HTMLElement,
  props: Record<string, any> = {},
 ) {
@@ -15,10 +15,9 @@ export default function renderSvelte(
    },
  })
-  const style = document.createElement("style")
+  const styleElement = document.createElement('style')
-  style.setAttribute("type", "text/css")
+  styleElement.textContent = style
-  style.innerHTML = styles
+  mountPoint.appendChild(styleElement)
  mountPoint.appendChild(style)
  return app
 }
@@ -9,7 +9,10 @@
  import { onMount } from 'svelte'
  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
  import ColourPicker from '../components/ColourPicker.svelte'
  import { settingsPopup } from '../hooks/SettingsPopup'
@@ -56,13 +59,14 @@
    if (!standalone) return;
    initializeSettingsState();
    console.log('settingsState', $settingsState);
    StandaloneStore.setStandalone(true);
  });
 </script>
 <div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
+  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
-    <div class="grid border-b border-b-zinc-200/40 place-items-center">
+    <div class="grid place-items-center border-b border-b-zinc-200/40">
      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
      <!-- svelte-ignore a11y_click_events_have_key_events -->
      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
@@ -71,8 +75,8 @@
      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
      {#if !standalone}
-        <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
+        <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>
-        <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+        <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>
      {/if}
    </div>
@@ -11,11 +11,72 @@
  import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
  import { getAllPluginSettings } from "@/plugins"
  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting } from "@/plugins/core/types"
  // Union type representing all possible settings
  type SettingType = 
    (Omit<BooleanSetting, 'type'> & { type: 'boolean', id: string }) |
    (Omit<StringSetting, 'type'> & { type: 'string', id: string }) |
    (Omit<NumberSetting, 'type'> & { type: 'number', id: string }) |
    (Omit<SelectSetting<string>, 'type'> & { 
      type: 'select', 
      id: string, 
      options: string[]
    });
  interface Plugin {
    pluginId: string;
    name: string;
    description: string;
    settings: Record<string, SettingType>;
  }
  const pluginSettings = getAllPluginSettings() as Plugin[];
  const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
  async function loadPluginSettings() {
    for (const plugin of pluginSettings) {
      if (Object.keys(plugin.settings).length === 0) continue;
      const storageKey = `plugin.${plugin.pluginId}.settings`;
      const stored = await browser.storage.local.get(storageKey);
      pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
      for (const [key, setting] of Object.entries(plugin.settings)) {
        if (pluginSettingsValues[plugin.pluginId][key] === undefined) {
          pluginSettingsValues[plugin.pluginId][key] = setting.default;
        }
      }
    }
  }
  async function updatePluginSetting(pluginId: string, key: string, value: any) {
    const storageKey = `plugin.${pluginId}.settings`;
    if (!pluginSettingsValues[pluginId]) {
      pluginSettingsValues[pluginId] = {};
    }
    pluginSettingsValues[pluginId][key] = value;
    const stored = await browser.storage.local.get(storageKey);
    const currentSettings = (stored[storageKey] || {}) as Record<string, any>;
    currentSettings[key] = value;
    await browser.storage.local.set({ [storageKey]: currentSettings });
  }
  $effect(() => {
    loadPluginSettings();
  })
  const { showColourPicker } = $props<{ showColourPicker: () => void }>();
 </script>
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
-<div class="flex items-center justify-between px-4 py-3">
+<div class="flex justify-between items-center px-4 py-3">
  <div class="pr-4">
    <h2 class="text-sm font-bold">{title}</h2>
    <p class="text-xs">{description}</p>
@@ -38,26 +99,6 @@
        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
      }
    },
    {
      title: "Animated Background",
      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
      id: 2,
      Component: Switch,
      props: {
        state: $settingsState.animatedbk,
        onChange: (isOn: boolean) => settingsState.animatedbk = isOn
      }
    },
    {
      title: "Animated Background Speed",
      description: "Controls the speed of the animated background.",
      id: 3,
      Component: Slider,
      props: {
        state: $settingsState.bksliderinput,
        onChange: (value: number) => settingsState.bksliderinput = `${value}`
      }
    },
    {
      title: "Custom Theme Colour",
      description: "Customise the overall theme colour of SEQTA Learn.",
@@ -87,36 +128,6 @@
        onChange: (isOn: boolean) => settingsState.animations = isOn
      }
    },
    {
      title: "Notification Collector",
      description: "Uncaps the 9+ limit for notifications, showing the real number.",
      id: 7,
      Component: Switch,
      props: {
        state: $settingsState.notificationcollector,
        onChange: (isOn: boolean) => settingsState.notificationcollector = isOn
      }
    },
    {
      title: "Assessment Average",
      description: "Shows your subject average for assessments.",
      id: 8,
      Component: Switch,
      props: {
        state: $settingsState.assessmentsAverage,
        onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
      }
    },
    {
      title: "Lesson Alerts",
      description: "Sends a native browser notification ~5 minutes prior to lessons.",
      id: 8,
      Component: Switch,
      props: {
        state: $settingsState.lessonalert,
        onChange: (isOn: boolean) => settingsState.lessonalert = isOn
      }
    },
    {
      title: "12 Hour Time",
      description: "Prefer 12 hour time format for SEQTA",
@@ -147,19 +158,109 @@
      }
    },
    {
-      title: "BetterSEQTA+",
+      title: "News Feed Source",
-      description: "Enables BetterSEQTA+ features",
+      description: "Choose sources of your news feed.",
      id: 11,
-      Component: Switch,
+      Component: Select,
      props: {
-        state: $settingsState.onoff,
+        state: $settingsState.newsSource,
-        onChange: (isOn: boolean) => settingsState.onoff = isOn
+        onChange: (value: string) => settingsState.newsSource = value,
        options: [
          { value: "australia", label: "Australia" },
          { value: "usa", label: "USA" },
          { value: "taiwan", label: "Taiwan" },
          { value: "hong_kong", label: "Hong Kong" },
          { value: "panama", label: "Panama" },
          { value: "canada", label: "Canada" },
          { value: "singapore", label: "Singapore" },
          { value: "uk", label: "UK" },
          { value: "japan", label: "Japan" },
          { value: "netherlands", label: "Netherlands" }
        ]
      }
    }
  ] as option}
    {@render Setting(option)}
  {/each}
  {#each pluginSettings as plugin}
    <div>
      <!-- Always show enable toggle if disableToggle is true -->
      {#if (plugin as any).disableToggle}
        <div class="flex justify-between items-center px-4 py-3">
          <div class="pr-4">
            <h2 class="text-sm font-bold">Enable {plugin.name}</h2>
            <p class="text-xs">{plugin.description}</p>
          </div>
          <div>
            <Switch
              state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
              onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
            />
          </div>
        </div>
      {/if}
      <!-- Only show other settings if plugin is enabled or has no disableToggle -->
      {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
        {#each Object.entries(plugin.settings) as [key, setting]}
          <!-- Skip the 'enabled' setting if it's part of the settings object -->
          {#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>
                <p class="text-xs">{setting.description || ''}</p>
              </div>
              <div>
                {#if setting.type === 'boolean'}
                  <Switch
                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                  />
                {:else if setting.type === 'number'}
                  <Slider
                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                    min={setting.min}
                    max={setting.max}
                    step={setting.step}
                  />
                {:else if setting.type === 'string'}
                  <input
                    type="text"
                    class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
                    value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                    oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
                  />                
                {:else if setting.type === 'select'}
                  <Select
                  state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                  onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                  options={(setting.options as string[]).map(opt => ({
                    value: opt,
                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
                    }))}
                  />
                {/if}
              </div>
            </div>
          {/if}
        {/each}
      {/if}
    </div>
  {/each}
  {@render Setting({
    title: "BetterSEQTA+",
    description: "Enables BetterSEQTA+ features",
    id: 12,
    Component: Switch,
    props: {
      state: $settingsState.onoff,
      onChange: (isOn: boolean) => settingsState.onoff = isOn
    }
  })}
  {#if $settingsState.devMode}
    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
      <div class="pr-4">
@@ -170,7 +271,7 @@
        <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
      </div>
    </div>
-    <div class="flex items-center justify-between px-4 py-3">
+    <div class="flex justify-between items-center px-4 py-3">
      <div class="pr-4">
        <h2 class="text-sm font-bold">Sensitive Hider</h2>
        <p class="text-xs">Replace sensitive content with mock data</p>
@@ -66,7 +66,7 @@
 </script>
 {#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
-<div class="flex items-center justify-between px-4 py-3">
+<div class="flex justify-between items-center px-4 py-3">
  <div class="pr-4">
    <h2 class="text-sm">{Shortcut.name}</h2>
  </div>
@@ -95,7 +95,7 @@
              class="w-full"
            >
              <input
-                class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
                type="text"
                placeholder="Shortcut Name"
                bind:value={newTitle}
@@ -108,7 +108,7 @@
              class="w-full"
            >
              <input
-                class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
                type="text"
                placeholder="URL eg. https://google.com"
                bind:value={newURL}
@@ -142,9 +142,9 @@
    <!-- Custom Shortcuts Section -->
    {#each $settingsState.customshortcuts as shortcut, index}
-      <div class="flex items-center justify-between px-4 py-3">
+      <div class="flex justify-between items-center px-4 py-3">
        {shortcut.name}
-        <button onclick={() => deleteCustomShortcut(index)}>
+        <button aria-label="Delete Shortcut" onclick={() => deleteCustomShortcut(index)}>
          <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="M6 18L18 6M6 6l12 12" />
          </svg>
@@ -9,16 +9,15 @@
  import type { Theme } from '../types/Theme'
  import browser from 'webextension-polyfill'
  import ThemeModal from '../components/store/ThemeModal.svelte'
  import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
  import { setTheme } from '@/seqta/ui/themes/setTheme'
  import Header from '../components/store/Header.svelte'
  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
  import Backgrounds from '../components/store/Backgrounds.svelte'
  const themeManager = ThemeManager.getInstance();
  // State variables
  let searchTerm = $state('');
  let themes = $state<Theme[]>([]);
@@ -33,8 +32,8 @@
  let selectedBackground = $state<string | null>(null);
  const fetchCurrentThemes = async () => {
-    const themes = await getAvailableThemes();
+    const themes = await themeManager.getAvailableThemes();
-    currentThemes = themes.themes.filter(theme => theme !== null).map(theme => theme.id);
+    currentThemes = themes.filter(theme => theme !== null).map(theme => theme.id);
  };
  const setDisplayTheme = (theme: Theme | null) => {
@@ -123,8 +122,8 @@
              {setDisplayTheme}
              onInstall={async () => {
                if (displayTheme) {
-                  await StoreDownloadTheme({themeContent: displayTheme})
+                  await themeManager.downloadTheme(displayTheme);
-                  setTheme(displayTheme.id);
+                  await themeManager.setTheme(displayTheme.id);
                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
@@ -132,7 +131,7 @@
              onRemove={async () => {
                if (displayTheme?.id) {
                  console.debug('deleting theme', displayTheme.id);
-                  deleteTheme(displayTheme.id)
+                  await themeManager.deleteTheme(displayTheme.id);
                  themeUpdates.triggerUpdate();
                  await fetchCurrentThemes();
                }
@@ -7,7 +7,6 @@
  import { type LoadedCustomTheme } from '@/types/CustomThemes'
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
  import { getTheme } from '@/seqta/ui/themes/getTheme'
  import Divider from '@/interface/components/themeCreator/divider.svelte'
  import Switch from '@/interface/components/Switch.svelte'
@@ -22,13 +21,13 @@
    handleImageVariableChange,
    handleCoverImageUpload
  } from '../utils/themeImageHandlers';
-  import { ClearThemePreview, UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview'
+  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
  import { saveTheme } from '@/seqta/ui/themes/saveTheme'
  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
  import { themeUpdates } from '../hooks/ThemeUpdates'
-  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
  const { themeID } = $props<{ themeID: string }>()
  const themeManager = ThemeManager.getInstance();
  let theme = $state<LoadedCustomTheme>({
    id: uuidv4(),
    name: '',
@@ -45,8 +44,19 @@
  })
  let closedAccordions = $state<string[]>([])
  let themeLoaded = $state(false);
  let codeEditorFullscreen = $state(false);
  function toggleCodeEditorFullscreen(e: MouseEvent) {
    e.preventDefault();
    codeEditorFullscreen = !codeEditorFullscreen;
  }
  function toggleAccordion(title: string, e: MouseEvent | KeyboardEvent) {
    // if the target is the fullscreen button return
    if (e.target instanceof HTMLButtonElement && e.target.classList.contains('fullscreen-toggle')) {
      return;
    }
  function toggleAccordion(title: string) {
    if (closedAccordions.includes(title)) {
      closedAccordions = closedAccordions.filter(t => t !== title);
    } else {
@@ -55,10 +65,10 @@
  }
  onMount(async () => {
-    disableTheme();
+    await themeManager.disableTheme();
    if (themeID) {
-      const tempTheme = await getTheme(themeID)
+      const tempTheme = await themeManager.getTheme(themeID)
      if (!tempTheme) return
@@ -66,16 +76,12 @@
      const loadedTheme = {
        ...tempTheme,
        CustomImages: tempTheme.CustomImages.map(image => ({
-          ...image,
+          ...image
-          url: image.blob ? URL.createObjectURL(image.blob) : null
+        }))
        })),
        coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined
      }
      if (tempTheme) {
      theme = loadedTheme
      themeLoaded = true
      }
    } else {
      themeLoaded = true
    }
@@ -99,7 +105,7 @@
    theme = await handleCoverImageUpload(event, theme);
  }
-  function submitTheme() {
+  async function submitTheme() {
    const themeClone = JSON.parse(JSON.stringify(theme));
    // re-insert blobs into themeClone
@@ -109,14 +115,17 @@
    }))
    themeClone.coverImage = theme.coverImage
-    ClearThemePreview();
+    themeManager.clearPreview();
-    saveTheme(themeClone);
+    await themeManager.saveTheme(themeClone);
    await themeManager.setTheme(themeClone.id);
    themeUpdates.triggerUpdate();
    CloseThemeCreator();
  }
  $effect(() => {
-    UpdateThemePreview(theme);
+    if (themeLoaded) {
      void themeManager.updatePreviewDebounced(theme);
    }
  });
  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
@@ -156,8 +165,8 @@
    <div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
      <!-- svelte-ignore a11y_no_static_element_interactions -->
      <div
-        onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onclick={(e) => { item.direction === 'vertical' && toggleAccordion(item.title, e) }}
-        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title, e) }}
        class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
        <div>
@@ -166,7 +175,14 @@
        </div>
        {#if item.direction === 'vertical'}
-          <div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+          <div class="flex justify-center items-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
            {#if item.type === 'codeEditor'}
              <!-- Fullscreen toggle button -->
              <button onclick={toggleCodeEditorFullscreen} class="px-2 mr-2 text-lg font-IconFamily fullscreen-toggle">
                {'\uebdb'}
              </button>
            {/if}
            <span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
          </div>
        {/if}
@@ -185,21 +201,24 @@
              <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
            {/key}
          {:else if item.type === 'codeEditor'}
            {#if !codeEditorFullscreen}
              {#key themeLoaded}
-              <CodeEditor {...(item.props as CodeEditorProps)} />
+                <!-- Only render inline if not fullscreen -->
                <CodeEditor className="h-[400px]" {...(item.props as CodeEditorProps)} />
              {/key}
            {/if}
          {:else if item.type === 'imageUpload'}
            {#each theme.CustomImages as image (image.id)}
-              <div class="flex items-center h-16 gap-2 px-2 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
+              <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                <div class="h-full">
-                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
+                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
                </div>
                <input
                  type="text"
                  bind:value={image.variableName}
                  oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
                  placeholder="CSS Variable Name"
-                  class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
+                  class="p-2 w-full rounded-lg border-0 transition grow flex-3 dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
                />
                <button onclick={() => onRemoveImage(image.id)} class="p-2 transition dark:text-white">
                  <span class='text-xl font-IconFamily'>{'\ued8c'}</span>
@@ -207,14 +226,14 @@
              </div>
            {/each}
-            <div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-200 dark:bg-zinc-700">
+            <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full h-8 rounded-lg transition bg-zinc-200 dark:bg-zinc-700">
              <span class='font-IconFamily'>{'\uec60'}</span>
              <span class='dark:text-white'>Add image</span>
              <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
            </div>
          {:else if item.type === 'lightDarkToggle'}
            <button
-              class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              class="overflow-hidden relative px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
              onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
            >
              {#key (item.props as LightDarkToggleProps).state}
@@ -236,10 +255,23 @@
 {/snippet}
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
-  <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+  {#if codeEditorFullscreen}
    <div class="absolute inset-0 bg-white z-[10000] dark:bg-zinc-900 dark:text-white">
      <div class="sticky top-0 px-2 h-screen">
        <div class="flex justify-between items-center my-4">
          <h2 class="text-xl font-bold">Custom CSS</h2>
          <button onclick={toggleCodeEditorFullscreen} class="pr-14 text-xl font-IconFamily">{'\uec06'}</button>
        </div>
        <CodeEditor className="editorHeight" value={theme.CustomCSS} onChange={(value: string) => { theme = { ...theme, CustomCSS: value } }} />
      </div>
    </div>
  {/if}
  <div class='flex relative flex-col p-2 w-full min-h-screen bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
    <h1 class='text-xl font-semibold'>Theme Creator</h1>
    <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
-      <span class='no-underline font-IconFamily pr-0.5'>{'\ueb44'}</span>
+      <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
      <span class='underline'>
        Need help? Check out the docs!
      </span>
@@ -254,7 +286,7 @@
        type='text'
        placeholder='What is your theme called?'
        bind:value={theme.name}
-        class='w-full p-2 mb-4 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
+        class='p-2 mb-4 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
    </div>
    <div>
@@ -263,23 +295,23 @@
        id='themeDescription'
        placeholder="Don't worry, this one's optional!"
        bind:value={theme.description}
-        class='w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 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>
+        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 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 />
-    <div class="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-200 dark:bg-zinc-700">
+    <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full rounded-lg transition aspect-theme group bg-zinc-200 dark:bg-zinc-700">
      <div class={`transition pointer-events-none z-30 font-IconFamily ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
        {'\uec60'}
      </div>
      <span class={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
      <input type="file" accept='image/*' onchange={onCoverImageUpload} class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
      {#if !theme.hideThemeName && theme.coverImage}
-        <div class="absolute z-30 transition-opacity opacity-100 pointer-events-none group-hover:opacity-0">{theme.name}</div>
+        <div class="absolute z-30 opacity-100 transition-opacity pointer-events-none group-hover:opacity-0">{theme.name}</div>
      {/if}
      {#if theme.coverImage}
-        <div class="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
+        <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src={theme.coverImageUrl} alt='Cover' class="absolute z-0 object-cover w-full h-full rounded" />
+        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
      {/if}
    </div>
@@ -17,7 +17,7 @@ export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promi
        const variableName = `custom-image-${theme.CustomImages.length}`;
        resolve({
          ...theme,
-          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: URL.createObjectURL(imageBlob) }],
+          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: null }],
        });
      };
      reader.readAsDataURL(file);
@@ -51,7 +51,7 @@ export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme):
      const reader = new FileReader();
      reader.onload = async () => {
        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
-        resolve({ ...theme, coverImage: imageBlob, coverImageUrl: URL.createObjectURL(imageBlob) });
+        resolve({ ...theme, coverImage: imageBlob });
      };
      reader.readAsDataURL(file);
    });
@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const brave = createManifest(baseManifest, 'brave')
+export const brave = createManifest({
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'brave')
@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const chrome = createManifest(baseManifest, 'chrome')
+export const chrome = createManifest({
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'chrome')
@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const edge = createManifest(baseManifest, 'edge')
+export const edge = createManifest({
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'edge')
@@ -4,6 +4,8 @@ import pkg from '../../package.json'
 const updatedFirefoxManifest = {
  ...baseManifest,
  version: pkg.version,
  description: pkg.description,
  background: {
    scripts: [baseManifest.background.service_worker],
  },
@@ -1,8 +1,6 @@
 {
  "manifest_version": 3,
  "name": "BetterSEQTA+",
  "version": "3.4.2",
  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
  "icons": {
    "32": "resources/icons/icon-32.png",
    "48": "resources/icons/icon-48.png",
@@ -34,15 +32,7 @@
  ],
  "web_accessible_resources": [
    {
-      "resources": ["*://*/*"],
+      "resources": ["*/*", "resources/*", "seqta/utils/migration/migrate.html", "plugins/built-in/globalSearch/*"],
      "matches": ["*://*/*"]
    },
    {
      "resources": ["resources/icons/*"],
      "matches": ["*://*/*"]
    },
    {
      "resources": ["seqta/utils/migration/migrate.html"],
      "matches": ["*://*/*"]
    }
  ]
@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const opera = createManifest(baseManifest, 'opera')
+export const opera = createManifest({
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'opera')
@@ -1,8 +1,11 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
 const updatedSafariManifest = {
  ...baseManifest,
  version: pkg.version,
  description: pkg.description,
  browser_specific_settings: {
    safari: {
      strict_min_version: '15.4',
@@ -0,0 +1,204 @@
 class ReactFiber {
  constructor(selector, options = {}) {
    this.selector = selector;
    this.debug = options.debug || false;
    this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
    this.fibers = this.nodes.map(node => this.getFiberNode(node));
    this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
    if (this.debug) {
      console.log("Selected Nodes:", this.nodes);
      console.log("🔍 Found Fibers:", this.fibers);
      console.log("🛠 Found Components:", this.components);
    }
  }
  static find(selector, options = {}) {
    return new ReactFiber(selector, options);
  }
  getFiberNode(node) {
    if (!node) return null;
    const fiberKey = Object.getOwnPropertyNames(node).find(name =>
      name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
    );
    return fiberKey ? node[fiberKey] : null;
  }
  getOwnerComponent(fiberNode) {
    let current = fiberNode;
    while (current) {
      if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
        return current.stateNode;
      }
      current = current.return;
    }
    return null;
  }
  getState(key) {
    if (!this.components.length) return null;
    const state = this.components[0]?.state || null;
    if (key === undefined) {
      return state;
    } else if (typeof key === 'string') {
      return state?.[key];
    } else if (Array.isArray(key)) {
      const filteredState = {};
      for (const k of key) {
        if (state && Object.hasOwn(state, k)) {
          filteredState[k] = state[k];
        }
      }
      return filteredState;
    }
    return null;
  }
  setState(update) {
    this.components.forEach(component => {
      if (component?.setState) {
        if (typeof update === 'function') {
          // Functional update
          component.setState(prevState => {
            const newState = update(prevState);
            if (this.debug) console.log("✅ Updated State (Functional):", newState);
            return newState;
          });
        } else {
          // Object update (merge with existing state)
          component.setState(prevState => {
            const newState = {
              ...prevState,
              ...update
            };
            if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
            return newState;
          });
        }
      }
    });
    return this;
  }
  getProp(propName) {
    if (!this.fibers.length) return null;
    if (propName === undefined) {
      return this.fibers[0]?.memoizedProps;
    }
    return this.fibers[0]?.memoizedProps?.[propName];
  }
  setProp(propName) {
    this.fibers.forEach(fiber => {
      if (fiber?.memoizedProps) {
        fiber.memoizedProps[propName] = value;
      }
    });
    return this; // Enable chaining
  }
  forceUpdate() {
    this.components.forEach(component => {
      if (component?.forceUpdate) {
        component.forceUpdate();
        if (this.debug) console.log("🔄 Forced React Re-render");
      }
    });
    return this; // Enable chaining
  }
 }
 function makeSerializable(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(item => makeSerializable(item));
  }
  const serializableObj = {};
  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      let value = obj[key];
      if (typeof value === 'function') {
        value = '[Function]';
      } else if (value instanceof HTMLElement) {
        value = {
          type: 'HTMLElement',
          id: value.id,
          tagName: value.tagName
        }; // Replace DOM node with ID/tag info
      } else if (typeof value === 'symbol') {
        value = value.toString();
      } else if (typeof value === 'object' && value !== null) {
        value = makeSerializable(value);
      }
      serializableObj[key] = value;
    }
  }
  return serializableObj;
 }
 window.addEventListener('message', (event) => {
  if (event.data.type === "reactFiberRequest") {
    const {
      selector,
      action,
      payload,
      debug,
      messageId
    } = event.data;
    const fiberInstance = ReactFiber.find(selector, {
      debug
    });
    let response;
    switch (action) {
      case "getState":
        response = fiberInstance.getState(payload.key);
        break;
      case "setState":
        // Handle both function and object updates
        if (payload.updateFn) {
          const updateFn = eval(`(${payload.updateFn})`);
          fiberInstance.setState(updateFn);
        } else {
          fiberInstance.setState(payload.updateObject);
        }
        response = {};
        break;
      case "getProp":
        response = fiberInstance.getProp(payload.propName);
        break;
      case "setProp":
        fiberInstance.setProp(payload.propName, payload.value);
        response = {};
        break;
      case "forceUpdate":
        fiberInstance.forceUpdate();
        response = {};
        break;
      default:
        console.warn(`[pageState] Unknown action: ${action}`);
        response = null;
    }
    if (response !== null && typeof response === 'object') {
      response = makeSerializable(response);
    }
    window.postMessage({
      type: "reactFiberResponse",
      response,
      messageId,
    }, "*");
  }
 });
@@ -0,0 +1,78 @@
 import { BasePlugin } from '../../core/settings';
 import { type Plugin } from '@/plugins/core/types';
 import { defineSettings, numberSetting, Setting } from '@/plugins/core/settingsHelpers';
 import styles from './styles.css?inline';
 const settings = defineSettings({
  speed: numberSetting({
    default: 1,
    title: "Animation Speed",
    description: "Controls how fast the background moves",
    min: 0.1,
    max: 2,
    step: 0.05
  })
 });
 class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.speed)
  speed!: number;
 }
 const instance = new AnimatedBackgroundPluginClass();
 const animatedBackgroundPlugin: Plugin<typeof settings> = {
  id: 'animated-background',
  name: 'Animated Background',
  description: 'Adds an animated background to BetterSEQTA+',
  version: '1.0.0',
  disableToggle: true,
  styles: styles,
  settings: instance.settings,
  run: async (api) => {
    // Create the background elements
    const container = document.getElementById("container");
    const menu = document.getElementById("menu");
    if (!container || !menu) {
      return () => {};
    }
    const backgrounds = [
      { classes: ["bg"] },
      { classes: ["bg", "bg2"] },
      { classes: ["bg", "bg3"] }
    ];
    backgrounds.forEach(({ classes }) => {
      const bk = document.createElement("div");
      classes.forEach(cls => bk.classList.add(cls));
      container.insertBefore(bk, menu);
    });
    // Set initial speed
    updateAnimationSpeed(api.settings.speed);
    // Listen for speed changes
    const speedUnregister = api.settings.onChange('speed', updateAnimationSpeed);
    // Return cleanup function
    return () => {
      speedUnregister.unregister();
      // Remove background elements
      const backgrounds = document.getElementsByClassName('bg');
      Array.from(backgrounds).forEach(element => element.remove());
    };
  }
 };
 function updateAnimationSpeed(speed: number) {
  const bgElements = document.getElementsByClassName('bg');
  Array.from(bgElements).forEach((element, index) => {
    const baseSpeed = index === 0 ? 3 : index === 1 ? 4 : 5;
    (element as HTMLElement).style.animationDuration = `${baseSpeed / speed}s`;
  });
 }
 export default animatedBackgroundPlugin; 
@@ -0,0 +1,31 @@
 .bg {
  animation: slide 3s ease-in-out infinite alternate;
  background: var(--better-main);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: 0 !important;
  overflow: hidden;
  scale: 1.5;
 }
 .bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
 }
 .bg3 {
  animation-duration: 5s;
 }
@keyframes slide {
  0% {
    transform: translate(50%) rotate(-60deg);
  }
  100% {
    transform: translateX(5%) rotate(-60deg);
  }
 } 
@@ -0,0 +1,24 @@
 export function CreateBackground() {
  const bkCheck = document.getElementsByClassName("bg");
  if (bkCheck.length !== 0) {
    return;
  }
  // Creating and inserting 3 divs containing the background applied to the pages
  const container = document.getElementById("container");
  const menu = document.getElementById("menu");
  if (!container || !menu) return;
  const backgrounds = [
    { classes: ["bg"] },
    { classes: ["bg", "bg2"] },
    { classes: ["bg", "bg3"] }
  ];
  backgrounds.forEach(({ classes }) => {
    const bk = document.createElement("div");
    classes.forEach(cls => bk.classList.add(cls));
    container.insertBefore(bk, menu);
  });
 } 
@@ -0,0 +1,6 @@
 export function RemoveBackground() {
  const backgrounds = document.getElementsByClassName("bg");
  // Convert HTMLCollection to Array and remove each element
  Array.from(backgrounds).forEach(element => element.remove());
 } 
@@ -0,0 +1,150 @@
 import { BasePlugin } from "@/plugins/core/settings";
 import { booleanSetting, defineSettings, Setting } from "@/plugins/core/settingsHelpers";
 import { type Plugin } from "@/plugins/core/types";
 import stringToHTML from "@/seqta/utils/stringToHTML";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 const settings = defineSettings({
  lettergrade: booleanSetting({
    default: false,
    title: "Letter Grades",
    description: "Display the average as a letter instead of a percentage"
  }),
 });
 class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.lettergrade)
  lettergrade!: boolean;
 }
 const instance = new AssessmentsAveragePluginClass();
 const assessmentsAveragePlugin: Plugin<typeof settings> = {
  id: "assessments-average",
  name: "Assessment Averages",
  description: "Adds an average grade to the Assessments page",
  version: "1.0.0",
  disableToggle: true,
  settings: instance.settings,
  run: async (api) => {
    api.seqta.onMount(".assessmentsWrapper", async () => {
      // Wait for any assessment item to load first
      await waitForElm(
        "#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
        true,
        10,
        1000
      );
      // Helper function to find actual class names by their base pattern
      const getClassByPattern = (element: Element | Document, basePattern: string): string => {
        // Find all classes on the element
        const classes = Array.from(element.querySelectorAll('*'))
          .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___']");
      if (!sampleAssessmentItem) return;
      // Extract all necessary class patterns from a sample assessment item
      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___');
      // Get Thermoscore classes
      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___');
      // 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;
      }
      let total = 0;
      let count = 0;
      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);
    });
  }
 };
 export default assessmentsAveragePlugin;
@@ -0,0 +1,626 @@
 # client-vector-search
 A client side vector search library that can embed, search, and cache. Works on the browser and server side.
 It outperforms OpenAI's text-embedding-ada-002 and is way faster than Pinecone and other VectorDBs.
 I'm the founder of [searchbase.app](https://searchbase.app) and we needed this for our product and customers. We'll be using this library in production. You can be sure it'll be maintained and improved.
 - Embed documents using transformers by default: gte-small (~30mb).
 - Calculate cosine similarity between embeddings.
 - Create an index and search on the client side
 - Cache vectors with browser caching support.
 Lots of improvements are coming!
 ## Roadmap
 Our goal is to build a super simple, fast vector search that works with couple hundred to thousands vectors. ~1k vectors per user covers 99% of the use cases.
 We'll initially keep things super simple and sub 100ms
 ### TODOs
 - [ ] add HNSW index that works on node and browser env, don't rely on hnsw binder libs
 - [ ] add a proper testing suite and ci/cd for the lib
  - [ ] simple health tests
    - [ ] mock the @xenova/transformers for jest, it's not happy with it
  - [ ] performance tests, recall, memory usage, cpu usage etc.
 ## Installation
 ```bash
 npm i client-vector-search
 ```
 ## Quickstart
 This library provides a plug-and-play solution for embedding and vector search. It's designed to be easy to use, efficient, and versatile. Here's a quick start guide:
 ```ts
 import { getEmbedding, EmbeddingIndex } from "client-vector-search";
 // getEmbedding is an async function, so you need to use 'await' or '.then()' to get the result
 const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
 // Each object should have an 'embedding' property of type number[]
 const initialObjects = [
  { id: 1, name: "Apple", embedding: embedding },
  { id: 2, name: "Banana", embedding: await getEmbedding("Banana") },
  { id: 3, name: "Cheddar", embedding: await getEmbedding("Cheddar") },
  { id: 4, name: "Space", embedding: await getEmbedding("Space") },
  { id: 5, name: "database", embedding: await getEmbedding("database") },
 ];
 const index = new EmbeddingIndex(initialObjects); // Creates an index
 // The query should be an embedding of type number[]
 const queryEmbedding = await getEmbedding("Fruit"); // Query embedding
 const results = await index.search(queryEmbedding, { topK: 5 }); // Returns top similar objects
 // specify the storage type
 await index.saveIndex("indexedDB");
 const results = await index.search([1, 2, 3], {
  topK: 5,
  useStorage: "indexedDB",
  // storageOptions: { // use only if you overrode the defaults
  //   indexedDBName: 'clientVectorDB',
  //   indexedDBObjectStoreName: 'ClientEmbeddingStore',
  // },
 });
 console.log(results);
 await index.deleteIndexedDB(); // if you overrode default, specify db name
 ```
 ## Trouble-shooting
 ### NextJS
 To use it inside NextJS projects you'll need to update the `next.config.js` file to include the following:
 ```js
 module.exports = {
  // Override the default webpack configuration
  webpack: (config) => {
    // See https://webpack.js.org/configuration/resolve/#resolvealias
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
    };
    return config;
  },
 };
 ```
 #### Model load after page is loaded
 You can initialize the model before using it to generate embeddings. This will ensure that the model is loaded before you use it and provide a better UX.
 ```js
 import { initializeModel } from "client-vector-search"
 ...
  useEffect(() => {
    try {
      initializeModel();
    } catch (e) {
      console.log(e);
    }
  }, []);
 ```
 ## Usage Guide
 This guide provides a step-by-step walkthrough of the library's main features. It covers everything from generating embeddings for a string to performing operations on the index such as adding, updating, and removing objects. It also includes instructions on how to save the index to a database and perform search operations within it.
 Until we have a reference documentation, you can find all the methods and their usage in this guide. Each step is accompanied by a code snippet to illustrate the usage of the method in question. Make sure to follow along and try out the examples in your own environment to get a better understanding of how everything works.
 Let's get started!
 ### Step 1: Generate Embeddings for String
 Generate embeddings for a given string using the `getEmbedding` method.
 ```ts
 const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
 ```
 > **Note**: `getEmbedding` is asynchronous; make sure to use `await`.
 ---
 ### Step 2: Calculate Cosine Similarity
 Calculate the cosine similarity between two embeddings.
 ```ts
 const similarity = cosineSimilarity(embedding1, embedding2, 6);
 ```
 > **Note**: Both embeddings should be of the same length.
 ---
 ### Step 3: Create an Index
 Create an index with an initial array of objects. Each object must have an 'embedding' property.
 ```ts
 const initialObjects = [...];
 const index = new EmbeddingIndex(initialObjects);
 ```
 ---
 ### Step 4: Add to Index
 Add an object to the index.
 ```ts
 const objectToAdd = {
  id: 6,
  name: "Cat",
  embedding: await getEmbedding("Cat"),
 };
 index.add(objectToAdd);
 ```
 ---
 ### Step 5: Update Index
 Update an existing object in the index.
 ```ts
 const vectorToUpdate = {
  id: 6,
  name: "Dog",
  embedding: await getEmbedding("Dog"),
 };
 index.update({ id: 6 }, vectorToUpdate);
 ```
 ---
 ### Step 6: Remove from Index
 Remove an object from the index.
 ```ts
 index.remove({ id: 6 });
 ```
 ---
 ### Step 7: Retrieve from Index
 Retrieve an object from the index.
 ```ts
 const vector = index.get({ id: 1 });
 ```
 ---
 ### Step 8: Search the Index
 Search the index with a query embedding.
 ```ts
 const queryEmbedding = await getEmbedding("Fruit");
 const results = await index.search(queryEmbedding, { topK: 5 });
 ```
 ---
 ### Step 9: Print the Index
 Print the entire index to the console.
 ```ts
 index.printIndex();
 ```
 ---
 ### Step 10: Save Index to IndexedDB (for browser)
 Save the index to a persistent IndexedDB database. Note
 ```ts
 await index.saveIndex("indexedDB", {
  DBName: "clientVectorDB",
  objectStoreName: "ClientEmbeddingStore",
 });
 ```
 ---
 ### Important: Search in indexedDB
 Perform a search operation in the IndexedDB.
 ````ts
 const results = await index.search(queryEmbedding, {
  topK: 5,
  useStorage: "indexedDB",
  storageOptions: { // only if you want to override the default options, defaults are below
    indexedDBName: 'clientVectorDB',
    indexedDBObjectStoreName: 'ClientEmbeddingStore'
  }
 });
 ---
 ### Delete Database
 To delete an entire database.
 ```ts
 await IndexedDbManager.deleteIndexedDB("clientVectorDB");
 ````
 ---
 ### Delete Object Store
 To delete an object store from a database.
 ```ts
 await IndexedDbManager.deleteIndexedDBObjectStore(
  "clientVectorDB",
  "ClientEmbeddingStore",
 );
 ```
 ---
 ### Retrieve All Objects
 To retrieve all objects from a specific object store.
 ```ts
 const allObjects = await IndexedDbManager.getAllObjectsFromIndexedDB(
  "clientVectorDB",
  "ClientEmbeddingStore",
 );
 ```
 # THE MAIN INDEX.TS FILE THAT YOU ARE IMPORTING FROM
 ```index.ts
 const DEFAULT_TOP_K = 3;
 interface Filter {
  [key: string]: any;
 }
 import Cache from './cache';
 import { IndexedDbManager } from './indexedDB';
 import { cosineSimilarity } from './utils';
 export { ExperimentalHNSWIndex } from './hnsw';
 // uncomment if you want to test indexedDB implementation in node env for faster dev cycle
 // import { IDBFactory } from 'fake-indexeddb';
 // const indexedDB = new IDBFactory();
 export interface SearchResult {
  similarity: number;
  object: any;
 }
 type StorageOptions = 'indexedDB' | 'localStorage' | 'none';
 /**
 * Interface for search options in the EmbeddingIndex class.
 * topK: The number of top similar items to return.
 * filter: An optional filter to apply to the objects before searching.
 * useStorage: A flag to indicate whether to use storage options like indexedDB or localStorage.
 */
 interface SearchOptions {
  topK?: number;
  filter?: Filter;
  useStorage?: StorageOptions;
  storageOptions?: { indexedDBName: string; indexedDBObjectStoreName: string }; // TODO: generalize it to localStorage as well
 }
 const cacheInstance = Cache.getInstance();
 let pipe: any;
 let currentModel: string;
 export const initializeModel = async (
  model: string = 'Xenova/gte-small',
 ): Promise<void> => {
  if (model !== currentModel) {
    const transformersModule = await import('@xenova/transformers');
    const pipeline = transformersModule.pipeline;
    pipe = await pipeline('feature-extraction', model);
    currentModel = model;
  }
 };
 export const getEmbedding = async (
  text: string,
  precision: number = 7,
  options = { pooling: 'mean', normalize: false },
  model = 'Xenova/gte-small',
 ): Promise<number[]> => {
  const cachedEmbedding = cacheInstance.get(text);
  if (cachedEmbedding) {
    return Promise.resolve(cachedEmbedding);
  }
  if (model !== currentModel) {
    await initializeModel(model);
  }
  const output = await pipe(text, options);
  const roundedOutput = Array.from(output.data as number[]).map(
    (value: number) => parseFloat(value.toFixed(precision)),
  );
  cacheInstance.set(text, roundedOutput);
  return Array.from(roundedOutput);
 };
 export class EmbeddingIndex {
  private objects: Filter[];
  private keys: string[];
  constructor(initialObjects?: Filter[]) {
    // TODO: add support for options while creating index such as  {... indexedDB: true, ...}
    this.objects = [];
    this.keys = [];
    if (initialObjects && initialObjects.length > 0) {
      initialObjects.forEach((obj) => this.validateAndAdd(obj));
      if (initialObjects[0]) {
        this.keys = Object.keys(initialObjects[0]);
      }
    }
  }
  private findVectorIndex(filter: Filter): number {
    return this.objects.findIndex((object) =>
      Object.keys(filter).every((key) => object[key] === filter[key]),
    );
  }
  private validateAndAdd(obj: Filter) {
    if (!Array.isArray(obj.embedding) || obj.embedding.some(isNaN)) {
      throw new Error(
        'Object must have an embedding property of type number[]',
      );
    }
    if (this.keys.length === 0) {
      this.keys = Object.keys(obj);
    } else if (!this.keys.every((key) => key in obj)) {
      throw new Error(
        'Object must have the same properties as the initial objects',
      );
    }
    this.objects.push(obj);
  }
  add(obj: Filter) {
    this.validateAndAdd(obj);
  }
  // Method to update an existing vector in the index
  update(filter: Filter, vector: Filter) {
    const index = this.findVectorIndex(filter);
    if (index === -1) {
      throw new Error('Vector not found');
    }
    if (vector.hasOwnProperty('embedding')) {
      // Validate and add the new vector
      this.validateAndAdd(vector);
    }
    // Replace the old vector with the new one
    this.objects[index] = Object.assign(this.objects[index] as Filter, vector);
  }
  // Method to remove a vector from the index
  remove(filter: Filter) {
    const index = this.findVectorIndex(filter);
    if (index === -1) {
      throw new Error('Vector not found');
    }
    // Remove the vector from the index
    this.objects.splice(index, 1);
  }
  // Method to remove multiple vectors from the index
  removeBatch(filters: Filter[]) {
    filters.forEach((filter) => {
      const index = this.findVectorIndex(filter);
      if (index !== -1) {
        // Remove the vector from the index
        this.objects.splice(index, 1);
      }
    });
  }
  // Method to retrieve a vector from the index
  get(filter: Filter) {
    const vector = this.objects[this.findVectorIndex(filter)];
    return vector || null;
  }
  size(): number {
    // Returns the size of the index
    return this.objects.length;
  }
  clear() {
    this.objects = [];
  }
  async search(
    queryEmbedding: number[],
    options: SearchOptions = {
      topK: 3,
      useStorage: 'none',
      storageOptions: {
        indexedDBName: 'clientVectorDB',
        indexedDBObjectStoreName: 'ClientEmbeddingStore',
      },
    },
  ): Promise<SearchResult[]> {
    const topK = options.topK || DEFAULT_TOP_K;
    const filter = options.filter || {};
    const useStorage = options.useStorage || 'none';
    if (useStorage === 'indexedDB') {
      const DBname = options.storageOptions?.indexedDBName || 'clientVectorDB';
      const objectStoreName =
        options.storageOptions?.indexedDBObjectStoreName ||
        'ClientEmbeddingStore';
      if (typeof indexedDB === 'undefined') {
        console.error('IndexedDB is not supported');
        throw new Error('IndexedDB is not supported');
      }
      const results = await this.loadAndSearchFromIndexedDB(
        DBname,
        objectStoreName,
        queryEmbedding,
        topK,
        filter,
      );
      return results;
    } else {
      // Compute similarities
      const similarities = this.objects
        .filter((object) =>
          Object.keys(filter).every((key) => object[key] === filter[key]),
        )
        .map((obj) => ({
          similarity: cosineSimilarity(queryEmbedding, obj.embedding),
          object: obj,
        }));
      // Sort by similarity and return topK results
      return similarities
        .sort((a, b) => b.similarity - a.similarity)
        .slice(0, topK);
    }
  }
  printIndex() {
    console.log('Index Content:');
    this.objects.forEach((obj, idx) => {
      console.log(`Item ${idx + 1}:`, obj);
    });
  }
  async saveIndex(
    storageType: string,
    options: { DBName: string; objectStoreName: string } = {
      DBName: 'clientVectorDB',
      objectStoreName: 'ClientEmbeddingStore',
    },
  ) {
    if (storageType === 'indexedDB') {
      await this.saveToIndexedDB(options.DBName, options.objectStoreName);
    } else {
      throw new Error(
        `Unsupported storage type: ${storageType} \n Supported storage types: "indexedDB"`,
      );
    }
  }
  async saveToIndexedDB(
    DBname: string = 'clientVectorDB',
    objectStoreName: string = 'ClientEmbeddingStore',
  ): Promise<void> {
    if (typeof indexedDB === 'undefined') {
      console.error('IndexedDB is not defined');
      throw new Error('IndexedDB is not supported');
    }
    if (!this.objects || this.objects.length === 0) {
      throw new Error('Index is empty. Nothing to save');
    }
    try {
      const db = await IndexedDbManager.create(DBname, objectStoreName);
      await db.addToIndexedDB(this.objects);
      console.log(
        `Index saved to database '${DBname}' object store '${objectStoreName}'`,
      );
    } catch (error) {
      console.error('Error saving index to database:', error);
      throw new Error('Error saving index to database');
    }
  }
  async loadAndSearchFromIndexedDB(
    DBname: string = 'clientVectorDB',
    objectStoreName: string = 'ClientEmbeddingStore',
    queryEmbedding: number[],
    topK: number,
    filter: { [key: string]: any },
  ): Promise<SearchResult[]> {
    const db = await IndexedDbManager.create(DBname, objectStoreName);
    const generator = db.dbGenerator();
    const results: { similarity: number; object: any }[] = [];
    for await (const record of generator) {
      if (Object.keys(filter).every((key) => record[key] === filter[key])) {
        const similarity = cosineSimilarity(queryEmbedding, record.embedding);
        results.push({ similarity, object: record });
      }
    }
    results.sort((a, b) => b.similarity - a.similarity);
    return results.slice(0, topK);
  }
  async deleteIndexedDB(DBname: string = 'clientVectorDB'): Promise<void> {
    if (typeof indexedDB === 'undefined') {
      console.error('IndexedDB is not defined');
      throw new Error('IndexedDB is not supported');
    }
    return new Promise((resolve, reject) => {
      const request = indexedDB.deleteDatabase(DBname);
      request.onsuccess = () => {
        console.log(`Database '${DBname}' deleted`);
        resolve();
      };
      request.onerror = (event) => {
        console.error('Failed to delete database', event);
        reject(new Error('Failed to delete database'));
      };
    });
  }
  async deleteIndexedDBObjectStore(
    DBname: string = 'clientVectorDB',
    objectStoreName: string = 'ClientEmbeddingStore',
  ): Promise<void> {
    const db = await IndexedDbManager.create(DBname, objectStoreName);
    try {
      await db.deleteIndexedDBObjectStoreFromDB(DBname, objectStoreName);
      console.log(
        `Object store '${objectStoreName}' deleted from database '${DBname}'`,
      );
    } catch (error) {
      console.error('Error deleting object store:', error);
      throw new Error('Error deleting object store');
    }
  }
  async getAllObjectsFromIndexedDB(
    DBname: string = 'clientVectorDB',
    objectStoreName: string = 'ClientEmbeddingStore',
  ): Promise<any[]> {
    const db = await IndexedDbManager.create(DBname, objectStoreName);
    const objects: any[] = [];
    for await (const record of db.dbGenerator()) {
      objects.push(record);
    }
    return objects;
  }
 }
 ```
@@ -0,0 +1,50 @@
 <script lang="ts">
  import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
  import type { DynamicContentItem } from '../utils/dynamicItems';
  import type { FuseResultMatch } from '../core/types';
  const { item, isSelected, searchTerm, matches } = $props<{
    item: DynamicContentItem;
    isSelected: boolean;
    searchTerm: string;
    matches?: readonly FuseResultMatch[];
  }>();
 </script>
 <button
  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group 
  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
  >
  <div class="flex items-center w-full">
      <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\ue924'}</div>
      <span class="ml-4 text-lg truncate">
      {@html stripHtmlButKeepHighlights(highlightMatch(item.text, searchTerm, matches))}
      </span>
      <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
      {item.category} 
      </span>
  </div>
  {#if item.content}
      <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
      {@html stripHtmlButKeepHighlights(highlightSnippet(item.content, searchTerm, matches))}
      </div>
  {/if}
 </button>
 <style>
  :global(.highlight) {
    background-color: rgba(255, 213, 0, 0.3);
    font-weight: 500;
    border-radius: 2px;
    padding: 0 1px;
    margin: 0 -1px;
  }
  .dark :global(.highlight) {
    background-color: rgba(255, 230, 100, 0.4);
  }
  .due-badge {
    font-size: 0.65rem;
  }
 </style> 
@@ -0,0 +1,135 @@
 <script lang="ts">
  import { createEventDispatcher, onDestroy } from 'svelte';
  import { unitFullNames } from './unitMap';
  import * as math from 'mathjs';
  let { searchTerm = '', isSelected = false } = $props<{ searchTerm: string, isSelected: boolean }>();
  const dispatch = createEventDispatcher<{
    hasResult: string | null;
  }>();
  let result = $state<string | null>(null);
  let isCalculating = $state(false);
  let inputUnit = $state<string>('');
  let outputUnit = $state<string>('');
  function detectUnit(expression: string): string {
    try {
      const unit = math.unit(expression);
      if (unit) {
        // Get the base unit name
        const unitStr = unit.formatUnits();
        return unitFullNames[unitStr] || unitStr;
      }
    } catch (e) {
      // Not a unit or invalid expression
    }
    return '';
  }
  // Process the input with debounce to avoid unnecessary calculations
  const processInput = (input: string) => {
    try {
      if (
        !input.trim() || 
        (input.trim().length <= 2 && !/\d/.test(input))
      ) {
        result = null;
        inputUnit = '';
        outputUnit = '';
        dispatch('hasResult', null);
        return;
      }
      isCalculating = true;
      // Let mathjs handle everything
      const evaluated = math.evaluate(input.replace('**', '^'));
      // Format the result
      if (evaluated !== undefined) {
        if (math.typeOf(evaluated) === 'Unit') {
          // Handle unit conversion results
          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
          inputUnit = detectUnit(input);
          outputUnit = detectUnit(result);
        } else if (typeof evaluated === 'number') {
          // Handle regular numbers
          if (math.round(evaluated) === evaluated) {
            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
          } else {
            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
          }
          inputUnit = '';
          outputUnit = '';
        } else {
          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
          inputUnit = '';
          outputUnit = '';
        }
        dispatch('hasResult', result);
      } else {
        result = null;
        inputUnit = '';
        outputUnit = '';
        dispatch('hasResult', null);
      }
    } catch (e) {
      // If mathjs throws an error, this isn't a valid expression
      result = null;
      inputUnit = '';
      outputUnit = '';
      dispatch('hasResult', null);
    } finally {
      isCalculating = false;
    }
  }
  $effect(() => {
    processInput(searchTerm);
  });
  onDestroy(() => {
    dispatch('hasResult', null);
  });
 </script>
 {#if result !== null}
 <div class="p-2">
  <p class="text-[0.85rem] p-1 pb-0.5 pt-0 font-semibold text-zinc-500 dark:text-zinc-400">Calculator</p>
  <div class="flex items-center justify-between gap-8 rounded-lg border border-transparent {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 border-zinc-900/5 dark:border-zinc-100/5' : ''}">
    <div class="flex flex-col flex-1 items-center py-4 pl-4 min-w-0">
      <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
        style="--char-count: {searchTerm?.length || 10}; font-size: min(2.5rem, max(1rem, calc(35vw / var(--char-count, 10))))">
        {searchTerm}
      </div>
      <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
        {inputUnit || 'Question'}
      </div>
    </div>
    <div class="flex flex-col flex-shrink-0 justify-center items-center w-12">
      <div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
      <div class="text-2xl text-zinc-900 dark:text-zinc-100">
        →
      </div>
      <div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
    </div>
    {#if !isCalculating}
      <div class="flex flex-col flex-1 items-center py-4 pr-4 min-w-0">
        <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
             style="--char-count: {result?.length || 10}; font-size: min(2.5rem, max(1rem, calc(30vw / var(--char-count, 10))))">
          {result}
        </div>
        <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
          {outputUnit || 'Result'}
        </div>
      </div>
    {:else}
      <div class="w-6 h-6 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
    {/if}
  </div>
 </div>
 {/if}
@@ -0,0 +1,390 @@
 <script lang="ts">
  import { onMount, tick } from 'svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
  import { fade, scale } from 'svelte/transition';
  import { circOut, quintOut } from 'svelte/easing';
  import { type StaticCommandItem } from '../core/commands';
  import type { CombinedResult } from '../core/types';
  import { createSearchIndexes, performSearch as doSearch } from '../search/searchUtils';
  import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
  import Fuse from 'fuse.js';
  import Calculator from './Calculator.svelte';
  import { actionMap } from '../indexing/actions';
  import type { IndexItem, HydratedIndexItem } from '../indexing/types';
  import debounce from 'lodash/debounce';
  const { 
    transparencyEffects, 
    showRecentFirst
  } = $props<{ 
    transparencyEffects: boolean, 
    showRecentFirst: boolean 
  }>();
  let commandsFuse = $state<Fuse<StaticCommandItem>>();
  let dynamicContentFuse = $state<Fuse<HydratedIndexItem>>();
  const dynamicIdToItemMap = $state(new Map<string, HydratedIndexItem>());
  const commandIdToItemMap = $state(new Map<string, StaticCommandItem>());
  let isIndexing = $state(false);
  let completedJobs = $state(0);
  let totalJobs = $state(0);
  onMount(() => {
    const progressHandler = (event: CustomEvent) => {
      const { completed, total, indexing } = event.detail;
      completedJobs = completed;
      totalJobs = total;
      isIndexing = indexing;
    };
    window.addEventListener('indexing-progress', progressHandler as EventListener);
    const itemsUpdatedHandler = () => {
      console.log('Search Bar received items-updated event, re-indexing...');
      setupSearchIndexes();
      performSearch();
    };
    window.addEventListener('dynamic-items-updated', itemsUpdatedHandler);
    return () => {
      window.removeEventListener('indexing-progress', progressHandler as EventListener);
      window.removeEventListener('dynamic-items-updated', itemsUpdatedHandler);
    };
  });
  function setupSearchIndexes() {
    const { commandsFuse: cfuse, dynamicContentFuse: dfuse, commands, dynamicItems } = createSearchIndexes();
    commandsFuse = cfuse;
    dynamicContentFuse = dfuse;
    dynamicIdToItemMap.clear();
    commandIdToItemMap.clear();
    dynamicItems.forEach(item => dynamicIdToItemMap.set(item.id, item));
    commands.forEach(item => commandIdToItemMap.set(item.id, item));
    console.debug(`[Global Search] Indexed ${commands.length} command items and ${dynamicItems.length} dynamic items.`);
  }
  let commandPalleteOpen = $state(false);
  let searchTerm = $state('');
  let selectedIndex = $state(0);
  let searchbar = $state<HTMLInputElement>();
  let combinedResults = $state<CombinedResult[]>([]); 
  let isLoading = $state(false);
  let prevSearchTerm = $state('');
  let calculatorResult = $state<string | null>(null);
  const updateCalculatorState = (hasResult: string | null) => {
    calculatorResult = hasResult;
  };
  onMount(() => {
    setupSearchIndexes();
    // @ts-ignore - Intentionally adding to window
    window.setCommandPalleteOpen = (open: boolean) => {
      commandPalleteOpen = open;
    };
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        commandPalleteOpen = true;
        tick().then(() => searchbar?.focus());
      }
      if (e.key === 'Escape') {
        commandPalleteOpen = false;
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  });
  const performSearch = async () => {
    isLoading = true;
    selectedIndex = 0;
    const term = searchTerm.trim().toLowerCase();
    if (commandsFuse && dynamicContentFuse) {
      combinedResults = await doSearch(
        term, 
        commandsFuse, 
        dynamicContentFuse, 
        commandIdToItemMap, 
        dynamicIdToItemMap,
        showRecentFirst
      );
    } else {
      combinedResults = [];
    }
    isLoading = false;
  };
  const debouncedPerformSearch = debounce(performSearch, 10);
  $effect(() => {
    if (commandPalleteOpen) {
      if (searchTerm === '') {
        performSearch();
      } else {
        debouncedPerformSearch();
      }
      tick().then(() => searchbar?.focus()); 
    } else {
      searchTerm = '';
      selectedIndex = 0;
      prevSearchTerm = '';
      combinedResults = [];
    }
  });
  $effect(() => {
    if (combinedResults.length === 0 && calculatorResult && commandPalleteOpen) {
      selectedIndex = 0;
    }
  });
  const selectNext = () => {
    const maxIndex = (calculatorResult ? 1 : 0) + combinedResults.length - 1;
    if (selectedIndex < maxIndex) {
      selectedIndex++;
    }
  };
  const selectPrev = () => {
    if (selectedIndex > 0) {
      selectedIndex--;
    }
  };
  function executeItemAction(item: StaticCommandItem | HydratedIndexItem) {
    if ('action' in item && typeof item.action === 'function') {
      (item as StaticCommandItem).action();
    } else if ('actionId' in item && item.actionId && actionMap[item.actionId]) {
      actionMap[item.actionId](item as IndexItem);
    }
    commandPalleteOpen = false;
  }
  const executeSelected = () => {
    if (calculatorResult && selectedIndex === 0) {
      navigator.clipboard.writeText(calculatorResult);
      commandPalleteOpen = false;
    } else {
      const resultIndex = calculatorResult ? selectedIndex - 1 : selectedIndex;
      const result = combinedResults[resultIndex];
      if (result?.item) {
        executeItemAction(result.item);
      }
    }
  };
  const handleKeyNav = (e: KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      selectNext();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      selectPrev();
    } else if (e.key === 'Enter') {
      e.preventDefault();
      executeSelected();
    } else if (e.key === 'Escape') {
      commandPalleteOpen = false;
    }
  };
 </script>
 {#if commandPalleteOpen}
  <div role="dialog" aria-modal="true" class={settingsState.DarkMode ? 'dark' : ''}>
    <div 
      class="fixed inset-0 z-[50000] bg-zinc-900/40 dark:bg-black/60" 
      transition:fade={{ duration: 150, easing: quintOut }}
    ></div>
    <div class="fixed inset-0 z-[50000] flex justify-center place-items-start p-8 sm:p-6 md:p-8 select-none" 
         onclick={() => commandPalleteOpen = false}
         onkeydown={(e) => e.key === 'Escape' && (commandPalleteOpen = false)}
         role="button"
         tabindex="0">
      <div
        class="w-full max-w-2xl overflow-clip rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur' : 'bg-white dark:bg-zinc-900' }"
        transition:scale={{ duration: 100, start: 0.95, opacity: 0, easing: circOut }}
        onclick={(e) => {
          e.stopPropagation();
        }}
        onkeydown={(e) => {
          if (e.key === 'Escape') {
            commandPalleteOpen = false;
          }
        }}
        role="button"
        tabindex="0">
        <div class="relative p-2 border-b border-zinc-900/5 dark:border-zinc-100/5">
          <div class="absolute top-1/2 translate-y-[calc(-50%-3px)] scale-105 left-5 w-6 h-6 text-[1.3rem] text-zinc-900 dark:text-zinc-400 text-opacity-40 pointer-events-none font-IconFamily">
            {'\ueca5'}
          </div>
          <input
            bind:this={searchbar}
            bind:value={searchTerm}
            onkeydown={handleKeyNav}
            class="pr-4 pl-12 w-full h-10 text-lg bg-transparent border-0 outline-none placeholder-zinc-400 text-zinc-700 dark:placeholder-zinc-500 dark:text-white focus:ring-0 sm:text-xl"
            placeholder="Search..."
          />
        </div>
        <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
          <Calculator 
            searchTerm={searchTerm} 
            isSelected={selectedIndex === 0} 
            on:hasResult={(e) => updateCalculatorState(e.detail)}
          />
          {#if combinedResults.length > 0}
            {#each combinedResults as result, i (result.id)} 
              {@const isSelected = selectedIndex === (calculatorResult ? i + 1 : i)}
              {@const item = result.item} 
              <li>
                {#if result.type === 'command'}
                  {@const staticItem = item as StaticCommandItem}
                  <button
                    class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group 
                    {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
                    onclick={() => executeItemAction(staticItem)}
                  >
                    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{staticItem.icon}</div>
                    <span class="ml-4 text-lg truncate">
                      {@html highlightMatch(staticItem.text, searchTerm, result.matches)}
                    </span>
                    {#if staticItem.keybindLabel}
                      <div class="flex-none ml-auto">
                        {@render Shortcut({ text: '', keybind: staticItem.keybindLabel })}
                      </div>
                    {/if}
                  </button>
                {:else if result.type === 'dynamic'}
                  {@const dynamicItem = item as HydratedIndexItem}
                  {#if dynamicItem.renderComponent}
                    <dynamicItem.renderComponent 
                      item={dynamicItem} 
                      isSelected={isSelected}
                      searchTerm={searchTerm} 
                      matches={result.matches} 
                      on:click={() => executeItemAction(dynamicItem)} 
                    />
                  {:else}
                    <button
                      class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group 
                      {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
                      onclick={() => executeItemAction(dynamicItem)}
                    >
                      <div class="flex items-center w-full">
                        <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{dynamicItem.metadata?.icon || '\ue924'}</div>
                        <span class="ml-4 text-lg truncate">
                          {@html stripHtmlButKeepHighlights(highlightMatch(dynamicItem.text, searchTerm, result.matches))}
                        </span>
                        <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
                          {dynamicItem.category} 
                        </span>
                      </div>
                      {#if dynamicItem.content}
                        <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
                          {@html stripHtmlButKeepHighlights(highlightSnippet(dynamicItem.content, searchTerm, result.matches))}
                        </div>
                      {/if}
                    </button>
                  {/if}
                {/if}
              </li>
            {/each}
          {:else if !calculatorResult}
            <div class="px-8 py-16 text-center text-zinc-900 dark:text-zinc-200 sm:px-16">
              {#if isLoading}
                <div class="mx-auto w-8 h-8 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
                <p class="mt-4 text-lg dark:text-zinc-300">Searching...</p>
              {:else}
                <svg class="mx-auto w-8 h-8 text-opacity-40 dark:text-opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                </svg>
                <p class="mt-6 text-lg dark:text-zinc-300">No matches found. Try something else.</p>
              {/if}
            </div>
          {/if}
        </ul>
        <div class="px-3 py-2 w-full border-t border-zinc-900/5 dark:border-zinc-100/5 bg-white/5">
          {#if combinedResults.length > 0 || calculatorResult}
            <div class="flex justify-between items-center h-5 text-sm text-zinc-500 dark:text-zinc-400">
              <div class="flex gap-4 items-center">
                {#if !calculatorResult}
                  {#if selectedIndex >= 0 && selectedIndex < combinedResults.length}
                    {@const item = combinedResults[selectedIndex].item}
                    {#if 'keybind' in item && item.keybind}
                      {@render Shortcut({ text: 'Shortcut', keybind: [ ...(item?.keybindLabel ?? []) ] })}
                    {/if}
                  {/if}
                {/if}
              </div>
              <div>
                <div class="flex gap-4 items-center">
                  {@render Shortcut({ text: 'Navigate', keybind: ['↑', '↓']})}
                  {#if calculatorResult && selectedIndex === 0}
                  {@render Shortcut({ text: 'Copy result', keybind: ['↵']})}
                  {:else}
                  {@render Shortcut({ text: 'Select', keybind: ['↵']})}
                  {/if}
                </div>
                {#if isIndexing}
                  <div class="inset-x-0 top-0">
                    <div class="absolute right-2 -bottom-4 text-[10px] text-zinc-500 dark:text-zinc-400">
                      Indexing
                    </div>
                    <div class="overflow-hidden h-0.5 bg-zinc-200 dark:bg-zinc-700">
                      <div 
                        class="h-full bg-blue-500 transition-all duration-300 ease-out"
                        style="width: {(completedJobs / totalJobs) * 100}%"
                      ></div>
                    </div>
                  </div>
                {/if}
              </div>
            </div>
          {/if}
        </div>
      </div>
    </div>
  </div>
 {/if}
 {#snippet Shortcut({ text, keybind }: { text: string, keybind: string[] }) }
  <div class="flex gap-2 items-center">
    <div class="flex gap-1 items-center">
      {#each keybind as key}
        <kbd class="px-1 py-0.5 text-[0.8rem] text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
      {/each}
    </div>
    <span>{text}</span>
  </div>
 {/snippet}
 <style>
  :global(.highlight) {
    background-color: rgba(200, 200, 200, 0.3);
    font-weight: 500;
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 -2px;
  }
  .dark :global(.highlight) {
    background-color: rgba(79, 79, 79, 0.2);
  }
 </style>
@@ -0,0 +1,193 @@
 export const unitFullNames: Record<string, string> = {
  // --- Length ---
  m: "Meters",
  km: "Kilometers",
  cm: "Centimeters",
  mm: "Millimeters",
  µm: "Micrometers",
  nm: "Nanometers",
  pm: "Picometers",
  fm: "Femtometers",
  am: "Attometers",
  zm: "Zeptometers",
  ym: "Yoctometers",
  mi: "Miles",
  yd: "Yards",
  ft: "Feet",
  in: "Inches",
  nmi: "Nautical Miles",
  angstrom: "Angstroms",
  au: "Astronomical Units",
  ly: "Light Years",
  pc: "Parsecs",
  // --- Mass ---
  kg: "Kilograms",
  g: "Grams",
  mg: "Milligrams",
  µg: "Micrograms",
  ng: "Nanograms",
  lb: "Pounds",
  oz: "Ounces",
  ton: "Tons (Imperial)",
  tonne: "Tonnes (Metric)",
  slug: "Slugs",
  stone: "Stones",
  // --- Time ---
  s: "Seconds",
  ms: "Milliseconds",
  µs: "Microseconds",
  ns: "Nanoseconds",
  ps: "Picoseconds",
  min: "Minutes",
  h: "Hours",
  day: "Days",
  week: "Weeks",
  month: "Months (30 days)",
  year: "Years (365 days)",
  fortnight: "Fortnights",
  // --- Temperature ---
  K: "Kelvin",
  degC: "Degrees Celsius",
  degF: "Degrees Fahrenheit",
  degR: "Degrees Rankine",
  // --- Volume ---
  "m³": "Cubic Meters",
  "cm³": "Cubic Centimeters",
  "mm³": "Cubic Millimeters",
  l: "Liters",
  ml: "Milliliters",
  gal: "Gallons (US)",
  qt: "Quarts (US)",
  pt: "Pints (US)",
  cup: "Cups (US)",
  floz: "Fluid Ounces (US)",
  tbsp: "Tablespoons (US)",
  tsp: "Teaspoons (US)",
  // --- Area ---
  "m²": "Square Meters",
  "km²": "Square Kilometers",
  "cm²": "Square Centimeters",
  "mm²": "Square Millimeters",
  ha: "Hectares",
  acre: "Acres",
  "ft²": "Square Feet",
  "in²": "Square Inches",
  "mi²": "Square Miles",
  // --- Speed ---
  "m/s": "Meters per Second",
  "km/h": "Kilometers per Hour",
  mph: "Miles per Hour",
  knot: "Knots",
  // --- Acceleration ---
  "m/s²": "Meters per Second Squared",
  // --- Force ---
  N: "Newtons",
  lbf: "Pound-Force",
  dyn: "Dynes",
  // --- Energy ---
  J: "Joules",
  kJ: "Kilojoules",
  cal: "Calories",
  kcal: "Kilocalories",
  Wh: "Watt Hours",
  kWh: "Kilowatt Hours",
  BTU: "British Thermal Units",
  erg: "Ergs",
  eV: "Electronvolts",
  // --- Power ---
  W: "Watts",
  kW: "Kilowatts",
  MW: "Megawatts",
  GW: "Gigawatts",
  hp: "Horsepower",
  // --- Pressure ---
  Pa: "Pascals",
  kPa: "Kilopascals",
  bar: "Bar",
  atm: "Atmospheres",
  psi: "Pounds per Square Inch",
  torr: "Torr",
  mmHg: "Millimeters of Mercury",
  // --- Frequency ---
  Hz: "Hertz",
  kHz: "Kilohertz",
  MHz: "Megahertz",
  GHz: "Gigahertz",
  THz: "Terahertz",
  // --- Electric ---
  V: "Volts",
  A: "Amperes",
  C: "Coulombs",
  Ω: "Ohms",
  F: "Farads",
  S: "Siemens",
  H: "Henries",
  Wb: "Webers",
  T: "Teslas",
  lx: "Lux",
  // --- Angle & Rotation ---
  rad: "Radians",
  deg: "Degrees",
  grad: "Gradians",
  cycle: "Cycles",
  turn: "Turns",
  rev: "Revolutions",
  // --- Charge & Capacitance ---
  e: "Elementary Charges",
  // --- Magnetic & Light ---
  lm: "Lumens",
  ph: "Photons",
  // --- Miscellaneous / Dimensionless ---
  "%": "Percent",
  ppm: "Parts per Million",
  ppb: "Parts per Billion",
  pptr: "Parts per Trillion",
  dB: "Decibels",
  bit: "Bits",
  byte: "Bytes",
  // --- Digital Storage ---
  b: "Bits",
  B: "Bytes",
  kb: "Kilobits",
  kB: "Kilobytes",
  Mb: "Megabits",
  MB: "Megabytes",
  Gb: "Gigabits",
  GB: "Gigabytes",
  Tb: "Terabits",
  TB: "Terabytes",
  // --- Currency ---
  USD: "US Dollars",
  EUR: "Euros",
  GBP: "British Pounds",
  AUD: "Australian Dollars",
  CAD: "Canadian Dollars",
  CHF: "Swiss Francs",
  JPY: "Japanese Yen",
  CNY: "Chinese Yuan",
  INR: "Indian Rupees",
  NZD: "New Zealand Dollars",
  SEK: "Swedish Krona",
  NOK: "Norwegian Krone",
  SGD: "Singapore Dollars",
  HKD: "Hong Kong Dollars",
 };
@@ -0,0 +1,85 @@
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
 export interface BaseCommandItem {
  id: string;
  text: string;
  category: string;
  icon: string;
  action: () => void;
  keywords?: string[];
  priority?: number;
 }
 export interface StaticCommandItem extends BaseCommandItem {
  keybind?: string[];
  keybindLabel?: string[];
 }
 const staticCommands: StaticCommandItem[] = [
  {
    id: "home",
    icon: "\ueb4c",
    category: "navigation",
    text: "Home",
    keybind: ["alt+h"],
    keybindLabel: ["Alt", "H"],
    action: () => {
      window.location.hash = "?page=/home";
      loadHomePage();
    },
    priority: 4,
  },
  {
    id: "messages",
    icon: "\uebfd",
    category: "navigation",
    text: "Direct Messages",
    keybind: ["alt+m"],
    keybindLabel: ["Alt", "M"],
    action: () => {
      window.location.hash = "?page=/messages";
    },
    priority: 4,
  },
  {
    id: "timetable",
    icon: "\ue9cd",
    category: "navigation",
    text: "Timetable",
    keybind: ["alt+t"],
    keybindLabel: ["Alt", "T"],
    action: () => {
      window.location.hash = "?page=/timetable";
    },
    priority: 4,
  },
  {
    id: "assessments",
    icon: "\ueac3",
    category: "navigation",
    text: "Assessments",
    keybind: ["alt+a"],
    keybindLabel: ["Alt", "A"],
    action: () => {
      window.location.hash = "?page=/assessments";
    },
    priority: 4,
  },
  {
    id: "toggle-dark-mode",
    icon: "\uecfe",
    category: "action",
    text: "Toggle Dark Mode",
    action: () => (settingsState.DarkMode = !settingsState.DarkMode),
    priority: 2,
    keywords: ["theme", "appearance"],
  },
 ];
 /**
 * Returns the predefined list of static commands.
 */
 export const getStaticCommands = (): StaticCommandItem[] => {
  return [...staticCommands];
 };
@@ -0,0 +1,89 @@
 import type { Plugin } from "@/plugins/core/types";
 import { BasePlugin } from "@/plugins/core/settings";
 import {
  booleanSetting,
  defineSettings,
  Setting,
  stringSetting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import { runIndexing } from "../indexing/indexer";
 import { initVectorSearch } from "../search/vector/vectorSearch";
 import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
 const settings = defineSettings({
  searchHotkey: stringSetting({
    default: "ctrl+k",
    title: "Search Hotkey",
    description: "Keyboard shortcut to open the search (cmd on Mac)",
  }),
  showRecentFirst: booleanSetting({
    default: true,
    title: "Show Recent First",
    description: "Sort dynamic content by most recent first",
  }),
  transparencyEffects: booleanSetting({
    default: true,
    title: "Transparency Effects",
    description: "Enable transparency effects for the search bar",
  }),
  runIndexingOnLoad: booleanSetting({
    default: true,
    title: "Index on Page Load",
    description: "Run content indexing when SEQTA loads",
  }),
 });
 class GlobalSearchPlugin extends BasePlugin<typeof settings> {
  @Setting(settings.searchHotkey)
  searchHotkey!: string;
  @Setting(settings.showRecentFirst)
  showRecentFirst!: boolean;
  @Setting(settings.transparencyEffects)
  transparencyEffects!: boolean;
  @Setting(settings.runIndexingOnLoad)
  runIndexingOnLoad!: boolean;
 }
 const settingsInstance = new GlobalSearchPlugin();
 const globalSearchPlugin: Plugin<typeof settings> = {
  id: "global-search",
  name: "Global Search",
  description: "Quick search for everything in SEQTA",
  version: "1.0.0",
  settings: settingsInstance.settings,
  disableToggle: true,
  styles: styles,
  run: async (api) => {
    const appRef = { current: null };
    initVectorSearch();
    if (api.settings.runIndexingOnLoad) {
      setTimeout(async () => {
        await runIndexing();
      }, 2000);
    }
    const title = document.querySelector("#title");
    if (title) {
      mountSearchBar(title, api, appRef);
    } else {
      await waitForElm("#title", true, 100, 60);
      mountSearchBar(document.querySelector("#title") as Element, api, appRef);
    }
    return () => {
      cleanupSearchBar(appRef);
    };
  },
 };
 export default globalSearchPlugin;
@@ -0,0 +1,56 @@
 import renderSvelte from "@/interface/main";
 import SearchBar from "../components/SearchBar.svelte";
 import { unmount } from "svelte";
 import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
 export function mountSearchBar(
  titleElement: Element,
  api: any,
  appRef: { current: any }
 ) {
  if (titleElement.querySelector(".search-trigger")) {
    return;
  }
  const searchButton = document.createElement("div");
  searchButton.className = "search-trigger";
  searchButton.innerHTML = /* html */ `
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
    <p>Quick search...</p>
    <span style="margin-left: auto; display: flex; align-items: center; color: #777; font-size: 12px;">⌘K</span>
  `;
  titleElement.appendChild(searchButton);
  const searchRoot = document.createElement("div");
  document.body.appendChild(searchRoot);
  const searchRootShadow = searchRoot.attachShadow({ mode: "open" });
  searchButton.addEventListener("click", () => {
    // @ts-ignore - Intentionally adding to window
    window.setCommandPalleteOpen(true);
  });
  try {
    appRef.current = renderSvelte(SearchBar, searchRootShadow, {
      transparencyEffects: api.settings.transparencyEffects ? true : false,
      showRecentFirst: api.settings.showRecentFirst,
    });
  } catch (error) {
    console.error("Error rendering Svelte component:", error);
  }
 }
 export function cleanupSearchBar(appRef: { current: any }) {
  const searchButton = document.querySelector(".search-trigger");
  const searchRoot = document.querySelector(".global-search-root");
  if (searchButton) searchButton.remove();
  if (searchRoot) searchRoot.remove();
  // Clean up workers
  VectorWorkerManager.getInstance().terminate();
  unmount(appRef.current);
 }
@@ -0,0 +1,58 @@
 .search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-left: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: auto !important;
  padding: 3px 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  user-select: none;
  svg {
    opacity: 0.8;
  }
  p {
    font-size: 14px;
    margin-left: 8px;
    margin-right: 48px;
    height: 100%;
    margin-bottom: 0;
    line-height: 32px;
    font-weight: 400;
  }
 }
 /* Light mode styles */
 .search-trigger {
  background-color: rgba(248, 250, 252, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #555 !important;
  p {
    color: #555 !important;
  }
  svg {
    color: #555;
  }
 }
 .dark .search-trigger {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #aaa !important;
  p {
    color: #aaa !important;
  }
  svg {
    color: #aaa;
  }
 }
@@ -0,0 +1,28 @@
 import type { StaticCommandItem } from "./commands";
 import type { HydratedIndexItem } from "../indexing/types";
 export interface MatchIndices {
  readonly 0: number;
  readonly 1: number;
 }
 export interface FuseResultMatch {
  key?: string;
  value?: string;
  indices: readonly MatchIndices[];
 }
 export interface CombinedResult {
  id: string;
  type: "command" | "dynamic";
  score: number;
  item: StaticCommandItem | HydratedIndexItem;
  matches?: readonly FuseResultMatch[];
 }
 export interface FuseResult<T> {
  item: T;
  refIndex: number;
  score?: number;
  matches?: readonly FuseResultMatch[];
 }
@@ -0,0 +1,40 @@
 import type { IndexItem } from "./types";
 interface MessageMetadata {
  messageId: number;
  author: string;
  senderId: number;
  senderType: string;
  timestamp: string;
  hasAttachments: boolean;
  attachmentCount: number;
  read: boolean;
 }
 interface AssessmentMetadata {
  assessmentId?: number;
  messageId?: number;
  subject?: string;
  term?: string;
  programmeId?: number;
  metaclassId?: number;
  timestamp: string;
  isMessageBased?: boolean;
  author?: string;
 }
 type ActionHandler<T = any> = (item: IndexItem & { metadata: T }) => void;
 export const actionMap: Record<string, ActionHandler<any>> = {
  message: ((item: IndexItem & { metadata: MessageMetadata }) => {
    window.location.hash = `#?page=/messages&id=${item.metadata.messageId}`;
  }) as ActionHandler<any>,
  assessment: ((item: IndexItem & { metadata: AssessmentMetadata }) => {
    if (item.metadata.isMessageBased) {
      window.location.hash = `#?page=/messages&id=${item.metadata.messageId}`;
    } else {
      window.location.hash = `#?page=/assessments&id=${item.metadata.assessmentId}`;
    }
  }) as ActionHandler<any>,
 };
@@ -0,0 +1,202 @@
 const DB_NAME = "betterseqta-index";
 const META_STORE = "meta";
 const VERSION_KEY = "betterseqta-index-version";
 let dbPromise: Promise<IDBDatabase> | null = null;
 // Get the current version from localStorage or start at 1
 function getCurrentVersion(): number {
  const storedVersion = localStorage.getItem(VERSION_KEY);
  return storedVersion ? parseInt(storedVersion, 10) : 1;
 }
 // Update the version in localStorage
 function updateVersion(version: number) {
  localStorage.setItem(VERSION_KEY, version.toString());
 }
 function openDB(): Promise<IDBDatabase> {
  if (dbPromise) return dbPromise;
  const currentVersion = getCurrentVersion();
  dbPromise = new Promise((resolve, reject) => {
    let request: IDBOpenDBRequest;
    try {
      request = indexedDB.open(DB_NAME, currentVersion);
    } catch (e) {
      // If there's a version error, try to delete the database and start fresh
      console.warn("Database version conflict, recreating database...");
      indexedDB.deleteDatabase(DB_NAME);
      localStorage.removeItem(VERSION_KEY);
      request = indexedDB.open(DB_NAME, 1);
      updateVersion(1);
    }
    request.onupgradeneeded = (event) => {
      const db = request.result;
      const existingStores = Array.from(db.objectStoreNames);
      // Always ensure META_STORE exists
      if (!existingStores.includes(META_STORE)) {
        db.createObjectStore(META_STORE);
      }
      // Update version in localStorage to match the database
      updateVersion(event.newVersion || 1);
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => {
      console.error("Error opening database:", request.error);
      // If there's an error, try to recover by deleting and recreating
      indexedDB.deleteDatabase(DB_NAME);
      localStorage.removeItem(VERSION_KEY);
      reject(request.error);
    };
  });
  return dbPromise;
 }
 async function getStore(store: string, mode: IDBTransactionMode = "readonly") {
  const db = await openDB();
  // Create store dynamically if needed
  if (!db.objectStoreNames.contains(store)) {
    db.close();
    await upgradeDB(store);
    return getStore(store, mode);
  }
  const tx = db.transaction(store, mode);
  return tx.objectStore(store);
 }
 function upgradeDB(newStore: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const currentVersion = getCurrentVersion();
    const newVersion = currentVersion + 1;
    // Close any existing connections
    if (dbPromise) {
      dbPromise.then((db) => db.close());
      dbPromise = null;
    }
    const request = indexedDB.open(DB_NAME, newVersion);
    request.onupgradeneeded = (event) => {
      const db = request.result;
      if (!db.objectStoreNames.contains(newStore)) {
        db.createObjectStore(newStore);
      }
      // Update version in localStorage
      updateVersion(event.newVersion || newVersion);
    };
    request.onsuccess = () => {
      dbPromise = Promise.resolve(request.result);
      resolve();
    };
    request.onerror = () => {
      console.error("Error upgrading database:", request.error);
      reject(request.error);
    };
  });
 }
 export async function getAll(store: string): Promise<any[]> {
  try {
    const s = await getStore(store);
    return new Promise((resolve, reject) => {
      const req = s.getAll();
      req.onsuccess = () => resolve(req.result);
      req.onerror = () => reject(req.error);
    });
  } catch (error) {
    console.error(`Error in getAll for store ${store}:`, error);
    return [];
  }
 }
 export async function get(store: string, key: string): Promise<any> {
  try {
    const s = await getStore(store);
    return new Promise((resolve, reject) => {
      const req = s.get(key);
      req.onsuccess = () => resolve(req.result);
      req.onerror = () => reject(req.error);
    });
  } catch (error) {
    console.error(`Error in get for store ${store}, key ${key}:`, error);
    return null;
  }
 }
 export async function put(
  store: string,
  value: any,
  key?: string,
 ): Promise<void> {
  try {
    const s = await getStore(store, "readwrite");
    return new Promise((resolve, reject) => {
      const req = key ? s.put(value, key) : s.put(value);
      req.onsuccess = () => resolve();
      req.onerror = () => reject(req.error);
    });
  } catch (error) {
    console.error(`Error in put for store ${store}:`, error);
    throw error;
  }
 }
 export async function remove(store: string, key: string): Promise<void> {
  try {
    const s = await getStore(store, "readwrite");
    return new Promise((resolve, reject) => {
      const req = s.delete(key);
      req.onsuccess = () => resolve();
      req.onerror = () => reject(req.error);
    });
  } catch (error) {
    console.error(`Error in remove for store ${store}, key ${key}:`, error);
    throw error;
  }
 }
 export async function clear(store: string): Promise<void> {
  try {
    const s = await getStore(store, "readwrite");
    return new Promise((resolve, reject) => {
      const req = s.clear();
      req.onsuccess = () => resolve();
      req.onerror = () => reject(req.error);
    });
  } catch (error) {
    console.error(`Error in clear for store ${store}:`, error);
    throw error;
  }
 }
 // Helper function to reset the database if needed
 export async function resetDatabase(): Promise<void> {
  if (dbPromise) {
    const db = await dbPromise;
    db.close();
    dbPromise = null;
  }
  return new Promise((resolve, reject) => {
    const req = indexedDB.deleteDatabase(DB_NAME);
    req.onsuccess = () => {
      localStorage.removeItem(VERSION_KEY);
      resolve();
    };
    req.onerror = () => reject(req.error);
  });
 }
@@ -0,0 +1,284 @@
 import { clear, getAll, put, remove } from "./db";
 import { jobs } from "./jobs";
 import { renderComponentMap } from "./renderComponents";
 import type { HydratedIndexItem, IndexItem, Job, JobContext } from "./types";
 import { VectorWorkerManager } from "./worker/vectorWorkerManager";
 const META_STORE = "meta";
 const LOCK_KEY = "bsq-indexer-lock";
 const HEARTBEAT_INTERVAL = 10000;
 const LOCK_TIMEOUT = 20000;
 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
 function shouldRun(job: Job, lastRun?: number): boolean {
  const now = Date.now();
  if (job.frequency === "pageLoad") return true;
  if (!lastRun) return true;
  if (job.frequency.type === "interval") {
    return now - lastRun >= job.frequency.ms;
  }
  if (job.frequency.type === "expiry") {
    return now - lastRun >= job.frequency.afterMs;
  }
  return false;
 }
 function getLastRunMeta(jobId: string): Promise<number | undefined> {
  return getAll(META_STORE).then((metaItems) => {
    const match = metaItems.find((m: any) => m.jobId === jobId);
    return match?.lastRun;
  });
 }
 async function updateLastRunMeta(jobId: string): Promise<void> {
  await put(META_STORE, { jobId, lastRun: Date.now() }, jobId);
 }
 function shouldIndex(): boolean {
  const last = parseInt(localStorage.getItem(LOCK_KEY) || "0", 10);
  return isNaN(last) || Date.now() - last > LOCK_TIMEOUT;
 }
 function startHeartbeat() {
  localStorage.setItem(LOCK_KEY, `${Date.now()}`);
  heartbeatTimer = setInterval(() => {
    localStorage.setItem(LOCK_KEY, `${Date.now()}`);
  }, HEARTBEAT_INTERVAL);
 }
 function stopHeartbeat() {
  if (heartbeatTimer) clearInterval(heartbeatTimer);
  localStorage.removeItem(LOCK_KEY);
 }
 function dispatchProgress(completed: number, total: number, indexing: boolean, status?: string, detail?: string) {
  const event = new CustomEvent("indexing-progress", {
    detail: { completed, total, indexing, status, detail },
  });
  window.dispatchEvent(event);
 }
 export async function loadAllStoredItems(): Promise<HydratedIndexItem[]> {
  const all: HydratedIndexItem[] = [];
  const jobIds = Object.keys(jobs);
  for (const jobId of jobIds) {
      try {
          const items = await getAll(jobId) as IndexItem[];
          const job = jobs[jobId];
          const renderComponent = renderComponentMap[job.renderComponentId];
          if (!renderComponent) {
              console.warn(`Render component not found for job ${jobId} (ID: ${job.renderComponentId})`);
          }
          for (const item of items) {
              // Ensure item has all required fields before pushing
              if (item && item.id && item.text && item.category && item.actionId && job.renderComponentId) {
                   all.push({
                      ...item,
                      renderComponent: renderComponent || undefined, // Assign undefined if not found
                  });
              } else {
                   console.warn(`Skipping invalid item from job ${jobId}:`, item);
              }
          }
      } catch (error) {
          console.error(`Error loading items for job ${jobId}:`, error);
      }
  }
  console.debug(`[Indexer] Loaded ${all.length} items from non-vector storage.`);
  return all;
 }
 export async function runIndexing(): Promise<void> {
  if (!shouldIndex()) {
    console.debug(
      "%c[Indexer] Skipping indexing (another tab has the lock)",
      "color: gray",
    );
    return;
  }
  startHeartbeat();
  console.debug("%c[Indexer] Starting indexing...", "color: green");
  const jobIds = Object.keys(jobs);
  let completedJobs = 0;
  // Add an extra step for vectorization
  const totalSteps = jobIds.length + 1;
  dispatchProgress(completedJobs, totalSteps, true, "Starting jobs");
  const allItemsFromJobs: HydratedIndexItem[] = [];
  // --- Step 1: Run Fetching/Storing Jobs (Main Thread) ---
  for (const jobId of jobIds) {
    dispatchProgress(completedJobs, totalSteps, true, `Running job: ${jobs[jobId].label}`);
    const job = jobs[jobId];
    const lastRun = await getLastRunMeta(jobId);
    if (!shouldRun(job, lastRun)) {
      console.debug(
        `%c[Indexer] Skipping job "${jobId}" (not due)`,
        "color: gray",
      );
      completedJobs++;
      dispatchProgress(completedJobs, totalSteps, true, `Skipped job: ${job.label}`);
      continue;
    }
    // These DB operations happen on the main thread (acceptable per request)
    const getStoredItems = async () => await getAll(jobId);
    const setStoredItems = async (items: IndexItem[]) => {
      await clear(jobId);
      // Add validation before putting
      const validItems = items.filter(i => i && i.id);
      if (validItems.length !== items.length) {
          console.warn(`[Indexer Job ${jobId}] Filtered out ${items.length - validItems.length} invalid items before storing.`);
      }
      await Promise.all(validItems.map((i) => put(jobId, i, i.id)));
    };
    const addItem = async (item: IndexItem) => {
      if (item && item.id) { // Add validation
          await put(jobId, item, item.id);
      } else {
          console.warn(`[Indexer Job ${jobId}] Attempted to add invalid item:`, item);
      }
    };
    const removeItem = async (id: string) => {
      await remove(jobId, id);
    };
    const ctx: JobContext = {
      getStoredItems,
      setStoredItems,
      addItem,
      removeItem,
    };
    console.debug(`%c[Indexer] Running job "${jobId}"...`, "color: #4ea1ff");
    try {
      const newItemsRaw = await job.run(ctx);
      const stored = await getStoredItems();
      let merged = mergeItems(stored, newItemsRaw);
      if (job.purge) merged = job.purge(merged);
      await setStoredItems(merged); // Store merged non-vector data
      await updateLastRunMeta(jobId);
      // Hydrate items for vector processing
      const renderComponent = renderComponentMap[job.renderComponentId];
      if (!renderComponent) {
          console.warn(`Render component not found for job ${jobId} (ID: ${job.renderComponentId}) during hydration`);
      }
      const hydratedItems = merged
          .filter(item => item && item.id && item.text && item.category && item.actionId && job.renderComponentId) // Filter invalid before hydrating
          .map((item) => ({
            ...item,
            renderComponent: renderComponent || undefined, // Assign undefined if not found
       }));
       if (hydratedItems.length !== merged.length) {
            console.warn(`[Indexer Job ${jobId}] Filtered out ${merged.length - hydratedItems.length} invalid items during hydration.`);
       }
      allItemsFromJobs.push(...hydratedItems);
      console.debug(
        `%c[Indexer] ✅ ${job.label}: ${newItemsRaw.length} new items fetched, ${merged.length} total stored (non-vector).`,
        "color: #00c46f",
      );
    } catch (err) {
      console.debug(`%c[Indexer] ❌ ${job.label} failed:`, "color: red");
      console.error(err);
    }
    completedJobs++;
    dispatchProgress(completedJobs, totalSteps, true, `Finished job: ${job.label}`);
  }
  // --- Step 2: Delegate Vectorization to Worker (Off Main Thread) ---
  if (allItemsFromJobs.length > 0) {
    console.debug(
      `%c[Indexer] Sending ${allItemsFromJobs.length} items to worker for vectorization...`,
      "color: #4ea1ff",
    );
    dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization");
    try {
      const workerManager = VectorWorkerManager.getInstance();
      // Pass a progress callback to the worker manager
      await workerManager.processItems(allItemsFromJobs, (progress) => {
          // Update overall progress based on worker feedback
          let detailMessage = progress.message || '';
          if (progress.status === 'processing' && progress.total && progress.processed !== undefined) {
              detailMessage = `Vectorizing: ${progress.processed} / ${progress.total}`;
              // You could potentially update the 'completed' count more granularly here
              // For simplicity, we'll just update the detail message
          } else if (progress.status === 'complete') {
              detailMessage = "Vectorization complete";
              // Mark the vectorization step as complete
              dispatchProgress(totalSteps, totalSteps, true, "Vectorization finished");
          } else if (progress.status === 'error') {
              detailMessage = `Vectorization error: ${progress.message}`;
               dispatchProgress(completedJobs, totalSteps, true, "Vectorization failed", detailMessage); // Show error
          } else if (progress.status === 'started') {
              detailMessage = `Vectorization started for ${progress.total} items`;
          } else if (progress.status === 'cancelled') {
               detailMessage = `Vectorization cancelled: ${progress.message}`;
               dispatchProgress(completedJobs, totalSteps, true, "Vectorization cancelled", detailMessage);
          }
          // Update the status detail
          dispatchProgress(completedJobs, totalSteps, true, "Vectorization in progress", detailMessage);
           // When worker signals completion of *its* task, mark the final step complete
           if (progress.status === 'complete') {
               completedJobs++; // Increment completion count *after* vectorization finishes
               dispatchProgress(completedJobs, totalSteps, false, "Indexing finished"); // Set indexing to false
           } else if (progress.status === 'error' || progress.status === 'cancelled') {
               // Don't increment completed count on failure/cancel, just stop indexing indicator
                dispatchProgress(completedJobs, totalSteps, false, "Indexing stopped due to error/cancel");
           }
      });
      console.debug("%c[Indexer] Vectorization task sent to worker.", "color: green");
      // Note: runIndexing might return *before* vectorization is complete now.
      // The progress updates will signal the true end state.
    } catch (error) {
        console.error(`%c[Indexer] ❌ Failed to send items to vector worker:`, "color: red", error);
        dispatchProgress(completedJobs, totalSteps, false, "Vectorization failed", String(error)); // Stop indexing indicator
    }
  } else {
    console.debug("%c[Indexer] No items to send for vectorization.", "color: gray");
    // If no vectorization needed, indexing is done here.
    completedJobs++; // Count the "skipped" vectorization step
    dispatchProgress(completedJobs, totalSteps, false, "Indexing finished (no vectorization needed)");
  }
  // Stop heartbeat ONLY when all jobs *and* the vectorization dispatch are done.
  // The actual *completion* of vectorization is now asynchronous.
  stopHeartbeat();
  // Final progress update might be handled by the worker callback now.
  // dispatchProgress(completedJobs, totalSteps, false); // This might be premature
 }
 function mergeItems(existing: IndexItem[], incoming: IndexItem[]): IndexItem[] {
  const map = new Map<string, IndexItem>();
  // Prioritize incoming items if IDs clash
  for (const item of existing) {
       if (item && item.id) map.set(item.id, item);
  }
  for (const item of incoming) {
      if (item && item.id) map.set(item.id, item);
  }
  return Array.from(map.values());
 }
@@ -0,0 +1,351 @@
 import type { Job } from "./types";
 import type { IndexItem } from "./types";
 interface MessageNotification {
  notificationID: number;
  type: "message";
  message: {
    subtitle: string;
    messageID: number;
    title: string;
  };
  timestamp: string;
 }
 interface AssessmentNotification {
  notificationID: number;
  type: "coneqtassessments";
  coneqtAssessments: {
    programmeID: number;
    metaclassID: number;
    subtitle: string;
    term: string;
    title: string;
    assessmentID: number;
    subjectCode: string;
  };
  timestamp: string;
 }
 type Notification = MessageNotification | AssessmentNotification;
 interface MessageListResponse {
  payload: {
    hasMore: boolean;
    messages: {
      date: string;
      attachments: boolean;
      attachmentCount: number;
      read: number;
      sender: string;
      sender_id: number;
      sender_type: string;
      subject: string;
      id: number;
      participants: Array<{
        name: string;
        photo: string;
        type: string;
      }>;
    }[];
    ts: string;
  };
  status: string;
 }
 interface MessageContentResponse {
  payload: {
    date: string;
    blind: boolean;
    read: boolean;
    subject: string;
    sender_type: string;
    sender_id: number;
    starred: boolean;
    contents: string;
    sender: string;
    files: any[];
    id: number;
    participants: Array<{
      read: number;
      name: string;
      photo: string;
      id: number;
      type: string;
    }>;
  };
  status: string;
 }
 // Helper to strip HTML tags from text
 function stripHtmlTags(html: string): string {
  return html.replace(/<[^>]*>/g, "");
 }
 // Helper to fetch messages with pagination
 async function fetchMessages(
  offset: number = 0,
  limit: number = 100,
 ): Promise<MessageListResponse> {
  const response = await fetch(
    `${location.origin}/seqta/student/load/message`,
    {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify({
        searchValue: "",
        sortBy: "date",
        sortOrder: "desc",
        action: "list",
        label: "inbox",
        offset,
        limit,
        datetimeUntil: null,
      }),
    },
  );
  return await response.json();
 }
 // Helper to fetch message content
 async function fetchMessageContent(
  messageId: number,
 ): Promise<MessageContentResponse> {
  const response = await fetch(
    `${location.origin}/seqta/student/load/message`,
    {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify({
        action: "message",
        id: messageId,
      }),
    },
  );
  return await response.json();
 }
 // Helper to fetch notifications
 async function fetchNotifications(): Promise<Notification[]> {
  const response = await fetch(`${location.origin}/seqta/student/heartbeat?`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify({
      timestamp: "1970-01-01 00:00:00.0",
      hash: "#?page=/notifications",
    }),
  });
  const json = await response.json();
  return json.notifications ?? [];
 }
 export const jobs: Record<string, Job> = {
  messages: {
    id: "messages",
    label: "Messages",
    renderComponentId: "message",
    frequency: { type: "expiry", afterMs: 1000 * 60 * 5 }, // every 5 minutes
    run: async (ctx) => {
      // Get existing items first
      const existing = await ctx.getStoredItems();
      const existingIds = new Set(existing.map((i) => i.id));
      const newItems: IndexItem[] = [];
      let offset = 0;
      const limit = 100;
      let hasMore = true;
      let consecutiveExisting = 0;
      // Fetch all messages with pagination
      while (hasMore) {
        try {
          const response = await fetchMessages(offset, limit);
          if (response.status !== "200") {
            console.error("Failed to fetch messages:", response);
            break;
          }
          const messages = response.payload.messages;
          hasMore = response.payload.hasMore;
          // Process each message
          for (const message of messages) {
            const id = message.id.toString();
            // Skip if we already have this message
            if (existingIds.has(id)) {
              consecutiveExisting++;
              // If we've found 20 consecutive existing messages, assume we've caught up
              if (consecutiveExisting >= 20) {
                console.debug(
                  "[Messages Job] Found 20 consecutive existing messages, stopping fetch",
                );
                hasMore = false;
                break;
              }
              continue;
            }
            // Reset consecutive counter when we find a new message
            consecutiveExisting = 0;
            try {
              // Fetch message content
              const contentResponse = await fetchMessageContent(message.id);
              if (contentResponse.status !== "200") {
                console.error(
                  "Failed to fetch message content:",
                  contentResponse,
                );
                continue;
              }
              const content = stripHtmlTags(contentResponse.payload.contents);
              newItems.push({
                id,
                text: message.subject,
                category: "messages",
                content: `From: ${message.sender}\n\n${content}`,
                dateAdded: new Date(message.date).getTime(),
                metadata: {
                  messageId: message.id,
                  author: message.sender,
                  senderId: message.sender_id,
                  senderType: message.sender_type,
                  timestamp: message.date,
                  hasAttachments: message.attachments,
                  attachmentCount: message.attachmentCount,
                  read: message.read === 1,
                },
                actionId: "message",
                renderComponentId: "message",
              });
              // Add to existingIds as we process to prevent duplicates in the same run
              existingIds.add(id);
            } catch (error) {
              console.error("Error fetching message content:", error);
              continue;
            }
          }
          offset += limit;
        } catch (error) {
          console.error("Error fetching messages:", error);
          break;
        }
        // Small delay to avoid overwhelming the server
        await new Promise((resolve) => setTimeout(resolve, 100));
      }
      console.debug(`[Messages Job] Found ${newItems.length} new messages`);
      return newItems;
    },
    purge: (items) => {
      // Keep messages from the last 30 days
      const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
      return items.filter((i) => i.dateAdded >= cutoff);
    },
  },
  assessments: {
    id: "assessments",
    label: "Assessments",
    renderComponentId: "assessment",
    frequency: { type: "expiry", afterMs: 1000 * 60 * 15 }, // every 15 minutes
    run: async (ctx) => {
      const notifications = await fetchNotifications();
      const assessmentNotifications = notifications.filter(
        (n): n is MessageNotification | AssessmentNotification =>
          n.type === "coneqtassessments" ||
          (n.type === "message" &&
            n.message.title.toLowerCase().includes("assessment")),
      );
      const existing = await ctx.getStoredItems();
      const existingIds = new Set(existing.map((i) => i.id));
      const newItems: IndexItem[] = [];
      for (const notification of assessmentNotifications) {
        const id = notification.notificationID.toString();
        if (existingIds.has(id)) continue;
        if (notification.type === "coneqtassessments") {
          const { coneqtAssessments: assessment } = notification;
          newItems.push({
            id,
            text: assessment.title,
            category: "assessments",
            content: assessment.subtitle,
            dateAdded: new Date(notification.timestamp).getTime(),
            metadata: {
              assessmentId: assessment.assessmentID,
              subject: assessment.subjectCode,
              term: assessment.term,
              programmeId: assessment.programmeID,
              metaclassId: assessment.metaclassID,
              timestamp: notification.timestamp,
            },
            actionId: "assessment",
            renderComponentId: "assessment",
          });
        } else {
          // Handle message-based assessments
          const { message } = notification;
          newItems.push({
            id,
            text: message.title,
            category: "assessments",
            content: `From: ${message.subtitle}`,
            dateAdded: new Date(notification.timestamp).getTime(),
            metadata: {
              messageId: message.messageID,
              author: message.subtitle,
              timestamp: notification.timestamp,
              isMessageBased: true,
            },
            actionId: "assessment",
            renderComponentId: "assessment",
          });
        }
      }
      return newItems;
    },
    purge: (items) => {
      // Keep assessments from the current year
      const date = new Date();
      date.setMonth(0); // January
      date.setDate(1);
      date.setHours(0);
      date.setMinutes(0);
      date.setSeconds(0);
      const cutoff = date.getTime();
      return items.filter((i) => i.dateAdded >= cutoff);
    },
  },
  // We can add more job types here as needed:
  // - notices
  // - timetable changes
  // - homework
  // etc.
 };
@@ -0,0 +1,10 @@
 import type { SvelteComponent } from "svelte";
 import AssessmentComponent from "../components/AssessmentItem.svelte";
 // import other components as needed
 export const renderComponentMap: Record<string, typeof SvelteComponent> = {
  assessment: AssessmentComponent as unknown as typeof SvelteComponent,
  // messages: MessageComponent,
  // subject: SubjectComponent,
  // etc...
 };
@@ -0,0 +1,37 @@
 import type { SvelteComponent } from "svelte";
 export interface IndexItem {
  id: string;
  text: string;
  category: string;
  content: string;
  dateAdded: number;
  metadata: Record<string, any>;
  actionId: string;
  renderComponentId: string;
 }
 export interface HydratedIndexItem extends IndexItem {
  renderComponent: typeof SvelteComponent;
 }
 export type Frequency =
  | "pageLoad"
  | { type: "interval"; ms: number }
  | { type: "expiry"; afterMs: number };
 export interface JobContext {
  getStoredItems: () => Promise<IndexItem[]>;
  setStoredItems: (items: IndexItem[]) => Promise<void>;
  addItem: (item: IndexItem) => Promise<void>;
  removeItem: (id: string) => Promise<void>;
 }
 export interface Job {
  id: string;
  label: string;
  frequency: Frequency;
  renderComponentId: string;
  run: (ctx: JobContext) => Promise<IndexItem[]>;
  purge?: (items: IndexItem[]) => IndexItem[];
 }
@@ -0,0 +1,419 @@
 import {
  EmbeddingIndex,
  getEmbedding,
  initializeModel,
 } from "client-vector-search";
 import type { HydratedIndexItem } from "../types";
 let vectorIndex: EmbeddingIndex | null = null;
 let isInitialized = false;
 let currentAbortController: AbortController | null = null;
 async function initWorker() {
  if (isInitialized) {
    console.debug("Vector worker already initialized.");
    return;
  }
  console.debug("Initializing vector worker...");
  try {
    await initializeModel();
    vectorIndex = new EmbeddingIndex([]);
    const stored = await vectorIndex.getAllObjectsFromIndexedDB();
    if (stored.length > 0) {
      stored.forEach((item) => vectorIndex!.add(item));
      console.debug(
        `Vector index loaded ${stored.length} items from IndexedDB.`,
      );
    } else {
      console.debug("No existing vector index found in IndexedDB.");
    }
    isInitialized = true;
    console.debug("Vector worker initialized successfully.");
  } catch (e) {
    console.error("Failed to initialize vector worker:", e);
    // Set as initialized even on error to prevent retries, but index will be null
    isInitialized = true;
    vectorIndex = null; // Ensure index is null on error
  }
 }
 async function vectorizeItem(
  item: HydratedIndexItem,
 ): Promise<(HydratedIndexItem & { embedding: number[] }) | null> {
  // Simplified for brevity - assumes embedding function doesn't need cancellation signal
  try {
    const textToEmbed = [
      item.text,
      item.content,
      item.category,
      item.metadata?.author,
      item.metadata?.subject,
    ]
      .filter(Boolean)
      .join(" ");
    const embedding = await getEmbedding(textToEmbed);
    return { ...item, embedding };
  } catch (error) {
    console.error(`Error vectorizing item ${item.id}:`, error);
    return null; // Return null if vectorization fails for an item
  }
 }
 async function processItems(items: HydratedIndexItem[], signal: AbortSignal) {
  console.debug("Worker received process request.");
  if (!vectorIndex) {
    console.warn(
      "Processing requested but vector index not ready. Attempting init.",
    );
    await initWorker(); // Attempt initialization if not ready
    if (!vectorIndex) {
      // Check again after attempt
      self.postMessage({
        type: "progress",
        data: {
          status: "error",
          message:
            "Vector index not available for processing after init attempt.",
        },
      });
      return;
    }
  }
  // Find items we haven't processed yet by checking against the index instance
  const unprocessedItems = items.filter((item) => {
    if (signal.aborted) return false; // Check cancellation during filtering
    try {
      // Check if the item ID already exists in the index (loaded or added)
      return !vectorIndex!.get({ id: item.id });
    } catch (e) {
      // If get throws (e.g., item not found), it means it's unprocessed
      return true;
    }
  });
  if (signal.aborted) {
    console.debug("Processing cancelled before starting.");
    self.postMessage({
      type: "progress",
      data: {
        status: "cancelled",
        message: "Processing cancelled before start",
      },
    });
    return;
  }
  if (unprocessedItems.length === 0) {
    console.debug("No new items to process.");
    self.postMessage({
      type: "progress",
      data: { status: "complete", message: "No new items to process" },
    });
    return;
  }
  console.debug(`Starting processing of ${unprocessedItems.length} items.`);
  self.postMessage({
    type: "progress",
    data: {
      status: "started",
      total: unprocessedItems.length,
      processed: 0,
    },
  });
  const BATCH_SIZE = 5;
  let processedCount = 0;
  for (let i = 0; i < unprocessedItems.length; i += BATCH_SIZE) {
    if (signal.aborted) {
      console.debug("Processing cancelled during batching.");
      self.postMessage({
        type: "progress",
        data: {
          status: "cancelled",
          message: "Processing cancelled during batching",
        },
      });
      return;
    }
    const batch = unprocessedItems.slice(i, i + BATCH_SIZE);
    // Vectorize batch
    const vectorizationResults = await Promise.all(batch.map(vectorizeItem));
    const successfullyVectorized = vectorizationResults.filter(
      (result) => result !== null,
    ) as (HydratedIndexItem & { embedding: number[] })[];
    if (signal.aborted) {
      console.debug("Processing cancelled after vectorization batch.");
      self.postMessage({
        type: "progress",
        data: {
          status: "cancelled",
          message: "Processing cancelled after vectorization",
        },
      });
      return;
    }
    // Add successfully vectorized items to index
    if (successfullyVectorized.length > 0) {
      try {
        successfullyVectorized.forEach((item) => vectorIndex!.add(item));
      } catch (e) {
        console.error("Error adding batch to index:", e);
        self.postMessage({
          type: "progress",
          data: { status: "error", message: `Error adding to index: ${e}` },
        });
        // Decide whether to continue or stop on error
        // return; // Example: Stop processing if adding fails
      }
    }
    if (signal.aborted) {
      console.debug("Processing cancelled before saving batch.");
      self.postMessage({
        type: "progress",
        data: {
          status: "cancelled",
          message: "Processing cancelled before saving",
        },
      });
      return;
    }
    // Save index after processing the batch
    try {
      await vectorIndex!.saveIndex("indexedDB");
      console.debug(`Saved index after processing batch ${i / BATCH_SIZE + 1}`);
    } catch (e) {
      console.error("Error saving index batch:", e);
      self.postMessage({
        type: "progress",
        data: { status: "error", message: `Error saving index batch: ${e}` },
      });
      // Continue processing next batch even if saving failed? Or stop?
      // return; // Example: Stop if saving fails
    }
    processedCount = Math.min(i + BATCH_SIZE, unprocessedItems.length);
    // Report progress
    self.postMessage({
      type: "progress",
      data: {
        status: "processing",
        total: unprocessedItems.length,
        processed: processedCount,
      },
    });
    // Yield control briefly to allow other messages (like cancellation) to be processed
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
  if (!signal.aborted) {
    console.debug("Processing completed successfully.");
    self.postMessage({
      type: "progress",
      data: { status: "complete", message: "All items processed successfully" },
    });
  } else {
    console.debug("Processing completed, but was cancelled.");
    // No need to send 'cancelled' again if already sent during batching
    // self.postMessage({ type: 'progress', data: { status: 'cancelled', message: 'Processing finished but was cancelled' }});
  }
 }
 async function search(
  query: string,
  topK: number,
  signal: AbortSignal,
  messageId: string,
 ) {
  console.debug(
    `Worker received search request (ID: ${messageId}): "${query}"`,
  );
  if (!vectorIndex) {
    console.warn(
      `Search (ID: ${messageId}) requested but vector index not ready. Attempting init.`,
    );
    await initWorker(); // Attempt initialization
    // Re-check after waiting/init attempt
    if (!vectorIndex) {
      console.error(
        `Search (ID: ${messageId}) failed: Vector index unavailable after init attempt.`,
      );
      self.postMessage({
        type: "searchError",
        data: { messageId, error: "Vector index not available." },
      });
      return;
    }
    console.debug(
      `Vector index ready after init for search (ID: ${messageId}).`,
    );
  }
  if (signal.aborted) {
    console.debug(`Search (ID: ${messageId}) cancelled before starting.`);
    self.postMessage({ type: "searchCancelled", data: { messageId } });
    return;
  }
  try {
    console.debug(`Getting embedding for query (ID: ${messageId})...`);
    const queryEmbedding = await getEmbedding(query);
    if (signal.aborted) {
      console.debug(`Search (ID: ${messageId}) cancelled after embedding.`);
      self.postMessage({ type: "searchCancelled", data: { messageId } });
      return;
    }
    console.debug(`Performing vector search (ID: ${messageId})...`);
    // Await the search and let TypeScript infer the type
    const results = await vectorIndex!.search(queryEmbedding, {
      topK,
      useStorage: "indexedDB", // Ensure we search the stored index
    });
    console.debug(
      `Vector search (ID: ${messageId}) completed with ${results.length} results.`,
    );
    if (signal.aborted) {
      console.debug(
        `Search (ID: ${messageId}) cancelled after search completed, discarding results.`,
      );
      self.postMessage({ type: "searchCancelled", data: { messageId } });
      return;
    }
    // Post results back to the main thread
    self.postMessage({ type: "searchResults", data: { messageId, results } });
  } catch (error) {
    console.error(`Vector search error in worker (ID: ${messageId}):`, error);
    // Ensure signal isn't checked *after* an error occurred before posting error message
    if (!signal.aborted) {
      // Only post error if not cancelled
      self.postMessage({
        type: "searchError",
        data: {
          messageId,
          error: error instanceof Error ? error.message : String(error),
        },
      });
    } else {
      console.debug(
        `Search (ID: ${messageId}) encountered error but was cancelled, suppressing error message.`,
      );
      self.postMessage({ type: "searchCancelled", data: { messageId } }); // Still notify of cancellation
    }
  }
 }
 // Handle messages from the main thread
 self.addEventListener("message", async (e) => {
  // Make sure data and type exist
  if (!e.data || !e.data.type) {
    console.warn("Worker received message with no data or type.");
    return;
  }
  const { type, data, messageId } = e.data; // messageId used for requests needing response/cancellation tracking
  // Cancel previous long-running operation (process or search) if a new one starts
  if (type === "process" || type === "search") {
    if (currentAbortController) {
      console.debug(
        `Worker cancelling previous operation due to new '${type}' request.`,
      );
      currentAbortController.abort(`New '${type}' operation requested`);
    }
    currentAbortController = new AbortController();
    console.debug(`Worker starting new '${type}' operation.`);
  }
  // Use the signal from the *current* controller for the task being started
  const signal = currentAbortController?.signal;
  switch (type) {
    case "process":
      if (signal && data?.items) {
        await processItems(data.items, signal);
      } else if (!signal) {
        console.error(
          "Process message received but no abort signal available.",
        );
      } else if (!data?.items) {
        console.error("Process message received without 'items' data.");
        self.postMessage({
          type: "progress",
          data: {
            status: "error",
            message: "Process command received without items.",
          },
        });
      }
      break;
    case "search":
      if (signal && messageId && typeof data?.query === "string") {
        await search(data.query, data.topK ?? 10, signal, messageId);
      } else {
        const errorReason = !signal
          ? "Missing signal"
          : !messageId
            ? "Missing messageId"
            : "Missing or invalid query";
        console.error(`Search message received invalid: ${errorReason}.`, {
          data,
          messageId,
          signalExists: !!signal,
        });
        // Send an error back if messageId exists
        if (messageId) {
          self.postMessage({
            type: "searchError",
            data: { messageId, error: `Worker internal error: ${errorReason}` },
          });
        }
      }
      break;
    case "init":
      // Init should not be cancellable in the same way, it's foundational
      // Check if already initialized before potentially running it again
      if (!isInitialized) {
        await initWorker();
        self.postMessage({ type: "ready" }); // Signal ready *after* init attempt
      } else {
        console.debug("Received init message, but worker already initialized.");
        self.postMessage({ type: "ready" }); // Signal ready anyway
      }
      break;
    // No explicit 'cancel' case needed as new tasks auto-cancel previous ones
    default:
      console.warn("Unknown message type received by vector worker:", type);
  }
 });
 // Initial check or trigger for initialization when the worker starts
 initWorker()
  .then(() => {
    self.postMessage({ type: "ready" });
  })
  .catch((err) => {
    console.error("Initial worker initialization failed:", err);
    // Still need to signal readiness, perhaps with an error state?
    // Or rely on the first 'process' or 'search' to retry init.
    // For now, just signal ready, but the index might be null.
    self.postMessage({ type: "ready" });
  });
@@ -0,0 +1,221 @@
 import type { HydratedIndexItem } from '../types';
 import vectorWorker from './vectorWorker.ts?inlineWorker';
 import type { SearchResult } from 'client-vector-search';
 export type ProgressCallback = (data: {
  status: 'started' | 'processing' | 'complete' | 'error' | 'cancelled';
  total?: number;
  processed?: number;
  message?: string;
 }) => void;
 export class VectorWorkerManager {
  private static instance: VectorWorkerManager;
  private worker: Worker | null = null;
  private isInitialized = false;
  private readyPromise: Promise<void> | null = null; // To await initialization
  private progressCallback: ProgressCallback | null = null;
  private searchPromises = new Map<string, { resolve: (value: SearchResult[]) => void, reject: (reason?: any) => void, timer: NodeJS.Timeout }>();
  private debounceTimer: NodeJS.Timeout | null = null;
  private lastSearchParams: { query: string; topK: number; resolve: (results: SearchResult[]) => void, reject: (reason?: any) => void } | null = null;
  private constructor() {
    // Start initialization immediately, but allow awaiting it
    this.readyPromise = this.initWorker();
  }
  static getInstance(): VectorWorkerManager {
    if (!VectorWorkerManager.instance) {
      VectorWorkerManager.instance = new VectorWorkerManager();
    }
    return VectorWorkerManager.instance;
  }
  private async initWorker(): Promise<void> {
    // If already initialized or initializing, return the existing promise
    if (this.isInitialized) return Promise.resolve();
    if (this.readyPromise) return this.readyPromise;
    return new Promise<void>((resolve, reject) => {
        // Create the worker
        this.worker = vectorWorker();
        const timeout = setTimeout(() => {
            console.error('Vector worker initialization timed out');
            this.worker?.terminate(); // Clean up worker if it exists
            this.worker = null;
            this.isInitialized = false; // Ensure state reflects failure
            this.readyPromise = null; // Allow retrying init later
            reject(new Error('Worker initialization timed out'));
        }, 10000); // Increased timeout
        // Set up message handling
        this.worker!.addEventListener('message', (e) => {
          const { type, data } = e.data;
          console.debug("Message from vector worker:", type, data);
          switch (type) {
            case 'ready':
              this.isInitialized = true;
              clearTimeout(timeout);
              console.debug('Vector worker initialized and ready.');
              resolve(); // Resolve the init promise
              break;
            case 'progress':
              if (this.progressCallback) {
                this.progressCallback(data);
              }
              break;
            case 'searchResults':
              const searchInfo = this.searchPromises.get(data.messageId);
              if (searchInfo) {
                clearTimeout(searchInfo.timer); // Clear timeout on success
                searchInfo.resolve(data.results);
                this.searchPromises.delete(data.messageId);
              } else {
                console.warn('Received search results for unknown messageId:', data.messageId);
              }
              break;
            case 'searchError':
              const errorInfo = this.searchPromises.get(data.messageId);
              if (errorInfo) {
                clearTimeout(errorInfo.timer); // Clear timeout on error
                errorInfo.reject(new Error(data.error));
                this.searchPromises.delete(data.messageId);
              } else {
                console.warn('Received search error for unknown messageId:', data.messageId);
              }
              break;
            case 'searchCancelled':
              const cancelledInfo = this.searchPromises.get(data.messageId);
              if (cancelledInfo) {
                 clearTimeout(cancelledInfo.timer); // Clear timeout on cancel
                 // Reject with a specific cancellation error or resolve with empty? Let's reject.
                 cancelledInfo.reject(new Error('Search cancelled by worker'));
                 this.searchPromises.delete(data.messageId);
              } else {
                console.debug('Received cancellation for unknown messageId:', data.messageId);
              }
              break;
            default:
              console.warn('Unknown message from worker:', type, data);
          }
        });
        // Initialize the worker
        this.worker!.postMessage({ type: 'init' });
    });
  }
  // Ensures worker is ready before proceeding
  private async ensureReady() {
    if (!this.readyPromise) {
        // If init wasn't called or failed, try again
        console.warn("Worker not initialized, attempting init...");
        this.readyPromise = this.initWorker();
    }
    await this.readyPromise;
    if (!this.isInitialized || !this.worker) {
        throw new Error("Vector Worker is not available after initialization attempt.");
    }
  }
  async processItems(items: HydratedIndexItem[], onProgress?: ProgressCallback) {
    await this.ensureReady(); // Wait for worker to be ready
    this.progressCallback = onProgress || null;
    // Cancel any ongoing search when starting processing
    this.cancelAllSearches("Processing started");
    console.debug(`Sending ${items.length} items to worker for processing.`);
    this.worker!.postMessage({
      type: 'process',
      data: { items }
    });
  }
  // Public search method
  public async search(query: string, topK: number = 10): Promise<SearchResult[]> {
    await this.ensureReady();
    return new Promise((resolve, reject) => {
      this.lastSearchParams = { query, topK, resolve, reject };
      const messageId = crypto.randomUUID();
      if (this.lastSearchParams && this.worker) {
        const currentParams = this.lastSearchParams; // Capture current params
        this.lastSearchParams = null; // Clear last params *before* posting
        this.debounceTimer = null;
        // Set a timeout for the search operation itself
        const searchTimeout = 10000; // e.g., 10 seconds
        const searchTimer = setTimeout(() => {
            if (this.searchPromises.has(messageId)) {
                console.error(`Search timed out for messageId: ${messageId}`);
                currentParams.reject(new Error(`Search timed out after ${searchTimeout}ms`));
                this.searchPromises.delete(messageId);
            }
        }, searchTimeout);
        this.searchPromises.set(messageId, { resolve: currentParams.resolve, reject: currentParams.reject, timer: searchTimer });
        console.debug(`Sending search request (ID: ${messageId}) to worker: "${currentParams.query}"`);
        this.worker.postMessage({
          type: "search",
          data: { query: currentParams.query, topK: currentParams.topK },
          messageId
        });
      } else if (this.lastSearchParams) {
            // This case might happen if ensureReady failed but didn't throw
            console.error("Worker unavailable when trying to send search request.");
            this.lastSearchParams.reject(new Error("Worker unavailable for search"));
            this.lastSearchParams = null;
            this.debounceTimer = null;
      }
    });
  }
  // Method to cancel all pending/debounced searches
  private cancelAllSearches(reason: string = "Cancelled") {
     if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = null;
        if (this.lastSearchParams) {
            this.lastSearchParams.reject(new Error(`Search cancelled: ${reason}`));
            this.lastSearchParams = null;
        }
     }
     // We might also want to tell the worker to cancel its *current* search
     // if it supports it, but this requires worker modification.
     // For now, just reject pending promises in the manager.
     for (const [messageId, promiseInfo] of this.searchPromises.entries()) {
        clearTimeout(promiseInfo.timer);
        promiseInfo.reject(new Error(`Search cancelled: ${reason}`));
        this.searchPromises.delete(messageId);
     }
  }
  terminate() {
    console.debug("Terminating Vector Worker Manager...");
    this.cancelAllSearches("Worker terminated"); // Cancel pending searches
    if (this.worker) {
      this.worker.terminate();
      this.worker = null;
    }
    this.isInitialized = false;
    this.readyPromise = null; // Reset init promise
    this.progressCallback = null;
    // Clear the static instance? Or assume app lifecycle handles this?
    // VectorWorkerManager.instance = null; // Uncomment if needed
  }
 }
@@ -0,0 +1,215 @@
 import Fuse, { type FuseResult } from "fuse.js";
 import { getStaticCommands, type StaticCommandItem } from "../core/commands";
 import { getDynamicItems } from "../utils/dynamicItems";
 import type { CombinedResult } from "../core/types";
 import type { HydratedIndexItem } from "../indexing/types";
 import { searchVectors } from "./vector/vectorSearch";
 import type { VectorSearchResult } from "./vector/vectorTypes";
 export function createSearchIndexes() {
  const commands = getStaticCommands();
  const dynamicItems = getDynamicItems();
  const commandOptions = {
    keys: ["text", "category", "keywords"],
    includeScore: true,
    includeMatches: true,
    threshold: 0.6,
    minMatchCharLength: 1,
    ignoreLocation: true,
    useExtendedSearch: false,
  };
  const dynamicOptions = {
    keys: [
      "text",
      "content",
      "category",
      "metadata.author",
      "metadata.subject",
    ],
    includeScore: true,
    includeMatches: true,
    threshold: 0.6,
    minMatchCharLength: 3,
    distance: 50,
    useExtendedSearch: false,
  };
  return {
    commandsFuse: new Fuse(commands, commandOptions) as Fuse<StaticCommandItem>,
    dynamicContentFuse: new Fuse(
      dynamicItems,
      dynamicOptions,
    ) as Fuse<HydratedIndexItem>,
    commands,
    dynamicItems,
  };
 }
 export function searchCommands(
  commandsFuse: Fuse<StaticCommandItem>,
  query: string,
  commandIdToItemMap: Map<string, StaticCommandItem>,
  limit = 10,
 ): CombinedResult[] {
  if (!commandsFuse) return [];
  if (!query.trim()) {
    return Array.from(commandIdToItemMap.values())
      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)) // Sort by priority when no query
      .slice(0, limit) // Limit results even when no query
      .map((item) => ({
        id: item.id,
        type: "command" as const,
        score: 100 + (item.priority ?? 0),
        item,
      }));
  }
  const searchResults = commandsFuse.search(query, { limit });
  return searchResults.map((result: FuseResult<StaticCommandItem>) => {
    const item = result.item;
    const fuseScore = 15 * (1 - (result.score || 0.5));
    const score = fuseScore + (item.priority ?? 0);
    return {
      id: item.id,
      type: "command" as const,
      score,
      item,
      matches: result.matches,
    };
  });
 }
 export function searchDynamicItems(
  dynamicContentFuse: Fuse<HydratedIndexItem>,
  query: string,
  dynamicIdToItemMap: Map<string, HydratedIndexItem>,
  limit = 10,
  sortByRecent: boolean = true, // Added option to control sorting
 ): CombinedResult[] {
  if (!dynamicContentFuse) return [];
  if (!query.trim()) {
    let items = Array.from(dynamicIdToItemMap.values());
    if (sortByRecent) {
      items = items.sort((a, b) => b.dateAdded - a.dateAdded);
    }
    return items.slice(0, limit).map((item) => ({
      id: item.id,
      type: "dynamic" as const,
      score: 80, // Assign a default score for non-searched items
      item,
    }));
  }
  const now = Date.now();
  const searchResults = dynamicContentFuse.search(query, { limit });
  return searchResults.map((result: FuseResult<HydratedIndexItem>) => {
    const item = result.item;
    const fuseScore = 10 * (1 - (result.score || 0.5));
    const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
    const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0; // Apply boost only if sorting by recent
    const score = fuseScore + recencyBoost;
    return {
      id: item.id,
      type: "dynamic" as const,
      score,
      item,
      matches: result.matches,
    };
  });
 }
 export async function performSearch(
  query: string,
  commandsFuse: Fuse<StaticCommandItem>,
  dynamicContentFuse: Fuse<HydratedIndexItem>,
  commandIdToItemMap: Map<string, StaticCommandItem>,
  dynamicIdToItemMap: Map<string, HydratedIndexItem>,
  showRecentFirst: boolean,
 ): Promise<CombinedResult[]> {
  const startTime = performance.now();
  // Get all results first
  const commandResults = searchCommands(
    commandsFuse,
    query,
    commandIdToItemMap,
  );
  const commandEndTime = performance.now();
  const dynamicResults = searchDynamicItems(
    dynamicContentFuse,
    query,
    dynamicIdToItemMap,
    10,
    showRecentFirst,
  );
  const fuseEndTime = performance.now();
  // Get vector results in parallel
  let vectorResults: VectorSearchResult[] = [];
  try {
    vectorResults = await searchVectors(query, 10);
  } catch (e) {}
  const vectorEndTime = performance.now();
  console.log("Vector results:", vectorResults);
  // Log timings
  console.log(`Command search took ${commandEndTime - startTime} milliseconds`);
  console.log(
    `Dynamic search took ${fuseEndTime - commandEndTime} milliseconds`,
  );
  console.log(`Vector search took ${vectorEndTime - fuseEndTime} milliseconds`);
  // Create a map to store our final results, using ID as key to avoid duplicates
  const resultMap = new Map<string, CombinedResult>();
  // Add command results first (they keep their original scores)
  commandResults.forEach((r) => resultMap.set(r.id, r));
  // Process dynamic results and vector results together
  const seenIds = new Set<string>();
  // Add dynamic results first
  dynamicResults.forEach((r) => {
    seenIds.add(r.id);
    const vectorMatch = vectorResults.find((v) => v.object.id === r.id);
    if (vectorMatch) {
      // If we found it in both searches, combine the scores
      resultMap.set(r.id, {
        ...r,
        score: r.score + vectorMatch.similarity * 0.6, // Boost exact matches
      });
    } else {
      // If only in Fuse results, keep as is
      resultMap.set(r.id, r);
    }
  });
  // Now add any vector results we haven't seen yet
  vectorResults.forEach((v) => {
    const id = v.object.id;
    if (!seenIds.has(id)) {
      // This is a semantic match that Fuse missed - add it with the vector similarity as score
      resultMap.set(id, {
        id,
        type: "dynamic" as const,
        score: v.similarity * 0.9, // High base score for semantic matches
        item: v.object,
      });
    }
  });
  // Convert to array and sort by score
  const results = Array.from(resultMap.values());
  results.sort((a, b) => b.score - a.score);
  return results;
 }
@@ -0,0 +1,33 @@
 import { EmbeddingIndex, getEmbedding, initializeModel } from 'client-vector-search';
 import type { HydratedIndexItem } from '../../indexing/types';
 import type { SearchResult } from 'client-vector-search';
 let vectorIndex: EmbeddingIndex | null = null;
 export async function initVectorSearch() {
  try {
    await initializeModel();
    vectorIndex = new EmbeddingIndex([]);
    vectorIndex.preloadIndexedDB();
  } catch (e) {
    console.error('Error initializing vector search', e);
  }
 }
 export interface VectorSearchResult extends SearchResult {
  object: HydratedIndexItem & { embedding: number[] };
 }
 export async function searchVectors(query: string, topK: number = 10): Promise<VectorSearchResult[]> {
  if (!vectorIndex) await initVectorSearch();
  const queryEmbedding = await getEmbedding(query.slice(0, 100));
  const results = await vectorIndex!.search(queryEmbedding, { 
    topK,
    useStorage: 'indexedDB',
    dedupeEntries: true
  });
  return results as VectorSearchResult[];
 }
@@ -0,0 +1,7 @@
 import type { SearchResult } from "client-vector-search";
 import type { HydratedIndexItem } from "../../indexing/types";
 export interface VectorSearchResult extends SearchResult {
  object: HydratedIndexItem & { embedding: number[] };
 }
@@ -0,0 +1,30 @@
 import type { SvelteComponent } from "svelte";
 import type { HydratedIndexItem } from "./indexing/types";
 export interface DynamicContentItem {
  id: string;
  text: string;
  category: string;
  content: string;
  dateAdded: number;
  metadata: Record<string, any>;
  actionId: string;
  renderComponentId: string;
  renderComponent?: typeof SvelteComponent;
 }
 let dynamicItems: HydratedIndexItem[] = [];
 /**
 * Loads a new set of dynamic items.
 */
 export function loadDynamicItems(items: HydratedIndexItem[]) {
  dynamicItems = items;
 }
 /**
 * Returns all currently loaded dynamic items.
 */
 export function getDynamicItems(): HydratedIndexItem[] {
  return dynamicItems;
 }
@@ -0,0 +1,274 @@
 import type { FuseResultMatch, MatchIndices } from "./core/types";
 /**
 * Simple utility to remove HTML tags from a string.
 */
 export function stripHtmlTags(html: string): string {
  if (!html) return "";
  return html.replace(/<[^>]*>/g, "").replace("\n", " ");
 }
 /**
 * Removes HTML tags from a string, but preserves <span class="highlight"> tags.
 */
 export function stripHtmlButKeepHighlights(html: string): string {
  if (!html) return "";
  // Use a placeholder for highlight tags, strip others, then restore placeholders.
  const highlightOpenPlaceholder = "__HIGHLIGHT_OPEN__";
  const highlightClosePlaceholder = "__HIGHLIGHT_CLOSE__";
  let processed = html.replace(
    /<span class="highlight">/g,
    highlightOpenPlaceholder,
  );
  processed = processed.replace(/<\/span>/g, (match, offset, fullString) => {
    // Only replace </span> if it likely corresponds to our highlight span
    // This is imperfect but helps avoid replacing unrelated spans.
    // Look backwards for the nearest opening placeholder.
    const lastPlaceholder = fullString.lastIndexOf(
      highlightOpenPlaceholder,
      offset,
    );
    if (lastPlaceholder !== -1) {
      // Check if there's another opening tag between the placeholder and the closing span
      const interveningContent = fullString.substring(
        lastPlaceholder + highlightOpenPlaceholder.length,
        offset,
      );
      if (!/<span/i.test(interveningContent)) {
        return highlightClosePlaceholder;
      }
    }
    return match; // Keep the original </span> if unsure
  });
  // Strip all remaining HTML tags
  processed = processed.replace(/<[^>]*>/g, "");
  // Restore the highlight tags
  processed = processed.replace(
    new RegExp(highlightOpenPlaceholder, "g"),
    '<span class="highlight">',
  );
  processed = processed.replace(
    new RegExp(highlightClosePlaceholder, "g"),
    "</span>",
  );
  return processed;
 }
 export function highlightMatch(
  text: string,
  term: string,
  matches?: readonly FuseResultMatch[],
 ): string {
  if (!term.trim() || !matches || matches.length === 0) return text;
  try {
    // Find matches for the text field or allContent that contains the text
    const fieldMatches = matches.find(
      (match) =>
        match.key === "text" ||
        (match.key === "allContent" && match.value?.includes(text)),
    );
    if (
      !fieldMatches ||
      !fieldMatches.indices ||
      fieldMatches.indices.length === 0
    ) {
      return text;
    }
    // Create a map of character positions to mark which ones need highlighting
    const highlightMap = new Array(text.length).fill(false);
    fieldMatches.indices.forEach((indices: MatchIndices) => {
      const start = indices[0];
      const end = indices[1];
      if (fieldMatches.key === "allContent") {
        // Find where our text appears in the allContent
        const allContent = fieldMatches.value;
        const textPos = allContent?.indexOf(text) ?? -1;
        // Only highlight if the match overlaps with our text
        if (textPos >= 0) {
          // Adjust start and end to be relative to our text field
          const relStart = start - textPos;
          const relEnd = end - textPos;
          // Only highlight if the match actually overlaps with our text field
          if (relEnd >= 0 && relStart < text.length) {
            // Mark the overlapping characters
            for (
              let i = Math.max(0, relStart);
              i <= Math.min(text.length - 1, relEnd);
              i++
            ) {
              highlightMap[i] = true;
            }
          }
        }
      } else {
        // Regular text field match - ensure indices are within bounds
        if (start >= 0 && end < text.length) {
          for (let i = start; i <= end; i++) {
            highlightMap[i] = true;
          }
        }
      }
    });
    let result = "";
    let inHighlight = false;
    for (let i = 0; i < text.length; i++) {
      if (highlightMap[i] && !inHighlight) {
        result += '<span class="highlight">';
        inHighlight = true;
      } else if (!highlightMap[i] && inHighlight) {
        result += "</span>";
        inHighlight = false;
      }
      result += text.charAt(i);
    }
    if (inHighlight) {
      result += "</span>";
    }
    return result;
  } catch (e) {
    console.error("Error highlighting match:", e);
    return text;
  }
 }
 // Function to extract and highlight content snippet using Fuse matches
 export function highlightSnippet(
  content: string,
  term: string,
  matches?: readonly FuseResultMatch[],
 ): string {
  if (!content || !term.trim() || !matches || matches.length === 0)
    return content;
  try {
    // Find matches for content field or allContent that contains the content
    const contentMatches = matches.find(
      (match) =>
        match.key === "content" ||
        (match.key === "allContent" && match.value?.includes(content)),
    );
    if (
      !contentMatches ||
      !contentMatches.indices ||
      contentMatches.indices.length === 0
    ) {
      // No content matches, return plain content
      return content.length > 100 ? content.substring(0, 100) + "..." : content;
    }
    // Find the match indices
    let allIndices: MatchIndices[] = contentMatches.indices as MatchIndices[];
    // If matching against allContent, adjust indices to be relative to content
    if (contentMatches.key === "allContent") {
      const allContent = contentMatches.value;
      const contentPos = allContent?.indexOf(content) ?? -1;
      if (contentPos >= 0) {
        // Adjust indices to be relative to the content field
        allIndices = allIndices
          .map(
            (indices) =>
              [
                indices[0] - contentPos,
                indices[1] - contentPos,
              ] as MatchIndices,
          )
          .filter((indices) => indices[1] >= 0 && indices[0] < content.length);
      }
    }
    if (allIndices.length === 0) {
      return content.length > 100 ? content.substring(0, 100) + "..." : content;
    }
    // Find a good center point for our snippet (average of first match)
    const firstMatch = allIndices[0];
    const matchCenter = Math.floor((firstMatch[0] + firstMatch[1]) / 2);
    // Extract a window around the match
    const windowSize = 100;
    const start = Math.max(0, matchCenter - windowSize / 2);
    const end = Math.min(content.length, matchCenter + windowSize / 2);
    // Create the basic snippet
    let snippet = content.substring(start, end);
    if (start > 0) snippet = "..." + snippet;
    if (end < content.length) snippet += "...";
    // Create a highlighting map for the snippet
    const snippetLength = snippet.length;
    const highlightMap = new Array(snippetLength).fill(false);
    // Calculate offset for the highlighting
    const startOffset = start > 0 ? start - 3 : start; // Account for '...' if present
    // Mark each matched character in the snippet
    allIndices.forEach((indices: MatchIndices) => {
      const matchStart = indices[0];
      const matchEnd = indices[1];
      // Skip matches outside our snippet window
      if (matchEnd < start || matchStart > end) return;
      // Adjust match indices to be relative to snippet
      const snippetMatchStart = Math.max(0, matchStart - startOffset);
      const snippetMatchEnd = Math.min(
        snippetLength - 1,
        matchEnd - startOffset,
      );
      // Mark characters for highlighting
      for (let i = snippetMatchStart; i <= snippetMatchEnd; i++) {
        if (i >= 0 && i < snippetLength) {
          highlightMap[i] = true;
        }
      }
    });
    // Build the highlighted snippet
    let result = "";
    let inHighlight = false;
    for (let i = 0; i < snippetLength; i++) {
      // If highlighting state changes, add appropriate tags
      if (highlightMap[i] && !inHighlight) {
        result += '<span class="highlight">';
        inHighlight = true;
      } else if (!highlightMap[i] && inHighlight) {
        result += "</span>";
        inHighlight = false;
      }
      // Add the current character
      result += snippet.charAt(i);
    }
    // Close highlight tag if we're still in one at the end
    if (inHighlight) {
      result += "</span>";
    }
    return result;
  } catch (e) {
    console.error("Error highlighting snippet:", e);
    return content.length > 100 ? content.substring(0, 100) + "..." : content;
  }
 }
@@ -0,0 +1,91 @@
 import type { Plugin } from '../../core/types';
 interface NotificationCollectorStorage {
  lastNotificationCount: number;
  lastCheckedTime: string;
 }
 const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
  id: 'notificationCollector',
  name: 'Notification Collector',
  description: 'Collects and displays SEQTA notifications',
  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    let pollInterval: number | null = null;
    // Store last notification count in storage
    if (!api.storage.lastNotificationCount) {
      api.storage.lastNotificationCount = 0;
    }
    const checkNotifications = async () => {
      try {
        const alertDiv = document.querySelector("[class*='notifications__bubble___']") as HTMLElement;
        if (api.storage.lastNotificationCount !== 0) {
          alertDiv.textContent = api.storage.lastNotificationCount.toString();
        }
        const response = await fetch(`${location.origin}/seqta/student/heartbeat?`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          body: JSON.stringify({
            timestamp: "1970-01-01 00:00:00.0",
            hash: "#?page=/home",
          })
        });
        const data = await response.json();
        // Store notification count for history
        const notificationCount = data.payload.notifications.length;
        api.storage.lastNotificationCount = notificationCount;
        api.storage.lastCheckedTime = new Date().toISOString();
        if (alertDiv) {
          alertDiv.textContent = notificationCount.toString();
        } else {
          console.info("[BetterSEQTA+] No notifications currently");
        }
      } catch (error) {
        console.error("[BetterSEQTA+] Error fetching notifications:", error);
      }
    };
    const startPolling = () => {
      if (pollInterval) return; // Already polling
      checkNotifications();
      pollInterval = window.setInterval(checkNotifications, 30000);
    };
    const stopPolling = () => {
      if (pollInterval) {
        window.clearInterval(pollInterval);
        pollInterval = null;
        const alertDiv = document.querySelector("[class*='notifications__bubble___']") as HTMLElement;
        if (alertDiv) {
          if (api.storage.lastNotificationCount > 9) {
            alertDiv.textContent = "9+";
          } else {
            alertDiv.textContent = api.storage.lastNotificationCount.toString();
          }
        }
      }
    };
    api.seqta.onMount("[class*='notifications__bubble___']", (_) => {
      startPolling();
    });
    return () => {
      stopPolling();
    };
  }
 };
 export default notificationCollectorPlugin;
@@ -0,0 +1,52 @@
 import type { Plugin } from '@/plugins/core/types';
 import { BasePlugin } from '@/plugins/core/settings';
 import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
 // Step 1: Define settings with proper typing
 const settings = defineSettings({
  someSetting: booleanSetting({
    default: true,
    title: "Test Plugin",
    description: "Some random setting",
  })
 });
 // Step 2: Create the plugin class with @Setting decorators
 class TestPluginClass extends BasePlugin<typeof settings> {
  @Setting(settings.someSetting)
  someSetting!: boolean;
 }
 // Step 3: Instantiate and plug it in
 const settingsInstance = new TestPluginClass();
 const testPlugin: Plugin<typeof settings> = {
  id: 'test',
  name: 'Test Plugin',
  description: 'A test plugin for BetterSEQTA+',
  version: '1.0.0',
  settings: settingsInstance.settings,
  disableToggle: true,
  run: async (api) => {
    console.log('Test plugin running');
    api.events.on('ping', (data) => {
      console.log('Ping received! Page changed to: ', data);
    });
    const { unregister } = api.seqta.onPageChange((page) => {
      //console.log('Page changed to', page);
      api.events.emit('ping', page);
      console.log('Current setting value:', api.settings.someSetting);
    });
    return () => {
      console.log('Test plugin stopped');
      unregister();
    }
  }
 };
 export default testPlugin;
--- a/Show More
+++ b/Show More