Merge remote-tracking branch 'origin/main' into lightweight/browser_api

; Conflicts:
;	apps/client/src/widgets/layout/StatusBar.tsx

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[*.{js,ts,tsx}]
+[*.{js,ts,tsx,css}]
 charset = utf-8
 end_of_line = lf
 indent_size = 4

.envrc

@@ -0,0 +1,3 @@
+if has nix; then
+    use flake
+fi

.github/actions/build-electron/action.yml

@@ -21,7 +21,7 @@ runs:
   # Certificate setup
   - name: Import Apple certificates
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v5
+    uses: apple-actions/import-codesign-certs@v6
     with:
       p12-file-base64: ${{ env.APPLE_APP_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_APP_CERTIFICATE_PASSWORD }}
@@ -30,7 +30,7 @@ runs:
 
   - name: Install Installer certificate
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v5
+    uses: apple-actions/import-codesign-certs@v6
     with:
       p12-file-base64: ${{ env.APPLE_INSTALLER_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_INSTALLER_CERTIFICATE_PASSWORD }}

.github/workflows/deploy-app.yml

@@ -0,0 +1,65 @@
+name: Deploy Standalone App
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - main
+    # Only run when docs files change
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+
+  # Allow manual triggering from Actions tab
+  workflow_dispatch:
+
+  # Run on pull requests for preview deployments
+  pull_request:
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+jobs:
+  build-and-deploy:
+    name: Build and Deploy App
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    # Required permissions for deployment
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write # For PR preview comments
+      id-token: write # For OIDC authentication (if needed)
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Trigger build of app
+        run: pnpm --filter=client-standalone build
+
+      - name: Deploy
+        uses: ./.github/actions/deploy-to-cloudflare-pages
+        if: github.repository == ${{ vars.REPO_MAIN }}
+        with:
+          project_name: "trilium-app"
+          comment_body: "🖥️ App preview is ready"
+          production_url: "https://app.triliumnotes.org"
+          deploy_dir: "apps/client-standalone/dist"
+          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/main-docker.yml

@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v5
+      - uses: actions/upload-artifact@v6
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -213,7 +213,7 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
@@ -227,7 +227,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v7
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

@@ -90,7 +90,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -102,7 +102,7 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         if: ${{ github.event_name == 'pull_request' }}
         with:
           name: TriliumNotes ${{ matrix.os.name }} ${{ matrix.arch }}
@@ -131,7 +131,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -77,7 +77,7 @@ jobs:
 
       - name: Upload test report
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: e2e report ${{ matrix.arch }}
           path: apps/server-e2e/test-output

.github/workflows/release.yml

@@ -73,7 +73,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
@@ -100,7 +100,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -120,14 +120,14 @@ jobs:
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v7
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.gitignore

@@ -44,8 +44,11 @@ upload
 .rollup.cache
 *.tsbuildinfo
 
+/.direnv
 /result
 .svelte-kit
 
 # docs
 site/
+apps/*/coverage
+scripts/translation/.language*.json

.nvmrc

@@ -1 +1 @@
-24.11.1
+24.12.0

.vscode/extensions.json

@@ -9,7 +9,6 @@
     "tobermory.es6-string-html",
     "vitest.explorer",
     "yzhang.markdown-all-in-one",
-    "svelte.svelte-vscode",
-    "bradlc.vscode-tailwindcss"
+    "usernamehw.errorlens"
   ]
 }

.vscode/settings.json

@@ -36,5 +36,11 @@
         "docs/**/*.png": true,
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
-    }
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "eslint.rules.customizations": [
+        { "rule": "*", "severity": "warn" }
+    ]
 }

README.md

@@ -16,13 +16,14 @@
 ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
 [![RelativeCI](https://badges.relative-ci.com/badges/Di5q7dz9daNDZ9UXi0Bp?branch=develop)](https://app.relative-ci.com/projects/Di5q7dz9daNDZ9UXi0Bp) [![Translation status](https://hosted.weblate.org/widget/trilium/svg-badge.svg)](https://hosted.weblate.org/engage/trilium/)
 
-[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README-ru.md) | [Japanese](./docs/README-ja.md) | [Italian](./docs/README-it.md) | [Spanish](./docs/README-es.md)
+<!-- translate:off -->
+<!-- LANGUAGE SWITCHER -->
+[Chinese (Simplified Han script)](./docs/README-ZH_CN.md) | [Chinese (Traditional Han script)](./docs/README-ZH_TW.md) | [English](./docs/README.md) | [French](./docs/README-fr.md) | [German](./docs/README-de.md) | [Greek](./docs/README-el.md) | [Italian](./docs/README-it.md) | [Japanese](./docs/README-ja.md) | [Romanian](./docs/README-ro.md) | [Spanish](./docs/README-es.md)
+<!-- translate:on -->
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
-See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for quick overview:
-
-<a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
+<img src="./docs/app.png" alt="Trilium Screenshot" width="1000">
 
 ## ⏬ Download
 - [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
@@ -39,39 +40,39 @@ Our documentation is available in multiple formats:
 
 ### Quick Links
 - [Getting Started Guide](https://docs.triliumnotes.org/)
-- [Installation Instructions](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
-- [Docker Setup](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
-- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
-- [Basic Concepts and Features](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
-- [Patterns of Personal Knowledge Base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
+- [Installation Instructions](https://docs.triliumnotes.org/user-guide/setup)
+- [Docker Setup](https://docs.triliumnotes.org/user-guide/setup/server/installation/docker)
+- [Upgrading TriliumNext](https://docs.triliumnotes.org/user-guide/setup/upgrading)
+- [Basic Concepts and Features](https://docs.triliumnotes.org/user-guide/concepts/notes)
+- [Patterns of Personal Knowledge Base](https://docs.triliumnotes.org/user-guide/misc/patterns-of-personal-knowledge)
 
 ## 🎁 Features
 
-* Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://triliumnext.github.io/Docs/Wiki/cloning-notes))
-* Rich WYSIWYG note editor including e.g. tables, images and [math](https://triliumnext.github.io/Docs/Wiki/text-notes) with markdown [autoformat](https://triliumnext.github.io/Docs/Wiki/text-notes#autoformat)
-* Support for editing [notes with source code](https://triliumnext.github.io/Docs/Wiki/code-notes), including syntax highlighting
-* Fast and easy [navigation between notes](https://triliumnext.github.io/Docs/Wiki/note-navigation), full text search and [note hoisting](https://triliumnext.github.io/Docs/Wiki/note-hoisting)
-* Seamless [note versioning](https://triliumnext.github.io/Docs/Wiki/note-revisions)
-* Note [attributes](https://triliumnext.github.io/Docs/Wiki/attributes) can be used for note organization, querying and advanced [scripting](https://triliumnext.github.io/Docs/Wiki/scripts)
+* Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://docs.triliumnotes.org/user-guide/concepts/notes/cloning))
+* Rich WYSIWYG note editor including e.g. tables, images and [math](https://docs.triliumnotes.org/user-guide/note-types/text) with markdown [autoformat](https://docs.triliumnotes.org/user-guide/note-types/text/markdown-formatting)
+* Support for editing [notes with source code](https://docs.triliumnotes.org/user-guide/note-types/code), including syntax highlighting
+* Fast and easy [navigation between notes](https://docs.triliumnotes.org/user-guide/concepts/navigation/note-navigation), full text search and [note hoisting](https://docs.triliumnotes.org/user-guide/concepts/navigation/note-hoisting)
+* Seamless [note versioning](https://docs.triliumnotes.org/user-guide/concepts/notes/note-revisions)
+* Note [attributes](https://docs.triliumnotes.org/user-guide/advanced-usage/attributes) can be used for note organization, querying and advanced [scripting](https://docs.triliumnotes.org/user-guide/scripts)
 * UI available in English, German, Spanish, French, Romanian, and Chinese (simplified and traditional)
-* Direct [OpenID and TOTP integration](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/Multi-Factor%20Authentication.md) for more secure login
-* [Synchronization](https://triliumnext.github.io/Docs/Wiki/synchronization) with self-hosted sync server
-  * there's a [3rd party service for hosting synchronisation server](https://trilium.cc/paid-hosting)
-* [Sharing](https://triliumnext.github.io/Docs/Wiki/sharing) (publishing) notes to public internet
-* Strong [note encryption](https://triliumnext.github.io/Docs/Wiki/protected-notes) with per-note granularity
+* Direct [OpenID and TOTP integration](https://docs.triliumnotes.org/user-guide/setup/server/mfa) for more secure login
+* [Synchronization](https://docs.triliumnotes.org/user-guide/setup/synchronization) with self-hosted sync server
+  * there are [3rd party services for hosting synchronisation server](https://docs.triliumnotes.org/user-guide/setup/server/cloud-hosting)
+* [Sharing](https://docs.triliumnotes.org/user-guide/advanced-usage/sharing) (publishing) notes to public internet
+* Strong [note encryption](https://docs.triliumnotes.org/user-guide/concepts/notes/protected-notes) with per-note granularity
 * Sketching diagrams, based on [Excalidraw](https://excalidraw.com/) (note type "canvas")
-* [Relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map) and [link maps](https://triliumnext.github.io/Docs/Wiki/link-map) for visualizing notes and their relations
+* [Relation maps](https://docs.triliumnotes.org/user-guide/note-types/relation-map) and [note/link maps](https://docs.triliumnotes.org/user-guide/note-types/note-map) for visualizing notes and their relations
 * Mind maps, based on [Mind Elixir](https://docs.mind-elixir.com/)
-* [Geo maps](./docs/User%20Guide/User%20Guide/Note%20Types/Geo%20Map.md) with location pins and GPX tracks
-* [Scripting](https://triliumnext.github.io/Docs/Wiki/scripts) - see [Advanced showcases](https://triliumnext.github.io/Docs/Wiki/advanced-showcases)
-* [REST API](https://triliumnext.github.io/Docs/Wiki/etapi) for automation
+* [Geo maps](https://docs.triliumnotes.org/user-guide/collections/geomap) with location pins and GPX tracks
+* [Scripting](https://docs.triliumnotes.org/user-guide/scripts) - see [Advanced showcases](https://docs.triliumnotes.org/user-guide/advanced-usage/advanced-showcases)
+* [REST API](https://docs.triliumnotes.org/user-guide/advanced-usage/etapi) for automation
 * Scales well in both usability and performance upwards of 100 000 notes
-* Touch optimized [mobile frontend](https://triliumnext.github.io/Docs/Wiki/mobile-frontend) for smartphones and tablets
-* Built-in [dark theme](https://triliumnext.github.io/Docs/Wiki/themes), support for user themes
-* [Evernote](https://triliumnext.github.io/Docs/Wiki/evernote-import) and [Markdown import & export](https://triliumnext.github.io/Docs/Wiki/markdown)
-* [Web Clipper](https://triliumnext.github.io/Docs/Wiki/web-clipper) for easy saving of web content
+* Touch optimized [mobile frontend](https://docs.triliumnotes.org/user-guide/setup/mobile-frontend) for smartphones and tablets
+* Built-in [dark theme](https://docs.triliumnotes.org/user-guide/concepts/themes), support for user themes
+* [Evernote](https://docs.triliumnotes.org/user-guide/concepts/import-export/evernote) and [Markdown import & export](https://docs.triliumnotes.org/user-guide/concepts/import-export/markdown)
+* [Web Clipper](https://docs.triliumnotes.org/user-guide/setup/web-clipper) for easy saving of web content
 * Customizable UI (sidebar buttons, user-defined widgets, ...)
-* [Metrics](./docs/User%20Guide/User%20Guide/Advanced%20Usage/Metrics.md), along with a [Grafana Dashboard](./docs/User%20Guide/User%20Guide/Advanced%20Usage/Metrics/grafana-dashboard.json)
+* [Metrics](https://docs.triliumnotes.org/user-guide/advanced-usage/metrics), along with a Grafana Dashboard.
 
 ✨ Check out the following third-party resources/communities for more TriliumNext related goodies:
 
@@ -131,7 +132,7 @@ Note: It is best to disable automatic updates on your server installation (see b
 
 ### Server
 
-To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/trilium)) follow [the server installation docs](https://triliumnext.github.io/Docs/Wiki/server-installation).
+To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/trilium)) follow [the server installation docs](https://docs.triliumnotes.org/user-guide/setup/server).
 
 
 ## 💻 Contribute
@@ -198,7 +199,7 @@ Trilium would not be possible without the technologies behind it:
 * [Leaflet](https://github.com/Leaflet/Leaflet) - for rendering geographical maps.
 * [Tabulator](https://github.com/olifolkerd/tabulator) - for the interactive table used in collections.
 * [FancyTree](https://github.com/mar10/fancytree) - feature-rich tree library without real competition. 
-* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
+* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library. Used in [relation maps](https://docs.triliumnotes.org/user-guide/note-types/relation-map) and [link maps](https://docs.triliumnotes.org/user-guide/advanced-usage/note-map#link-map)
 
 ## 🤝 Support
 

_regroup/bin/create-anonymization-script.ts

@@ -1,7 +0,0 @@
-#!/usr/bin/env node
-
-import anonymizationService from "../src/services/anonymization.js";
-import fs from "fs";
-import path from "path";
-
-fs.writeFileSync(path.resolve(__dirname, "tpl", "anonymize-database.sql"), anonymizationService.getFullAnonymizationScript());

_regroup/bin/export-schema.sh

@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-SCHEMA_FILE_PATH=db/schema.sql
-
-sqlite3 ./data/document.db .schema | grep -v "sqlite_sequence" > "$SCHEMA_FILE_PATH"
-
-echo "DB schema exported to $SCHEMA_FILE_PATH"

_regroup/bin/push-docker-image.sh

@@ -1,16 +0,0 @@
-#!/usr/bin/env bash
-
-if [[ $# -eq 0 ]] ; then
-    echo "Missing argument of new version"
-    exit 1
-fi
-
-VERSION=$1
-SERIES=${VERSION:0:4}-latest
-
-docker push zadam/trilium:$VERSION
-docker push zadam/trilium:$SERIES
-
-if [[ $1 != *"beta"* ]]; then
-  docker push zadam/trilium:latest
-fi

_regroup/bin/release-flatpack.sh

@@ -1,57 +0,0 @@
-#!/usr/bin/env bash
-
-if [[ $# -eq 0 ]] ; then
-    echo "Missing argument of new version"
-    exit 1
-fi
-
-VERSION=$1
-
-if ! [[ ${VERSION} =~ ^[0-9]{1,2}\.[0-9]{1,2}\.[0-9]{1,2}(-.+)?$ ]] ;
-then
-    echo "Version ${VERSION} isn't in format X.Y.Z"
-    exit 1
-fi
-
-VERSION_DATE=$(git log -1 --format=%aI "v${VERSION}" | cut -c -10)
-VERSION_COMMIT=$(git rev-list -n 1 "v${VERSION}")
-
-# expecting the directory at a specific path
-cd ~/trilium-flathub || exit
-
-if ! git diff-index --quiet HEAD --; then
-    echo "There are uncommitted changes"
-    exit 1
-fi
-
-BASE_BRANCH=main
-
-if [[ "$VERSION" == *"beta"* ]]; then
-    BASE_BRANCH=beta
-fi
-
-git switch "${BASE_BRANCH}"
-git pull
-
-BRANCH=b${VERSION}
-
-git branch "${BRANCH}"
-git switch "${BRANCH}"
-
-echo "Updating files with version ${VERSION}, date ${VERSION_DATE} and commit ${VERSION_COMMIT}"
-
-flatpak-node-generator npm ../trilium/package-lock.json
-
-xmlstarlet ed --inplace --update "/component/releases/release/@version" --value "${VERSION}" --update "/component/releases/release/@date" --value "${VERSION_DATE}" ./com.github.zadam.trilium.metainfo.xml
-
-yq --inplace "(.modules[0].sources[0].tag = \"v${VERSION}\") | (.modules[0].sources[0].commit = \"${VERSION_COMMIT}\")" ./com.github.zadam.trilium.yml
-
-git add ./generated-sources.json
-git add ./com.github.zadam.trilium.metainfo.xml
-git add ./com.github.zadam.trilium.yml
-
-git commit -m "release $VERSION"
-git push --set-upstream origin "${BRANCH}"
-
-gh pr create --fill -B "${BASE_BRANCH}"
-gh pr merge --auto --merge --delete-branch

_regroup/bin/release.sh

@@ -1,49 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-if [[ $# -eq 0 ]] ; then
-    echo "Missing argument of new version"
-    exit 1
-fi
-
-if ! command -v jq &> /dev/null; then
-  echo "Missing command: jq"
-  exit 1
-fi
-
-VERSION=$1
-
-if ! [[ ${VERSION} =~ ^[0-9]{1,2}\.[0-9]{1,2}\.[0-9]{1,2}(-.+)?$ ]] ;
-then
-    echo "Version ${VERSION} isn't in format X.Y.Z"
-    exit 1
-fi
-
-if ! git diff-index --quiet HEAD --; then
-    echo "There are uncommitted changes"
-    exit 1
-fi
-
-echo "Releasing Trilium $VERSION"
-
-jq '.version = "'$VERSION'"' package.json > package.json.tmp
-mv package.json.tmp package.json
-
-git add package.json
-
-npm run chore:update-build-info
-
-git add src/services/build.ts
-
-TAG=v$VERSION
-
-echo "Committing package.json version change"
-
-git commit -m "chore(release): $VERSION"
-git push
-
-echo "Tagging commit with $TAG"
-
-git tag $TAG
-git push origin $TAG

_regroup/entitlements.plist

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-  <dict>
-    <key>com.apple.security.cs.allow-jit</key>
-    <true/>
-    <key>com.apple.security.files.user-selected.read-write</key>
-    <true/>
-  </dict>
-</plist>

_regroup/eslint.config.js

@@ -1,51 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import simpleImportSort from "eslint-plugin-simple-import-sort";
-
-export default tseslint.config(
-    eslint.configs.recommended,
-    tseslint.configs.recommended,
-    // consider using rules below, once we have a full TS codebase and can be more strict
-    // tseslint.configs.strictTypeChecked,
-    // tseslint.configs.stylisticTypeChecked,
-    // tseslint.configs.recommendedTypeChecked,
-    {
-        languageOptions: {
-            parserOptions: {
-                projectService: true,
-                tsconfigRootDir: import.meta.dirname
-            }
-        }
-    },
-    {
-        plugins: {
-            "simple-import-sort": simpleImportSort
-        }
-    },
-    {
-        rules: {
-            // add rule overrides here
-            "no-undef": "off",
-            "no-unused-vars": "off",
-            "@typescript-eslint/no-unused-vars": [
-                "error",
-                {
-                    argsIgnorePattern: "^_",
-                    varsIgnorePattern: "^_"
-                }
-            ],
-            "simple-import-sort/imports": "error",
-            "simple-import-sort/exports": "error"
-        }
-    },
-    {
-        ignores: [
-            "build/*",
-            "dist/*",
-            "docs/*",
-            "demo/*",
-            "src/public/app-dist/*",
-            "src/public/app/doc_notes/*"
-        ]
-    }
-);

_regroup/eslint.format.config.js

@@ -1,47 +0,0 @@
-import stylistic from "@stylistic/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
-
-// eslint config just for formatting rules
-// potentially to be merged with the linting rules into one single config,
-// once we have fixed the majority of lint errors
-
-// Go to https://eslint.style/rules/default/${rule_without_prefix} to check the rule details
-export const stylisticRules = {
-    "@stylistic/indent": [ "error", 4 ],
-    "@stylistic/quotes": [ "error", "double", { avoidEscape: true, allowTemplateLiterals: "always" } ],
-    "@stylistic/semi": [ "error", "always" ],
-    "@stylistic/quote-props": [ "error", "consistent-as-needed" ],
-    "@stylistic/max-len": [ "error", { code: 100 } ],
-    "@stylistic/comma-dangle": [ "error", "never" ],
-    "@stylistic/linebreak-style": [ "error", "unix" ],
-    "@stylistic/array-bracket-spacing": [ "error", "always" ],
-    "@stylistic/object-curly-spacing": [ "error", "always" ],
-    "@stylistic/padded-blocks": [ "error", { classes: "always" } ]
-};
-
-export default [
-    {
-        files: [ "**/*.{js,ts,mjs,cjs}" ],
-        languageOptions: {
-            parser: tsParser
-        },
-        plugins: {
-            "@stylistic": stylistic
-        },
-        rules: {
-            ...stylisticRules
-        }
-    },
-    {
-        ignores: [
-            "build/*",
-            "dist/*",
-            "docs/*",
-            "demo/*",
-            // TriliumNextTODO: check if we want to format packages here as well - for now skipping it
-            "packages/*",
-            "src/public/app-dist/*",
-            "src/public/app/doc_notes/*"
-        ]
-    }
-];

_regroup/integration-tests/auth.setup.ts

@@ -1,17 +0,0 @@
-import { test as setup, expect } from "@playwright/test";
-
-const authFile = "playwright/.auth/user.json";
-
-const ROOT_URL = "http://localhost:8082";
-const LOGIN_PASSWORD = "demo1234";
-
-// Reference: https://playwright.dev/docs/auth#basic-shared-account-in-all-tests
-
-setup("authenticate", async ({ page }) => {
-    await page.goto(ROOT_URL);
-    await expect(page).toHaveURL(`${ROOT_URL}/login`);
-
-    await page.getByRole("textbox", { name: "Password" }).fill(LOGIN_PASSWORD);
-    await page.getByRole("button", { name: "Login" }).click();
-    await page.context().storageState({ path: authFile });
-});

_regroup/integration-tests/duplicate.spec.ts

@@ -1,9 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Can duplicate note with broken links", async ({ page }) => {
-    await page.goto(`http://localhost:8082/#2VammGGdG6Ie`);
-    await page.locator(".tree-wrapper .fancytree-active").getByText("Note map").click({ button: "right" });
-    await page.getByText("Duplicate subtree").click();
-    await expect(page.locator(".toast-body")).toBeHidden();
-    await expect(page.locator(".tree-wrapper").getByText("Note map (dup)")).toBeVisible();
-});

_regroup/integration-tests/example.disabled.ts

@@ -1,18 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("has title", async ({ page }) => {
-    await page.goto("https://playwright.dev/");
-
-    // Expect a title "to contain" a substring.
-    await expect(page).toHaveTitle(/Playwright/);
-});
-
-test("get started link", async ({ page }) => {
-    await page.goto("https://playwright.dev/");
-
-    // Click the get started link.
-    await page.getByRole("link", { name: "Get started" }).click();
-
-    // Expects page to have a heading with the name of Installation.
-    await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
-});

_regroup/integration-tests/settings.spec.ts

@@ -1,21 +0,0 @@
-import test, { expect } from "@playwright/test";
-
-test("Native Title Bar not displayed on web", async ({ page }) => {
-    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsAppearance");
-    await expect(page.getByRole("heading", { name: "Theme" })).toBeVisible();
-    await expect(page.getByRole("heading", { name: "Native Title Bar (requires" })).toBeHidden();
-});
-
-test("Tray settings not displayed on web", async ({ page }) => {
-    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsOther");
-    await expect(page.getByRole("heading", { name: "Note Erasure Timeout" })).toBeVisible();
-    await expect(page.getByRole("heading", { name: "Tray" })).toBeHidden();
-});
-
-test("Spellcheck settings not displayed on web", async ({ page }) => {
-    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsSpellcheck");
-    await expect(page.getByRole("heading", { name: "Spell Check" })).toBeVisible();
-    await expect(page.getByRole("heading", { name: "Tray" })).toBeHidden();
-    await expect(page.getByText("These options apply only for desktop builds")).toBeVisible();
-    await expect(page.getByText("Enable spellcheck")).toBeHidden();
-});

_regroup/integration-tests/tree.spec.ts

@@ -1,18 +0,0 @@
-import test, { expect } from "@playwright/test";
-
-test("Renders on desktop", async ({ page, context }) => {
-    await page.goto("http://localhost:8082");
-    await expect(page.locator(".tree")).toContainText("Trilium Integration Test");
-});
-
-test("Renders on mobile", async ({ page, context }) => {
-    await context.addCookies([
-        {
-            url: "http://localhost:8082",
-            name: "trilium-device",
-            value: "mobile"
-        }
-    ]);
-    await page.goto("http://localhost:8082");
-    await expect(page.locator(".tree")).toContainText("Trilium Integration Test");
-});

_regroup/integration-tests/update_check.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-const expectedVersion = "0.90.3";
-
-test("Displays update badge when there is a version available", async ({ page }) => {
-    await page.goto("http://localhost:8080");
-    await page.getByRole("button", { name: "" }).click();
-    await page.getByText(`Version ${expectedVersion} is available,`).click();
-
-    const page1 = await page.waitForEvent("popup");
-    expect(page1.url()).toBe(`https://github.com/TriliumNext/Trilium/releases/tag/v${expectedVersion}`);
-});

_regroup/package.json

@@ -1,56 +0,0 @@
-{
-  "main": "./electron-main.js",
-  "bin": {
-    "trilium": "src/main.js"
-  },
-  "type": "module",
-  "scripts": {    
-    "server:start-safe": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nodemon src/main.ts",
-    "server:start-no-dir": "cross-env TRILIUM_ENV=dev nodemon src/main.ts",
-    "server:start-test": "npm run server:switch && rimraf ./data-test && cross-env TRILIUM_DATA_DIR=./data-test TRILIUM_ENV=dev TRILIUM_PORT=9999 nodemon src/main.ts",
-    "server:qstart": "npm run server:switch && npm run server:start",
-    "server:switch": "rimraf ./node_modules/better-sqlite3 && npm install",
-    "electron:start-no-dir": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev TRILIUM_PORT=37742 electron --inspect=5858 .",
-    "electron:start-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",
-    "electron:start-nix-no-dir": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev TRILIUM_PORT=37742 nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",    
-    "electron:start-prod-no-dir": "npm run build:prepare-dist && cross-env TRILIUM_ENV=prod electron --inspect=5858 .",
-    "electron:start-prod-nix": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
-    "electron:start-prod-nix-no-dir": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
-    "electron:qstart": "npm run electron:switch && npm run electron:start",
-    "electron:switch": "electron-rebuild",    
-    "docs:build": "typedoc",        
-    "test": "npm run client:test && npm run server:test",    
-    "client:test": "cross-env TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db TRILIUM_INTEGRATION_TEST=memory vitest --root src/public/app",
-    "client:coverage": "cross-env TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db TRILIUM_INTEGRATION_TEST=memory vitest --root src/public/app --coverage",
-    "test:playwright": "playwright test --workers 1",
-    "test:integration-edit-db": "cross-env TRILIUM_INTEGRATION_TEST=edit TRILIUM_PORT=8081 TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db nodemon src/main.ts",
-    "test:integration-mem-db": "cross-env    nodemon src/main.ts",
-    "test:integration-mem-db-dev": "cross-env TRILIUM_INTEGRATION_TEST=memory TRILIUM_PORT=8082 TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db nodemon src/main.ts",
-    "dev:watch-dist": "tsx ./bin/watch-dist.ts",
-    "dev:format-check": "eslint -c eslint.format.config.js .",
-    "dev:format-fix": "eslint -c eslint.format.config.js . --fix",
-    "dev:linter-check": "eslint .",
-    "dev:linter-fix": "eslint . --fix",    
-    "chore:generate-document": "cross-env nodemon ./bin/generate_document.ts 1000",
-    "chore:generate-openapi": "tsx bin/generate-openapi.js"
-  },
-  "devDependencies": {    
-    "@playwright/test": "1.57.0",
-    "@stylistic/eslint-plugin": "5.6.1",        
-    "@types/express": "5.0.5",    
-    "@types/node": "24.10.1",    
-    "@types/yargs": "17.0.35",
-    "@vitest/coverage-v8": "4.0.14",
-    "eslint": "9.39.1",
-    "eslint-plugin-simple-import-sort": "12.1.1",
-    "esm": "3.2.25",
-    "jsdoc": "4.0.5",
-    "lorem-ipsum": "2.0.8",    
-    "rcedit": "5.0.2",
-    "rimraf": "6.1.2",    
-    "tslib": "2.8.1" 
-  },
-  "optionalDependencies": {
-    "appdmg": "0.6.6"
-  }
-}

_regroup/spec/etapi/app_info.ts

@@ -1,9 +0,0 @@
-import etapi from "../support/etapi.js";
-/* TriliumNextTODO: port to Vitest 
-etapi.describeEtapi("app_info", () => {
-    it("get", async () => {
-        const appInfo = await etapi.getEtapi("app-info");
-        expect(appInfo.clipperProtocolVersion).toEqual("1.0");
-    });
-});
-*/

_regroup/spec/etapi/backup.ts

@@ -1,10 +0,0 @@
-import etapi from "../support/etapi.js";
-
-/* TriliumNextTODO: port to Vitest
-etapi.describeEtapi("backup", () => {
-    it("create", async () => {
-        const response = await etapi.putEtapiContent("backup/etapi_test");
-        expect(response.status).toEqual(204);
-    });
-});
-*/

_regroup/spec/etapi/import.ts

@@ -1,26 +0,0 @@
-import etapi from "../support/etapi.js";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-/* TriliumNextTODO: port to Vitest 
-etapi.describeEtapi("import", () => {
-    // temporarily skip this test since test-export.zip is missing
-    xit("import", async () => {
-        const scriptDir = path.dirname(fileURLToPath(import.meta.url));
-
-        const zipFileBuffer = fs.readFileSync(path.resolve(scriptDir, "test-export.zip"));
-
-        const response = await etapi.postEtapiContent("notes/root/import", zipFileBuffer);
-        expect(response.status).toEqual(201);
-
-        const { note, branch } = await response.json();
-
-        expect(note.title).toEqual("test-export");
-        expect(branch.parentNoteId).toEqual("root");
-
-        const content = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
-        expect(content).toContain("test export content");
-    });
-});
-*/

_regroup/spec/etapi/notes.ts

@@ -1,103 +0,0 @@
-import crypto from "crypto";
-import etapi from "../support/etapi.js";
-
-/* TriliumNextTODO: port to Vitest
-etapi.describeEtapi("notes", () => {
-    it("create", async () => {
-        const { note, branch } = await etapi.postEtapi("create-note", {
-            parentNoteId: "root",
-            type: "text",
-            title: "Hello World!",
-            content: "Content",
-            prefix: "Custom prefix"
-        });
-
-        expect(note.title).toEqual("Hello World!");
-        expect(branch.parentNoteId).toEqual("root");
-        expect(branch.prefix).toEqual("Custom prefix");
-
-        const rNote = await etapi.getEtapi(`notes/${note.noteId}`);
-        expect(rNote.title).toEqual("Hello World!");
-
-        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
-        expect(rContent).toEqual("Content");
-
-        const rBranch = await etapi.getEtapi(`branches/${branch.branchId}`);
-        expect(rBranch.parentNoteId).toEqual("root");
-        expect(rBranch.prefix).toEqual("Custom prefix");
-    });
-
-    it("patch", async () => {
-        const { note } = await etapi.postEtapi("create-note", {
-            parentNoteId: "root",
-            type: "text",
-            title: "Hello World!",
-            content: "Content"
-        });
-
-        await etapi.patchEtapi(`notes/${note.noteId}`, {
-            title: "new title",
-            type: "code",
-            mime: "text/apl",
-            dateCreated: "2000-01-01 12:34:56.999+0200",
-            utcDateCreated: "2000-01-01 10:34:56.999Z"
-        });
-
-        const rNote = await etapi.getEtapi(`notes/${note.noteId}`);
-        expect(rNote.title).toEqual("new title");
-        expect(rNote.type).toEqual("code");
-        expect(rNote.mime).toEqual("text/apl");
-        expect(rNote.dateCreated).toEqual("2000-01-01 12:34:56.999+0200");
-        expect(rNote.utcDateCreated).toEqual("2000-01-01 10:34:56.999Z");
-    });
-
-    it("update content", async () => {
-        const { note } = await etapi.postEtapi("create-note", {
-            parentNoteId: "root",
-            type: "text",
-            title: "Hello World!",
-            content: "Content"
-        });
-
-        await etapi.putEtapiContent(`notes/${note.noteId}/content`, "new content");
-
-        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
-        expect(rContent).toEqual("new content");
-    });
-
-    it("create / update binary content", async () => {
-        const { note } = await etapi.postEtapi("create-note", {
-            parentNoteId: "root",
-            type: "file",
-            title: "Hello World!",
-            content: "ZZZ"
-        });
-
-        const updatedContent = crypto.randomBytes(16);
-
-        await etapi.putEtapiContent(`notes/${note.noteId}/content`, updatedContent);
-
-        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).arrayBuffer();
-        expect(Buffer.from(new Uint8Array(rContent))).toEqual(updatedContent);
-    });
-
-    it("delete note", async () => {
-        const { note } = await etapi.postEtapi("create-note", {
-            parentNoteId: "root",
-            type: "text",
-            title: "Hello World!",
-            content: "Content"
-        });
-
-        await etapi.deleteEtapi(`notes/${note.noteId}`);
-
-        const resp = await etapi.getEtapiResponse(`notes/${note.noteId}`);
-        expect(resp.status).toEqual(404);
-
-        const error = await resp.json();
-        expect(error.status).toEqual(404);
-        expect(error.code).toEqual("NOTE_NOT_FOUND");
-        expect(error.message).toEqual(`Note '${note.noteId}' not found.`);
-    });
-});
-*/

_regroup/spec/support/etapi.ts

@@ -1,152 +0,0 @@
-import { describe, beforeAll, afterAll } from "vitest";
-
-let etapiAuthToken: string | undefined;
-
-const getEtapiAuthorizationHeader = (): string => "Basic " + Buffer.from(`etapi:${etapiAuthToken}`).toString("base64");
-
-const PORT: string = "9999";
-const HOST: string = "http://localhost:" + PORT;
-
-type SpecDefinitionsFunc = () => void;
-
-function describeEtapi(description: string, specDefinitions: SpecDefinitionsFunc): void {
-    describe(description, () => {
-        beforeAll(async () => {});
-
-        afterAll(() => {});
-
-        specDefinitions();
-    });
-}
-
-async function getEtapiResponse(url: string): Promise<Response> {
-    return await fetch(`${HOST}/etapi/${url}`, {
-        method: "GET",
-        headers: {
-            Authorization: getEtapiAuthorizationHeader()
-        }
-    });
-}
-
-async function getEtapi(url: string): Promise<any> {
-    const response = await getEtapiResponse(url);
-    return await processEtapiResponse(response);
-}
-
-async function getEtapiContent(url: string): Promise<Response> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "GET",
-        headers: {
-            Authorization: getEtapiAuthorizationHeader()
-        }
-    });
-
-    checkStatus(response);
-
-    return response;
-}
-
-async function postEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            Authorization: getEtapiAuthorizationHeader()
-        },
-        body: JSON.stringify(data)
-    });
-    return await processEtapiResponse(response);
-}
-
-async function postEtapiContent(url: string, data: BodyInit): Promise<Response> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/octet-stream",
-            Authorization: getEtapiAuthorizationHeader()
-        },
-        body: data
-    });
-
-    checkStatus(response);
-
-    return response;
-}
-
-async function putEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "PUT",
-        headers: {
-            "Content-Type": "application/json",
-            Authorization: getEtapiAuthorizationHeader()
-        },
-        body: JSON.stringify(data)
-    });
-    return await processEtapiResponse(response);
-}
-
-async function putEtapiContent(url: string, data?: BodyInit): Promise<Response> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "PUT",
-        headers: {
-            "Content-Type": "application/octet-stream",
-            Authorization: getEtapiAuthorizationHeader()
-        },
-        body: data
-    });
-
-    checkStatus(response);
-
-    return response;
-}
-
-async function patchEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "PATCH",
-        headers: {
-            "Content-Type": "application/json",
-            Authorization: getEtapiAuthorizationHeader()
-        },
-        body: JSON.stringify(data)
-    });
-    return await processEtapiResponse(response);
-}
-
-async function deleteEtapi(url: string): Promise<any> {
-    const response = await fetch(`${HOST}/etapi/${url}`, {
-        method: "DELETE",
-        headers: {
-            Authorization: getEtapiAuthorizationHeader()
-        }
-    });
-    return await processEtapiResponse(response);
-}
-
-async function processEtapiResponse(response: Response): Promise<any> {
-    const text = await response.text();
-
-    if (response.status < 200 || response.status >= 300) {
-        throw new Error(`ETAPI error ${response.status}: ${text}`);
-    }
-
-    return text?.trim() ? JSON.parse(text) : null;
-}
-
-function checkStatus(response: Response): void {
-    if (response.status < 200 || response.status >= 300) {
-        throw new Error(`ETAPI error ${response.status}`);
-    }
-}
-
-export default {
-    describeEtapi,
-    getEtapi,
-    getEtapiResponse,
-    getEtapiContent,
-    postEtapi,
-    postEtapiContent,
-    putEtapi,
-    putEtapiContent,
-    patchEtapi,
-    deleteEtapi
-};

_regroup/tsconfig.webpack.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "NodeNext",
-    "declaration": false,
-    "sourceMap": true,
-    "outDir": "./build",
-    "strict": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "lib": ["ES2023"],
-    "downlevelIteration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowJs": true
-  },
-  "include": ["./src/public/app/**/*"],
-  "files": [
-    "./src/public/app/types.d.ts",
-    "./src/public/app/types-lib.d.ts",
-    "./src/types.d.ts"
-  ]
-}

apps/build-docs/package.json

@@ -9,13 +9,13 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.27.0",
   "devDependencies": {
-    "@redocly/cli": "2.12.0",
+    "@redocly/cli": "2.14.3",
     "archiver": "7.0.1",
-    "fs-extra": "11.3.2",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "fs-extra": "11.3.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "typedoc": "0.28.15",
     "typedoc-plugin-missing-exports": "4.1.2"
   }

apps/client-standalone/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@triliumnext/client-standalone",
+  "version": "1.0.0",
+  "description": "Standalone client for TriliumNext with SQLite WASM backend",
+  "private": true,
+  "license": "AGPL-3.0-only",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "dev": "vite dev",
+    "test": "vitest",
+    "start-prod": "pnpm build && pnpm http-server dist -p 8888",
+    "coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.18.0",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/multimonth": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
+    "@maplibre/maplibre-gl-leaflet": "0.1.3",
+    "@mermaid-js/layout-elk": "0.2.0",
+    "@mind-elixir/node-menu": "5.0.1",
+    "@popperjs/core": "2.11.8",
+    "@preact/signals": "2.5.1",
+    "@sqlite.org/sqlite-wasm": "3.51.1-build2",
+    "@triliumnext/ckeditor5": "workspace:*",
+    "@triliumnext/codemirror": "workspace:*",
+    "@triliumnext/commons": "workspace:*",
+    "@triliumnext/core": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
+    "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
+    "@zumer/snapdom": "2.0.1",
+    "autocomplete.js": "0.38.1",
+    "bootstrap": "5.3.8",
+    "boxicons": "2.1.4",
+    "clsx": "2.1.1",
+    "color": "5.0.3",
+    "debounce": "3.0.0",
+    "draggabilly": "3.0.0",
+    "force-graph": "1.51.0",
+    "globals": "17.0.0",
+    "i18next": "25.7.3",
+    "i18next-http-backend": "3.0.2",
+    "jquery": "3.7.1",
+    "jquery.fancytree": "2.38.5",
+    "js-sha1": "0.7.0",
+    "js-sha512": "0.9.0",
+    "jsplumb": "2.15.6",
+    "katex": "0.16.27",
+    "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.2.0",
+    "mark.js": "8.11.1",
+    "marked": "17.0.1",
+    "mermaid": "11.12.2",
+    "mind-elixir": "5.4.0",
+    "normalize.css": "8.0.1",
+    "panzoom": "9.4.3",
+    "preact": "10.28.1",
+    "react-i18next": "16.5.1",
+    "react-window": "2.2.3",
+    "reveal.js": "5.2.1",
+    "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.3.1",
+    "vanilla-js-wheel-zoom": "9.0.4"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-inspector": "5.0.0",
+    "@preact/preset-vite": "2.10.2",
+    "@types/bootstrap": "5.2.10",
+    "@types/jquery": "3.5.33",
+    "@types/leaflet": "1.9.21",
+    "@types/leaflet-gpx": "1.3.8",
+    "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.2",
+    "@types/tabulator-tables": "6.3.1",
+    "copy-webpack-plugin": "13.0.1",
+    "cross-env": "7.0.3",
+    "happy-dom": "20.0.11",
+    "script-loader": "0.7.2",
+    "vite-plugin-static-copy": "3.1.4"
+  }
+}

apps/client-standalone/public/_headers

@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp

apps/client-standalone/src/desktop.ts

@@ -0,0 +1,2 @@
+// Re-export desktop from client
+export * from "../../client/src/desktop";

apps/client-standalone/src/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+        <!-- <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest"> -->
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript><%= t("javascript-required") %></noscript>
+
+        <script>
+            // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+            document.getElementsByTagName("body")[0].style.display = "none";
+        </script>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required for match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <!-- Bootstrap (request server for required information) -->
+        <script src="./main.ts" type="module"></script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client-standalone/src/lightweight/browser_router.ts

@@ -0,0 +1,254 @@
+/**
+ * Browser-compatible router that mimics Express routing patterns.
+ * Supports path parameters (e.g., /api/notes/:noteId) and query strings.
+ */
+
+import { getContext, routes } from "@triliumnext/core";
+
+export interface BrowserRequest {
+    method: string;
+    url: string;
+    path: string;
+    params: Record<string, string>;
+    query: Record<string, string | undefined>;
+    body?: unknown;
+}
+
+export interface BrowserResponse {
+    status: number;
+    headers: Record<string, string>;
+    body: ArrayBuffer | null;
+}
+
+export type RouteHandler = (req: BrowserRequest) => unknown | Promise<unknown>;
+
+interface Route {
+    method: string;
+    pattern: RegExp;
+    paramNames: string[];
+    handler: RouteHandler;
+}
+
+const encoder = new TextEncoder();
+
+/**
+ * Convert an Express-style path pattern to a RegExp.
+ * Supports :param syntax for path parameters.
+ *
+ * Examples:
+ *   /api/notes/:noteId -> /^\/api\/notes\/([^\/]+)$/
+ *   /api/notes/:noteId/revisions -> /^\/api\/notes\/([^\/]+)\/revisions$/
+ */
+function pathToRegex(path: string): { pattern: RegExp; paramNames: string[] } {
+    const paramNames: string[] = [];
+
+    // Escape special regex characters except for :param patterns
+    const regexPattern = path
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // Escape special chars
+        .replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
+            paramNames.push(paramName);
+            return '([^/]+)';
+        });
+
+    return {
+        pattern: new RegExp(`^${regexPattern}$`),
+        paramNames
+    };
+}
+
+/**
+ * Parse query string into an object.
+ */
+function parseQuery(search: string): Record<string, string | undefined> {
+    const query: Record<string, string | undefined> = {};
+    if (!search || search === '?') return query;
+
+    const params = new URLSearchParams(search);
+    for (const [key, value] of params) {
+        query[key] = value;
+    }
+    return query;
+}
+
+/**
+ * Convert a result to a JSON response.
+ */
+function jsonResponse(obj: unknown, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const parsedObj = routes.convertEntitiesToPojo(obj);
+    const body = encoder.encode(JSON.stringify(parsedObj)).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "application/json; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Convert a string to a text response.
+ */
+function textResponse(text: string, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const body = encoder.encode(text).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "text/plain; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Browser router class that handles route registration and dispatching.
+ */
+export class BrowserRouter {
+    private routes: Route[] = [];
+
+    /**
+     * Register a route handler.
+     */
+    register(method: string, path: string, handler: RouteHandler): void {
+        const { pattern, paramNames } = pathToRegex(path);
+        this.routes.push({
+            method: method.toUpperCase(),
+            pattern,
+            paramNames,
+            handler
+        });
+    }
+
+    /**
+     * Convenience methods for common HTTP methods.
+     */
+    get(path: string, handler: RouteHandler): void {
+        this.register('GET', path, handler);
+    }
+
+    post(path: string, handler: RouteHandler): void {
+        this.register('POST', path, handler);
+    }
+
+    put(path: string, handler: RouteHandler): void {
+        this.register('PUT', path, handler);
+    }
+
+    patch(path: string, handler: RouteHandler): void {
+        this.register('PATCH', path, handler);
+    }
+
+    delete(path: string, handler: RouteHandler): void {
+        this.register('DELETE', path, handler);
+    }
+
+    /**
+     * Dispatch a request to the appropriate handler.
+     */
+    async dispatch(method: string, urlString: string, body?: unknown, headers?: Record<string, string>): Promise<BrowserResponse> {
+        const url = new URL(urlString);
+        const path = url.pathname;
+        const query = parseQuery(url.search);
+        const upperMethod = method.toUpperCase();
+
+        // Parse JSON body if it's an ArrayBuffer and content-type suggests JSON
+        let parsedBody = body;
+        if (body instanceof ArrayBuffer && headers) {
+            const contentType = headers['content-type'] || headers['Content-Type'] || '';
+            if (contentType.includes('application/json')) {
+                try {
+                    const text = new TextDecoder().decode(body);
+                    if (text.trim()) {
+                        parsedBody = JSON.parse(text);
+                    }
+                } catch (e) {
+                    console.warn('[Router] Failed to parse JSON body:', e);
+                    // Keep original body if JSON parsing fails
+                    parsedBody = body;
+                }
+            }
+        }
+        // Find matching route
+        for (const route of this.routes) {
+            if (route.method !== upperMethod) continue;
+
+            const match = path.match(route.pattern);
+            if (!match) continue;
+
+            // Extract path parameters
+            const params: Record<string, string> = {};
+            for (let i = 0; i < route.paramNames.length; i++) {
+                params[route.paramNames[i]] = decodeURIComponent(match[i + 1]);
+            }
+
+            const request: BrowserRequest = {
+                method: upperMethod,
+                url: urlString,
+                path,
+                params,
+                query,
+                body: parsedBody
+            };
+
+            try {
+                const result = await getContext().init(async () => await route.handler(request));
+                return this.formatResult(result);
+            } catch (error) {
+                return this.formatError(error, `Error handling ${method} ${path}`);
+            }
+        }
+
+        // No route matched
+        return textResponse(`Not found: ${method} ${path}`, 404);
+    }
+
+    /**
+     * Format a handler result into a response.
+     * Follows the same patterns as the server's apiResultHandler.
+     */
+    private formatResult(result: unknown): BrowserResponse {
+        // Handle [statusCode, response] format
+        if (Array.isArray(result) && result.length > 0 && Number.isInteger(result[0])) {
+            const [statusCode, response] = result;
+            return jsonResponse(response, statusCode);
+        }
+
+        // Handle undefined (no content) - 204 should have no body
+        if (result === undefined) {
+            return {
+                status: 204,
+                headers: {},
+                body: null
+            };
+        }
+
+        // Default: JSON response with 200
+        return jsonResponse(result, 200);
+    }
+
+    /**
+     * Format an error into a response.
+     */
+    private formatError(error: unknown, context: string): BrowserResponse {
+        console.error('[Router] Handler error:', context, error);
+
+        // Check for known error types
+        if (error && typeof error === 'object') {
+            const err = error as { constructor?: { name?: string }; message?: string };
+
+            if (err.constructor?.name === 'NotFoundError') {
+                return jsonResponse({ message: err.message || 'Not found' }, 404);
+            }
+
+            if (err.constructor?.name === 'ValidationError') {
+                return jsonResponse({ message: err.message || 'Validation error' }, 400);
+            }
+        }
+
+        // Generic error
+        const message = error instanceof Error ? error.message : String(error);
+        return jsonResponse({ message }, 500);
+    }
+}
+
+/**
+ * Create a new router instance.
+ */
+export function createRouter(): BrowserRouter {
+    return new BrowserRouter();
+}

apps/client-standalone/src/lightweight/browser_routes.ts

@@ -0,0 +1,92 @@
+/**
+ * Browser route definitions.
+ * This integrates with the shared route builder from @triliumnext/core.
+ */
+
+import { routes, icon_packs as iconPackService } from '@triliumnext/core';
+import { BrowserRouter, type BrowserRequest } from './browser_router';
+
+type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+/**
+ * Wraps a core route handler to work with the BrowserRouter.
+ * Core handlers expect an Express-like request object with params, query, and body.
+ */
+function wrapHandler(handler: (req: any) => unknown) {
+    return (req: BrowserRequest) => {
+        // Create an Express-like request object
+        const expressLikeReq = {
+            params: req.params,
+            query: req.query,
+            body: req.body
+        };
+        return handler(expressLikeReq);
+    };
+}
+
+/**
+ * Creates an apiRoute function compatible with buildSharedApiRoutes.
+ * This bridges the core's route registration to the BrowserRouter.
+ */
+function createApiRoute(router: BrowserRouter) {
+    return (method: HttpMethod, path: string, handler: (req: any) => unknown) => {
+        router.register(method, path, wrapHandler(handler));
+    };
+}
+
+/**
+ * Register all API routes on the browser router using the shared builder.
+ *
+ * @param router - The browser router instance
+ */
+export function registerRoutes(router: BrowserRouter): void {
+    const apiRoute = createApiRoute(router);
+    routes.buildSharedApiRoutes(apiRoute);
+    apiRoute('get', '/bootstrap', bootstrapRoute);
+
+    // Dummy routes for compatibility.
+    apiRoute("get", "/api/script/widgets", () => []);
+    apiRoute("get", "/api/script/startup", () => []);
+    apiRoute("get", "/api/system-checks", () => ({ isCpuArchMismatch: false }))
+    apiRoute("get", "/api/search/:searchString", () => []);
+    apiRoute("get", "/api/search-templates", () => []);
+    apiRoute("get", "/api/autocomplete", () => []);
+}
+
+function bootstrapRoute() {
+   const iconPacks = iconPackService.getIconPacks();
+   const assetPath = ".";
+
+   return {
+        triliumVersion: "1.2.3",
+        assetPath,
+        baseApiUrl: "../api/",
+        themeCssUrl: null,
+        themeUseNextAsBase: "next",
+        device: "desktop",
+        headingStyle: "default",
+        layoutOrientation: "vertical",
+        platform: "web",
+        isElectron: false,
+        isStandalone: true,
+        hasNativeTitleBar: false,
+        hasBackgroundEffects: true,
+        currentLocale: { id: "en", rtl: false },
+        iconPackCss: iconPacks
+            .map(p => iconPackService.generateCss(p, p.builtin
+                ? `${assetPath}/fonts/${p.fontAttachmentId}.${iconPackService.MIME_TO_EXTENSION_MAPPINGS[p.fontMime]}`
+                : `api/attachments/download/${p.fontAttachmentId}`))
+            .filter(Boolean)
+            .join("\n\n"),
+        iconRegistry: iconPackService.generateIconRegistry(iconPacks),
+    };
+}
+
+/**
+ * Create and configure a router with all routes registered.
+ */
+export function createConfiguredRouter(): BrowserRouter {
+    const router = new BrowserRouter();
+    registerRoutes(router);
+    return router;
+}

apps/client-standalone/src/lightweight/cls_provider.ts

@@ -0,0 +1,46 @@
+import { ExecutionContext } from "@triliumnext/core";
+
+export default class BrowserExecutionContext implements ExecutionContext {
+    private store: Map<string, any> | null = null;
+
+    get<T = any>(key: string): T | undefined {
+        return this.store?.get(key);
+    }
+
+    set(key: string, value: any): void {
+        if (!this.store) {
+            throw new Error("ExecutionContext not initialized");
+        }
+        this.store.set(key, value);
+    }
+
+    reset(): void {
+        this.store = null;
+    }
+
+    init<T>(callback: () => T): T {
+        // Create a fresh context for this request
+        const prev = this.store;
+        this.store = new Map();
+
+        try {
+            const result = callback();
+            
+            // If the result is a Promise, we need to handle cleanup after it resolves
+            if (result && typeof result === 'object' && 'then' in result && 'catch' in result) {
+                const promise = result as unknown as Promise<any>;
+                return promise.finally(() => {
+                    this.store = prev;
+                }) as T;
+            } else {
+                // Synchronous result, clean up immediately
+                this.store = prev;
+                return result;
+            }
+        } catch (error) {
+            // Always clean up on error (for synchronous errors)
+            this.store = prev;
+            throw error;
+        }
+    }
+}

apps/client-standalone/src/lightweight/crypto_provider.ts

@@ -0,0 +1,145 @@
+import type { CryptoProvider } from "@triliumnext/core";
+import { sha1 } from "js-sha1";
+import { sha512 } from "js-sha512";
+
+interface Cipher {
+    update(data: Uint8Array): Uint8Array;
+    final(): Uint8Array;
+}
+
+const CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+/**
+ * Crypto provider for browser environments using the Web Crypto API.
+ */
+export default class BrowserCryptoProvider implements CryptoProvider {
+
+    createHash(algorithm: "sha1" | "sha512", content: string | Uint8Array): Uint8Array {
+        const data = typeof content === "string" ? content :
+                new TextDecoder().decode(content);
+
+        const hexHash = algorithm === "sha1" ? sha1(data) : sha512(data);
+
+        // Convert hex string to Uint8Array
+        const bytes = new Uint8Array(hexHash.length / 2);
+        for (let i = 0; i < hexHash.length; i += 2) {
+            bytes[i / 2] = parseInt(hexHash.substr(i, 2), 16);
+        }
+        return bytes;
+    }
+
+    createCipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        // Web Crypto API doesn't support streaming cipher like Node.js
+        // We need to implement a wrapper that collects data and encrypts on final()
+        return new WebCryptoCipher(algorithm, key, iv, "encrypt");
+    }
+
+    createDecipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        return new WebCryptoCipher(algorithm, key, iv, "decrypt");
+    }
+
+    randomBytes(size: number): Uint8Array {
+        const bytes = new Uint8Array(size);
+        crypto.getRandomValues(bytes);
+        return bytes;
+    }
+
+    randomString(length: number): string {
+        const bytes = this.randomBytes(length);
+        let result = "";
+        for (let i = 0; i < length; i++) {
+            result += CHARS[bytes[i] % CHARS.length];
+        }
+        return result;
+    }
+}
+
+/**
+ * A cipher implementation that wraps Web Crypto API.
+ * Note: This buffers all data until final() is called, which differs from
+ * Node.js's streaming cipher behavior.
+ */
+class WebCryptoCipher implements Cipher {
+    private chunks: Uint8Array[] = [];
+    private algorithm: string;
+    private key: Uint8Array;
+    private iv: Uint8Array;
+    private mode: "encrypt" | "decrypt";
+    private finalized = false;
+
+    constructor(
+        algorithm: "aes-128-cbc",
+        key: Uint8Array,
+        iv: Uint8Array,
+        mode: "encrypt" | "decrypt"
+    ) {
+        this.algorithm = algorithm;
+        this.key = key;
+        this.iv = iv;
+        this.mode = mode;
+    }
+
+    update(data: Uint8Array): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        // Buffer the data - Web Crypto doesn't support streaming
+        this.chunks.push(data);
+        // Return empty array since we process everything in final()
+        return new Uint8Array(0);
+    }
+
+    final(): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Web Crypto API is async, but we need sync behavior
+        // This is a fundamental limitation that requires architectural changes
+        // For now, throw an error directing users to use async methods
+        throw new Error(
+            "Synchronous cipher finalization not available in browser. " +
+            "The Web Crypto API is async-only. Use finalizeAsync() instead."
+        );
+    }
+
+    /**
+     * Async version that actually performs the encryption/decryption.
+     */
+    async finalizeAsync(): Promise<Uint8Array> {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Concatenate all chunks
+        const totalLength = this.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+        const data = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const chunk of this.chunks) {
+            data.set(chunk, offset);
+            offset += chunk.length;
+        }
+
+        // Copy key and iv to ensure they're plain ArrayBuffer-backed
+        const keyBuffer = new Uint8Array(this.key);
+        const ivBuffer = new Uint8Array(this.iv);
+
+        // Import the key
+        const cryptoKey = await crypto.subtle.importKey(
+            "raw",
+            keyBuffer,
+            { name: "AES-CBC" },
+            false,
+            [this.mode]
+        );
+
+        // Perform encryption/decryption
+        const result = this.mode === "encrypt"
+            ? await crypto.subtle.encrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data)
+            : await crypto.subtle.decrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data);
+
+        return new Uint8Array(result);
+    }
+}

apps/client-standalone/src/lightweight/messaging_provider.ts

@@ -0,0 +1,92 @@
+import type { WebSocketMessage } from "@triliumnext/commons";
+import type { MessagingProvider, MessageHandler } from "@triliumnext/core";
+
+/**
+ * Messaging provider for browser Worker environments.
+ *
+ * This provider uses the Worker's postMessage API to communicate
+ * with the main thread. It's designed to be used inside a Web Worker
+ * that runs the core services.
+ *
+ * Message flow:
+ * - Outbound (worker → main): Uses self.postMessage() with type: "WS_MESSAGE"
+ * - Inbound (main → worker): Listens to onmessage for type: "WS_MESSAGE"
+ */
+export default class WorkerMessagingProvider implements MessagingProvider {
+    private messageHandlers: MessageHandler[] = [];
+    private isDisposed = false;
+
+    constructor() {
+        // Listen for incoming messages from the main thread
+        self.addEventListener("message", this.handleIncomingMessage);
+        console.log("[WorkerMessagingProvider] Initialized");
+    }
+
+    private handleIncomingMessage = (event: MessageEvent) => {
+        if (this.isDisposed) return;
+
+        const { type, message } = event.data || {};
+
+        if (type === "WS_MESSAGE" && message) {
+            // Dispatch to all registered handlers
+            for (const handler of this.messageHandlers) {
+                try {
+                    handler(message as WebSocketMessage);
+                } catch (e) {
+                    console.error("[WorkerMessagingProvider] Error in message handler:", e);
+                }
+            }
+        }
+    };
+
+    /**
+     * Send a message to all clients (in this case, the main thread).
+     * The main thread is responsible for further distribution if needed.
+     */
+    sendMessageToAllClients(message: WebSocketMessage): void {
+        if (this.isDisposed) {
+            console.warn("[WorkerMessagingProvider] Cannot send message - provider is disposed");
+            return;
+        }
+
+        try {
+            self.postMessage({
+                type: "WS_MESSAGE",
+                message
+            });
+        } catch (e) {
+            console.error("[WorkerMessagingProvider] Error sending message:", e);
+        }
+    }
+
+    /**
+     * Subscribe to incoming messages from the main thread.
+     */
+    onMessage(handler: MessageHandler): () => void {
+        this.messageHandlers.push(handler);
+
+        return () => {
+            this.messageHandlers = this.messageHandlers.filter(h => h !== handler);
+        };
+    }
+
+    /**
+     * Get the number of connected "clients".
+     * In worker context, there's always exactly 1 client (the main thread).
+     */
+    getClientCount(): number {
+        return this.isDisposed ? 0 : 1;
+    }
+
+    /**
+     * Clean up resources.
+     */
+    dispose(): void {
+        if (this.isDisposed) return;
+
+        this.isDisposed = true;
+        self.removeEventListener("message", this.handleIncomingMessage);
+        this.messageHandlers = [];
+        console.log("[WorkerMessagingProvider] Disposed");
+    }
+}

apps/client-standalone/src/lightweight/sql_provider.ts

@@ -0,0 +1,615 @@
+import type { DatabaseProvider, RunResult, Statement, Transaction } from "@triliumnext/core";
+import sqlite3InitModule from "@sqlite.org/sqlite-wasm";
+import type { BindableValue } from "@sqlite.org/sqlite-wasm";
+import demoDbSql from "./db.sql?raw";
+
+// Type definitions for SQLite WASM (the library doesn't export these directly)
+type Sqlite3Module = Awaited<ReturnType<typeof sqlite3InitModule>>;
+type Sqlite3Database = InstanceType<Sqlite3Module["oo1"]["DB"]>;
+type Sqlite3PreparedStatement = ReturnType<Sqlite3Database["prepare"]>;
+
+/**
+ * Wraps an SQLite WASM PreparedStatement to match the Statement interface
+ * expected by trilium-core.
+ */
+class WasmStatement implements Statement {
+    private isRawMode = false;
+    private isPluckMode = false;
+    private isFinalized = false;
+
+    constructor(
+        private stmt: Sqlite3PreparedStatement,
+        private db: Sqlite3Database
+    ) {}
+
+    run(...params: unknown[]): RunResult {
+        if (this.isFinalized) {
+            throw new Error("Cannot call run() on finalized statement");
+        }
+
+        this.bindParams(params);
+        try {
+            // Use step() and then reset instead of stepFinalize()
+            // This allows the statement to be reused
+            this.stmt.step();
+            const changes = this.db.changes();
+            this.stmt.reset();
+            return {
+                changes,
+                lastInsertRowid: 0 // Would need sqlite3_last_insert_rowid for this
+            };
+        } catch (e) {
+            // Reset on error to allow reuse
+            this.stmt.reset();
+            throw e;
+        }
+    }
+
+    get(params: unknown): unknown {
+        if (this.isFinalized) {
+            throw new Error("Cannot call get() on finalized statement");
+        }
+
+        this.bindParams(Array.isArray(params) ? params : params !== undefined ? [params] : []);
+        try {
+            if (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value
+                    const row = this.stmt.get([]);
+                    return Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                }
+                return this.isRawMode ? this.stmt.get([]) : this.stmt.get({});
+            }
+            return undefined;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    all(...params: unknown[]): unknown[] {
+        if (this.isFinalized) {
+            throw new Error("Cannot call all() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const results: unknown[] = [];
+        try {
+            while (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value for each row
+                    const row = this.stmt.get([]);
+                    if (Array.isArray(row) && row.length > 0) {
+                        results.push(row[0]);
+                    }
+                } else {
+                    results.push(this.isRawMode ? this.stmt.get([]) : this.stmt.get({}));
+                }
+            }
+            return results;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    iterate(...params: unknown[]): IterableIterator<unknown> {
+        if (this.isFinalized) {
+            throw new Error("Cannot call iterate() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const stmt = this.stmt;
+        const isRaw = this.isRawMode;
+        const isPluck = this.isPluckMode;
+
+        return {
+            [Symbol.iterator]() {
+                return this;
+            },
+            next(): IteratorResult<unknown> {
+                if (stmt.step()) {
+                    if (isPluck) {
+                        const row = stmt.get([]);
+                        const value = Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                        return { value, done: false };
+                    }
+                    return { value: isRaw ? stmt.get([]) : stmt.get({}), done: false };
+                }
+                stmt.reset();
+                return { value: undefined, done: true };
+            }
+        };
+    }
+
+    raw(toggleState?: boolean): this {
+        // In raw mode, rows are returned as arrays instead of objects
+        // If toggleState is undefined, enable raw mode (better-sqlite3 behavior)
+        this.isRawMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    pluck(toggleState?: boolean): this {
+        // In pluck mode, only the first column of each row is returned
+        // If toggleState is undefined, enable pluck mode (better-sqlite3 behavior)
+        this.isPluckMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    private bindParams(params: unknown[]): void {
+        this.stmt.clearBindings();
+        if (params.length === 0) {
+            return;
+        }
+
+        // Handle single object with named parameters
+        if (params.length === 1 && typeof params[0] === "object" && params[0] !== null && !Array.isArray(params[0])) {
+            const inputBindings = params[0] as { [paramName: string]: BindableValue };
+
+            // SQLite WASM expects parameter names to include the prefix (@ : or $)
+            // better-sqlite3 automatically maps unprefixed names to @name
+            // We need to add the @ prefix for compatibility
+            const bindings: { [paramName: string]: BindableValue } = {};
+            for (const [key, value] of Object.entries(inputBindings)) {
+                // If the key already has a prefix, use it as-is
+                if (key.startsWith('@') || key.startsWith(':') || key.startsWith('$')) {
+                    bindings[key] = value;
+                } else {
+                    // Add @ prefix to match better-sqlite3 behavior
+                    bindings[`@${key}`] = value;
+                }
+            }
+
+            this.stmt.bind(bindings);
+        } else {
+            // Handle positional parameters - flatten and cast to BindableValue[]
+            const flatParams = params.flat() as BindableValue[];
+            if (flatParams.length > 0) {
+                this.stmt.bind(flatParams);
+            }
+        }
+    }
+
+    finalize(): void {
+        if (!this.isFinalized) {
+            try {
+                this.stmt.finalize();
+            } catch (e) {
+                console.warn("Error finalizing SQLite statement:", e);
+            } finally {
+                this.isFinalized = true;
+            }
+        }
+    }
+}
+
+/**
+ * SQLite database provider for browser environments using SQLite WASM.
+ *
+ * This provider wraps the official @sqlite.org/sqlite-wasm package to provide
+ * a DatabaseProvider implementation compatible with trilium-core.
+ *
+ * @example
+ * ```typescript
+ * const provider = new BrowserSqlProvider();
+ * await provider.initWasm(); // Initialize SQLite WASM module
+ * provider.loadFromMemory(); // Open an in-memory database
+ * // or
+ * provider.loadFromBuffer(existingDbBuffer); // Load from existing data
+ * ```
+ */
+export default class BrowserSqlProvider implements DatabaseProvider {
+    private db?: Sqlite3Database;
+    private sqlite3?: Sqlite3Module;
+    private _inTransaction = false;
+    private initPromise?: Promise<void>;
+    private initError?: Error;
+    private statementCache: Map<string, WasmStatement> = new Map();
+
+    // OPFS state tracking
+    private opfsDbPath?: string;
+
+    /**
+     * Get the SQLite WASM module version info.
+     * Returns undefined if the module hasn't been initialized yet.
+     */
+    get version(): { libVersion: string; sourceId: string } | undefined {
+        return this.sqlite3?.version;
+    }
+
+    /**
+     * Initialize the SQLite WASM module.
+     * This must be called before using any database operations.
+     * Safe to call multiple times - subsequent calls return the same promise.
+     *
+     * @returns A promise that resolves when the module is initialized
+     * @throws Error if initialization fails
+     */
+    async initWasm(): Promise<void> {
+        // Return existing promise if already initializing/initialized
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+
+        // Fail fast if we already tried and failed
+        if (this.initError) {
+            throw this.initError;
+        }
+
+        this.initPromise = this.doInitWasm();
+        return this.initPromise;
+    }
+
+    private async doInitWasm(): Promise<void> {
+        try {
+            console.log("[BrowserSqlProvider] Initializing SQLite WASM...");
+            const startTime = performance.now();
+
+            this.sqlite3 = await sqlite3InitModule({
+                print: console.log,
+                printErr: console.error,
+            });
+
+            const initTime = performance.now() - startTime;
+            console.log(
+                `[BrowserSqlProvider] SQLite WASM initialized in ${initTime.toFixed(2)}ms:`,
+                this.sqlite3.version.libVersion
+            );
+        } catch (e) {
+            this.initError = e instanceof Error ? e : new Error(String(e));
+            console.error("[BrowserSqlProvider] SQLite WASM initialization failed:", this.initError);
+            throw this.initError;
+        }
+    }
+
+    /**
+     * Check if the SQLite WASM module has been initialized.
+     */
+    get isInitialized(): boolean {
+        return this.sqlite3 !== undefined;
+    }
+
+    // ==================== OPFS Support ====================
+
+    /**
+     * Check if the OPFS VFS is available.
+     * This requires:
+     * - Running in a Worker context
+     * - Browser support for OPFS APIs
+     * - COOP/COEP headers sent by the server (for SharedArrayBuffer)
+     *
+     * @returns true if OPFS VFS is available for use
+     */
+    isOpfsAvailable(): boolean {
+        this.ensureSqlite3();
+        // SQLite WASM automatically installs the OPFS VFS if the environment supports it
+        // We can check for its presence via sqlite3_vfs_find or the OpfsDb class
+        return this.sqlite3!.oo1.OpfsDb !== undefined;
+    }
+
+    /**
+     * Load or create a database stored in OPFS for persistent storage.
+     * The database will persist across browser sessions.
+     *
+     * Requires COOP/COEP headers to be set by the server:
+     * - Cross-Origin-Opener-Policy: same-origin
+     * - Cross-Origin-Embedder-Policy: require-corp
+     *
+     * @param path - The path for the database file in OPFS (e.g., "/trilium.db")
+     *               Paths without a leading slash are treated as relative to OPFS root.
+     *               Leading directories are created automatically.
+     * @param options - Additional options
+     * @throws Error if OPFS VFS is not available
+     *
+     * @example
+     * ```typescript
+     * const provider = new BrowserSqlProvider();
+     * await provider.initWasm();
+     * if (provider.isOpfsAvailable()) {
+     *     provider.loadFromOpfs("/my-database.db");
+     * } else {
+     *     console.warn("OPFS not available, using in-memory database");
+     *     provider.loadFromMemory();
+     * }
+     * ```
+     */
+    loadFromOpfs(path: string, options: { createIfNotExists?: boolean } = {}): void {
+        this.ensureSqlite3();
+
+        if (!this.isOpfsAvailable()) {
+            throw new Error(
+                "OPFS VFS is not available. This requires:\n" +
+                "1. Running in a Worker context\n" +
+                "2. Browser support for OPFS (Chrome 102+, Firefox 111+, Safari 17+)\n" +
+                "3. COOP/COEP headers from the server:\n" +
+                "   Cross-Origin-Opener-Policy: same-origin\n" +
+                "   Cross-Origin-Embedder-Policy: require-corp"
+            );
+        }
+
+        console.log(`[BrowserSqlProvider] Loading database from OPFS: ${path}`);
+        const startTime = performance.now();
+
+        try {
+            // OpfsDb automatically creates directories in the path
+            // Mode 'c' = create if not exists
+            const mode = options.createIfNotExists !== false ? 'c' : '';
+            this.db = new this.sqlite3!.oo1.OpfsDb(path, mode);
+            this.opfsDbPath = path;
+
+            // Configure the database for OPFS
+            // Note: WAL mode requires exclusive locking in OPFS environment
+            this.db.exec("PRAGMA journal_mode = DELETE");
+            this.db.exec("PRAGMA synchronous = NORMAL");
+
+            const loadTime = performance.now() - startTime;
+            console.log(`[BrowserSqlProvider] OPFS database loaded in ${loadTime.toFixed(2)}ms`);
+        } catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            console.error(`[BrowserSqlProvider] Failed to load OPFS database: ${error.message}`);
+            throw error;
+        }
+    }
+
+    /**
+     * Check if the currently open database is stored in OPFS.
+     */
+    get isUsingOpfs(): boolean {
+        return this.opfsDbPath !== undefined;
+    }
+
+    /**
+     * Get the OPFS path of the currently open database.
+     * Returns undefined if not using OPFS.
+     */
+    get currentOpfsPath(): string | undefined {
+        return this.opfsDbPath;
+    }
+
+    /**
+     * Check if the database has been initialized with a schema.
+     * This is a simple sanity check that looks for the existence of core tables.
+     *
+     * @returns true if the database appears to be initialized
+     */
+    isDbInitialized(): boolean {
+        this.ensureDb();
+
+        // Check if the 'notes' table exists (a core table that must exist in an initialized DB)
+        const tableExists = this.db!.selectValue(
+            "SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'notes'"
+        );
+
+        return tableExists !== undefined;
+    }
+
+    // ==================== End OPFS Support ====================
+
+    loadFromFile(_path: string, _isReadOnly: boolean): void {
+        // Browser environment doesn't have direct file system access.
+        // Use OPFS for persistent storage.
+        throw new Error(
+            "loadFromFile is not supported in browser environment. " +
+            "Use loadFromMemory() for temporary databases, loadFromBuffer() to load from data, " +
+            "or loadFromOpfs() for persistent storage."
+        );
+    }
+
+    /**
+     * Create an empty in-memory database.
+     * Data will be lost when the page is closed.
+     *
+     * For persistent storage, use loadFromOpfs() instead.
+     * To load demo data, call initializeDemoDatabase() after this.
+     */
+    loadFromMemory(): void {
+        this.ensureSqlite3();
+        console.log("[BrowserSqlProvider] Creating in-memory database...");
+        const startTime = performance.now();
+
+        this.db = new this.sqlite3!.oo1.DB(":memory:", "c");
+        this.opfsDbPath = undefined; // Not using OPFS
+        this.db.exec("PRAGMA journal_mode = WAL");
+
+        // Initialize with demo data for in-memory databases
+        // (since they won't persist anyway)
+        this.initializeDemoDatabase();
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] In-memory database created in ${loadTime.toFixed(2)}ms`);
+    }
+
+    /**
+     * Initialize the database with demo/starter data.
+     * This should only be called once when creating a new database.
+     *
+     * For OPFS databases, this is called automatically only if the database
+     * doesn't already exist.
+     */
+    initializeDemoDatabase(): void {
+        this.ensureDb();
+        console.log("[BrowserSqlProvider] Initializing database with demo data...");
+        const startTime = performance.now();
+
+        this.db!.exec(demoDbSql);
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] Demo data loaded in ${loadTime.toFixed(2)}ms`);
+    }
+
+    loadFromBuffer(buffer: Uint8Array): void {
+        this.ensureSqlite3();
+        // SQLite WASM can deserialize a database from a byte array
+        const p = this.sqlite3!.wasm.allocFromTypedArray(buffer);
+        try {
+            this.db = new this.sqlite3!.oo1.DB({ filename: ":memory:", flags: "c" });
+            this.opfsDbPath = undefined; // Not using OPFS
+
+            const rc = this.sqlite3!.capi.sqlite3_deserialize(
+                this.db.pointer!,
+                "main",
+                p,
+                buffer.byteLength,
+                buffer.byteLength,
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_FREEONCLOSE |
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_RESIZEABLE
+            );
+            if (rc !== 0) {
+                throw new Error(`Failed to deserialize database: ${rc}`);
+            }
+        } catch (e) {
+            this.sqlite3!.wasm.dealloc(p);
+            throw e;
+        }
+    }
+
+    backup(_destinationFile: string): void {
+        // In browser, we can serialize the database to a byte array
+        // For actual file backup, we'd need to use File System Access API or download
+        throw new Error(
+            "backup to file is not supported in browser environment. " +
+            "Use serialize() to get the database as a Uint8Array instead."
+        );
+    }
+
+    /**
+     * Serialize the database to a byte array.
+     * This can be used to save the database to IndexedDB, download it, etc.
+     */
+    serialize(): Uint8Array {
+        this.ensureDb();
+        // Use the convenience wrapper which handles all the memory management
+        return this.sqlite3!.capi.sqlite3_js_db_export(this.db!);
+    }
+
+    prepare(query: string): Statement {
+        this.ensureDb();
+
+        // Check if we already have this statement cached
+        if (this.statementCache.has(query)) {
+            return this.statementCache.get(query)!;
+        }
+
+        // Create new statement and cache it
+        const stmt = this.db!.prepare(query);
+        const wasmStatement = new WasmStatement(stmt, this.db!);
+        this.statementCache.set(query, wasmStatement);
+        return wasmStatement;
+    }
+
+    transaction<T>(func: (statement: Statement) => T): Transaction {
+        this.ensureDb();
+
+        const self = this;
+        let savepointCounter = 0;
+
+        // Helper function to execute within a transaction
+        const executeTransaction = (beginStatement: string, ...args: unknown[]): T => {
+            // If we're already in a transaction, use SAVEPOINTs for nesting
+            // This mimics better-sqlite3's behavior
+            if (self._inTransaction) {
+                const savepointName = `sp_${++savepointCounter}_${Date.now()}`;
+                self.db!.exec(`SAVEPOINT ${savepointName}`);
+                try {
+                    const result = func.apply(null, args as [Statement]);
+                    self.db!.exec(`RELEASE SAVEPOINT ${savepointName}`);
+                    return result;
+                } catch (e) {
+                    self.db!.exec(`ROLLBACK TO SAVEPOINT ${savepointName}`);
+                    throw e;
+                }
+            }
+
+            // Not in a transaction, start a new one
+            self._inTransaction = true;
+            self.db!.exec(beginStatement);
+            try {
+                const result = func.apply(null, args as [Statement]);
+                self.db!.exec("COMMIT");
+                return result;
+            } catch (e) {
+                self.db!.exec("ROLLBACK");
+                throw e;
+            } finally {
+                self._inTransaction = false;
+            }
+        };
+
+        // Create the transaction function that acts like better-sqlite3's Transaction interface
+        // In better-sqlite3, the transaction function is callable and has .deferred(), .immediate(), etc.
+        const transactionWrapper = Object.assign(
+            // Default call executes with BEGIN (same as immediate)
+            (...args: unknown[]): T => executeTransaction("BEGIN", ...args),
+            {
+                // Deferred transaction - locks acquired on first data access
+                deferred: (...args: unknown[]): T => executeTransaction("BEGIN DEFERRED", ...args),
+                // Immediate transaction - acquires write lock immediately
+                immediate: (...args: unknown[]): T => executeTransaction("BEGIN IMMEDIATE", ...args),
+                // Exclusive transaction - exclusive lock
+                exclusive: (...args: unknown[]): T => executeTransaction("BEGIN EXCLUSIVE", ...args),
+                // Default is same as calling directly
+                default: (...args: unknown[]): T => executeTransaction("BEGIN", ...args)
+            }
+        );
+
+        return transactionWrapper as unknown as Transaction;
+    }
+
+    get inTransaction(): boolean {
+        return this._inTransaction;
+    }
+
+    exec(query: string): void {
+        this.ensureDb();
+        this.db!.exec(query);
+    }
+
+    close(): void {
+        // Clean up all cached statements first
+        for (const statement of this.statementCache.values()) {
+            try {
+                statement.finalize();
+            } catch (e) {
+                // Ignore errors during cleanup
+                console.warn("Error finalizing statement during cleanup:", e);
+            }
+        }
+        this.statementCache.clear();
+
+        if (this.db) {
+            this.db.close();
+            this.db = undefined;
+        }
+
+        // Reset OPFS state
+        this.opfsDbPath = undefined;
+    }
+
+    /**
+     * Get the number of rows changed by the last INSERT, UPDATE, or DELETE statement.
+     */
+    changes(): number {
+        this.ensureDb();
+        return this.db!.changes();
+    }
+
+    /**
+     * Check if the database is currently open.
+     */
+    isOpen(): boolean {
+        return this.db !== undefined && this.db.isOpen();
+    }
+
+    private ensureSqlite3(): void {
+        if (!this.sqlite3) {
+            throw new Error(
+                "SQLite WASM module not initialized. Call initialize() first with the sqlite3 module."
+            );
+        }
+    }
+
+    private ensureDb(): void {
+        this.ensureSqlite3();
+        if (!this.db) {
+            throw new Error("Database not opened. Call loadFromMemory(), loadFromBuffer(), or loadFromOpfs() first.");
+        }
+    }
+}

apps/client-standalone/src/local-bridge.ts

@@ -0,0 +1,89 @@
+// public/local-bridge.js
+let localWorker: Worker | null = null;
+const pending = new Map();
+
+export function startLocalServerWorker() {
+    if (localWorker) return localWorker;
+
+    localWorker = new Worker(new URL("./local-server-worker.js", import.meta.url), { type: "module" });
+
+    // Handle worker errors during initialization
+    localWorker.onerror = (event) => {
+        console.error("[LocalBridge] Worker error:", event);
+        // Reject all pending requests
+        for (const [id, resolver] of pending) {
+            resolver.reject(new Error(`Worker error: ${event.message}`));
+        }
+        pending.clear();
+    };
+
+    localWorker.onmessage = (event) => {
+        const msg = event.data;
+        
+        // Handle worker error reports
+        if (msg?.type === "WORKER_ERROR") {
+            console.error("[LocalBridge] Worker reported error:", msg.error);
+            // Reject all pending requests with the error
+            for (const [id, resolver] of pending) {
+                resolver.reject(new Error(msg.error?.message || "Unknown worker error"));
+            }
+            pending.clear();
+            return;
+        }
+        
+        if (!msg || msg.type !== "LOCAL_RESPONSE") return;
+
+        const { id, response, error } = msg;
+        const resolver = pending.get(id);
+        if (!resolver) return;
+        pending.delete(id);
+
+        if (error) resolver.reject(new Error(error));
+        else resolver.resolve(response);
+    };
+
+    return localWorker;
+}
+
+export function attachServiceWorkerBridge() {
+    navigator.serviceWorker.addEventListener("message", async (event) => {
+        const msg = event.data;
+        if (!msg || msg.type !== "LOCAL_FETCH") return;
+
+        const port = event.ports && event.ports[0];
+        if (!port) return;
+
+        try {
+            startLocalServerWorker();
+
+            const id = msg.id;
+            const req = msg.request;
+
+            const response = await new Promise((resolve, reject) => {
+                pending.set(id, { resolve, reject });
+                // Transfer body to worker for efficiency (if present)
+                localWorker.postMessage({
+                    type: "LOCAL_REQUEST",
+                    id,
+                    request: req
+                }, req.body ? [req.body] : []);
+            });
+
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id,
+                response
+            }, response.body ? [response.body] : []);
+        } catch (e) {
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id: msg.id,
+                response: {
+                    status: 500,
+                    headers: { "content-type": "text/plain; charset=utf-8" },
+                    body: new TextEncoder().encode(String(e?.message || e)).buffer
+                }
+            });
+        }
+    });
+}

apps/client-standalone/src/local-server-worker.ts

@@ -0,0 +1,222 @@
+// public/local-server-worker.js
+// This will eventually import your core server and DB provider.
+// import { createCoreServer } from "@trilium/core"; (bundled)
+
+import BrowserExecutionContext from './lightweight/cls_provider';
+import BrowserCryptoProvider from './lightweight/crypto_provider';
+import BrowserSqlProvider from './lightweight/sql_provider';
+import WorkerMessagingProvider from './lightweight/messaging_provider';
+import { BrowserRouter } from './lightweight/browser_router';
+import { createConfiguredRouter } from './lightweight/browser_routes';
+
+// Global error handlers - MUST be set up before any async imports
+self.onerror = (message, source, lineno, colno, error) => {
+    console.error("[Worker] Uncaught error:", message, source, lineno, colno, error);
+    // Try to notify the main thread about the error
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(message),
+                source,
+                lineno,
+                colno,
+                stack: error?.stack
+            }
+        });
+    } catch (e) {
+        // Can't even post message, just log
+        console.error("[Worker] Failed to report error:", e);
+    }
+    return false; // Don't suppress the error
+};
+
+self.onunhandledrejection = (event) => {
+    console.error("[Worker] Unhandled rejection:", event.reason);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(event.reason?.message || event.reason),
+                stack: event.reason?.stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report rejection:", e);
+    }
+};
+
+console.log("[Worker] Error handlers installed");
+
+// Shared SQL provider instance
+const sqlProvider = new BrowserSqlProvider();
+
+// Messaging provider for worker-to-main-thread communication
+const messagingProvider = new WorkerMessagingProvider();
+
+// Core module, router, and initialization state
+let coreModule: typeof import("@triliumnext/core") | null = null;
+let router: BrowserRouter | null = null;
+let initPromise: Promise<void> | null = null;
+let initError: Error | null = null;
+
+/**
+ * Initialize SQLite WASM and load the core module.
+ * This happens once at worker startup.
+ */
+async function initialize(): Promise<void> {
+    if (initPromise) {
+        return initPromise; // Already initializing
+    }
+    if (initError) {
+        throw initError; // Failed before, don't retry
+    }
+
+    initPromise = (async () => {
+        try {
+            console.log("[Worker] Initializing SQLite WASM...");
+            await sqlProvider.initWasm();
+
+            // Try to use OPFS for persistent storage
+            if (sqlProvider.isOpfsAvailable()) {
+                console.log("[Worker] OPFS available, loading persistent database...");
+                sqlProvider.loadFromOpfs("/trilium.db");
+
+                // Check if database is initialized (schema exists)
+                if (!sqlProvider.isDbInitialized()) {
+                    console.log("[Worker] Database not initialized, loading demo data...");
+                    sqlProvider.initializeDemoDatabase();
+                    console.log("[Worker] Demo data loaded");
+                } else {
+                    console.log("[Worker] Existing initialized database loaded");
+                }
+            } else {
+                // Fall back to in-memory database (non-persistent)
+                console.warn("[Worker] OPFS not available, using in-memory database (data will not persist)");
+                console.warn("[Worker] To enable persistence, ensure COOP/COEP headers are set by the server");
+                sqlProvider.loadFromMemory();
+            }
+
+            console.log("[Worker] Database loaded");
+
+            console.log("[Worker] Loading @triliumnext/core...");
+            coreModule = await import("@triliumnext/core");
+            coreModule.initializeCore({
+                executionContext: new BrowserExecutionContext(),
+                crypto: new BrowserCryptoProvider(),
+                messaging: messagingProvider,
+                dbConfig: {
+                    provider: sqlProvider,
+                    isReadOnly: false,
+                    onTransactionCommit: () => {
+                        // No-op for now
+                    },
+                    onTransactionRollback: () => {
+                        // No-op for now
+                    }
+                }
+            });
+
+            console.log("[Worker] Supported routes", Object.keys(coreModule.routes));
+
+            // Create and configure the router
+            router = createConfiguredRouter();
+            console.log("[Worker] Router configured");
+
+            console.log("[Worker] Initializing becca...");
+            await coreModule.becca_loader.beccaLoaded;
+
+            console.log("[Worker] Initialization complete");
+        } catch (error) {
+            initError = error instanceof Error ? error : new Error(String(error));
+            console.error("[Worker] Initialization failed:", initError);
+            throw initError;
+        }
+    })();
+
+    return initPromise;
+}
+
+/**
+ * Ensure the worker is initialized before processing requests.
+ * Returns the router if initialization was successful.
+ */
+async function ensureInitialized() {
+    await initialize();
+    if (!router) {
+        throw new Error("Router not initialized");
+    }
+    return router;
+}
+
+const encoder = new TextEncoder();
+
+function jsonResponse(obj: unknown, status = 200, extraHeaders = {}) {
+    const body = encoder.encode(JSON.stringify(obj)).buffer;
+    return {
+        status,
+        headers: { "content-type": "application/json; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+interface LocalRequest {
+    method: string;
+    url: string;
+    body?: unknown;
+    headers?: Record<string, string>;
+}
+
+// Main dispatch
+async function dispatch(request: LocalRequest) {
+    const url = new URL(request.url);
+
+    console.log("[Worker] Dispatch:", url.pathname);
+
+    // Ensure initialization is complete and get the router
+    const appRouter = await ensureInitialized();
+
+    // Dispatch to the router
+    return appRouter.dispatch(request.method, request.url, request.body, request.headers);
+}
+
+// Start initialization immediately when the worker loads
+console.log("[Worker] Starting initialization...");
+initialize().catch(err => {
+    console.error("[Worker] Initialization failed:", err);
+    // Post error to main thread
+    self.postMessage({
+        type: "WORKER_ERROR",
+        error: {
+            message: String(err?.message || err),
+            stack: err?.stack
+        }
+    });
+});
+
+self.onmessage = async (event) => {
+    const msg = event.data;
+    if (!msg || msg.type !== "LOCAL_REQUEST") return;
+
+    const { id, request } = msg;
+    console.log("[Worker] Received LOCAL_REQUEST:", id, request.method, request.url);
+
+    try {
+        const response = await dispatch(request);
+        console.log("[Worker] Dispatch completed, sending response:", id);
+
+        // Transfer body back (if any) - use options object for proper typing
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            response
+        }, { transfer: response.body ? [response.body] : [] });
+    } catch (e) {
+        console.error("[Worker] Dispatch error:", e);
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            error: String((e as Error)?.message || e)
+        });
+    }
+};

apps/client-standalone/src/main.ts

@@ -0,0 +1,189 @@
+import { attachServiceWorkerBridge, startLocalServerWorker } from "./local-bridge.js";
+
+async function waitForServiceWorkerControl(): Promise<void> {
+    if (!("serviceWorker" in navigator)) {
+        throw new Error("Service Worker not supported in this browser");
+    }
+
+    // If already controlling, we're good
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker already controlling");
+        return;
+    }
+
+    console.log("[Bootstrap] Waiting for service worker to take control...");
+
+    // Register service worker
+    const registration = await navigator.serviceWorker.register("./sw.js", { scope: "/" });
+    
+    // Wait for it to be ready (installed + activated)
+    await navigator.serviceWorker.ready;
+
+    // Check if we're now controlling
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker now controlling");
+        return;
+    }
+
+    // If not controlling yet, we need to reload the page for SW to take control
+    // This is standard PWA behavior on first install
+    console.log("[Bootstrap] Service worker installed but not controlling yet - reloading page");
+    
+    // Wait a tiny bit for SW to fully activate
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    // Reload to let SW take control
+    window.location.reload();
+    
+    // Throw to stop execution (page will reload)
+    throw new Error("Reloading for service worker activation");
+}
+
+async function fetchWithRetry(url: string, maxRetries = 3, delayMs = 500): Promise<Response> {
+    let lastError: Error | null = null;
+    
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            console.log(`[Bootstrap] Fetching ${url} (attempt ${attempt + 1}/${maxRetries})`);
+            const response = await fetch(url);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            // Check if response has content
+            const contentType = response.headers.get("content-type");
+            if (!contentType || !contentType.includes("application/json")) {
+                throw new Error(`Invalid content-type: ${contentType || "none"}`);
+            }
+            
+            return response;
+        } catch (err) {
+            lastError = err as Error;
+            console.warn(`[Bootstrap] Fetch attempt ${attempt + 1} failed:`, err);
+            
+            if (attempt < maxRetries - 1) {
+                // Exponential backoff
+                const delay = delayMs * Math.pow(2, attempt);
+                console.log(`[Bootstrap] Retrying in ${delay}ms...`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+            }
+        }
+    }
+    
+    throw new Error(`Failed to fetch ${url} after ${maxRetries} attempts: ${lastError?.message}`);
+}
+
+async function bootstrap() {
+    /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.global = globalThis;
+
+    try {
+        // 1) Start local worker ASAP (so /bootstrap is fast)
+        startLocalServerWorker();
+
+        // 2) Bridge SW -> local worker
+        attachServiceWorkerBridge();
+
+        // 3) Wait for service worker to control the page (may reload on first install)
+        await waitForServiceWorkerControl();
+
+        // 4) Now fetch bootstrap - SW is guaranteed to intercept this
+        await setupGlob();
+        
+        loadStylesheets();
+        loadIcons();
+        setBodyAttributes();
+        await loadScripts();
+    } catch (err) {
+        // If error is from reload, it will stop here (page reloads)
+        // Otherwise, show error to user
+        if (err instanceof Error && err.message.includes("Reloading")) {
+            // Page is reloading, do nothing
+            return;
+        }
+        
+        console.error("[Bootstrap] Fatal error:", err);
+        document.body.innerHTML = `
+            <div style="padding: 40px; max-width: 600px; margin: 0 auto; font-family: system-ui, sans-serif;">
+                <h1 style="color: #d32f2f;">Failed to Initialize</h1>
+                <p>The application failed to start. Please check the browser console for details.</p>
+                <pre style="background: #f5f5f5; padding: 16px; border-radius: 4px; overflow: auto;">${err instanceof Error ? err.message : String(err)}</pre>
+                <button onclick="location.reload()" style="padding: 12px 24px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
+                    Reload Page
+                </button>
+            </div>
+        `;
+        document.body.style.display = "block";
+    }
+}
+
+async function setupGlob() {
+    const response = await fetchWithRetry("/bootstrap");
+    console.log("Service worker state", navigator.serviceWorker.controller);
+    console.log("Resp", response);
+    const json = await response.json();
+    console.log("Bootstrap", json);
+
+    window.glob = {
+        ...json,
+        activeDialog: null
+    };
+}
+
+function loadStylesheets() {
+    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const cssToLoad = [];
+    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+    if (themeCssUrl) {
+        cssToLoad.push(themeCssUrl);
+    }
+    if (themeUseNextAsBase === "next") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+    } else if (themeUseNextAsBase === "next-dark") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+    } else if (themeUseNextAsBase === "next-light") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+    }
+    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+    for (const href of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        document.body.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "isElectron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean);
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    await import("./runtime.js");
+    await import("./desktop.js");
+}
+
+bootstrap();

apps/client-standalone/src/runtime.ts

@@ -0,0 +1,2 @@
+// Re-export runtime from client
+export * from "../../client/src/runtime";

apps/client-standalone/src/sw.ts

@@ -0,0 +1,185 @@
+// public/sw.js
+const VERSION = "localserver-v1.4";
+const STATIC_CACHE = `static-${VERSION}`;
+
+// Check if running in dev mode (passed via URL parameter)
+const isDev = true;
+
+if (isDev) {
+    console.log('[Service Worker] Running in DEV mode - caching disabled');
+}
+
+// Adjust these to your routes:
+const LOCAL_FIRST_PREFIXES = [
+    "/bootstrap",
+    "/api/",
+    "/sync/",
+    "/search/"
+];
+
+// Optional: basic precache list (keep small; you can expand later)
+const PRECACHE_URLS = [
+    // "/",
+    // "/index.html",
+    // "/manifest.webmanifest",
+    // "/favicon.ico",
+];
+
+self.addEventListener("install", (event) => {
+    event.waitUntil((async () => {
+        // Skip precaching in dev mode
+        if (!isDev) {
+            const cache = await caches.open(STATIC_CACHE);
+            await cache.addAll(PRECACHE_URLS);
+        }
+        self.skipWaiting();
+    })());
+});
+
+self.addEventListener("activate", (event) => {
+    event.waitUntil((async () => {
+    // Cleanup old caches
+        const keys = await caches.keys();
+        await Promise.all(keys.map((k) => (k === STATIC_CACHE ? Promise.resolve() : caches.delete(k))));
+        await self.clients.claim();
+    })());
+});
+
+function isLocalFirst(url) {
+    return LOCAL_FIRST_PREFIXES.some((p) => url.pathname.startsWith(p));
+}
+
+async function cacheFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    const cached = await cache.match(request);
+    if (cached) return cached;
+
+    const fresh = await fetch(request);
+    // Cache only successful GETs
+    if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+    return fresh;
+}
+
+async function networkFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    try {
+        const fresh = await fetch(request);
+        // Cache only successful GETs
+        if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+        return fresh;
+    } catch (error) {
+        // Fallback to cache if network fails
+        const cached = await cache.match(request);
+        if (cached) return cached;
+        throw error;
+    }
+}
+
+async function forwardToClientLocalServer(request, clientId) {
+    // Find a client to handle the request (prefer the initiating client if available)
+    let client = clientId ? await self.clients.get(clientId) : null;
+
+    if (!client) {
+        const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+        client = all[0] || null;
+    }
+
+    // If no page is available, fall back to network
+    if (!client) return fetch(request);
+
+    const reqUrl = request.url;
+    const headersObj = {};
+    for (const [k, v] of request.headers.entries()) headersObj[k] = v;
+
+    const body = (request.method === "GET" || request.method === "HEAD")
+        ? null
+        : await request.arrayBuffer();
+
+    const id = crypto.randomUUID();
+    const channel = new MessageChannel();
+
+    const responsePromise = new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            reject(new Error("Local server timeout"));
+        }, 30_000);
+
+        channel.port1.onmessage = (event) => {
+            clearTimeout(timeout);
+            resolve(event.data);
+        };
+        channel.port1.onmessageerror = () => {
+            clearTimeout(timeout);
+            reject(new Error("Local server message error"));
+        };
+    });
+
+    // Send to the client with a reply port
+    client.postMessage({
+        type: "LOCAL_FETCH",
+        id,
+        request: {
+            url: reqUrl,
+            method: request.method,
+            headers: headersObj,
+            body // ArrayBuffer or null
+        }
+    }, [channel.port2]);
+
+    const localResp = await responsePromise;
+
+    if (!localResp || localResp.type !== "LOCAL_FETCH_RESPONSE" || localResp.id !== id) {
+    // Protocol mismatch; fall back
+        return fetch(request);
+    }
+
+    // localResp.response: { status, headers, body }
+    const { status, headers, body: respBody } = localResp.response;
+
+    const respHeaders = new Headers();
+    if (headers) {
+        for (const [k, v] of Object.entries(headers)) respHeaders.set(k, String(v));
+    }
+
+    return new Response(respBody ? respBody : null, {
+        status: status || 200,
+        headers: respHeaders
+    });
+}
+
+self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+
+    // Only handle same-origin
+    if (url.origin !== self.location.origin) return;
+
+    // HTML files: network-first to ensure updates are reflected immediately
+    if (event.request.mode === "navigate" || url.pathname.endsWith(".html")) {
+        event.respondWith(networkFirst(event.request));
+        return;
+    }
+
+    // Static assets: cache-first for performance
+    if (event.request.method === "GET" && !isLocalFirst(url)) {
+        event.respondWith(cacheFirst(event.request));
+        return;
+    }
+
+    // API-ish: local-first via bridge
+    if (isLocalFirst(url)) {
+        event.respondWith(forwardToClientLocalServer(event.request, event.clientId));
+        return;
+    }
+
+    // Default
+    event.respondWith(fetch(event.request));
+});

apps/client-standalone/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+interface Window {
+  glob: {
+    assetPath: string;
+    themeCssUrl?: string;
+    themeUseNextAsBase?: string;
+    iconPackCss: string;
+    device: string;
+    headingStyle: string;
+    layoutOrientation: string;
+    platform: string;
+    isElectron: boolean;
+    hasNativeTitleBar: boolean;
+    hasBackgroundEffects: boolean;
+    currentLocale: {
+      id: string;
+      rtl: boolean;
+    };
+    activeDialog: any;
+  };
+  global: typeof globalThis;
+}

apps/client-standalone/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "vite/client"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": [
+    "src/**/*",
+    "../client/src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "../client/src/**/*.spec.ts",
+    "../client/src/**/*.test.ts"
+  ]
+}

apps/client-standalone/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
+}

apps/client-standalone/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "types": [
+      "vitest/globals",
+      "happy-dom"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}

apps/client-standalone/vite.config.mts

@@ -0,0 +1,173 @@
+import preact from "@preact/preset-vite";
+import { defineConfig } from 'vite';
+import { join } from 'path';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const assets = ["assets", "stylesheets", "fonts", "translations"];
+
+const isDev = process.env.NODE_ENV === "development";
+
+// Watch client files and trigger reload in development
+const clientWatchPlugin = () => ({
+    name: 'client-watch',
+    configureServer(server: any) {
+        if (isDev) {
+            // Watch client source files (adjusted for new root)
+            server.watcher.add('../../client/src/**/*');
+            server.watcher.on('change', (file: string) => {
+                if (file.includes('../../client/src/')) {
+                    server.ws.send({
+                        type: 'full-reload'
+                    });
+                }
+            });
+        }
+    }
+});
+
+// Always copy SQLite WASM files so they're available to the module
+const sqliteWasmPlugin = viteStaticCopy({
+    targets: [
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm",
+            dest: "assets"
+        },
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3-opfs-async-proxy.js",
+            dest: "assets"
+        }
+    ]
+});
+
+let plugins: any = [
+    preact({
+        babel: {
+            compact: !isDev
+        }
+    }),
+    sqliteWasmPlugin,  // Always include SQLite WASM files
+    viteStaticCopy({
+        targets: assets.map((asset) => ({
+            src: `../../client/src/${asset}/*`,
+            dest: asset
+        })),
+        // Enable watching in development
+        ...(isDev && {
+            watch: {
+                reloadPageOnChange: true
+            }
+        })
+    }),
+    // Watch client files for changes in development
+    ...(isDev ? [clientWatchPlugin()] : [])
+];
+
+if (!isDev) {
+    plugins = [
+        ...plugins,
+        viteStaticCopy({
+            structured: true,
+            targets: [
+                {
+                    src: "../../../node_modules/@excalidraw/excalidraw/dist/prod/fonts/*",
+                    dest: "",
+                }
+            ]
+        })
+    ]
+}
+
+export default defineConfig(() => ({
+    root: join(__dirname, 'src'),  // Set src as root so index.html is served from /
+    cacheDir: '../../../node_modules/.vite/apps/client-standalone',
+    base: "",
+    plugins,
+    publicDir: join(__dirname, 'public'),
+    resolve: {
+        alias: [
+            {
+                find: "react",
+                replacement: "preact/compat"
+            },
+            {
+                find: "react-dom",
+                replacement: "preact/compat"
+            },
+            {
+                find: "@client",
+                replacement: join(__dirname, "../client/src")
+            }
+        ],
+        dedupe: [
+            "react",
+            "react-dom",
+            "preact",
+            "preact/compat",
+            "preact/hooks"
+        ]
+    },
+    server: {
+        watch: {
+            // Watch workspace packages
+            ignored: ['!**/node_modules/@triliumnext/**'],
+            // Also watch client assets for live reload
+            usePolling: false,
+            interval: 100,
+            binaryInterval: 300
+        },
+        // Watch additional directories for changes
+        fs: {
+            allow: [
+                // Allow access to workspace root
+                '../../../',
+                // Explicitly allow client directory
+                '../../client/src/'
+            ]
+        },
+        headers: {
+            // Required for SharedArrayBuffer which is needed by SQLite WASM OPFS VFS
+            // See: https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep
+            "Cross-Origin-Opener-Policy": "same-origin",
+            "Cross-Origin-Embedder-Policy": "require-corp"
+        }
+    },
+    optimizeDeps: {
+        exclude: ['@sqlite.org/sqlite-wasm', '@triliumnext/core']
+    },
+    worker: {
+        format: "es" as const
+    },
+    commonjsOptions: {
+        transformMixedEsModules: true,
+    },
+    build: {
+        target: "esnext",
+        outDir: join(__dirname, 'dist'),
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                main: join(__dirname, 'src', 'index.html'),
+                sw: join(__dirname, 'src', 'sw.ts'),
+                'local-bridge': join(__dirname, 'src', 'local-bridge.ts'),
+                'local-server-worker': join(__dirname, 'src', 'local-server-worker.ts')
+            },
+            output: {
+                entryFileNames: (chunkInfo) => {
+                    // Service worker and other workers should be at root level
+                    if (chunkInfo.name === 'sw' || chunkInfo.name === 'local-server-worker') {
+                        return '[name].js';
+                    }
+                    return 'src/[name].js';
+                },
+                chunkFileNames: "src/[name].js",
+                assetFileNames: "src/[name].[ext]"
+            }
+        }
+    },
+    test: {
+        environment: "happy-dom"
+    },
+    define: {
+        "process.env.IS_PREACT": JSON.stringify("true"),
+    }
+}));

apps/client/eslint.config.mjs

@@ -1,5 +0,0 @@
-import baseConfig from "../../eslint.config.mjs";
-
-export default [
-    ...baseConfig
-];

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.100.0",
+  "version": "0.101.1",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -12,27 +12,29 @@
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
     "test": "vitest",
+    "coverage": "vitest --coverage",
     "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@eslint/js": "9.39.1",
     "@excalidraw/excalidraw": "0.18.0",
-    "@fullcalendar/core": "6.1.19",
-    "@fullcalendar/daygrid": "6.1.19",
-    "@fullcalendar/interaction": "6.1.19",
-    "@fullcalendar/list": "6.1.19",
-    "@fullcalendar/multimonth": "6.1.19",
-    "@fullcalendar/timegrid": "6.1.19",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/multimonth": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
+    "@preact/signals": "2.5.1",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
+    "@zumer/snapdom": "2.0.1",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
@@ -41,24 +43,25 @@
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
-    "globals": "16.5.0",
-    "i18next": "25.6.3",
+    "globals": "17.0.0",
+    "i18next": "25.7.3",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
-    "jquery.fancytree": "2.38.5",
+    "jquery.fancytree": "2.38.5",    
     "jsplumb": "2.15.6",
-    "katex": "0.16.25",
+    "katex": "0.16.27",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
     "marked": "17.0.1",
-    "mermaid": "11.12.1",
-    "mind-elixir": "5.3.7",
+    "mermaid": "11.12.2",
+    "mind-elixir": "5.4.0",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.27.2",
-    "react-i18next": "16.3.5",
+    "preact": "10.28.1",
+    "react-i18next": "16.5.1",
+    "react-window": "2.2.3",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -72,8 +75,8 @@
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.1",
-    "@types/tabulator-tables": "6.3.0",
+    "@types/reveal.js": "5.2.2",
+    "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "13.0.1",
     "happy-dom": "20.0.11",
     "script-loader": "0.7.2",

apps/client/src/components/app_context.ts

@@ -1,39 +1,41 @@
-import froca from "../services/froca.js";
-import RootCommandExecutor from "./root_command_executor.js";
-import Entrypoints from "./entrypoints.js";
-import options from "../services/options.js";
-import utils, { hasTouchBar } from "../services/utils.js";
-import zoomComponent from "./zoom.js";
-import TabManager from "./tab_manager.js";
-import Component from "./component.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import linkService, { type ViewScope } from "../services/link.js";
-import MobileScreenSwitcherExecutor, { type Screen } from "./mobile_screen_switcher.js";
-import MainTreeExecutors from "./main_tree_executors.js";
-import toast from "../services/toast.js";
-import ShortcutComponent from "./shortcut_component.js";
-import { t, initLocale } from "../services/i18n.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
-import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
-import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
-import type LoadResults from "../services/load_results.js";
-import type { Attribute } from "../services/attribute_parser.js";
-import type NoteTreeWidget from "../widgets/note_tree.js";
-import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
-import type { NativeImage, TouchBar } from "electron";
-import TouchBarComponent from "./touch_bar.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
-import { StartupChecks } from "./startup_checks.js";
-import type { CreateNoteOpts } from "../services/note_create.js";
-import { ColumnComponent } from "tabulator-tables";
-import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
-import type RootContainer from "../widgets/containers/root_container.js";
 import { SqlExecuteResults } from "@triliumnext/commons";
-import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
-import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import type { NativeImage, TouchBar } from "electron";
+import { ColumnComponent } from "tabulator-tables";
+
+import type { Attribute } from "../services/attribute_parser.js";
+import froca from "../services/froca.js";
+import { initLocale, t } from "../services/i18n.js";
+import keyboardActionsService from "../services/keyboard_actions.js";
+import linkService, { type ViewScope } from "../services/link.js";
+import type LoadResults from "../services/load_results.js";
+import type { CreateNoteOpts } from "../services/note_create.js";
+import options from "../services/options.js";
+import toast from "../services/toast.js";
+import utils, { hasTouchBar } from "../services/utils.js";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type RootContainer from "../widgets/containers/root_container.js";
+import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
+import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import type { InfoProps } from "../widgets/dialogs/info.jsx";
 import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
+import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import Component from "./component.js";
+import Entrypoints from "./entrypoints.js";
+import MainTreeExecutors from "./main_tree_executors.js";
+import MobileScreenSwitcherExecutor, { type Screen } from "./mobile_screen_switcher.js";
+import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import RootCommandExecutor from "./root_command_executor.js";
+import ShortcutComponent from "./shortcut_component.js";
+import { StartupChecks } from "./startup_checks.js";
+import TabManager from "./tab_manager.js";
+import TouchBarComponent from "./touch_bar.js";
+import zoomComponent from "./zoom.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -124,7 +126,7 @@ export type CommandMappings = {
         isNewNote?: boolean;
     };
     showPromptDialog: PromptDialogOptions;
-    showInfoDialog: ConfirmWithMessageOptions;
+    showInfoDialog: InfoProps;
     showConfirmDialog: ConfirmWithMessageOptions;
     showRecentChanges: CommandData & { ancestorNoteId: string };
     showImportDialog: CommandData & { noteId: string };
@@ -264,7 +266,7 @@ export type CommandMappings = {
 
     reEvaluateRightPaneVisibility: CommandData;
     runActiveNote: CommandData;
-    scrollContainerToCommand: CommandData & {
+    scrollContainerTo: CommandData & {
         position: number;
     };
     scrollToEnd: CommandData;
@@ -380,7 +382,8 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    }
+    };
+    customDownload: CommandData;
 };
 
 type EventMappings = {
@@ -446,6 +449,7 @@ type EventMappings = {
     };
     searchRefreshed: { ntxId?: string | null };
     textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
+    contentElRefreshed: { ntxId?: string | null, contentEl: HTMLElement };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -470,6 +474,11 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
+    contextDataChanged: {
+        noteContext: NoteContext;
+        key: string;
+        value: unknown;
+    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {
@@ -694,10 +703,8 @@ $(window).on("beforeunload", () => {
                 console.log(`Component ${component.componentId} is not finished saving its state.`);
                 allSaved = false;
             }
-        } else {
-            if (!listener()) {
-                allSaved = false;
-            }
+        } else if (!listener()) {
+            allSaved = false;
         }
     }
 
@@ -707,7 +714,7 @@ $(window).on("beforeunload", () => {
     }
 });
 
-$(window).on("hashchange", function () {
+$(window).on("hashchange", () => {
     const { notePath, ntxId, viewScope, searchString } = linkService.parseNavigationStateFromUrl(window.location.href);
 
     if (notePath || ntxId) {

apps/client/src/components/component.ts

@@ -57,6 +57,18 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this;
     }
 
+    /**
+     * Removes a child component from this component's children array.
+     * This is used for cleanup when a widget is unmounted to prevent event listener accumulation.
+     */
+    removeChild(component: ChildT) {
+        const index = this.children.indexOf(component);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+            component.parent = undefined;
+        }
+    }
+
     handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
         try {
             const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);
@@ -65,8 +77,8 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
 
             // don't create promises if not needed (optimization)
             return callMethodPromise && childrenPromise ? Promise.all([callMethodPromise, childrenPromise]) : callMethodPromise || childrenPromise;
-        } catch (e: any) {
-            console.error(`Handling of event '${name}' failed in ${this.constructor.name} with error ${e.message} ${e.stack}`);
+        } catch (e: unknown) {
+            console.error(`Handling of event '${name}' failed in ${this.constructor.name} with error`, e);
 
             return null;
         }

apps/client/src/components/note_context.ts

@@ -1,18 +1,20 @@
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-import appContext, { type EventData, type EventListener } from "./app_context.js";
-import treeService from "../services/tree.js";
-import Component from "./component.js";
-import froca from "../services/froca.js";
-import hoistedNoteService from "../services/hoisted_note.js";
-import options from "../services/options.js";
-import type { ViewScope } from "../services/link.js";
-import type FNote from "../entities/fnote.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
+
+import type FNote from "../entities/fnote.js";
 import { closeActiveDialog } from "../services/dialog.js";
+import froca from "../services/froca.js";
+import hoistedNoteService from "../services/hoisted_note.js";
+import type { ViewScope } from "../services/link.js";
+import options from "../services/options.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+import server from "../services/server.js";
+import treeService from "../services/tree.js";
+import utils from "../services/utils.js";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { HeadingContext } from "../widgets/sidebar/TableOfContents.js";
+import appContext, { type EventData, type EventListener } from "./app_context.js";
+import Component from "./component.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -21,6 +23,31 @@ export interface SetNoteOpts {
 
 export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
+export type SaveState = "saved" | "saving" | "unsaved" | "error";
+
+export interface NoteContextDataMap {
+    toc: HeadingContext;
+    pdfPages: {
+        totalPages: number;
+        currentPage: number;
+        scrollToPage(page: number): void;
+        requestThumbnail(page: number): void;
+    };
+    pdfAttachments: {
+        attachments: PdfAttachment[];
+        downloadAttachment(filename: string): void;
+    };
+    pdfLayers: {
+        layers: PdfLayer[];
+        toggleLayer(layerId: string, visible: boolean): void;
+    };
+    saveState: {
+        state: SaveState;
+    };
+}
+
+type ContextDataKey = keyof NoteContextDataMap;
+
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
     hoistedNoteId: string;
@@ -31,6 +58,13 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     parentNoteId?: string | null;
     viewScope?: ViewScope;
 
+    /**
+     * Metadata storage for UI components (e.g., table of contents, PDF page list, code outline).
+     * This allows type widgets to publish data that sidebar/toolbar components can consume.
+     * Data is automatically cleared when navigating to a different note.
+     */
+    private contextData: Map<string, unknown> = new Map();
+
     constructor(ntxId: string | null = null, hoistedNoteId: string = "root", mainNtxId: string | null = null) {
         super();
 
@@ -90,6 +124,22 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         this.viewScope = opts.viewScope;
         ({ noteId: this.noteId, parentNoteId: this.parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(resolvedNotePath));
 
+        // Clear context data when switching notes and notify subscribers
+        const oldKeys = Array.from(this.contextData.keys());
+        this.contextData.clear();
+        if (oldKeys.length > 0) {
+            // Notify subscribers asynchronously to avoid blocking navigation
+            window.setTimeout(() => {
+                for (const key of oldKeys) {
+                    this.triggerEvent("contextDataChanged", {
+                        noteContext: this,
+                        key,
+                        value: undefined
+                    });
+                }
+            }, 0);
+        }
+
         this.saveToRecentNotes(resolvedNotePath);
 
         protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
@@ -389,7 +439,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
      * If no content could be determined `null` is returned instead.
      */
     async getContentElement() {
-        return this.timeout<JQuery<HTMLElement>>(
+        return this.timeout<JQuery<HTMLElement> | null>(
             new Promise((resolve) =>
                 appContext.triggerCommand("executeWithContentElement", {
                     resolve,
@@ -442,6 +492,52 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         return title;
     }
+
+    /**
+     * Set metadata for this note context (e.g., table of contents, PDF pages, code outline).
+     * This data can be consumed by sidebar/toolbar components.
+     *
+     * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages", "codeOutline")
+     * @param value - The data to store (will be cleared when switching notes)
+     */
+    setContextData<K extends ContextDataKey>(key: K, value: NoteContextDataMap[K]): void {
+        this.contextData.set(key, value);
+        // Trigger event so subscribers can react
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value
+        });
+    }
+
+    /**
+     * Get metadata for this note context.
+     *
+     * @param key - The data key to retrieve
+     * @returns The stored data, or undefined if not found
+     */
+    getContextData<K extends ContextDataKey>(key: K): NoteContextDataMap[K] | undefined {
+        return this.contextData.get(key) as NoteContextDataMap[K] | undefined;
+    }
+
+    /**
+     * Check if context data exists for a given key.
+     */
+    hasContextData(key: ContextDataKey): boolean {
+        return this.contextData.has(key);
+    }
+
+    /**
+     * Clear specific context data.
+     */
+    clearContextData(key: ContextDataKey): void {
+        this.contextData.delete(key);
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value: undefined
+        });
+    }
 }
 
 export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {

apps/client/src/components/root_command_executor.ts

@@ -1,14 +1,14 @@
-import Component from "./component.js";
-import appContext, { type CommandData, type CommandListenerData } from "./app_context.js";
 import dateNoteService from "../services/date_notes.js";
-import treeService from "../services/tree.js";
-import openService from "../services/open.js";
-import protectedSessionService from "../services/protected_session.js";
-import options from "../services/options.js";
 import froca from "../services/froca.js";
-import utils from "../services/utils.js";
-import toastService from "../services/toast.js";
 import noteCreateService from "../services/note_create.js";
+import openService from "../services/open.js";
+import options from "../services/options.js";
+import protectedSessionService from "../services/protected_session.js";
+import toastService from "../services/toast.js";
+import treeService from "../services/tree.js";
+import utils, { openInReusableSplit } from "../services/utils.js";
+import appContext, { type CommandListenerData } from "./app_context.js";
+import Component from "./component.js";
 
 export default class RootCommandExecutor extends Component {
     editReadOnlyNoteCommand() {
@@ -193,6 +193,19 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("zenModeChanged", { isEnabled });
     }
 
+    async toggleRibbonTabNoteMapCommand(data: CommandListenerData<"toggleRibbonTabNoteMap">) {
+        const { isExperimentalFeatureEnabled } = await import("../services/experimental_features.js");
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
+        if (!isNewLayout) {
+            this.triggerEvent("toggleRibbonTabNoteMap", data);
+            return;
+        }
+
+        const activeContext = appContext.tabManager.getActiveContext();
+        if (!activeContext?.notePath) return;
+        openInReusableSplit(activeContext.notePath, "note-map");
+    }
+
     firstTabCommand() {
         this.#goToTab(1);
     }
@@ -262,7 +275,7 @@ export default class RootCommandExecutor extends Component {
         }
         catch (e) {
             console.error("Error creating AI Chat note:", e);
-            toastService.showError("Failed to create AI Chat note: " + (e as Error).message);
+            toastService.showError(`Failed to create AI Chat note: ${(e as Error).message}`);
         }
     }
 }

apps/client/src/desktop.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+        <!-- <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest"> -->
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript><%= t("javascript-required") %></noscript>
+
+        <script>
+            // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+            document.getElementsByTagName("body")[0].style.display = "none";
+        </script>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required for match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <!-- Bootstrap (request server for required information) -->
+        <script>
+            async function bootstrap() {
+                await setupGlob();
+                loadStylesheets();
+                loadIcons();
+                setBodyAttributes();
+                await loadScripts();
+            }
+
+            async function setupGlob() {
+                const response = await fetch("/bootstrap");
+                console.log("Service worker state", navigator.serviceWorker.controller);
+                console.log("Resp", response);
+                const json = await response.json();
+                console.log("Bootstrap", json);
+                
+                global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+                window.glob = {
+                    ...json,
+                    activeDialog: null
+                };
+            }
+
+            function loadStylesheets() {
+                const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+                const cssToLoad = [];
+                cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+                if (themeCssUrl) {
+                    cssToLoad.push(themeCssUrl);
+                }
+                if (themeUseNextAsBase === "next") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+                } else if (themeUseNextAsBase === "next-dark") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+                } else if (themeUseNextAsBase === "next-light") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+                }
+                cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+                for (const href of cssToLoad) {
+                    const linkEl = document.createElement("link");
+                    linkEl.href = href;
+                    linkEl.rel = "stylesheet";
+                    document.body.appendChild(linkEl);
+                }
+            }
+
+            function loadIcons() {
+                const styleEl = document.createElement("style");
+                styleEl.innerText = window.glob.iconPackCss;
+                document.head.appendChild(styleEl);
+            }
+
+            function setBodyAttributes() {
+                const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+                const classesToSet = [
+                    device,
+                    `heading-style-${headingStyle}`,
+                    `layout-${layoutOrientation}`,
+                    `platform-${platform}`,
+                    isElectron && "isElectron",
+                    hasNativeTitleBar && "native-titlebar",
+                    hasBackgroundEffects && "background-effects"
+                ].filter(Boolean);
+
+                for (const classToSet of classesToSet) {
+                    document.body.classList.add(classToSet);
+                }
+
+                document.body.lang = currentLocale.id;
+                document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+            }
+
+            async function loadScripts() {
+                const assetPath = glob.assetPath;
+                await import(`./${assetPath}/runtime.js`);
+                await import(`./${assetPath}/desktop.js`);
+            }
+            
+            bootstrap();
+        </script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client/src/desktop.ts

@@ -1,17 +1,18 @@
-import appContext from "./components/app_context.js";
-import utils from "./services/utils.js";
-import noteTooltipService from "./services/note_tooltip.js";
-import bundleService from "./services/bundle.js";
-import toastService from "./services/toast.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
-import glob from "./services/glob.js";
-import { t } from "./services/i18n.js";
-import options from "./services/options.js";
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "boxicons/css/boxicons.min.css";
-import "autocomplete.js/index_jquery.js";
+
+import appContext from "./components/app_context.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
+import bundleService from "./services/bundle.js";
+import glob from "./services/glob.js";
+import { t } from "./services/i18n.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import noteTooltipService from "./services/note_tooltip.js";
+import options from "./services/options.js";
+import toastService from "./services/toast.js";
+import utils from "./services/utils.js";
 
 await appContext.earlyInit();
 
@@ -22,6 +23,7 @@ bundleService.getWidgetBundlesByParent().then(async (widgetBundles) => {
     appContext.setLayout(new DesktopLayout(widgetBundles));
     appContext.start().catch((e) => {
         toastService.showPersistent({
+            id: "critical-error",
             title: t("toast.critical-error.title"),
             icon: "alert",
             message: t("toast.critical-error.message", { message: e.message })
@@ -63,6 +65,9 @@ function initOnElectron() {
     if (options.get("nativeTitleBarVisible") !== "true") {
         initTitleBarButtons(style, currentWindow);
     }
+
+    // Clear navigation history on frontend refresh.
+    currentWindow.webContents.navigationHistory.clear();
 }
 
 function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {

apps/client/src/entities/fnote.ts

@@ -1,17 +1,19 @@
-import server from "../services/server.js";
-import noteAttributeCache from "../services/note_attribute_cache.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
+import { MIME_TYPES_DICT } from "@triliumnext/commons";
+
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
-import type FAttachment from "./fattachment.js";
-import type { default as FAttribute, AttributeType } from "./fattribute.js";
-import utils from "../services/utils.js";
+import noteAttributeCache from "../services/note_attribute_cache.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
 import search from "../services/search.js";
+import server from "../services/server.js";
+import utils from "../services/utils.js";
+import type FAttachment from "./fattachment.js";
+import type { AttributeType, default as FAttribute } from "./fattribute.js";
 
 const LABEL = "label";
 const RELATION = "relation";
 
-const NOTE_TYPE_ICONS = {
+export const NOTE_TYPE_ICONS = {
     file: "bx bx-file",
     image: "bx bx-image",
     code: "bx bx-code",
@@ -268,13 +270,12 @@ export default class FNote {
                 }
             }
             return results;
-        } else {
-            return this.children;
         }
+        return this.children;
     }
 
     async getSubtreeNoteIds(includeArchived = false) {
-        let noteIds: (string | string[])[] = [];
+        const noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
             if (child.isArchived && !includeArchived) continue;
 
@@ -471,9 +472,8 @@ export default class FNote {
                 return a.isHidden ? 1 : -1;
             } else if (a.isSearch !== b.isSearch) {
                 return a.isSearch ? 1 : -1;
-            } else {
-                return a.notePath.length - b.notePath.length;
             }
+            return a.notePath.length - b.notePath.length;
         });
 
         return notePaths;
@@ -582,6 +582,10 @@ export default class FNote {
     }
 
     getIcon() {
+        return `tn-icon ${this.#getIconInternal()}`;
+    }
+
+    #getIconInternal() {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 
@@ -597,14 +601,13 @@ export default class FNote {
         } else if (this.type === "text") {
             if (this.isFolder()) {
                 return "bx bx-folder";
-            } else {
-                return "bx bx-note";
             }
-        } else if (this.type === "code" && this.mime.startsWith("text/x-sql")) {
-            return "bx bx-data";
-        } else {
-            return NOTE_TYPE_ICONS[this.type];
+            return "bx bx-note";
+        } else if (this.type === "code") {
+            const correspondingMimeType = MIME_TYPES_DICT.find(m => m.mime === this.mime);
+            return correspondingMimeType?.icon ?? NOTE_TYPE_ICONS.code;
         }
+        return NOTE_TYPE_ICONS[this.type];
     }
 
     getColorClass() {
@@ -617,7 +620,7 @@ export default class FNote {
     }
 
     getFilteredChildBranches() {
-        let childBranches = this.getChildBranches();
+        const childBranches = this.getChildBranches();
 
         if (!childBranches) {
             console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
@@ -811,9 +814,9 @@ export default class FNote {
             return this.getLabelValue(nameWithPrefix.substring(1));
         } else if (nameWithPrefix.startsWith("~")) {
             return this.getRelationValue(nameWithPrefix.substring(1));
-        } else {
-            return this.getLabelValue(nameWithPrefix);
         }
+        return this.getLabelValue(nameWithPrefix);
+
     }
 
     /**
@@ -878,10 +881,10 @@ export default class FNote {
         promotedAttrs.sort((a, b) => {
             if (a.noteId === b.noteId) {
                 return a.position < b.position ? -1 : 1;
-            } else {
-                // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
-                return a.noteId < b.noteId ? -1 : 1;
             }
+            // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
+            return a.noteId < b.noteId ? -1 : 1;
+
         });
 
         return promotedAttrs;
@@ -993,6 +996,10 @@ export default class FNote {
         );
     }
 
+    isJsx() {
+        return (this.type === "code" && this.mime === "text/jsx");
+    }
+
     /** @returns true if this note is HTML */
     isHtml() {
         return (this.type === "code" || this.type === "file" || this.type === "render") && this.mime === "text/html";
@@ -1000,7 +1007,7 @@ export default class FNote {
 
     /** @returns JS script environment - either "frontend" or "backend" */
     getScriptEnv() {
-        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend"))) {
+        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend")) || this.isJsx()) {
             return "frontend";
         }
 
@@ -1022,7 +1029,7 @@ export default class FNote {
      * @returns a promise that resolves when the script has been run. Additionally, for front-end notes, the promise will contain the value that is returned by the script.
      */
     async executeScript() {
-        if (!this.isJavaScript()) {
+        if (!(this.isJavaScript() || this.isJsx())) {
             throw new Error(`Note ${this.noteId} is of type ${this.type} and mime ${this.mime} and thus cannot be executed`);
         }
 

apps/client/src/layouts/desktop_layout.tsx

@@ -1,50 +1,59 @@
-import { applyModals } from "./layout_commons.js";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import type { AppContext } from "../components/app_context.js";
+import type { WidgetsByParent } from "../services/bundle.js";
+import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
+import options from "../services/options.js";
+import utils from "../services/utils.js";
 import ApiLog from "../widgets/api_log.jsx";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
-import FindWidget from "../widgets/find.js";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
-import HighlightsListWidget from "../widgets/highlights_list.js";
-import LauncherContainer from "../widgets/containers/launcher_container.js";
-import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
-import NoteIconWidget from "../widgets/note_icon.jsx";
+import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.jsx";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
-import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import options from "../services/options.js";
-import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import ContentHeader from "../widgets/containers/content_header.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
+import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import FindWidget from "../widgets/find.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import HighlightsListWidget from "../widgets/highlights_list.js";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
+import InlineTitle from "../widgets/layout/InlineTitle.jsx";
+import NoteBadges from "../widgets/layout/NoteBadges.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StatusBar from "../widgets/layout/StatusBar.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
+import NoteTreeWidget from "../widgets/note_tree.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import QuickSearchWidget from "../widgets/quick_search.js";
+import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
+import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
+import NoteActions from "../widgets/ribbon/NoteActions.jsx";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
 import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
-import SpacerWidget from "../widgets/spacer.js";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
 import SqlResults from "../widgets/sql_result.js";
 import SqlTableSchemas from "../widgets/sql_table_schemas.js";
 import TabRowWidget from "../widgets/tab_row.js";
+import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import TocWidget from "../widgets/toc.js";
-import type { AppContext } from "../components/app_context.js";
-import type { WidgetsByParent } from "../services/bundle.js";
-import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import RightPanelWidget from "../widgets/sidebar/RightPanelWidget.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import { applyModals } from "./layout_commons.js";
 
 export default class DesktopLayout {
 
@@ -70,17 +79,20 @@ export default class DesktopLayout {
          */
         const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
         const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
-            .class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
+            .class(`${launcherPaneIsHorizontal ? "horizontal" : "vertical"  }-layout`)
             .optChild(
                 fullWidthTabBar,
                 new FlexContainer("row")
                     .class("tab-row-container")
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
                     .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
+                    .child(<TabHistoryNavigationButtons />)
                     .child(new TabRowWidget().class("full-width"))
+                    .optChild(isNewLayout, <RightPaneToggle />)
                     .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
@@ -102,7 +114,17 @@ export default class DesktopLayout {
                         new FlexContainer("column")
                             .id("rest-pane")
                             .css("flex-grow", "1")
-                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
+                            .optChild(!fullWidthTabBar,
+                                new FlexContainer("row")
+                                    .class("tab-row-container")
+                                    .child(<TabHistoryNavigationButtons />)
+                                    .child(new TabRowWidget())
+                                    .optChild(isNewLayout, <RightPaneToggle />)
+                                    .optChild(customTitleBarButtons, <TitleBarButtons />)
+                                    .css("height", "40px")
+                                    .css("align-items", "center")
+                            )
+                            .optChild(isNewLayout, <FixedFormattingToolbar />)
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -116,32 +138,31 @@ export default class DesktopLayout {
                                             .child(
                                                 new SplitNoteContainer(() =>
                                                     new NoteWrapperWidget()
-                                                        .child(
-                                                            new FlexContainer("row")
-                                                                .class("title-row")
-                                                                .css("height", "50px")
-                                                                .css("min-height", "50px")
-                                                                .css("align-items", "center")
-                                                                .cssBlock(".title-row > * { margin: 5px; }")
-                                                                .child(<NoteIconWidget />)
-                                                                .child(<NoteTitleWidget />)
-                                                                .child(new SpacerWidget(0, 1))
-                                                                .child(<MovePaneButton direction="left" />)
-                                                                .child(<MovePaneButton direction="right" />)
-                                                                .child(<ClosePaneButton />)
-                                                                .child(<CreatePaneButton />)
-                                                        )
-                                                        .child(<Ribbon />)
+                                                        .child(new FlexContainer("row")
+                                                            .class("title-row note-split-title")
+                                                            .cssBlock(".title-row > * { margin: 5px; }")
+                                                            .child(<NoteIconWidget />)
+                                                            .child(<NoteTitleWidget />)
+                                                            .optChild(isNewLayout, <NoteBadges />)
+                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
+                                                            .optChild(!isNewLayout, <ClosePaneButton />)
+                                                            .optChild(!isNewLayout, <CreatePaneButton />)
+                                                            .optChild(isNewLayout, <NoteActions />))
+                                                        .optChild(!isNewLayout, <Ribbon />)
                                                         .child(new WatchedFileUpdateStatusWidget())
-                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
+                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
-                                                                .child(new ContentHeader()
+                                                                .optChild(isNewLayout, <InlineTitle />)
+                                                                .optChild(isNewLayout, <NoteTitleActions />)
+                                                                .optChild(!isNewLayout, new ContentHeader()
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
-                                                                .child(<PromotedAttributes />)
+                                                                .optChild(!isNewLayout, <PromotedAttributes />)
                                                                 .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
@@ -151,23 +172,24 @@ export default class DesktopLayout {
                                                         )
                                                         .child(<ApiLog />)
                                                         .child(new FindWidget())
-                                                        .child(
-                                                            ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
-                                                            ...this.customWidgets.get("note-detail-pane")
-                                                        )
+                                                        .child(...this.customWidgets.get("note-detail-pane"))
                                                 )
                                             )
                                             .child(...this.customWidgets.get("center-pane"))
+
                                     )
-                                    .child(
+                                    .optChild(!isNewLayout,
                                         new RightPaneContainer()
                                             .child(new TocWidget())
                                             .child(new HighlightsListWidget())
                                             .child(...this.customWidgets.get("right-pane"))
                                     )
+                                    .optChild(isNewLayout, <RightPanelContainer widgetsByParent={this.customWidgets} />)
                             )
+                            .optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
                     )
             )
+            .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.
@@ -185,14 +207,14 @@ export default class DesktopLayout {
             launcherPane = new FlexContainer("row")
                 .css("height", "53px")
                 .class("horizontal")
-                .child(new LauncherContainer(true))
+                .child(<LauncherContainer isHorizontalLayout={true} />)
                 .child(<GlobalMenu isHorizontalLayout={true} />);
         } else {
             launcherPane = new FlexContainer("column")
                 .css("width", "53px")
                 .class("vertical")
                 .child(<GlobalMenu isHorizontalLayout={false} />)
-                .child(new LauncherContainer(false))
+                .child(<LauncherContainer isHorizontalLayout={false} />)
                 .child(<LeftPaneToggle isHorizontalLayout={false} />);
         }
 

apps/client/src/layouts/layout_commons.tsx

@@ -24,6 +24,7 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
+import ToastContainer from "../widgets/Toast.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -50,5 +51,6 @@ export function applyModals(rootContainer: RootContainer) {
         .child(<PromptDialog />)
         .child(<IncorrectCpuArchDialog />)
         .child(<PopupEditorDialog />)
-        .child(<CallToActionDialog />);
+        .child(<CallToActionDialog />)
+        .child(<ToastContainer />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -1,35 +1,35 @@
-import { applyModals } from "./layout_commons.js";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import LauncherContainer from "../widgets/containers/launcher_container.js";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteTitleWidget from "../widgets/note_title.js";
 import ContentHeader from "../widgets/containers/content_header.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import NoteTitleWidget from "../widgets/note_title.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
+import { useNoteContext } from "../widgets/react/hooks.jsx";
 import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import RootContainer from "../widgets/containers/root_container.js";
-import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfoWidget from "../widgets/shared_info.js";
-import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import type AppContext from "../components/app_context.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import { applyModals } from "./layout_commons.js";
 
 const MOBILE_CSS = `
 <style>
@@ -183,7 +183,7 @@ export default class MobileLayout {
                     .child(new FlexContainer("row")
                         .class("horizontal")
                         .css("height", "53px")
-                        .child(new LauncherContainer(true))
+                        .child(<LauncherContainer isHorizontalLayout />)
                         .child(<GlobalMenuWidget isHorizontalLayout />)
                         .id("launcher-pane"))
             )
@@ -194,11 +194,11 @@ export default class MobileLayout {
 }
 
 function FilePropertiesWrapper() {
-    const { note } = useNoteContext();
+    const { note, ntxId } = useNoteContext();
 
     return (
         <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} />}
+            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
         </div>
     );
 }

apps/client/src/menus/link_context_menu.ts

@@ -1,10 +1,11 @@
-import { t } from "../services/i18n.js";
-import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+import type { LeafletMouseEvent } from "leaflet";
+
 import appContext, { type CommandNames } from "../components/app_context.js";
+import { t } from "../services/i18n.js";
 import type { ViewScope } from "../services/link.js";
 import utils, { isMobile } from "../services/utils.js";
 import { getClosestNtxId } from "../widgets/widget_utils.js";
-import type { LeafletMouseEvent } from "leaflet";
+import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
@@ -34,15 +35,21 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
 
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInNewSplit") {
         const ntxId = getNtxId(e);
-        if (!ntxId) return;
+        if (!ntxId) return false;
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInPopup") {
-        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath })
+        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath });
+        return true;
     }
+
+    return false;
 }
 
 function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
@@ -52,9 +59,9 @@ function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
         return subContexts[subContexts.length - 1].ntxId;
     } else if (e.target instanceof HTMLElement) {
         return getClosestNtxId(e.target);
-    } else {
-        return null;
     }
+    return null;
+
 }
 
 export default {

apps/client/src/mobile.ts

@@ -1,9 +1,9 @@
-import appContext from "./components/app_context.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import glob from "./services/glob.js";
-import "boxicons/css/boxicons.min.css";
 import "autocomplete.js/index_jquery.js";
 
+import appContext from "./components/app_context.js";
+import glob from "./services/glob.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+
 glob.setupGlobs();
 
 await appContext.earlyInit();

apps/client/src/print.tsx

@@ -1,17 +1,25 @@
-import FNote from "./entities/fnote";
 import { render } from "preact";
-import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
 import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+
+import FNote from "./entities/fnote";
 import content_renderer from "./services/content_renderer";
-import { dynamicRequire, isElectron } from "./services/utils";
 import { applyInlineMermaid } from "./services/content_renderer_text";
+import { dynamicRequire, isElectron } from "./services/utils";
+import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
 
 interface RendererProps {
     note: FNote;
-    onReady: () => void;
+    onReady: (data: PrintReport) => void;
     onProgressChanged?: (progress: number) => void;
 }
 
+export type PrintReport = {
+    type: "single-note";
+} | {
+    type: "collection";
+    ignoredNoteIds: string[];
+};
+
 async function main() {
     const notePath = window.location.hash.substring(1);
     const noteId = notePath.split("/").at(-1);
@@ -34,15 +42,17 @@ function App({ note, noteId }: { note: FNote | null | undefined, noteId: string
             window.dispatchEvent(new CustomEvent("note-load-progress", { detail: { progress } }));
         }
     }, []);
-    const onReady = useCallback(() => {
+    const onReady = useCallback((printReport: PrintReport) => {
         if (sentReadyEvent.current) return;
-        window.dispatchEvent(new Event("note-ready"));
-        window._noteReady = true;
+        window.dispatchEvent(new CustomEvent("note-ready", {
+            detail: printReport
+        }));
+        window._noteReady = printReport;
         sentReadyEvent.current = true;
     }, []);
     const props: RendererProps | undefined | null = note && { note, onReady, onProgressChanged };
 
-    if (!note || !props) return <Error404 noteId={noteId} />
+    if (!note || !props) return <Error404 noteId={noteId} />;
 
     useLayoutEffect(() => {
         document.body.dataset.noteType = note.type;
@@ -51,8 +61,8 @@ function App({ note, noteId }: { note: FNote | null | undefined, noteId: string
     return (
         <>
             {note.type === "book"
-            ? <CollectionRenderer {...props} />
-            : <SingleNoteRenderer {...props} />
+                ? <CollectionRenderer {...props} />
+                : <SingleNoteRenderer {...props} />
             }
         </>
     );
@@ -91,7 +101,9 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
             await loadCustomCss(note);
         }
 
-        load().then(() => requestAnimationFrame(onReady))
+        load().then(() => requestAnimationFrame(() => onReady({
+            type: "single-note"
+        })));
     }, [ note ]);
 
     return <>
@@ -110,9 +122,9 @@ function CollectionRenderer({ note, onReady, onProgressChanged }: RendererProps)
         ntxId="print"
         highlightedTokens={null}
         media="print"
-        onReady={async () => {
+        onReady={async (data: PrintReport) => {
             await loadCustomCss(note);
-            onReady();
+            onReady(data);
         }}
         onProgressChanged={onProgressChanged}
     />;
@@ -124,12 +136,12 @@ function Error404({ noteId }: { noteId: string }) {
             <p>The note you are trying to print could not be found.</p>
             <small>{noteId}</small>
         </main>
-    )
+    );
 }
 
 async function loadCustomCss(note: FNote) {
     const printCssNotes = await note.getRelationTargets("printCss");
-    let loadPromises: JQueryPromise<void>[] = [];
+    const loadPromises: JQueryPromise<void>[] = [];
 
     for (const printCssNote of printCssNotes) {
         if (!printCssNote || (printCssNote.type !== "code" && printCssNote.mime !== "text/css")) continue;

apps/client/src/services/branches.ts

@@ -1,6 +1,6 @@
 import utils from "./utils.js";
 import server from "./server.js";
-import toastService, { type ToastOptions } from "./toast.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
 import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
 import ws from "./ws.js";
@@ -195,11 +195,11 @@ function filterRootNote(branchIds: string[]) {
     });
 }
 
-function makeToast(id: string, message: string): ToastOptions {
+function makeToast(id: string, message: string): ToastOptionsWithRequiredId {
     return {
-        id: id,
+        id,
         title: t("branches.delete-status"),
-        message: message,
+        message,
         icon: "trash"
     };
 }
@@ -216,7 +216,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("branches.delete-notes-in-progress", { count: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("branches.delete-finished-successfully"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
     }
@@ -234,7 +234,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("branches.undeleting-notes-in-progress", { count: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("branches.undeleting-notes-finished-successfully"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
     }
@@ -242,7 +242,7 @@ ws.subscribeToMessages(async (message) => {
 
 async function cloneNoteToBranch(childNoteId: string, parentBranchId: string, prefix?: string) {
     const resp = await server.put<Response>(`notes/${childNoteId}/clone-to-branch/${parentBranchId}`, {
-        prefix: prefix
+        prefix
     });
 
     if (!resp.success) {
@@ -252,7 +252,7 @@ async function cloneNoteToBranch(childNoteId: string, parentBranchId: string, pr
 
 async function cloneNoteToParentNote(childNoteId: string, parentNoteId: string, prefix?: string) {
     const resp = await server.put<Response>(`notes/${childNoteId}/clone-to-note/${parentNoteId}`, {
-        prefix: prefix
+        prefix
     });
 
     if (!resp.success) {

apps/client/src/services/bundle.ts

@@ -1,10 +1,15 @@
+import { h, VNode } from "preact";
+
+import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import RightPanelWidget from "../widgets/right_panel_widget.js";
+import froca from "./froca.js";
+import type { Entity } from "./frontend_script_api.js";
+import { WidgetDefinitionWithType } from "./frontend_script_api_preact.js";
+import { t } from "./i18n.js";
 import ScriptContext from "./script_context.js";
 import server from "./server.js";
-import toastService, { showError } from "./toast.js";
-import froca from "./froca.js";
-import utils from "./utils.js";
-import { t } from "./i18n.js";
-import type { Entity } from "./frontend_script_api.js";
+import toastService, { showErrorForScriptNote } from "./toast.js";
+import utils, { getErrorMessage } from "./utils.js";
 
 // TODO: Deduplicate with server.
 export interface Bundle {
@@ -14,9 +19,13 @@ export interface Bundle {
     allNoteIds: string[];
 }
 
-interface Widget {
+type LegacyWidget = (BasicWidget | RightPanelWidget) & {
     parentWidget?: string;
-}
+};
+type WithNoteId<T> = T & {
+    _noteId: string;
+};
+export type Widget = WithNoteId<(LegacyWidget | WidgetDefinitionWithType)>;
 
 async function getAndExecuteBundle(noteId: string, originEntity = null, script = null, params = null) {
     const bundle = await server.post<Bundle>(`script/bundle/${noteId}`, {
@@ -27,6 +36,8 @@ async function getAndExecuteBundle(noteId: string, originEntity = null, script =
     return await executeBundle(bundle, originEntity);
 }
 
+export type ParentName = "left-pane" | "center-pane" | "note-detail-pane" | "right-pane";
+
 export async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
     const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, $container);
 
@@ -35,17 +46,14 @@ export async function executeBundle(bundle: Bundle, originEntity?: Entity | null
             return eval(`const apiContext = this; (async function() { ${bundle.script}\r\n})()`);
         }.call(apiContext);
     } catch (e: any) {
-        const note = await froca.getNote(bundle.noteId);
-
-        const message = `Execution of JS note "${note?.title}" with ID ${bundle.noteId} failed with error: ${e?.message}`;
-        showError(message);
-        logError(message);
+        showErrorForScriptNote(bundle.noteId, t("toast.bundle-error.message", { message: e.message }));
+        logError("Widget initialization failed: ", e);
     }
 }
 
 async function executeStartupBundles() {
     const isMobile = utils.isMobile();
-    const scriptBundles = await server.get<Bundle[]>("script/startup" + (isMobile ? "?mobile=true" : ""));
+    const scriptBundles = await server.get<Bundle[]>(`script/startup${  isMobile ? "?mobile=true" : ""}`);
 
     for (const bundle of scriptBundles) {
         await executeBundle(bundle);
@@ -53,67 +61,99 @@ async function executeStartupBundles() {
 }
 
 export class WidgetsByParent {
-    private byParent: Record<string, Widget[]>;
+    private legacyWidgets: Record<string, WithNoteId<LegacyWidget>[]>;
+    private preactWidgets: Record<string, WithNoteId<WidgetDefinitionWithType>[]>;
 
     constructor() {
-        this.byParent = {};
+        this.legacyWidgets = {};
+        this.preactWidgets = {};
     }
 
     add(widget: Widget) {
-        if (!widget.parentWidget) {
-            console.log(`Custom widget does not have mandatory 'parentWidget' property defined`);
-            return;
+        let hasParentWidget = false;
+        let isPreact = false;
+        if ("type" in widget && widget.type === "preact-widget") {
+            // React-based script.
+            const reactWidget = widget as WithNoteId<WidgetDefinitionWithType>;
+            this.preactWidgets[reactWidget.parent] = this.preactWidgets[reactWidget.parent] || [];
+            this.preactWidgets[reactWidget.parent].push(reactWidget);
+            isPreact = true;
+            hasParentWidget = !!reactWidget.parent;
+        } else if ("parentWidget" in widget && widget.parentWidget) {
+            this.legacyWidgets[widget.parentWidget] = this.legacyWidgets[widget.parentWidget] || [];
+            this.legacyWidgets[widget.parentWidget].push(widget);
+            hasParentWidget = !!widget.parentWidget;
         }
 
-        this.byParent[widget.parentWidget] = this.byParent[widget.parentWidget] || [];
-        this.byParent[widget.parentWidget].push(widget);
+        if (!hasParentWidget) {
+            showErrorForScriptNote(widget._noteId, t("toast.widget-missing-parent", {
+                property: isPreact ? "parent" : "parentWidget"
+            }));
+        }
     }
 
-    get(parentName: string) {
-        if (!this.byParent[parentName]) {
-            return [];
+    get(parentName: ParentName) {
+        const widgets: (BasicWidget | VNode)[] = this.getLegacyWidgets(parentName);
+        for (const preactWidget of this.getPreactWidgets(parentName)) {
+            const el = h(preactWidget.render, {});
+            const widget = new ReactWrappedWidget(el);
+            widget.contentSized();
+            if (preactWidget.position) {
+                widget.position = preactWidget.position;
+            }
+            widgets.push(widget);
         }
 
+        return widgets;
+    }
+
+    getLegacyWidgets(parentName: ParentName): (BasicWidget | RightPanelWidget)[] {
+        if (!this.legacyWidgets[parentName]) return [];
+
         return (
-            this.byParent[parentName]
+            this.legacyWidgets[parentName]
                 // previously, custom widgets were provided as a single instance, but that has the disadvantage
                 // for splits where we actually need multiple instaces and thus having a class to instantiate is better
                 // https://github.com/zadam/trilium/issues/4274
                 .map((w: any) => (w.prototype ? new w() : w))
         );
     }
+
+    getPreactWidgets(parentName: ParentName) {
+        return this.preactWidgets[parentName] ?? [];
+    }
 }
 
 async function getWidgetBundlesByParent() {
-    const scriptBundles = await server.get<Bundle[]>("script/widgets");
-
     const widgetsByParent = new WidgetsByParent();
 
-    for (const bundle of scriptBundles) {
-        let widget;
+    try {
+        const scriptBundles = await server.get<Bundle[]>("script/widgets");
 
-        try {
-            widget = await executeBundle(bundle);
-            if (widget) {
-                widget._noteId = bundle.noteId;
-                widgetsByParent.add(widget);
+        for (const bundle of scriptBundles) {
+            let widget;
+
+            try {
+                widget = await executeBundle(bundle);
+                if (widget) {
+                    widget._noteId = bundle.noteId;
+                    widgetsByParent.add(widget);
+                }
+            } catch (e: any) {
+                const noteId = bundle.noteId;
+                showErrorForScriptNote(noteId, t("toast.bundle-error.message", { message: e.message }));
+
+                logError("Widget initialization failed: ", e);
+                continue;
             }
-        } catch (e: any) {
-            const noteId = bundle.noteId;
-            const note = await froca.getNote(noteId);
-            toastService.showPersistent({
-                title: t("toast.bundle-error.title"),
-                icon: "alert",
-                message: t("toast.bundle-error.message", {
-                    id: noteId,
-                    title: note?.title,
-                    message: e.message
-                })
-            });
-
-            logError("Widget initialization failed: ", e);
-            continue;
         }
+    } catch (e) {
+        toastService.showPersistent({
+            id: `custom-widget-list-failure`,
+            title: t("toast.widget-list-error.title"),
+            message: getErrorMessage(e),
+            icon: "bx bx-error-circle"
+        });
     }
 
     return widgetsByParent;

apps/client/src/services/content_renderer.ts

@@ -1,18 +1,19 @@
-import renderService from "./render.js";
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+
+import FAttachment from "../entities/fattachment.js";
+import FNote from "../entities/fnote.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
+import { t } from "../services/i18n.js";
+import renderText from "./content_renderer_text.js";
+import renderDoc from "./doc_renderer.js";
+import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
+import openService from "./open.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import openService from "./open.js";
-import utils from "./utils.js";
-import FNote from "../entities/fnote.js";
-import FAttachment from "../entities/fattachment.js";
-import imageContextMenuService from "../menus/image_context_menu.js";
+import renderService from "./render.js";
 import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import renderDoc from "./doc_renderer.js";
-import { t } from "../services/i18n.js";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import renderText from "./content_renderer_text.js";
+import utils from "./utils.js";
 
 let idCounter = 1;
 
@@ -152,7 +153,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
 
     const $img = $("<img>")
         .attr("src", url || "")
-        .attr("id", "attachment-image-" + idCounter++)
+        .attr("id", `attachment-image-${idCounter++}`)
         .css("max-width", "100%");
 
     $renderedContent.append($img);
@@ -193,7 +194,7 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
 
     if (type === "pdf") {
         const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-        $pdfPreview.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open`));
+        $pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
 
         $content.append($pdfPreview);
     } else if (type === "audio") {
@@ -217,28 +218,28 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         //       in attachment list
         const $downloadButton = $(`
             <button class="file-download btn btn-primary" type="button">
-                <span class="bx bx-download"></span>
+                <span class="tn-icon bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="bx bx-link-external"></span>
+                <span class="tn-icon bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity.noteId)
+            openService.downloadFileNote(entity, null, null);
         });
         $openButton.on("click", async (e) => {
             const iconEl = $openButton.find("> .bx");
             iconEl.removeClass("bx bx-link-external");
             iconEl.addClass("bx bx-loader spin");
             e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime)
+            await openService.openNoteExternally(entity.noteId, entity.mime);
             iconEl.removeClass("bx bx-loader spin");
             iconEl.addClass("bx bx-link-external");
         });
@@ -266,7 +267,7 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
 
     try {
         await loadElkIfNeeded(mermaid, content);
-        const { svg } = await mermaid.mermaidAPI.render("in-mermaid-graph-" + idCounter++, content);
+        const { svg } = await mermaid.mermaidAPI.render(`in-mermaid-graph-${idCounter++}`, content);
 
         $renderedContent.append($(postprocessMermaidSvg(svg)));
     } catch (e) {

apps/client/src/services/content_renderer_text.ts

@@ -1,13 +1,13 @@
-import { formatCodeBlocks } from "./syntax_highlight.js";
-import { getMermaidConfig } from "./mermaid.js";
-import { renderMathInElement } from "./math.js";
-import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
-import tree from "./tree.js";
+import FNote from "../entities/fnote.js";
+import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
 import froca from "./froca.js";
 import link from "./link.js";
+import { renderMathInElement } from "./math.js";
+import { getMermaidConfig } from "./mermaid.js";
+import { formatCodeBlocks } from "./syntax_highlight.js";
+import tree from "./tree.js";
 import { isHtmlEmpty } from "./utils.js";
-import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
 
 export default async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     // entity must be FNote
@@ -22,12 +22,14 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
         }
 
         const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
-        const referenceLinks = $renderedContent.find("a.reference-link");
+        const referenceLinks = $renderedContent.find<HTMLAnchorElement>("a.reference-link");
         const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
         await froca.getNotes(noteIdsToPrefetch);
 
         for (const el of referenceLinks) {
-            await link.loadReferenceLinkTitle($(el));
+            const innerSpan = document.createElement("span");
+            await link.loadReferenceLinkTitle($(innerSpan), el.href);
+            el.replaceChildren(innerSpan);
         }
 
         await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);

apps/client/src/services/css_class_manager.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { getReadableTextColor } from "./css_class_manager";
+
+describe("getReadableTextColor", () => {
+    it("doesn't crash for invalid color", () => {
+        expect(getReadableTextColor("RandomColor")).toBe("#000");
+    });
+
+    it("tolerates different casing", () => {
+        expect(getReadableTextColor("Blue"))
+            .toBe(getReadableTextColor("blue"));
+    });
+});

apps/client/src/services/css_class_manager.ts

@@ -1,21 +1,22 @@
 import clsx from "clsx";
-import {readCssVar} from "../utils/css-var";
 import Color, { ColorInstance } from "color";
 
+import {readCssVar} from "../utils/css-var";
+
 const registeredClasses = new Set<string>();
 const colorsWithHue = new Set<string>();
 
 // Read the color lightness limits defined in the theme as CSS variables
 
 const lightThemeColorMaxLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-light-theme-max-color-lightness"
-                                    ).asNumber(70);
+    document.documentElement,
+    "tree-item-light-theme-max-color-lightness"
+).asNumber(70);
 
 const darkThemeColorMinLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-dark-theme-min-color-lightness"
-                                    ).asNumber(50);
+    document.documentElement,
+    "tree-item-dark-theme-min-color-lightness"
+).asNumber(50);
 
 function createClassForColor(colorString: string | null) {
     if (!colorString?.trim()) return "";
@@ -27,11 +28,12 @@ function createClassForColor(colorString: string | null) {
 
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-                                                   darkThemeColorMinLightness!);
+            darkThemeColorMinLightness!);
         const hue = getHue(color);
 
         $("head").append(`<style>
             .${className}, span.fancytree-active.${className} {
+                --original-custom-color: ${color.hex()};
                 --light-theme-custom-color: ${adjustedColor.lightThemeColor};
                 --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
                 --custom-color-hue: ${hue ?? 'unset'};
@@ -49,7 +51,7 @@ function createClassForColor(colorString: string | null) {
 
 function parseColor(color: string) {
     try {
-        return Color(color);
+        return Color(color.toLowerCase());
     } catch (ex) {
         console.error(ex);
     }
@@ -83,8 +85,8 @@ function getHue(color: ColorInstance) {
 }
 
 export function getReadableTextColor(bgColor: string) {
-    const colorInstance = Color(bgColor);
-    return colorInstance.isLight() ? "#000" : "#fff";
+    const colorInstance = parseColor(bgColor);
+    return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
 }
 
 export default {

apps/client/src/services/dialog.ts

@@ -1,8 +1,9 @@
 import { Modal } from "bootstrap";
 import appContext from "../components/app_context.js";
-import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions } from "../widgets/dialogs/confirm.js";
+import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
+import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 
 export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true, config?: Partial<Modal.Options>) {
     if (closeActDialog) {
@@ -37,8 +38,8 @@ export function closeActiveDialog() {
     }
 }
 
-async function info(message: string) {
-    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res }));
+async function info(message: MessageType, extraProps?: InfoExtraProps) {
+    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { ...extraProps, message, callback: res }));
 }
 
 /**

apps/client/src/services/experimental_features.ts

@@ -0,0 +1,60 @@
+import { t } from "./i18n";
+import options from "./options";
+
+export interface ExperimentalFeature {
+    id: string;
+    name: string;
+    description: string;
+}
+
+export const experimentalFeatures = [
+    {
+        id: "new-layout",
+        name: t("experimental_features.new_layout_name"),
+        description: t("experimental_features.new_layout_description"),
+    }
+] as const satisfies ExperimentalFeature[];
+
+export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
+
+let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
+
+export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
+    if (featureId === "new-layout") {
+        return options.is("newLayout");
+    }
+
+    return getEnabledFeatures().has(featureId);
+}
+
+export function getEnabledExperimentalFeatureIds() {
+    const values = [ ...getEnabledFeatures().values() ];
+    if (options.is("newLayout")) {
+        values.push("new-layout");
+    }
+    return values;
+}
+
+export async function toggleExperimentalFeature(featureId: ExperimentalFeatureId, enable: boolean) {
+    const features = new Set(getEnabledFeatures());
+    if (enable) {
+        features.add(featureId);
+    } else {
+        features.delete(featureId);
+    }
+    await options.save("experimentalFeatures", JSON.stringify(Array.from(features)));
+}
+
+function getEnabledFeatures() {
+    if (!enabledFeatures) {
+        let features: ExperimentalFeatureId[] = [];
+        try {
+            features = JSON.parse(options.get("experimentalFeatures")) as ExperimentalFeatureId[];
+        } catch (e) {
+            console.warn("Failed to parse experimental features from options:", e);
+        }
+        enabledFeatures = new Set(features);
+        enabledFeatures.delete("new-layout"); // handled separately.
+    }
+    return enabledFeatures;
+}

apps/client/src/services/frontend_script_api.ts

@@ -1,26 +1,27 @@
-import server from "./server.js";
-import utils from "./utils.js";
-import toastService from "./toast.js";
-import linkService from "./link.js";
+import { dayjs, formatLogMessage } from "@triliumnext/commons";
+
+import appContext from "../components/app_context.js";
+import type Component from "../components/component.js";
+import type NoteContext from "../components/note_context.js";
+import type FNote from "../entities/fnote.js";
+import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
+import RightPanelWidget from "../widgets/right_panel_widget.js";
+import dateNotesService from "./date_notes.js";
+import dialogService from "./dialog.js";
 import froca from "./froca.js";
+import { preactAPI } from "./frontend_script_api_preact.js";
+import { t } from "./i18n.js";
+import linkService from "./link.js";
 import noteTooltipService from "./note_tooltip.js";
 import protectedSessionService from "./protected_session.js";
-import dateNotesService from "./date_notes.js";
 import searchService from "./search.js";
-import RightPanelWidget from "../widgets/right_panel_widget.js";
-import ws from "./ws.js";
-import appContext from "../components/app_context.js";
-import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
-import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import SpacedUpdate from "./spaced_update.js";
+import server from "./server.js";
 import shortcutService from "./shortcuts.js";
-import dialogService from "./dialog.js";
-import type FNote from "../entities/fnote.js";
-import { t } from "./i18n.js";
-import { dayjs } from "@triliumnext/commons";
-import type NoteContext from "../components/note_context.js";
-import type Component from "../components/component.js";
-import { formatLogMessage } from "@triliumnext/commons";
+import SpacedUpdate from "./spaced_update.js";
+import toastService from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";
 
 /**
  * A whole number
@@ -77,6 +78,10 @@ export interface Api {
 
     /**
      * Entity whose event triggered this execution.
+     *
+     * <p>
+     * For front-end scripts, generally there's no origin entity specified since the scripts are run by the user or automatically by the UI (widgets).
+     * If there is an origin entity specified, then it's going to be a note entity.
      */
     originEntity: unknown | null;
 
@@ -278,12 +283,16 @@ export interface Api {
     getActiveContextNote(): FNote;
 
     /**
-     * @returns returns active context (split)
+     * Obtains the currently active/focused split in the current tab.
+     *
+     * Note that this method does not return the note context of the "Quick edit" panel, it will return the note context behind it.
      */
     getActiveContext(): NoteContext;
 
     /**
-     * @returns returns active main context (first split in a tab, represents the tab as a whole)
+     * Obtains the main context of the current tab. This is the left-most split.
+     *
+     * Note that this method does not return the note context of the "Quick edit" panel, it will return the note context behind it.
      */
     getActiveMainContext(): NoteContext;
 
@@ -456,6 +465,8 @@ export interface Api {
      * Log given message to the log pane in UI
      */
     log(message: string | object): void;
+
+    preact: typeof preactAPI;
 }
 
 /**
@@ -525,9 +536,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         return params.map((p) => {
             if (typeof p === "function") {
                 return `!@#Function: ${p.toString()}`;
-            } else {
-                return p;
             }
+            return p;
         });
     }
 
@@ -554,9 +564,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
             await ws.waitForMaxKnownEntityChangeId();
 
             return ret.executionResult;
-        } else {
-            throw new Error(`server error: ${ret.error}`);
         }
+        throw new Error(`server error: ${ret.error}`);
     };
 
     this.runOnBackend = async (func, params = []) => {
@@ -713,6 +722,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         this.logMessages[noteId].push(message);
         this.logSpacedUpdates[noteId].scheduleUpdate();
     };
+
+    this.preact = preactAPI;
 }
 
 export default FrontendScriptApi as any as {

apps/client/src/services/frontend_script_api_preact.ts

@@ -0,0 +1,101 @@
+import { Fragment, h, VNode } from "preact";
+import * as hooks from "preact/hooks";
+
+import ActionButton from "../widgets/react/ActionButton";
+import Admonition from "../widgets/react/Admonition";
+import Button from "../widgets/react/Button";
+import CKEditor from "../widgets/react/CKEditor";
+import Collapsible from "../widgets/react/Collapsible";
+import Dropdown from "../widgets/react/Dropdown";
+import FormCheckbox from "../widgets/react/FormCheckbox";
+import FormDropdownList from "../widgets/react/FormDropdownList";
+import { FormFileUploadActionButton, FormFileUploadButton } from "../widgets/react/FormFileUpload";
+import FormGroup from "../widgets/react/FormGroup";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../widgets/react/FormList";
+import FormRadioGroup from "../widgets/react/FormRadioGroup";
+import FormText from "../widgets/react/FormText";
+import FormTextArea from "../widgets/react/FormTextArea";
+import FormTextBox from "../widgets/react/FormTextBox";
+import FormToggle from "../widgets/react/FormToggle";
+import * as triliumHooks from "../widgets/react/hooks";
+import Icon from "../widgets/react/Icon";
+import LinkButton from "../widgets/react/LinkButton";
+import LoadingSpinner from "../widgets/react/LoadingSpinner";
+import Modal from "../widgets/react/Modal";
+import NoteAutocomplete from "../widgets/react/NoteAutocomplete";
+import NoteLink from "../widgets/react/NoteLink";
+import RawHtml from "../widgets/react/RawHtml";
+import Slider from "../widgets/react/Slider";
+import RightPanelWidget from "../widgets/sidebar/RightPanelWidget";
+
+export interface WidgetDefinition {
+    parent: "right-pane",
+    render: () => VNode,
+    position?: number,
+}
+
+export interface WidgetDefinitionWithType extends WidgetDefinition {
+    type: "preact-widget"
+}
+
+export interface LauncherWidgetDefinitionWithType {
+    type: "preact-launcher-widget"
+    render: () => VNode
+}
+
+export const preactAPI = Object.freeze({
+    // Core
+    h,
+    Fragment,
+
+    /**
+     * Method that must be run for widget scripts that run on Preact, using JSX. The method just returns the same definition, reserved for future typechecking and perhaps validation purposes.
+     *
+     * @param definition the widget definition.
+     */
+    defineWidget(definition: WidgetDefinition) {
+        return {
+            type: "preact-widget",
+            ...definition
+        };
+    },
+
+    defineLauncherWidget(definition: Omit<LauncherWidgetDefinitionWithType, "type">) {
+        return {
+            type: "preact-launcher-widget",
+            ...definition
+        };
+    },
+
+    // Basic widgets
+    ActionButton,
+    Admonition,
+    Button,
+    CKEditor,
+    Collapsible,
+    Dropdown,
+    FormCheckbox,
+    FormDropdownList,
+    FormFileUploadButton, FormFileUploadActionButton,
+    FormGroup,
+    FormListItem, FormDropdownDivider, FormDropdownSubmenu,
+    FormRadioGroup,
+    FormText,
+    FormTextArea,
+    FormTextBox,
+    FormToggle,
+    Icon,
+    LinkButton,
+    LoadingSpinner,
+    Modal,
+    NoteAutocomplete,
+    NoteLink,
+    RawHtml,
+    Slider,
+
+    // Specialized widgets
+    RightPanelWidget,
+
+    ...hooks,
+    ...triliumHooks
+});

apps/client/src/services/import.ts

@@ -1,4 +1,4 @@
-import toastService, { type ToastOptions } from "./toast.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
 import server from "./server.js";
 import ws from "./ws.js";
 import utils from "./utils.js";
@@ -57,11 +57,11 @@ export async function uploadFiles(entityType: string, parentNoteId: string, file
     }
 }
 
-function makeToast(id: string, message: string): ToastOptions {
+function makeToast(id: string, message: string): ToastOptionsWithRequiredId {
     return {
-        id: id,
+        id,
         title: t("import.import-status"),
-        message: message,
+        message,
         icon: "plus"
     };
 }
@@ -78,7 +78,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("import.in-progress", { progress: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("import.successful"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
 
@@ -100,7 +100,7 @@ ws.subscribeToMessages(async (message: WebSocketMessage) => {
         toastService.showPersistent(makeToast(message.taskId, t("import.in-progress", { progress: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("import.successful"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
 

apps/client/src/services/link.ts

@@ -1,10 +1,11 @@
-import treeService from "./tree.js";
-import linkContextMenuService from "../menus/link_context_menu.js";
-import appContext, { type NoteCommandData } from "../components/app_context.js";
-import froca from "./froca.js";
-import utils from "./utils.js";
 import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
+
+import appContext, { type NoteCommandData } from "../components/app_context.js";
 import { openInCurrentNoteContext } from "../components/note_context.js";
+import linkContextMenuService from "../menus/link_context_menu.js";
+import froca from "./froca.js";
+import treeService from "./tree.js";
+import utils from "./utils.js";
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -27,7 +28,7 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-export type ViewMode = "default" | "source" | "attachments" | "contextual-help";
+export type ViewMode = "default" | "source" | "attachments" | "contextual-help" | "note-map";
 
 export interface ViewScope {
     /**
@@ -99,7 +100,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     const viewMode = viewScope.viewMode || "default";
     let linkTitle = options.title;
 
-    if (!linkTitle) {
+    if (linkTitle === undefined) {
         if (viewMode === "attachments" && viewScope.attachmentId) {
             const attachment = await froca.getAttachment(viewScope.attachmentId);
 
@@ -122,7 +123,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     const $container = $("<span>");
 
     if (showNoteIcon) {
-        let icon = await getLinkIcon(noteId, viewMode);
+        const icon = await getLinkIcon(noteId, viewMode);
 
         if (icon) {
             $container.append($("<span>").addClass(`bx ${icon}`)).append(" ");
@@ -131,7 +132,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
 
     const hash = calculateHash({
         notePath,
-        viewScope: viewScope
+        viewScope
     });
 
     const $noteLink = $("<a>", {
@@ -171,11 +172,11 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     return $container;
 }
 
-function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
+export function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
     notePath = notePath || "";
     const params = [
-        ntxId ? { ntxId: ntxId } : null,
-        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId: hoistedNoteId } : null,
+        ntxId ? { ntxId } : null,
+        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId } : null,
         viewScope.viewMode && viewScope.viewMode !== "default" ? { viewMode: viewScope.viewMode } : null,
         viewScope.attachmentId ? { attachmentId: viewScope.attachmentId } : null
     ].filter((p) => !!p);
@@ -219,7 +220,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     const hash = url.substr(hashIdx + 1); // strip also the initial '#'
-    let [notePath, paramString] = hash.split("?");
+    const [notePath, paramString] = hash.split("?");
 
     const viewScope: ViewScope = {
         viewMode: "default"
@@ -252,7 +253,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     if (searchString) {
-        return { searchString }
+        return { searchString };
     }
 
     if (!notePath.match(/^[_a-z0-9]{4,}(\/[_a-z0-9]{4,})*$/i)) {
@@ -334,7 +335,7 @@ export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDo
                 window.open(hrefLink, "_blank");
             } else {
                 // Enable protocols supported by CKEditor 5 to be clickable.
-                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(protocol + ":"))) {
+                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(`${protocol}:`))) {
                     if ( utils.isElectron()) {
                         const electron = utils.dynamicRequire("electron");
                         electron.shell.openExternal(hrefLink);
@@ -395,7 +396,7 @@ async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | n
 
     href = href || $link.attr("href");
     if (!href) {
-        console.warn("Empty URL for parsing: " + $el[0].outerHTML);
+        console.warn(`Empty URL for parsing: ${$el[0].outerHTML}`);
         return;
     }
 
@@ -438,9 +439,9 @@ async function getReferenceLinkTitle(href: string) {
         const attachment = await note.getAttachmentById(viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
-    } else {
-        return note.title;
     }
+    return note.title;
+
 }
 
 function getReferenceLinkTitleSync(href: string) {
@@ -462,9 +463,9 @@ function getReferenceLinkTitleSync(href: string) {
         const attachment = note.attachments.find((att) => att.attachmentId === viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
-    } else {
-        return note.title;
     }
+    return note.title;
+
 }
 
 if (glob.device !== "print") {

apps/client/src/services/note_autocomplete.ts

@@ -12,7 +12,7 @@ const SELECTED_NOTE_PATH_KEY = "data-note-path";
 const SELECTED_EXTERNAL_LINK_KEY = "data-external-link";
 
 // To prevent search lag when there are a large number of notes, set a delay based on the number of notes to avoid jitter.
-const notesCount = await server.get<number>(`autocomplete/notesCount`);
+const notesCount = 10000; // TODO: Replace with dynamic count from becca once available.
 let debounceTimeoutId: ReturnType<typeof setTimeout>;
 
 function getSearchDelay(notesCount: number): number {

apps/client/src/services/open.ts

@@ -1,6 +1,8 @@
-import utils from "./utils.js";
+import Component from "../components/component.js";
+import FNote from "../entities/fnote.js";
 import options from "./options.js";
 import server from "./server.js";
+import utils from "./utils.js";
 
 type ExecFunction = (command: string, cb: (err: string, stdout: string, stderror: string) => void) => void;
 
@@ -36,9 +38,14 @@ function download(url: string) {
     }
 }
 
-export function downloadFileNote(noteId: string) {
-    const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
+export function downloadFileNote(note: FNote, parentComponent: Component | null, ntxId: string | null | undefined) {
+    if (note.type === "file" && note.mime === "application/pdf" && parentComponent) {
+        // Special handling, manages its own downloading process.
+        parentComponent.triggerEvent("customDownload", { ntxId });
+        return;
+    }
 
+    const url = `${getFileUrl("notes", note.noteId)}?${Date.now()}`; // don't use cache
     download(url);
 }
 
@@ -97,7 +104,7 @@ async function openCustom(type: string, entityId: string, mime: string) {
             // Note that the path separator must be \ instead of /
             filePath = filePath.replace(/\//g, "\\");
         }
-        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ` + filePath;
+        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ${filePath}`;
         exec(command, (err, stdout, stderr) => {
             if (err) {
                 console.error("Open Note custom: ", err);
@@ -131,10 +138,10 @@ export function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
-    } else {
-        // web server can be deployed on subdomain, so we need to use a relative path
-        return url;
     }
+    // web server can be deployed on subdomain, so we need to use a relative path
+    return url;
+
 }
 
 function canOpenInBrowser(mime: string) {

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,14 +1,4 @@
-export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
-type Multiplicity = "single" | "multi";
-
-export interface DefinitionObject {
-    isPromoted?: boolean;
-    labelType?: LabelType;
-    multiplicity?: Multiplicity;
-    numberPrecision?: number;
-    promotedAlias?: string;
-    inverseRelation?: string;
-}
+import { DefinitionObject, LabelType, Multiplicity } from "@triliumnext/commons";
 
 function parse(value: string) {
     const tokens = value.split(",").map((t) => t.trim());

apps/client/src/services/protected_session.ts

@@ -1,7 +1,7 @@
 import server from "./server.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import toastService from "./toast.js";
-import type { ToastOptions } from "./toast.js";
+import type { ToastOptionsWithRequiredId } from "./toast.js";
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
 import froca from "./froca.js";
@@ -97,7 +97,7 @@ async function protectNote(noteId: string, protect: boolean, includingSubtree: b
     await server.put(`notes/${noteId}/protect/${protect ? 1 : 0}?subtree=${includingSubtree ? 1 : 0}`);
 }
 
-function makeToast(message: Message, title: string, text: string): ToastOptions {
+function makeToast(message: Message, title: string, text: string): ToastOptionsWithRequiredId {
     return {
         id: message.taskId,
         title,
@@ -124,7 +124,7 @@ ws.subscribeToMessages(async (message) => {
     } else if (message.type === "taskSucceeded") {
         const text = isProtecting ? t("protected_session.protecting-finished-successfully") : t("protected_session.unprotecting-finished-successfully");
         const toast = makeToast(message, title, text);
-        toast.closeAfter = 3000;
+        toast.timeout = 3000;
 
         toastService.showPersistent(toast);
     }

apps/client/src/services/render.ts

@@ -1,6 +1,10 @@
-import server from "./server.js";
-import bundleService, { type Bundle } from "./bundle.js";
+import { h, VNode } from "preact";
+
 import type FNote from "../entities/fnote.js";
+import { renderReactWidgetAtElement } from "../widgets/react/react_utils.jsx";
+import bundleService, { type Bundle } from "./bundle.js";
+import froca from "./froca.js";
+import server from "./server.js";
 
 async function render(note: FNote, $el: JQuery<HTMLElement>) {
     const relations = note.getRelations("renderNote");
@@ -17,12 +21,34 @@ async function render(note: FNote, $el: JQuery<HTMLElement>) {
         $scriptContainer.append(bundle.html);
 
         // async so that scripts cannot block trilium execution
-        bundleService.executeBundle(bundle, note, $scriptContainer);
+        bundleService.executeBundle(bundle, note, $scriptContainer).then(result => {
+            // Render JSX
+            if (bundle.html === "") {
+                renderIfJsx(bundle, result, $el);
+            }
+        });
     }
 
     return renderNoteIds.length > 0;
 }
 
+async function renderIfJsx(bundle: Bundle, result: unknown, $el: JQuery<HTMLElement>) {
+    // Ensure the root script note is actually a JSX.
+    const rootScriptNoteId = await froca.getNote(bundle.noteId);
+    if (rootScriptNoteId?.mime !== "text/jsx") return;
+
+    // Ensure the output is a valid el.
+    if (typeof result !== "function") return;
+
+    // Obtain the parent component.
+    const closestComponent = glob.getComponentByEl($el.closest(".component")[0]);
+    if (!closestComponent) return;
+
+    // Render the element.
+    const el = h(result as () => VNode, {});
+    renderReactWidgetAtElement(closestComponent, el, $el[0]);
+}
+
 export default {
     render
 };

apps/client/src/services/server.ts

@@ -85,13 +85,15 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File) {
+async function upload(url: string, fileToUpload: File, componentId?: string) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
     return await $.ajax({
         url: window.glob.baseApiUrl + url,
-        headers: await getHeaders(),
+        headers: await getHeaders(componentId ? {
+            "trilium-component-id": componentId
+        } : undefined),
         data: formData,
         type: "PUT",
         timeout: 60 * 60 * 1000,
@@ -133,11 +135,11 @@ async function call<T>(method: string, url: string, componentId?: string, option
             };
 
             ipc.send("server-request", {
-                requestId: requestId,
-                headers: headers,
-                method: method,
+                requestId,
+                headers,
+                method,
                 url: `/${window.glob.baseApiUrl}${url}`,
-                data: data
+                data
             });
         })) as any;
     } else {
@@ -161,7 +163,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, sile
         const options: JQueryAjaxSettings = {
             url: window.glob.baseApiUrl + url,
             type: method,
-            headers: headers,
+            headers,
             timeout: 60000,
             success: (body, textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
@@ -263,7 +265,7 @@ async function reportError(method: string, url: string, statusCode: number, resp
 
     const toastService = (await import("./toast.js")).default;
 
-    const messageStr = typeof message === "string" ? message : JSON.stringify(message);
+    const messageStr = (typeof message === "string" ? message : JSON.stringify(message)) || "-";
 
     if ([400, 404].includes(statusCode) && response && typeof response === "object") {
         toastService.showError(messageStr);
@@ -274,10 +276,22 @@ async function reportError(method: string, url: string, statusCode: number, resp
             ...response
         });
     } else {
-        const title = `${statusCode} ${method} ${url}`;
-        toastService.showErrorTitleAndMessage(title, messageStr);
-        const { throwError } = await import("./ws.js");
-        throwError(`${title} - ${message}`);
+        const { t } = await import("./i18n.js");
+        if (statusCode === 400 && (url.includes("%23") || url.includes("%2F"))) {
+            toastService.showPersistent({
+                id: "trafik-blocked",
+                icon: "bx bx-unlink",
+                title: t("server.unknown_http_error_title"),
+                message: t("server.traefik_blocks_requests")
+            });
+        } else {
+            toastService.showErrorTitleAndMessage(
+                t("server.unknown_http_error_title"),
+                t("server.unknown_http_error_content", { statusCode, method, url, message: messageStr }),
+                15_000);
+        }
+        const { logError } = await import("./ws.js");
+        logError(`${statusCode} ${method} ${url} - ${message}`);
     }
 }
 

apps/client/src/services/shortcuts.ts

@@ -1,7 +1,7 @@
 import utils from "./utils.js";
 
 type ElementType = HTMLElement | Document;
-type Handler = (e: KeyboardEvent) => void;
+export type Handler = (e: KeyboardEvent) => void;
 
 export interface ShortcutBinding {
     element: HTMLElement | Document;

apps/client/src/services/spaced_update.ts

@@ -1,22 +1,30 @@
+import type { SaveState } from "../components/note_context";
+import { getErrorMessage } from "./utils";
+
 type Callback = () => Promise<void> | void;
 
+export type StateCallback = (state: SaveState) => void;
+
 export default class SpacedUpdate {
     private updater: Callback;
     private lastUpdated: number;
     private changed: boolean;
     private updateInterval: number;
     private changeForbidden?: boolean;
+    private stateCallback?: StateCallback;
 
-    constructor(updater: Callback, updateInterval = 1000) {
+    constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
         this.updater = updater;
         this.lastUpdated = Date.now();
         this.changed = false;
         this.updateInterval = updateInterval;
+        this.stateCallback = stateCallback;
     }
 
     scheduleUpdate() {
         if (!this.changeForbidden) {
             this.changed = true;
+            this.stateCallback?.("unsaved");
             setTimeout(() => this.triggerUpdate());
         }
     }
@@ -26,10 +34,13 @@ export default class SpacedUpdate {
             this.changed = false; // optimistic...
 
             try {
+                this.stateCallback?.("saving");
                 await this.updater();
+                this.stateCallback?.("saved");
             } catch (e) {
                 this.changed = true;
-
+                this.stateCallback?.("error");
+                logError(getErrorMessage(e));
                 throw e;
             }
         }
@@ -59,15 +70,22 @@ export default class SpacedUpdate {
         this.updateInterval = interval;
     }
 
-    triggerUpdate() {
+    async triggerUpdate() {
         if (!this.changed) {
             return;
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.updater();
+            this.stateCallback?.("saving");
+            try {
+                await this.updater();
+                this.stateCallback?.("saved");
+                this.changed = false;
+            } catch (e) {
+                this.stateCallback?.("error");
+                logError(getErrorMessage(e));
+            }
             this.lastUpdated = Date.now();
-            this.changed = false;
         } else {
             // update isn't triggered but changes are still pending, so we need to schedule another check
             this.scheduleUpdate();

apps/client/src/services/toast.ts

@@ -1,121 +1,111 @@
-import utils from "./utils.js";
+import { signal } from "@preact/signals";
+
+import appContext from "../components/app_context.js";
+import froca from "./froca.js";
+import { t } from "./i18n.js";
+import utils, { randomString } from "./utils.js";
 
 export interface ToastOptions {
     id?: string;
     icon: string;
     title?: string;
     message: string;
-    delay?: number;
-    autohide?: boolean;
-    closeAfter?: number;
+    timeout?: number;
     progress?: number;
+    buttons?: {
+        text: string;
+        onClick: (api: { dismissToast: () => void }) => void;
+    }[];
 }
 
-function toast({ title, icon, message, id, delay, autohide, progress }: ToastOptions) {
-    const $toast = $(title
-        ? `\
-            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="toast-header">
-                    <strong class="me-auto">
-                        <span class="bx bx-${icon}"></span>
-                        <span class="toast-title"></span>
-                    </strong>
-                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-                </div>
-                <div class="toast-body"></div>
-                <div class="toast-progress"></div>
-            </div>`
-        : `
-            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="toast-icon">
-                    <span class="bx bx-${icon}"></span>
-                </div>
-                <div class="toast-body"></div>
-                <div class="toast-header">
-                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-                </div>
-                <div class="toast-progress"></div>
-            </div>`
-    );
+export type ToastOptionsWithRequiredId = Omit<ToastOptions, "id"> & Required<Pick<ToastOptions, "id">>;
 
-    $toast.toggleClass("no-title", !title);
-    $toast.find(".toast-title").text(title ?? "");
-    $toast.find(".toast-body").html(message);
-    $toast.find(".toast-progress").css("width", `${(progress ?? 0) * 100}%`);
-
-    if (id) {
-        $toast.attr("id", `toast-${id}`);
-    }
-
-    $("#toast-container").append($toast);
-
-    $toast.toast({
-        delay: delay || 3000,
-        autohide: !!autohide
-    });
-
-    $toast.on("hidden.bs.toast", (e) => e.target.remove());
-
-    $toast.toast("show");
-
-    return $toast;
-}
-
-function showPersistent(options: ToastOptions) {
-    let $toast = $(`#toast-${options.id}`);
-
-    if ($toast.length > 0) {
-        $toast.find(".toast-body").html(options.message);
-        $toast.find(".toast-progress").css("width", `${(options.progress ?? 0) * 100}%`);
+function showPersistent(options: ToastOptionsWithRequiredId) {
+    const existingToast = toasts.value.find(toast => toast.id === options.id);
+    if (existingToast) {
+        updateToast(options.id, options);
     } else {
-        options.autohide = false;
-
-        $toast = toast(options);
-    }
-
-    if (options.closeAfter) {
-        setTimeout(() => $toast.remove(), options.closeAfter);
+        addToast(options);
     }
 }
 
 function closePersistent(id: string) {
-    $(`#toast-${id}`).remove();
+    removeToastFromStore(id);
 }
 
-function showMessage(message: string, delay = 2000, icon = "check") {
+function showMessage(message: string, timeout = 2000, icon = "bx bx-check") {
     console.debug(utils.now(), "message:", message);
 
-    toast({
+    addToast({
         icon,
-        message: message,
-        autohide: true,
-        delay
+        message,
+        timeout
     });
 }
 
-export function showError(message: string, delay = 10000) {
+export function showError(message: string, timeout = 10000) {
     console.log(utils.now(), "error: ", message);
 
-    toast({
-        icon: "alert",
-        message: message,
-        autohide: true,
-        delay
+    addToast({
+        icon: "bx bx-error-circle",
+        message,
+        timeout
     });
 }
 
-function showErrorTitleAndMessage(title: string, message: string, delay = 10000) {
+function showErrorTitleAndMessage(title: string, message: string, timeout = 10000) {
     console.log(utils.now(), "error: ", message);
 
-    toast({
-        title: title,
-        icon: "alert",
-        message: message,
-        autohide: true,
-        delay
+    addToast({
+        title,
+        icon: "bx bx-error-circle",
+        message,
+        timeout
     });
 }
 
+export async function showErrorForScriptNote(noteId: string, message: string) {
+    const note = await froca.getNote(noteId, true);
+
+    showPersistent({
+        id: `custom-widget-failure-${noteId}`,
+        title: t("toast.scripting-error", { title: note?.title ?? "" }),
+        icon: note?.getIcon() ?? "bx bx-error-circle",
+        message,
+        timeout: 15_000,
+        buttons: [
+            {
+                text: t("toast.open-script-note"),
+                onClick: () => appContext.tabManager.openInNewTab(noteId, null, true)
+            }
+        ]
+    });
+}
+
+//#region Toast store
+export const toasts = signal<ToastOptionsWithRequiredId[]>([]);
+
+function addToast(opts: ToastOptions) {
+    const id = opts.id ?? randomString();
+    const toast = { ...opts, id };
+    toasts.value = [ ...toasts.value, toast ];
+    return id;
+}
+
+function updateToast(id: string, partial: Partial<ToastOptions>) {
+    toasts.value = toasts.value.map(toast => {
+        if (toast.id === id) {
+            return { ...toast, ...partial };
+        }
+        return toast;
+    });
+}
+
+export function removeToastFromStore(id: string) {
+    toasts.value = toasts.value.filter(toast => toast.id !== id);
+}
+//#endregion
+
 export default {
     showMessage,
     showError,

apps/client/src/services/tree.ts

@@ -4,6 +4,8 @@ import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
 import appContext from "../components/app_context.js";
 
+export const NOTE_PATH_TITLE_SEPARATOR = " › ";
+
 async function resolveNotePath(notePath: string, hoistedNoteId = "root") {
     const runPath = await resolveNotePathToSegments(notePath, hoistedNoteId);
 
@@ -254,7 +256,7 @@ async function getNotePathTitle(notePath: string) {
 
     const titlePath = await getNotePathTitleComponents(notePath);
 
-    return titlePath.join(" / ");
+    return titlePath.join(NOTE_PATH_TITLE_SEPARATOR);
 }
 
 async function getNoteTitleWithPathAsSuffix(notePath: string) {

apps/client/src/services/utils.ts

@@ -1,6 +1,8 @@
 import { dayjs } from "@triliumnext/commons";
-import type { ViewScope } from "./link.js";
+import { snapdom } from "@zumer/snapdom";
+
 import FNote from "../entities/fnote";
+import type { ViewMode, ViewScope } from "./link.js";
 
 const SVG_MIME = "image/svg+xml";
 
@@ -112,9 +114,8 @@ function formatDateISO(date: Date) {
 export function formatDateTime(date: Date, userSuppliedFormat?: string): string {
     if (userSuppliedFormat?.trim()) {
         return dayjs(date).format(userSuppliedFormat);
-    } else {
-        return `${formatDate(date)} ${formatTime(date)}`;
     }
+    return `${formatDate(date)} ${formatTime(date)}`;
 }
 
 function localNowDateTime() {
@@ -132,6 +133,8 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
+export const isStandalone = window.glob.isStandalone;
+
 /**
  * Returns `true` if the client is running as a PWA, otherwise `false`.
  */
@@ -150,7 +153,7 @@ export function isMac() {
 
 export const hasTouchBar = (isMac() && isElectron());
 
-function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent | JQuery.ContextMenuEvent | JQuery.TriggeredEvent | React.PointerEvent<HTMLCanvasElement> | JQueryEventObject) {
+export function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent | JQuery.ContextMenuEvent | JQuery.TriggeredEvent | React.PointerEvent<HTMLCanvasElement> | JQueryEventObject) {
     return (!isMac() && evt.ctrlKey) || (isMac() && evt.metaKey);
 }
 
@@ -186,13 +189,15 @@ export function formatSize(size: number | null | undefined) {
         return "";
     }
 
-    size = Math.max(Math.round(size / 1024), 1);
-
-    if (size < 1024) {
-        return `${size} KiB`;
-    } else {
-        return `${Math.round(size / 102.4) / 10} MiB`;
+    if (size === 0) {
+        return "0 B";
     }
+
+    const k = 1024;
+    const sizes = ["B", "KiB", "MiB", "GiB"];
+    const i = Math.floor(Math.log(size) / Math.log(k));
+
+    return `${Math.round((size / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
 }
 
 function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
@@ -207,7 +212,7 @@ function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
     return obj;
 }
 
-export function randomString(len: number) {
+export function randomString(len: number = 16) {
     let text = "";
     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
@@ -236,7 +241,7 @@ export function isIOS() {
     return /iPad|iPhone|iPod/.test(navigator.userAgent);
 }
 
-function isDesktop() {
+export function isDesktop() {
     return (
         window.glob?.device === "desktop" ||
         // window.glob.device is not available in setup
@@ -296,18 +301,18 @@ function formatHtml(html: string) {
     let indent = "\n";
     const tab = "\t";
     let i = 0;
-    let pre: { indent: string; tag: string }[] = [];
+    const pre: { indent: string; tag: string }[] = [];
 
     html = html
-        .replace(new RegExp("<pre>([\\s\\S]+?)?</pre>"), function (x) {
+        .replace(new RegExp("<pre>([\\s\\S]+?)?</pre>"), (x) => {
             pre.push({ indent: "", tag: x });
-            return "<--TEMPPRE" + i++ + "/-->";
+            return `<--TEMPPRE${i++}/-->`;
         })
-        .replace(new RegExp("<[^<>]+>[^<]?", "g"), function (x) {
+        .replace(new RegExp("<[^<>]+>[^<]?", "g"), (x) => {
             let ret;
             const tagRegEx = /<\/?([^\s/>]+)/.exec(x);
-            let tag = tagRegEx ? tagRegEx[1] : "";
-            let p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
+            const tag = tagRegEx ? tagRegEx[1] : "";
+            const p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
 
             if (p) {
                 const pInd = parseInt(p[1]);
@@ -317,24 +322,22 @@ function formatHtml(html: string) {
             if (["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"].indexOf(tag) >= 0) {
                 // self closing tag
                 ret = indent + x;
+            } else if (x.indexOf("</") < 0) {
+                //open tag
+                if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
+                else ret = indent + x;
+                !p && (indent += tab);
             } else {
-                if (x.indexOf("</") < 0) {
-                    //open tag
-                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
-                    else ret = indent + x;
-                    !p && (indent += tab);
-                } else {
-                    //close tag
-                    indent = indent.substr(0, indent.length - 1);
-                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
-                    else ret = indent + x;
-                }
+                //close tag
+                indent = indent.substr(0, indent.length - 1);
+                if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
+                else ret = indent + x;
             }
             return ret;
         });
 
     for (i = pre.length; i--;) {
-        html = html.replace("<--TEMPPRE" + i + "/-->", pre[i].tag.replace("<pre>", "<pre>\n").replace("</pre>", pre[i].indent + "</pre>"));
+        html = html.replace(`<--TEMPPRE${i}/-->`, pre[i].tag.replace("<pre>", "<pre>\n").replace("</pre>", `${pre[i].indent}</pre>`));
     }
 
     return html.charAt(0) === "\n" ? html.substr(1, html.length - 1) : html;
@@ -363,11 +366,11 @@ type dynamicRequireMappings = {
 export function dynamicRequire<T extends keyof dynamicRequireMappings>(moduleName: T): Awaited<dynamicRequireMappings[T]>{
     if (typeof __non_webpack_require__ !== "undefined") {
         return __non_webpack_require__(moduleName);
-    } else {
-        // explicitly pass as string and not as expression to suppress webpack warning
-        // 'Critical dependency: the request of a dependency is an expression'
-        return require(`${moduleName}`);
     }
+    // explicitly pass as string and not as expression to suppress webpack warning
+    // 'Critical dependency: the request of a dependency is an expression'
+    return require(`${moduleName}`);
+
 }
 
 function timeLimit<T>(promise: Promise<T>, limitMs: number, errorMessage?: string) {
@@ -438,7 +441,20 @@ async function openInAppHelp($button: JQuery<HTMLElement>) {
  * @param inAppHelpPage the ID of the help note (excluding the `_help_` prefix).
  * @returns a promise that resolves once the help has been opened.
  */
-export async function openInAppHelpFromUrl(inAppHelpPage: string) {
+export function openInAppHelpFromUrl(inAppHelpPage: string) {
+    return openInReusableSplit(`_help_${inAppHelpPage}`, "contextual-help");
+}
+
+/**
+ * Similar to opening a new note in a split, but re-uses an existing split if there is already one open with the same view mode.
+ *
+ * @param targetNoteId the note ID to open in the split.
+ * @param targetViewMode the view mode of the split to open the note in.
+ * @param openOpts additional options for opening the note.
+ */
+export async function openInReusableSplit(targetNoteId: string, targetViewMode: ViewMode, openOpts: {
+    hoistedNoteId?: string;
+} = {}) {
     // Dynamic import to avoid import issues in tests.
     const appContext = (await import("../components/app_context.js")).default;
     const activeContext = appContext.tabManager.getActiveContext();
@@ -446,23 +462,20 @@ export async function openInAppHelpFromUrl(inAppHelpPage: string) {
         return;
     }
     const subContexts = activeContext.getSubContexts();
-    const targetNote = `_help_${inAppHelpPage}`;
-    const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
-    const viewScope: ViewScope = {
-        viewMode: "contextual-help",
-    };
-    if (!helpSubcontext) {
-        // The help is not already open, open a new split with it.
+    const existingSubcontext = subContexts.find((s) => s.viewScope?.viewMode === targetViewMode);
+    const viewScope: ViewScope = { viewMode: targetViewMode };
+    if (!existingSubcontext) {
+        // The target split is not already open, open a new split with it.
         const { ntxId } = subContexts[subContexts.length - 1];
         appContext.triggerCommand("openNewNoteSplit", {
             ntxId,
-            notePath: targetNote,
-            hoistedNoteId: "_help",
+            notePath: targetNoteId,
+            hoistedNoteId: openOpts.hoistedNoteId,
             viewScope
-        })
+        });
     } else {
-        // There is already a help window open, make sure it opens on the right note.
-        helpSubcontext.setNote(targetNote, { viewScope });
+        // There is already a target split open, make sure it opens on the right note.
+        existingSubcontext.setNote(targetNoteId, { viewScope });
     }
 }
 
@@ -498,8 +511,8 @@ export function escapeRegExp(str: string) {
 function areObjectsEqual(...args: unknown[]) {
     let i;
     let l;
-    let leftChain: Object[];
-    let rightChain: Object[];
+    let leftChain: object[];
+    let rightChain: object[];
 
     function compare2Objects(x: unknown, y: unknown) {
         let p;
@@ -628,16 +641,69 @@ export function createImageSrcUrl(note: FNote) {
     return `api/images/${note.noteId}/${encodeURIComponent(note.title)}?timestamp=${Date.now()}`;
 }
 
+
+
+
+
 /**
- * Given a string representation of an SVG, triggers a download of the file on the client device.
+ * Helper function to prepare an element for snapdom rendering.
+ * Handles string parsing and temporary DOM attachment for style computation.
+ *
+ * @param source - Either an SVG/HTML string to be parsed, or an existing SVG/HTML element.
+ * @returns An object containing the prepared element and a cleanup function.
+ *          The cleanup function removes temporarily attached elements from the DOM,
+ *          or is a no-op if the element was already in the DOM.
+ */
+function prepareElementForSnapdom(source: string | SVGElement | HTMLElement): {
+    element: SVGElement | HTMLElement;
+    cleanup: () => void;
+} {
+    if (typeof source === 'string') {
+        const parser = new DOMParser();
+
+        // Detect if content is SVG or HTML
+        const isSvg = source.trim().startsWith('<svg');
+        const mimeType = isSvg ? SVG_MIME : 'text/html';
+
+        const doc = parser.parseFromString(source, mimeType);
+        const element = doc.documentElement;
+
+        // Temporarily attach to DOM for proper style computation
+        element.style.position = 'absolute';
+        element.style.left = '-9999px';
+        element.style.top = '-9999px';
+        document.body.appendChild(element);
+
+        return {
+            element,
+            cleanup: () => document.body.removeChild(element)
+        };
+    }
+
+    return {
+        element: source,
+        cleanup: () => {} // No-op for existing elements
+    };
+}
+
+/**
+ * Downloads an SVG using snapdom for proper rendering. Can accept either an SVG string, an SVG element, or an HTML element.
  *
  * @param nameWithoutExtension the name of the file. The .svg suffix is automatically added to it.
- * @param svgContent the content of the SVG file download.
+ * @param svgSource either an SVG string, an SVGElement, or an HTMLElement to be downloaded.
  */
-function downloadSvg(nameWithoutExtension: string, svgContent: string) {
-    const filename = `${nameWithoutExtension}.svg`;
-    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
-    triggerDownload(filename, dataUrl);
+async function downloadAsSvg(nameWithoutExtension: string, svgSource: string | SVGElement | HTMLElement) {
+    const { element, cleanup } = prepareElementForSnapdom(svgSource);
+
+    try {
+        const result = await snapdom(element, {
+            backgroundColor: "transparent",
+            scale: 2
+        });
+        triggerDownload(`${nameWithoutExtension}.svg`, result.url);
+    } finally {
+        cleanup();
+    }
 }
 
 /**
@@ -658,62 +724,26 @@ function triggerDownload(fileName: string, dataUrl: string) {
 
     document.body.removeChild(element);
 }
-
 /**
- * Given a string representation of an SVG, renders the SVG to PNG and triggers a download of the file on the client device.
- *
- * Note that the SVG must specify its width and height as attributes in order for it to be rendered.
+ * Downloads an SVG as PNG using snapdom. Can accept either an SVG string, an SVG element, or an HTML element.
  *
  * @param nameWithoutExtension the name of the file. The .png suffix is automatically added to it.
- * @param svgContent the content of the SVG file download.
- * @returns a promise which resolves if the operation was successful, or rejects if it failed (permissions issue or some other issue).
+ * @param svgSource either an SVG string, an SVGElement, or an HTMLElement to be converted to PNG.
  */
-function downloadSvgAsPng(nameWithoutExtension: string, svgContent: string) {
-    return new Promise<void>((resolve, reject) => {
-        // First, we need to determine the width and the height from the input SVG.
-        const result = getSizeFromSvg(svgContent);
-        if (!result) {
-            reject();
-            return;
-        }
+async function downloadAsPng(nameWithoutExtension: string, svgSource: string | SVGElement | HTMLElement) {
+    const { element, cleanup } = prepareElementForSnapdom(svgSource);
 
-        // Convert the image to a blob.
-        const { width, height } = result;
-
-        // Create an image element and load the SVG.
-        const imageEl = new Image();
-        imageEl.width = width;
-        imageEl.height = height;
-        imageEl.crossOrigin = "anonymous";
-        imageEl.onload = () => {
-            try {
-                // Draw the image with a canvas.
-                const canvasEl = document.createElement("canvas");
-                canvasEl.width = imageEl.width;
-                canvasEl.height = imageEl.height;
-                document.body.appendChild(canvasEl);
-
-                const ctx = canvasEl.getContext("2d");
-                if (!ctx) {
-                    reject();
-                }
-
-                ctx?.drawImage(imageEl, 0, 0);
-
-                const imgUri = canvasEl.toDataURL("image/png")
-                triggerDownload(`${nameWithoutExtension}.png`, imgUri);
-                document.body.removeChild(canvasEl);
-                resolve();
-            } catch (e) {
-                console.warn(e);
-                reject();
-            }
-        };
-        imageEl.onerror = (e) => reject(e);
-        imageEl.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
-    });
+    try {
+        const result = await snapdom(element, {
+            backgroundColor: "transparent",
+            scale: 2
+        });
+        const pngImg = await result.toPng();
+        await triggerDownload(`${nameWithoutExtension}.png`, pngImg.src);
+    } finally {
+        cleanup();
+    }
 }
-
 export function getSizeFromSvg(svgContent: string) {
     const svgDocument = (new DOMParser()).parseFromString(svgContent, SVG_MIME);
 
@@ -735,11 +765,11 @@ export function getSizeFromSvg(svgContent: string) {
         return {
             width: parseFloat(width),
             height: parseFloat(height)
-        }
-    } else {
-        console.warn("SVG export error", svgDocument.documentElement);
-        return null;
+        };
     }
+    console.warn("SVG export error", svgDocument.documentElement);
+    return null;
+
 }
 
 /**
@@ -786,7 +816,7 @@ function compareVersions(v1: string, v2: string): number {
 /**
  * Compares two semantic version strings and returns `true` if the latest version is greater than the current version.
  */
-function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
+export function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
     if (!latestVersion) {
         return false;
     }
@@ -868,9 +898,9 @@ export function mapToKeyValueArray<K extends string | number | symbol, V>(map: R
 export function getErrorMessage(e: unknown) {
     if (e && typeof e === "object" && "message" in e && typeof e.message === "string") {
         return e.message;
-    } else {
-        return "Unknown error";
     }
+    return "Unknown error";
+
 }
 
 /**
@@ -925,8 +955,8 @@ export default {
     areObjectsEqual,
     copyHtmlToClipboard,
     createImageSrcUrl,
-    downloadSvg,
-    downloadSvgAsPng,
+    downloadAsSvg,
+    downloadAsPng,
     compareVersions,
     isUpdateAvailable,
     isLaunchBarConfig

apps/client/src/stylesheets/boxicons-compat.css

@@ -0,0 +1,498 @@
+.bx-ul
+{
+    margin-left: 2em;
+    padding-left: 0;
+
+    list-style: none;
+}
+.bx-ul > li
+{
+    position: relative;
+}
+.bx-ul .bx
+{
+    font-size: inherit;
+    line-height: inherit;
+
+    position: absolute;
+    left: -2em;
+
+    width: 2em;
+
+    text-align: center;
+}
+@-webkit-keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
+    }
+}
+@keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
+    }
+}
+@-webkit-keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+                transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+                transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+                transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+                transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-up
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(-20px);
+                transform: translateY(-20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-up
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(-20px);
+                transform: translateY(-20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-down
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(20px);
+                transform: translateY(20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-down
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(20px);
+                transform: translateY(20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+                transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+}
+.bx-spin
+{
+    -webkit-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+}
+.bx-spin-hover:hover
+{
+    -webkit-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+}
+
+.bx-tada
+{
+    -webkit-animation: tada 1.5s ease infinite;
+            animation: tada 1.5s ease infinite;
+}
+.bx-tada-hover:hover
+{
+    -webkit-animation: tada 1.5s ease infinite;
+            animation: tada 1.5s ease infinite;
+}
+
+.bx-flashing
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+            animation: flashing 1.5s infinite linear;
+}
+.bx-flashing-hover:hover
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+            animation: flashing 1.5s infinite linear;
+}
+
+.bx-burst
+{
+    -webkit-animation: burst 1.5s infinite linear;
+            animation: burst 1.5s infinite linear;
+}
+.bx-burst-hover:hover
+{
+    -webkit-animation: burst 1.5s infinite linear;
+            animation: burst 1.5s infinite linear;
+}
+.bx-fade-up
+{
+    -webkit-animation: fade-up 1.5s infinite linear;
+            animation: fade-up 1.5s infinite linear;
+}
+.bx-fade-up-hover:hover
+{
+    -webkit-animation: fade-up 1.5s infinite linear;
+            animation: fade-up 1.5s infinite linear;
+}
+.bx-fade-down
+{
+    -webkit-animation: fade-down 1.5s infinite linear;
+            animation: fade-down 1.5s infinite linear;
+}
+.bx-fade-down-hover:hover
+{
+    -webkit-animation: fade-down 1.5s infinite linear;
+            animation: fade-down 1.5s infinite linear;
+}
+.bx-fade-left
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+            animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-left-hover:hover
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+            animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-right
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+            animation: fade-right 1.5s infinite linear;
+}
+.bx-fade-right-hover:hover
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+            animation: fade-right 1.5s infinite linear;
+}
+.bx-xs
+{
+    font-size: 1rem!important;
+}
+.bx-sm
+{
+    font-size: 1.55rem!important;
+}
+.bx-md
+{
+    font-size: 2.25rem!important;
+}
+.bx-lg
+{
+    font-size: 3.0rem!important;
+}
+.bx-fw
+{
+    font-size: 1.2857142857em;
+    line-height: .8em;
+
+    width: 1.2857142857em;
+    height: .8em;
+    margin-top: -.2em!important;
+
+    vertical-align: middle;
+}
+.bx-pull-left
+{
+    float: left;
+
+    margin-right: .3em!important;
+}
+.bx-pull-right
+{
+    float: right;
+
+    margin-left: .3em!important;
+}
+.bx-rotate-90
+{
+    transform: rotate(90deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
+}
+.bx-rotate-180
+{
+    transform: rotate(180deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
+}
+.bx-rotate-270
+{
+    transform: rotate(270deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+}
+.bx-flip-horizontal
+{
+    transform: scaleX(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
+}
+.bx-flip-vertical
+{
+    transform: scaleY(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
+}
+.bx-border
+{
+    padding: .25em;
+
+    border: .07em solid rgba(0,0,0,.1);
+    border-radius: .25em;
+}
+.bx-border-circle
+{
+    padding: .25em;
+
+    border: .07em solid rgba(0,0,0,.1);
+    border-radius: 50%;
+}
+
+/** Custom icon **/
+.bx-empty {
+    width: 1em;
+    display: inline-block;
+}

apps/client/src/stylesheets/style.css

@@ -1,3 +1,5 @@
+@import "./boxicons-compat.css";
+
 @font-face {
     font-family: Montserrat;
     src: url(../fonts/Montserrat-Light.ttf);
@@ -24,8 +26,8 @@
     --bs-body-font-family: var(--main-font-family) !important;
     --bs-body-font-weight: var(--main-font-weight) !important;
     --bs-body-color: var(--main-text-color) !important;
-    --bs-body-bg: var(--main-background-color) !important;    
-    --ck-mention-list-max-height: 500px;    
+    --bs-body-bg: var(--main-background-color) !important;
+    --ck-mention-list-max-height: 500px;
     --tn-modal-max-height: 90vh;
 
     --tree-item-light-theme-max-color-lightness: 50;
@@ -423,20 +425,19 @@ body.desktop .tabulator-popup-container,
     pointer-events: none;
 }
 
-.dropdown-menu .disabled .disabled-tooltip {
+.dropdown-menu .disabled .contextual-help {
     pointer-events: all;
     margin-inline-start: 8px;
     font-size: 0.75rem;
-    color: var(--disabled-tooltip-icon-color);
+    color: var(--contextual-help-icon-color);
     cursor: help;
     opacity: 0.75;
 }
 
-.dropdown-menu .disabled .disabled-tooltip:hover {
+.dropdown-menu .disabled .contextual-help:hover {
     opacity: 1;
 }
 
-.dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
 .tabulator-menu-item:hover,
 :root .excalidraw .context-menu .context-menu-item:hover {
@@ -458,6 +459,7 @@ body.desktop .tabulator-popup-container,
 }
 
 body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
+body.desktop .dropdown-menu .dropdown-toggle,
 body #context-menu-container .dropdown-item > span,
 body.mobile .dropdown .dropdown-submenu > span {
     display: flex;
@@ -471,7 +473,7 @@ body.mobile .dropdown .dropdown-submenu > span {
     padding-inline-start: 12px;
 }
 
-.dropdown-menu kbd {    
+.dropdown-menu kbd {
     color: var(--muted-text-color);
     border: none;
     background-color: transparent;
@@ -487,7 +489,7 @@ body.mobile .dropdown .dropdown-submenu > span {
     border: 1px solid transparent !important;
 }
 
-/*  This is a workaround for Firefox not supporting break-before / break-after: avoid on columns. 
+/*  This is a workaround for Firefox not supporting break-before / break-after: avoid on columns.
  *  It usually wraps a menu item followed by a separator / header and another menu item. */
 .dropdown-no-break {
     break-inside: avoid;
@@ -521,9 +523,7 @@ body.mobile .dropdown .dropdown-submenu > span {
 .cm-editor {
     height: 100%;
     outline: none !important;
-    border-radius: 6px;
     overflow: hidden;
-    margin: 4px;
     font-size: var(--monospace-font-size);
 }
 
@@ -629,6 +629,11 @@ pre:not(.hljs) {
     padding: var(--padding-size);
 }
 
+pre:has(> .cm-editor) {
+    padding: 0;
+    margin: 0;
+}
+
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
@@ -720,6 +725,10 @@ table.promoted-attributes-in-tooltip th {
     z-index: 32767 !important;
 }
 
+.pre-wrap-text {
+    white-space: pre-wrap;
+}
+
 .bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: var(--main-border-color) !important;
 }
@@ -1015,15 +1024,9 @@ div[data-notify="container"] {
     font-family: var(--monospace-font-family);
 }
 
-svg.ck-icon {
-    &.ck-icon_inherit-color path[fill="#333"] {
-        fill: currentColor;
-    }
-
-    &.note-icon {
-        color: var(--main-text-color);
-        font-size: 20px;
-    }
+svg.ck-icon.note-icon {
+    color: var(--main-text-color);
+    font-size: 20px;
 }
 
 .ck-content {
@@ -1127,11 +1130,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     border-color: var(--main-border-color) !important;
 }
 
-.bx-empty {
-    width: 1em;
-    display: inline-block;
-}
-
 .modal-header {
     padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
 }
@@ -1141,61 +1139,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     margin: 0 12px;
 }
 
-#toast-container {
-    position: absolute;
-    width: 100%;
-    top: 20px;
-    pointer-events: none;
-}
-
-.toast {
-    --bs-toast-bg: var(--accented-background-color);
-    --bs-toast-color: var(--main-text-color);
-    z-index: 9999999999 !important;
-    pointer-events: all;
-    overflow: hidden;
-}
-
-.toast-header {
-    background-color: var(--more-accented-background-color) !important;
-    color: var(--main-text-color) !important;
-}
-
-.toast-body {
-    white-space: preserve-breaks;
-    overflow: hidden;
-}
-
-.toast.no-title {
-    display: flex;
-    flex-direction: row;
-}
-
-.toast.no-title .toast-icon {
-    display: flex;
-    align-items: center;
-    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
-}
-
-.toast.no-title .toast-body {
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-}
-
-.toast.no-title .toast-header {
-    background-color: unset !important;
-}
-
-.toast .toast-progress {
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    background-color: var(--toast-text-color) !important;
-    height: 4px;
-    transition: width 0.1s linear;    
-}
-
 .ck-mentions .ck-button {
     font-size: var(--detail-font-size) !important;
     padding: 5px;
@@ -1376,12 +1319,21 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
     top: 0;
     inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
     margin-top: -10px;
-    min-width: 15rem;
     /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */
     max-height: 600px;
     overflow: auto;
 }
 
+body.desktop .dropdown-submenu > .dropdown-menu {
+    min-width: max-content;
+    max-width: 300px;
+}
+
+.dropdown-submenu.dropstart > .dropdown-menu {
+    inset-inline-start: auto;
+    inset-inline-end: calc(100% - 2px);
+}
+
 body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     inset-inline-start: calc(-100% + 10px);
 }
@@ -1428,6 +1380,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     background-color: var(--scrollbar-background-color);
 }
 
+::-webkit-scrollbar-button {
+    display: none;
+}
+
 ::-webkit-scrollbar-corner {
     background-color: inherit;
 }
@@ -1652,7 +1608,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         inset-inline-start: 0;
         inset-inline-end: 0;
         margin: 0 !important;
-        max-height: 85vh;        
+        max-height: 85vh;
         display: flex;
     }
 
@@ -1840,7 +1796,7 @@ button.close:hover {
     display: none;
 }
 
-.reference-link .bx {
+.reference-link .tn-icon {
     position: relative;
     top: 1px;
     margin-inline-end: 3px;
@@ -1992,6 +1948,10 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     padding-inline-start: 1em;
 }
 
+.tab-row-widget {
+    contain: inline-size;
+}
+
 #tab-row-left-spacer {
     width: env(titlebar-area-x);
     -webkit-app-region: drag;
@@ -2001,7 +1961,7 @@ body.electron.platform-darwin:not(.native-titlebar):not(.full-screen) #tab-row-l
     width: 80px;
 }
 
-.tab-row-widget {
+body.electron:not(.platform-darwin) .tab-row-container {
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }
 
@@ -2052,8 +2012,10 @@ body.zen .shared-info-widget,
 body.zen .ribbon-container:not(:has(.classic-toolbar-widget)),
 body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
-body.zen .note-icon-widget,
 body.zen .title-row .icon-action,
+body.zen .note-badges > *:not(.read-only-badge),
+body.zen .ribbon-button-container,
+body.zen .inline-title,
 body.zen .promoted-attributes-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
 body.zen .action-button,
@@ -2076,11 +2038,11 @@ body.zen #launcher-pane {
 }
 
 body.zen .title-row {
-    display: block !important;
     height: unset !important;
     -webkit-app-region: drag;
     padding-inline-start: env(titlebar-area-x);
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
+    border-bottom: none !important;
 }
 
 body.zen .floating-buttons {
@@ -2100,8 +2062,6 @@ body.zen .floating-buttons-children .button-widget {
 body.zen .note-title-widget,
 body.zen .note-title-widget input {
     font-size: 1rem !important;
-    background: transparent !important;
-    pointer-events: none;
 }
 
 body.zen #detail-container {
@@ -2154,65 +2114,114 @@ body.zen .note-split.type-text .scrolling-container {
 
 body.zen:not(.backdrop-effects-disabled) .note-split.type-text .scrolling-container {
     --padding-top: 50px; /* Should be enough to cover the title row */
-    
+
     padding-top: var(--padding-top);
     scroll-padding-top: var(--padding-top);
 }
 
 /* Fixed formatting toolbar */
 
-body.zen .note-split .ribbon-container {
-    position: fixed;
-    left: 0;
-    bottom: 20px;
-    width: 100%;
-    z-index: 1000;
-    opacity: 0; /* Hidden unless the current note split is focused */
-    pointer-events: none;
-    transition: opacity 100ms linear;
-}
-
-body.zen .note-split:focus-within .ribbon-container {
-    opacity: 1; /* Show when the note split is focused */
-}
-
-body.zen .note-split .ribbon-container .ribbon-body {
-    border: 0;
-}
-
-body.zen .note-split .ribbon-container .classic-toolbar-widget {
-    margin: auto;
-    width: fit-content;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
-    border-radius: 8px;
-    border: 1px solid var(--main-border-color);
-    padding: 4px;
-    background: var(--menu-background-color);
-}
-
-body.zen .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
-    /* Hide the toolbar wrapper if the toolbar is missing */
-    display: none;
-}
-
-body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
-    pointer-events: all;
-}
-
-@media (max-width: 1300px) {
-    body.zen .note-split .ribbon-container .classic-toolbar-widget {
-        /* Set the toolbar to full with */
+body.zen:not(.experimental-feature-new-layout) {
+    .note-split .ribbon-container {
+        position: fixed;
+        left: 0;
+        bottom: 20px;
         width: 100%;
+        z-index: 1000;
+        opacity: 0; /* Hidden unless the current note split is focused */
+        pointer-events: none;
+        transition: opacity 100ms linear;
     }
 
-    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
-    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
-    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
-    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
-    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
-        /* Force toolbar items overflow dropdowns open upwards */
-        top: auto;
-        bottom: 100%;
+    .note-split:focus-within .ribbon-container {
+        opacity: 1; /* Show when the note split is focused */
+    }
+
+    .note-split .ribbon-container .ribbon-body {
+        border: 0;
+    }
+
+    .note-split .ribbon-container .classic-toolbar-widget {
+        margin: auto;
+        width: fit-content;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
+        border-radius: 8px;
+        border: 1px solid var(--main-border-color);
+        padding: 4px;
+        background: var(--menu-background-color);
+    }
+
+    .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
+        /* Hide the toolbar wrapper if the toolbar is missing */
+        display: none;
+    }
+
+    .note-split:focus-within .ribbon-container .classic-toolbar-widget {
+        pointer-events: all;
+    }
+
+    @media (max-width: 1300px) {
+        .note-split .ribbon-container .classic-toolbar-widget {
+            /* Set the toolbar to full with */
+            width: 100%;
+        }
+
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+            /* Force toolbar items overflow dropdowns open upwards */
+            top: auto;
+            bottom: 100%;
+        }
+    }
+}
+
+body.zen.experimental-feature-new-layout {
+    .status-bar {
+        display: none;
+    }
+
+    .classic-toolbar-widget {
+        position: fixed;
+        left: 50%;
+        bottom: 20px;
+        z-index: 1000;
+        opacity: 0; /* Hidden unless the current note split is focused */
+        pointer-events: none;
+        transition: opacity 100ms linear;
+        width: fit-content;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
+        border-radius: 8px;
+        border: 1px solid var(--main-border-color);
+        padding: 4px;
+        background: var(--menu-background-color) !important;
+        transform: translateX(-50%);
+        backdrop-filter: blur(6px);
+    }
+
+    #root-widget:has(.note-split.type-text:focus-within) .classic-toolbar-widget,
+    .classic-toolbar-widget:focus-within {
+        opacity: 1; /* Show when the note split is focused */
+        pointer-events: all;
+    }
+
+    @media (max-width: 1300px) {
+        .classic-toolbar-widget {
+            /* Set the toolbar to full with */
+            width: 100%;
+        }
+
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+            /* Force toolbar items overflow dropdowns open upwards */
+            top: auto;
+            bottom: 100%;
+        }
     }
 }
 
@@ -2406,7 +2415,7 @@ footer.webview-footer button {
     gap: 5px;
 }
 
-.right-pane-tab .tab-title .bx {
+.right-pane-tab .tab-title .tn-icon {
     font-size: 1.1em;
 }
 
@@ -2426,7 +2435,7 @@ footer.webview-footer button {
     margin-bottom: 0;
 }
 
-.admonition::before {  
+.admonition::before {
     color: var(--accent-color);
     font-family: boxicons !important;
     position: absolute;
@@ -2452,7 +2461,7 @@ footer.webview-footer button {
 
 .ck-content ul.todo-list li:has(> span.todo-list__label input[type="checkbox"]:checked) > span.todo-list__label span.todo-list__label__description {
     text-decoration: line-through;
-    opacity: 0.6;    
+    opacity: 0.6;
 }
 
 .chat-options-container {
@@ -2519,6 +2528,11 @@ footer.webview-footer button {
     inset-inline-start: 10px;
 }
 
+.content-floating-buttons.top-right {
+    top: 10px;
+    inset-inline-end: 10px;
+}
+
 .content-floating-buttons.bottom-left {
     bottom: 10px;
     inset-inline-start: 10px;
@@ -2529,18 +2543,11 @@ footer.webview-footer button {
     inset-inline-end: 10px;
 }
 
-.content-floating-buttons button.bx {
+.content-floating-buttons button.tn-icon {
     font-size: 130%;
     padding: 1px 10px 1px 10px;
 }
 
-/* Customized icons */
-
-.bx-tn-toc::before {
-    content: "\ec24";
-    transform: rotate(180deg);
-}
-
 /* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */
@@ -2585,6 +2592,7 @@ iframe.print-iframe {
     position: relative;
     flex-grow: 1;
     width: 100%;
+    overflow: hidden;
 }
 
 /* Calendar collection */
@@ -2599,7 +2607,7 @@ iframe.print-iframe {
     body.mobile {
         .split-note-container-widget {
             flex-direction: column !important;
-            
+
             .note-split {
                 width: 100%;
             }
@@ -2614,4 +2622,10 @@ iframe.print-iframe {
             opacity: 0.4;
         }
     }
-}
+}
+
+body.desktop .title-row {
+    height: 50px;
+    min-height: 50px;
+    align-items: center;
+}

apps/client/src/stylesheets/theme-dark.css

@@ -19,7 +19,7 @@
     --dropdown-border-color: #555;
     --dropdown-shadow-opacity: 0.4;
     --dropdown-item-icon-destructive-color: #de6e5b;
-    --disabled-tooltip-icon-color: #7fd2ef;
+    --contextual-help-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
     --more-accented-background-color: #777;
@@ -114,4 +114,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
-}
+}
+
+span.fancytree-active {
+    color: var(--dark-theme-custom-color, var(--active-item-text-color));
+}

apps/client/src/stylesheets/theme-light.css

@@ -23,7 +23,7 @@ html {
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: 0.2;
     --dropdown-item-icon-destructive-color: #ec5138;
-    --disabled-tooltip-icon-color: #004382;
+    --contextual-help-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
     --more-accented-background-color: #ddd;
@@ -89,13 +89,17 @@ html {
     --custom-color: var(--light-theme-custom-color);
 }
 
-:root .reference-link,
-:root .reference-link:hover,
-.ck-content a.reference-link > span,
-.board-note {
+:root .reference-link.use-note-color,
+:root .reference-link.use-note-color:hover,
+.ck-content a.reference-link.use-note-color > span,
+.board-note.use-note-color {
     color: var(--light-theme-custom-color, inherit);
 }
 
 .use-note-color {
     --custom-color: var(--light-theme-custom-color);
-}
+}
+
+span.fancytree-active {
+    color: var(--light-theme-custom-color, var(--active-item-text-color));
+}

apps/client/src/stylesheets/theme-next-dark.css

@@ -6,7 +6,7 @@
  */
 :root {
 
-    /* 
+    /*
      * ⚠️ NOTICE: This theme is currently in the beta stage of development.
      * The names and purposes of these CSS variables are subject to frequent changes.
      */
@@ -21,8 +21,8 @@
     --subtle-border-color: #313131;
     --dropdown-border-color: #404040;
     --dropdown-shadow-opacity: 0.6;
-    --dropdown-item-icon-destructive-color: #de6e5b;
-    --disabled-tooltip-icon-color: #7fd2ef;
+    --dropdown-item-icon-destructive-color: #d58477;
+    --contextual-help-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
 
@@ -74,11 +74,13 @@
     --select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
     --select-group-heading-text-color: gray;
 
-    --link-hover-background: #ffffff26;
-    --link-hover-color: white;
+    --link-color: #95c3d9;
+    --link-hover-background: #75c2e324;
+    --link-hover-color: var(--link-color);
+    --link-selection-outline-color: #75c2e385;
 
     --hover-item-text-color: #efefef;
-    --hover-item-background-color: #ffffff24;
+    --hover-item-background-color: #ffffff16;
     --hover-item-border-color: transparent;
 
     --active-item-text-color: var(--left-pane-text-color);
@@ -170,6 +172,9 @@
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 
+    --classic-toolbar-vert-layout-background-color: #ffffff0d;
+    --classic-toolbar-horiz-layout-background-color: var(--main-background-color);
+
     --center-pane-vert-layout-background-color-bgfx: #0c0c0c69;
     --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7;
 
@@ -182,7 +187,7 @@
 
     --tab-close-button-hover-background: #a45353;
     --tab-close-button-hover-color: white;
-    
+
     --active-tab-background-color: #ffffff1c;
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --active-tab-icon-color: #a9a9a9;
@@ -199,9 +204,19 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
+    --badge-temporaraily-editable-background-color: #297331;
+    --badge-read-only-background-color: #af4340;
+    --badge-share-background-color: #4d4d4d;
+    --badge-clipped-note-background-color: #295773;
+    --badge-execute-background-color: #604180;
+
+    --note-icon-background-color: #444444;
+    --note-icon-color: #d4d4d4;
+    --note-icon-hover-background-color: #555555;
+
     --promoted-attribute-card-background-color: #ffffff21;
     --promoted-attribute-card-shadow: none;
-    
+
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
     --floating-button-color: var(--button-text-color);
@@ -220,14 +235,17 @@
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
+    --bottom-panel-background-color: #11111180;
+    --bottom-panel-title-bar-background-color: #3F3F3F80;
+    
+    --status-bar-border-color: var(--main-border-color);
+    
     --scrollbar-thumb-color: #fdfdfd5c;
     --scrollbar-thumb-hover-color: #ffffff7d;
     --scrollbar-background-color: transparent;
     --scrollbar-border-color: unset; /* Deprecated */
 
     --selection-background-color: #3399FF70;
-    
-    --link-color: lightskyblue;
 
     --mermaid-theme: dark;
 
@@ -293,10 +311,10 @@
     --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
 }
 
-:root .reference-link,
-:root .reference-link:hover,
-.ck-content a.reference-link > span,
-.board-note {
+:root .reference-link.use-note-color,
+:root .reference-link.use-note-color:hover,
+.ck-content a.reference-link.use-note-color > span,
+.board-note.use-note-color {
     color: var(--dark-theme-custom-color, inherit);
 }
 
@@ -320,4 +338,16 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
+}
+
+.note-split.with-hue,
+.quick-edit-dialog-wrapper.with-hue {
+    --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
+    --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
+    --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
+}
+
+.note-split.with-hue *::selection,
+.quick-edit-dialog-wrapper.with-hue *::selection {
+    --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
 }