refactor(desktop-standalone): rename project

This reverts commit c7cf8d5255.

.github/workflows/deploy-app.yml

@@ -0,0 +1,67 @@
+name: Deploy Standalone App
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - standalone
+    # Only run when app files change
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+      - '.github/workflows/deploy-app.yml'
+
+  # 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/**'
+      - '.github/workflows/deploy-app.yml'
+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/dev.yml

@@ -1,9 +1,9 @@
 name: Dev
 on:
   push:
-    branches: [ main ]
+    branches: [ main, standalone ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, standalone ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -51,3 +51,6 @@ upload
 site/
 apps/*/coverage
 scripts/translation/.language*.json
+
+# AI
+.claude/settings.local.json

.nvmrc

@@ -1 +1 @@
-24.14.0
+24.14.1

CLAUDE.md

@@ -4,149 +4,197 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using pnpm, with multiple applications and shared packages.
+Trilium Notes is a hierarchical note-taking application with synchronization, scripting, and rich text editing. TypeScript monorepo using pnpm with multiple apps and shared packages.
 
 ## Development Commands
 
-### Setup
-- `pnpm install` - Install all dependencies
-- `corepack enable` - Enable pnpm if not available
+```bash
+# Setup
+corepack enable && pnpm install
 
-### Running Applications
-- `pnpm run server:start` - Start development server (http://localhost:8080)
-- `pnpm run server:start-prod` - Run server in production mode
+# Run
+pnpm server:start              # Dev server at http://localhost:8080
+pnpm desktop:start             # Electron dev app
+pnpm standalone:start          # Standalone client dev
 
-### Building
-- `pnpm run client:build` - Build client application
-- `pnpm run server:build` - Build server application
-- `pnpm run electron:build` - Build desktop application
+# Build
+pnpm client:build              # Frontend
+pnpm server:build              # Backend
+pnpm desktop:build             # Electron
 
-### Testing
-- `pnpm test:all` - Run all tests (parallel + sequential)
-- `pnpm test:parallel` - Run tests that can run in parallel
-- `pnpm test:sequential` - Run tests that must run sequentially (server, ckeditor5-mermaid, ckeditor5-math)
-- `pnpm coverage` - Generate coverage reports
+# Test
+pnpm test:all                  # All tests (parallel + sequential)
+pnpm test:parallel             # Client + most package tests
+pnpm test:sequential           # Server, ckeditor5-mermaid, ckeditor5-math (shared DB)
+pnpm --filter server test      # Single package tests
+pnpm coverage                  # Coverage reports
 
-## Architecture Overview
+# Lint & Format
+pnpm dev:linter-check          # ESLint check
+pnpm dev:linter-fix            # ESLint fix
+pnpm dev:format-check          # Format check (stricter stylistic rules)
+pnpm dev:format-fix            # Format fix
+pnpm typecheck                 # TypeScript type check across all projects
+```
 
-### Monorepo Structure
-- **apps/**: Runnable applications
-  - `client/` - Frontend application (shared by server and desktop)
-  - `server/` - Node.js server with web interface
-  - `desktop/` - Electron desktop application
-  - `web-clipper/` - Browser extension for saving web content
-  - Additional tools: `db-compare`, `dump-db`, `edit-docs`
+**Running a single test file**: `pnpm --filter server test spec/etapi/search.spec.ts`
 
-- **packages/**: Shared libraries
-  - `commons/` - Shared interfaces and utilities
-  - `ckeditor5/` - Custom rich text editor with Trilium-specific plugins
-  - `codemirror/` - Code editor customizations
-  - `highlightjs/` - Syntax highlighting
-  - Custom CKEditor plugins: `ckeditor5-admonition`, `ckeditor5-footnotes`, `ckeditor5-math`, `ckeditor5-mermaid`
+## Main Applications
 
-### Core Architecture Patterns
+The four main apps share `packages/trilium-core/` for business logic but differ in runtime:
 
-#### Three-Layer Cache System
-- **Becca** (Backend Cache): Server-side entity cache (`apps/server/src/becca/`)
-- **Froca** (Frontend Cache): Client-side mirror of backend data (`apps/client/src/services/froca.ts`)
-- **Shaca** (Share Cache): Optimized cache for shared/published notes (`apps/server/src/share/`)
+- **client** (`apps/client/`): Preact frontend with jQuery widget system. Shared UI layer used by both server and desktop.
+- **server** (`apps/server/`): Node.js backend (Express, better-sqlite3). Serves the client and provides REST/WebSocket APIs.
+- **desktop** (`apps/desktop/`): Electron wrapper around server + client, running both in a single process.
+- **standalone** (`apps/client-standalone/` + `apps/standalone-desktop/`): Runs the entire stack in the browser — server logic compiled to WASM via sql.js, executed in a service worker. No Node.js dependency at runtime.
 
-#### Entity System
-Core entities are defined in `apps/server/src/becca/entities/`:
-- `BNote` - Notes with content and metadata
-- `BBranch` - Hierarchical relationships between notes (allows multiple parents)
-- `BAttribute` - Key-value metadata attached to notes
-- `BRevision` - Note version history
-- `BOption` - Application configuration
+## Monorepo Structure
 
-#### Widget-Based UI
-Frontend uses a widget system (`apps/client/src/widgets/`):
-- `BasicWidget` - Base class for all UI components
-- `NoteContextAwareWidget` - Widgets that respond to note changes
-- `RightPanelWidget` - Widgets displayed in the right panel
+```
+apps/
+  client/               # Preact frontend (shared by server, desktop, standalone)
+  server/               # Node.js backend (Express, better-sqlite3)
+  desktop/              # Electron (bundles server + client)
+  client-standalone/    # Standalone client (WASM + service workers, no Node.js)
+  standalone-desktop/   # Standalone desktop variant
+  server-e2e/           # Playwright E2E tests for server
+  web-clipper/          # Browser extension
+  website/              # Project website
+  db-compare/, dump-db/, edit-docs/, build-docs/, icon-pack-builder/
+
+packages/
+  trilium-core/         # Core business logic: entities, services, SQL, sync
+  commons/              # Shared interfaces and utilities
+  ckeditor5/            # Custom rich text editor bundle
+  codemirror/           # Code editor integration
+  highlightjs/          # Syntax highlighting
+  share-theme/          # Theme for shared/published notes
+  ckeditor5-admonition/, ckeditor5-footnotes/, ckeditor5-math/, ckeditor5-mermaid/
+  ckeditor5-keyboard-marker/, express-partial-content/, pdfjs-viewer/, splitjs/
+  turndown-plugin-gfm/
+```
+
+Use `pnpm --filter <package-name> <command>` to run commands in specific packages.
+
+## Core Architecture
+
+### Three-Layer Cache System
+
+All data access goes through cache layers — never bypass with direct DB queries:
+
+- **Becca** (`packages/trilium-core/src/becca/`): Server-side entity cache. Access via `becca.notes[noteId]`.
+- **Froca** (`apps/client/src/services/froca.ts`): Client-side mirror synced via WebSocket. Access via `froca.getNote()`.
+- **Shaca** (`apps/server/src/share/`): Optimized cache for shared/published notes.
+
+**Critical**: Always use cache methods, not direct DB writes. Cache methods create `EntityChange` records needed for synchronization.
+
+### Entity System
+
+Core entities live in `packages/trilium-core/src/becca/entities/` (not `apps/server/`):
+
+- `BNote` — Notes with content and metadata
+- `BBranch` — Multi-parent tree relationships (cloning supported)
+- `BAttribute` — Key-value metadata (labels and relations)
+- `BRevision` — Version history
+- `BOption` — Application configuration
+- `BBlob` — Binary content storage
+
+Entities extend `AbstractBeccaEntity<T>` with built-in change tracking, hash generation, and date management.
+
+### Entity Change & Sync Protocol
+
+Every entity modification creates an `EntityChange` record driving sync:
+1. Login with HMAC authentication (document secret + timestamp)
+2. Push changes → Pull changes → Push again (conflict resolution)
+3. Content hash verification with retry loop
+
+Sync services: `packages/trilium-core/src/services/sync.ts`, `syncMutexService`, `syncUpdateService`.
+
+### Widget-Based UI
+
+Frontend widgets in `apps/client/src/widgets/`:
+- `BasicWidget` / `TypedBasicWidget` — Base classes (jQuery `this.$widget` for DOM)
+- `NoteContextAwareWidget` — Responds to note changes
+- `RightPanelWidget` — Sidebar widgets with position ordering
 - Type-specific widgets in `type_widgets/` directory
 
-#### API Architecture
-- **Internal API**: REST endpoints in `apps/server/src/routes/api/`
-- **ETAPI**: External API for third-party integrations (`apps/server/src/etapi/`)
-- **WebSocket**: Real-time synchronization (`apps/server/src/services/ws.ts`)
+**Widget lifecycle**: `doRenderBody()` for initial render, `refreshWithNote()` for note changes, `entitiesReloadedEvent({loadResults})` for entity updates. Uses jQuery — don't mix React patterns.
 
-### Key Files for Understanding Architecture
+Fluent builder pattern: `.child()`, `.class()`, `.css()` chaining with position-based ordering.
 
-1. **Application Entry Points**:
-   - `apps/server/src/main.ts` - Server startup
-   - `apps/client/src/desktop.ts` - Client initialization
+### API Architecture
 
-2. **Core Services**:
-   - `apps/server/src/becca/becca.ts` - Backend data management
-   - `apps/client/src/services/froca.ts` - Frontend data synchronization
-   - `apps/server/src/services/backend_script_api.ts` - Scripting API
+- **Internal API** (`apps/server/src/routes/api/`): REST endpoints, trusts frontend
+- **ETAPI** (`apps/server/src/etapi/`): External API with basic auth tokens — maintain backwards compatibility
+- **WebSocket** (`apps/server/src/services/ws.ts`): Real-time sync
 
-3. **Database Schema**:
-   - `apps/server/src/assets/db/schema.sql` - Core database structure
+### Platform Abstraction
 
-4. **Configuration**:
-   - `package.json` - Project dependencies and scripts
+`packages/trilium-core/src/services/platform.ts` defines `PlatformProvider` interface with implementations in `apps/desktop/`, `apps/server/`, and `apps/client-standalone/`. Singleton via `initPlatform()`/`getPlatform()`.
 
-## Note Types and Features
+**PlatformProvider** provides:
+- `crash(message)` — Platform-specific fatal error handling
+- `getEnv(key)` — Environment variable access (server/desktop use `process.env`, standalone maps URL query params like `?safeMode` → `TRILIUM_SAFE_MODE`)
+- `isElectron`, `isMac`, `isWindows` — Platform detection flags
 
-Trilium supports multiple note types, each with specialized widgets:
-- **Text**: Rich text with CKEditor5 (markdown import/export)
-- **Code**: Syntax-highlighted code editing with CodeMirror
-- **File**: Binary file attachments
-- **Image**: Image display with editing capabilities
-- **Canvas**: Drawing/diagramming with Excalidraw
-- **Mermaid**: Diagram generation
-- **Relation Map**: Visual note relationship mapping
-- **Web View**: Embedded web pages
-- **Doc/Book**: Hierarchical documentation structure
+**Critical rules for `trilium-core`**:
+- **No `process.env` in core** — use `getPlatform().getEnv()` instead (not available in standalone/browser)
+- **No `import path from "path"` in core** — Node's `path` module is externalized in browser builds. Use `packages/trilium-core/src/services/utils/path.ts` for `extname()`/`basename()` equivalents
+- **No Node.js built-in modules in core** — core runs in both Node.js and the browser (standalone). Use platform-agnostic alternatives or platform providers
+- **Platform detection via functions** — `isElectron()`, `isMac()`, `isWindows()` from `utils/index.ts` are functions (not constants) that call `getPlatform()`. They can only be called after `initializeCore()`, not at module top-level. If used in static definitions, wrap in a closure: `value: () => isWindows() ? "0.9" : "1.0"`
+- **Barrel import caution** — `import { x } from "@triliumnext/core"` loads ALL core exports. Early-loading modules like `config.ts` should import specific subpaths (e.g. `@triliumnext/core/src/services/utils/index`) to avoid circular dependencies or initialization ordering issues
+- **Electron IPC** — In desktop mode, client API calls use Electron IPC (not HTTP). The IPC handler in `apps/server/src/routes/electron.ts` must be registered via `utils.isElectron` from the **server's** utils (which correctly checks `process.versions["electron"]`), not from core's utils
 
-## Development Guidelines
+### Database
 
-### Testing Strategy
-- Server tests run sequentially due to shared database
-- Client tests can run in parallel
-- E2E tests use Playwright for both server and desktop apps
-- Build validation tests check artifact integrity
+SQLite via `better-sqlite3`. SQL abstraction in `packages/trilium-core/src/services/sql/` with `DatabaseProvider` interface, prepared statement caching, and transaction support.
 
-### Scripting System
-Trilium provides powerful user scripting capabilities:
-- Frontend scripts run in browser context
-- Backend scripts run in Node.js context with full API access
-- Script API documentation available in `docs/Script API/`
+- Schema: `apps/server/src/assets/db/schema.sql`
+- Migrations: `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
 
-### Internationalization
-- Translation files in `apps/client/src/translations/`
-- Supported languages: English, German, Spanish, French, Romanian, Chinese
+### Attribute Inheritance
 
-### Security Considerations
-- Per-note encryption with granular protected sessions
-- CSRF protection for API endpoints
-- OpenID and TOTP authentication support
-- Sanitization of user-generated content
+Three inheritance mechanisms:
+1. **Standard**: `note.getInheritableAttributes()` walks parent tree
+2. **Child prefix**: `child:label` on parent copies to children
+3. **Template relation**: `#template=noteNoteId` includes template's inheritable attributes
 
-## Common Development Tasks
+Use `note.getOwnedAttribute()` for direct, `note.getAttribute()` for inherited.
 
-### Adding New Note Types
-1. Create widget in `apps/client/src/widgets/type_widgets/`
-2. Register in `apps/client/src/services/note_types.ts`
-3. Add backend handling in `apps/server/src/services/notes.ts`
+## Important Patterns
 
-### Extending Search
-- Search expressions handled in `apps/server/src/services/search/`
-- Add new search operators in search context files
+- **Protected notes**: Check `note.isContentAvailable()` before accessing content; use `note.getTitleOrProtected()` for safe title access
+- **Long operations**: Use `TaskContext` for progress reporting via WebSocket
+- **Event system** (`packages/trilium-core/src/services/events.ts`): Events emitted in order (notes → branches → attributes) during load for referential integrity
+- **Search**: Expression-based, scoring happens in-memory — cannot add SQL-level LIMIT/OFFSET without losing scoring
+- **Widget cleanup**: Unsubscribe from events in `cleanup()`/`doDestroy()` to prevent memory leaks
 
-### Custom CKEditor Plugins
-- Create new package in `packages/` following existing plugin structure
-- Register in `packages/ckeditor5/src/plugins.ts`
+## Code Style
 
-### Database Migrations
-- Add migration scripts in `apps/server/src/migrations/`
-- Update schema in `apps/server/src/assets/db/schema.sql`
+- 4-space indentation, semicolons always required
+- Double quotes (enforced by format config)
+- Max line length: 100 characters
+- Unix line endings
+- Import sorting via `eslint-plugin-simple-import-sort`
 
-## Build System Notes
-- Uses pnpm for monorepo management
-- Vite for fast development builds
-- ESBuild for production optimization
-- pnpm workspaces for dependency management
-- Docker support with multi-stage builds
+## Testing
+
+- **Server tests** (`apps/server/spec/`): Vitest, must run sequentially (shared DB), forks pool, max 6 workers
+- **Client tests** (`apps/client/src/`): Vitest with happy-dom environment, can run in parallel
+- **E2E tests** (`apps/server-e2e/`): Playwright, Chromium, server started automatically on port 8082
+- **ETAPI tests** (`apps/server/spec/etapi/`): External API contract tests
+
+## Documentation
+
+- `docs/Script API/` — Auto-generated, never edit directly
+- `docs/User Guide/` — Edit via `pnpm edit-docs:edit-docs`, not manually
+- `docs/Developer Guide/` and `docs/Release Notes/` — Safe for direct Markdown editing
+
+## Key Entry Points
+
+- `apps/server/src/main.ts` — Server startup
+- `apps/client/src/desktop.ts` — Client initialization
+- `packages/trilium-core/src/becca/becca.ts` — Backend data management
+- `apps/client/src/services/froca.ts` — Frontend cache
+- `apps/server/src/routes/routes.ts` — API route registration
+- `packages/trilium-core/src/services/sql/sql.ts` — Database abstraction

apps/build-docs/package.json

@@ -14,15 +14,15 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.32.1",
+  "packageManager": "pnpm@10.33.0",
   "devDependencies": {
-    "@redocly/cli": "2.24.1",
+    "@redocly/cli": "2.25.1",
     "archiver": "7.0.1",
     "fs-extra": "11.3.4",
     "js-yaml": "4.1.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "typedoc": "0.28.17",
+    "typedoc": "0.28.18",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

apps/client-standalone/.env

@@ -0,0 +1,4 @@
+# The development license key for premium CKEditor features.
+# Note: This key must only be used for the Trilium Notes project.
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client-standalone/.env.production

@@ -0,0 +1 @@
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client-standalone/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@triliumnext/client-standalone",
+  "version": "0.102.1",
+  "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.1",
+    "@mind-elixir/node-menu": "5.0.1",
+    "@popperjs/core": "2.11.8",
+    "@preact/signals": "2.8.2",
+    "@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.6.0",
+    "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.2",
+    "globals": "17.4.0",
+    "i18next": "25.10.10",
+    "i18next-http-backend": "3.0.2",
+    "jquery": "4.0.0",
+    "jquery.fancytree": "2.38.5",
+    "js-sha1": "0.7.0",
+    "js-sha256": "0.11.1",
+    "js-sha512": "0.9.0",
+    "jsplumb": "2.15.6",
+    "katex": "0.16.43",
+    "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.2.0",
+    "mark.js": "8.11.1",
+    "marked": "17.0.5",
+    "mermaid": "11.13.0",
+    "mind-elixir": "5.9.3",
+    "normalize.css": "8.0.1",
+    "panzoom": "9.4.4",
+    "preact": "10.29.0",
+    "react-i18next": "16.6.6",
+    "react-window": "2.2.7",
+    "reveal.js": "6.0.0",
+    "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.4.0",
+    "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": "4.0.0",
+    "@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": "14.0.0",
+    "cross-env": "7.0.3",
+    "happy-dom": "20.8.8",
+    "script-loader": "0.7.2",
+    "vite-plugin-static-copy": "3.4.0"
+  }
+}

apps/client-standalone/public/_headers

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

apps/client-standalone/public/manifest.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Trilium Notes",
+    "short_name": "Trilium",
+    "description": "Trilium Notes is a hierarchical note taking application with focus on building large personal knowledge bases.",
+    "theme_color": "#333333",
+    "background_color": "#1F1F1F",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "display_override": [
+        "window-controls-overlay"
+    ],
+    "icons": [
+        {
+            "src": "assets/icon.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

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,31 @@
+<!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>Trilium requires JavaScript to be enabled.</noscript>
+
+        <div id="context-menu-cover"></div>
+        <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,283 @@
+/**
+ * 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>;
+    headers?: Record<string, string>;
+    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;
+}
+
+/**
+ * Symbol used to mark a result as an already-formatted response,
+ * so that formatResult passes it through without JSON-serializing.
+ * Must match the symbol exported from browser_routes.ts.
+ */
+const RAW_RESPONSE = Symbol.for('RAW_RESPONSE');
+
+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,
+                headers: headers ?? {},
+                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 raw responses (e.g. from image routes that write directly to res)
+        if (result && typeof result === 'object' && RAW_RESPONSE in result) {
+            const raw = result as unknown as { status: number; headers: Record<string, string>; body: unknown };
+            let body: ArrayBuffer | null = null;
+
+            if (raw.body instanceof ArrayBuffer) {
+                body = raw.body;
+            } else if (raw.body instanceof Uint8Array) {
+                body = raw.body.buffer as ArrayBuffer;
+            } else if (typeof raw.body === 'string') {
+                body = encoder.encode(raw.body).buffer as ArrayBuffer;
+            }
+
+            return {
+                status: raw.status,
+                headers: raw.headers,
+                body
+            };
+        }
+
+        // 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,284 @@
+/**
+ * Browser route definitions.
+ * This integrates with the shared route builder from @triliumnext/core.
+ */
+
+import { BootstrapDefinition } from '@triliumnext/commons';
+import { entity_changes, getContext, getPlatform, getSharedBootstrapItems, getSql, routes, sql_init } from '@triliumnext/core';
+
+import packageJson from '../../package.json' with { type: 'json' };
+import { type BrowserRequest, BrowserRouter } from './browser_router';
+
+/** Minimal response object used by apiResultHandler to capture the processed result. */
+interface ResultHandlerResponse {
+    headers: Record<string, string>;
+    result: unknown;
+    setHeader(name: string, value: string): void;
+}
+
+/**
+ * Symbol used to mark a result as an already-formatted BrowserResponse,
+ * so that BrowserRouter.formatResult passes it through without JSON-serializing.
+ * Uses Symbol.for() so the same symbol is shared across modules.
+ */
+const RAW_RESPONSE = Symbol.for('RAW_RESPONSE');
+
+type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+/**
+ * Creates an Express-like request object from a BrowserRequest.
+ */
+function toExpressLikeReq(req: BrowserRequest) {
+    return {
+        params: req.params,
+        query: req.query,
+        body: req.body,
+        headers: req.headers ?? {},
+        method: req.method,
+        get originalUrl() { return req.url; }
+    };
+}
+
+/**
+ * Extracts context headers from the request and sets them in the execution context,
+ * mirroring what the server does in route_api.ts.
+ */
+function setContextFromHeaders(req: BrowserRequest) {
+    const headers = req.headers ?? {};
+    const ctx = getContext();
+    ctx.set("componentId", headers["trilium-component-id"]);
+    ctx.set("localNowDateTime", headers["trilium-local-now-datetime"]);
+    ctx.set("hoistedNoteId", headers["trilium-hoisted-note-id"] || "root");
+}
+
+/**
+ * Wraps a core route handler to work with the BrowserRouter.
+ * Core handlers expect an Express-like request object with params, query, and body.
+ * Each request is wrapped in an execution context (like cls.init() on the server)
+ * to ensure entity change tracking works correctly.
+ */
+function wrapHandler(handler: (req: any) => unknown, transactional: boolean) {
+    return (req: BrowserRequest) => {
+        return getContext().init(() => {
+            setContextFromHeaders(req);
+            const expressLikeReq = toExpressLikeReq(req);
+            if (transactional) {
+                return getSql().transactional(() => handler(expressLikeReq));
+            }
+            return handler(expressLikeReq);
+        });
+    };
+}
+
+/**
+ * Creates an apiRoute function compatible with buildSharedApiRoutes.
+ * This bridges the core's route registration to the BrowserRouter.
+ */
+function createApiRoute(router: BrowserRouter, transactional: boolean) {
+    return (method: HttpMethod, path: string, handler: (req: any) => unknown) => {
+        router.register(method, path, wrapHandler(handler, transactional));
+    };
+}
+
+/**
+ * Low-level route registration matching the server's `route()` signature:
+ *   route(method, path, middleware[], handler, resultHandler)
+ *
+ * In standalone mode:
+ * - Middleware (e.g. checkApiAuth) is skipped — there's no authentication.
+ * - The resultHandler is applied to post-process the result (entity conversion, status codes).
+ */
+function createRoute(router: BrowserRouter) {
+    return (method: HttpMethod, path: string, _middleware: any[], handler: (req: any, res: any) => unknown, resultHandler?: ((req: any, res: any, result: unknown) => unknown) | null) => {
+        router.register(method, path, (req: BrowserRequest) => {
+            return getContext().init(() => {
+                setContextFromHeaders(req);
+                const expressLikeReq = toExpressLikeReq(req);
+                const mockRes = createMockExpressResponse();
+                const result = getSql().transactional(() => handler(expressLikeReq, mockRes));
+
+                // If the handler used the mock response (e.g. image routes that call res.send()),
+                // return it as a raw response so BrowserRouter doesn't JSON-serialize it.
+                if (mockRes._used) {
+                    return {
+                        [RAW_RESPONSE]: true as const,
+                        status: mockRes._status,
+                        headers: mockRes._headers,
+                        body: mockRes._body
+                    };
+                }
+
+                if (resultHandler) {
+                    // Create a minimal response object that captures what apiResultHandler sets.
+                    const res = createResultHandlerResponse();
+                    resultHandler(expressLikeReq, res, result);
+                    return res.result;
+                }
+
+                return result;
+            });
+        });
+    };
+}
+
+/**
+ * Creates a mock Express response object that captures calls to set(), send(), sendStatus(), etc.
+ * Used for route handlers (like image routes) that write directly to the response.
+ */
+function createMockExpressResponse() {
+    const res = {
+        _used: false,
+        _status: 200,
+        _headers: {} as Record<string, string>,
+        _body: null as unknown,
+        set(name: string, value: string) {
+            res._headers[name] = value;
+            return res;
+        },
+        setHeader(name: string, value: string) {
+            res._headers[name] = value;
+            return res;
+        },
+        status(code: number) {
+            res._status = code;
+            return res;
+        },
+        send(body: unknown) {
+            res._used = true;
+            res._body = body;
+            return res;
+        },
+        sendStatus(code: number) {
+            res._used = true;
+            res._status = code;
+            return res;
+        }
+    };
+    return res;
+}
+
+/**
+ * Standalone apiResultHandler matching the server's behavior:
+ * - Converts Becca entities to POJOs
+ * - Handles [statusCode, response] tuple format
+ * - Sets trilium-max-entity-change-id (captured in response headers)
+ */
+function apiResultHandler(_req: any, res: ResultHandlerResponse, result: unknown) {
+    res.headers["trilium-max-entity-change-id"] = String(entity_changes.getMaxEntityChangeId());
+    result = routes.convertEntitiesToPojo(result);
+
+    if (Array.isArray(result) && result.length > 0 && Number.isInteger(result[0])) {
+        const [_statusCode, response] = result;
+        res.result = response;
+    } else if (result === undefined) {
+        res.result = "";
+    } else {
+        res.result = result;
+    }
+}
+
+/**
+ * No-op middleware stubs for standalone mode.
+ *
+ * In a browser context there is no network authentication, rate limiting,
+ * or multi-user access, so all auth/rate-limit middleware is a no-op.
+ *
+ * `checkAppNotInitialized` still guards setup routes: if the database is
+ * already initialised the middleware throws so the route handler is never
+ * reached (mirrors the server behaviour).
+ */
+function noopMiddleware() {
+    // No-op.
+}
+
+function checkAppNotInitialized() {
+    if (sql_init.isDbInitialized()) {
+        throw new Error("App already initialized.");
+    }
+}
+
+/**
+ * Creates a minimal response-like object for the apiResultHandler.
+ */
+function createResultHandlerResponse(): ResultHandlerResponse {
+    return {
+        headers: {},
+        result: undefined,
+        setHeader(name: string, value: string) {
+            this.headers[name] = value;
+        }
+    };
+}
+
+/**
+ * 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, true);
+    routes.buildSharedApiRoutes({
+        route: createRoute(router),
+        asyncRoute: createRoute(router),
+        apiRoute,
+        asyncApiRoute: createApiRoute(router, false),
+        apiResultHandler,
+        checkApiAuth: noopMiddleware,
+        checkApiAuthOrElectron: noopMiddleware,
+        checkAppNotInitialized,
+        checkCredentials: noopMiddleware,
+        loginRateLimiter: noopMiddleware
+    });
+    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 }));
+}
+
+function bootstrapRoute(): BootstrapDefinition {
+    const assetPath = ".";
+
+    const isDbInitialized = sql_init.isDbInitialized();
+    const commonItems = {
+        ...getSharedBootstrapItems(assetPath, isDbInitialized),
+        isDev: import.meta.env.DEV,
+        isStandalone: true,
+        isMainWindow: true,
+        isElectron: false,
+        hasNativeTitleBar: false,
+        hasBackgroundEffects: false,
+        triliumVersion: packageJson.version,
+        device: false as const, // Let the client detect device type.
+        appPath: assetPath,
+        instanceName: "standalone",
+        TRILIUM_SAFE_MODE: !!getPlatform().getEnv("TRILIUM_SAFE_MODE")
+    };
+
+    if (!isDbInitialized) {
+        return {
+            ...commonItems,
+            baseApiUrl: "../api/",
+            isProtectedSessionAvailable: false,
+        };
+    }
+
+    return {
+        ...commonItems,
+        csrfToken: "dummy-csrf-token",
+        baseApiUrl: "../api/",
+        headingStyle: "plain",
+        layoutOrientation: "vertical",
+        platform: "web",
+    };
+}
+
+/**
+ * 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,77 @@
+import { ExecutionContext } from "@triliumnext/core";
+
+/**
+ * Browser execution context implementation.
+ * 
+ * Handles per-request context isolation with support for fire-and-forget async operations
+ * using a context stack and grace-period cleanup to allow unawaited promises to complete.
+ */
+export default class BrowserExecutionContext implements ExecutionContext {
+    private contextStack: Map<string, any>[] = [];
+    private cleanupTimers = new WeakMap<Map<string, any>, ReturnType<typeof setTimeout>>();
+    private readonly CLEANUP_GRACE_PERIOD = 1000; // 1 second for fire-and-forget operations
+
+    private getCurrentContext(): Map<string, any> {
+        if (this.contextStack.length === 0) {
+            throw new Error("ExecutionContext not initialized");
+        }
+        return this.contextStack[this.contextStack.length - 1];
+    }
+
+    get<T = any>(key: string): T {
+        return this.getCurrentContext().get(key);
+    }
+
+    set(key: string, value: any): void {
+        this.getCurrentContext().set(key, value);
+    }
+
+    reset(): void {
+        this.contextStack = [];
+    }
+
+    init<T>(callback: () => T): T {
+        const context = new Map<string, any>();
+        this.contextStack.push(context);
+
+        // Cancel any pending cleanup timer for this context
+        const existingTimer = this.cleanupTimers.get(context);
+        if (existingTimer) {
+            clearTimeout(existingTimer);
+            this.cleanupTimers.delete(context);
+        }
+
+        try {
+            const result = callback();
+
+            // If the result is a Promise
+            if (result && typeof result === 'object' && 'then' in result && 'catch' in result) {
+                const promise = result as unknown as Promise<any>;
+                return promise.finally(() => {
+                    this.scheduleContextCleanup(context);
+                }) as T;
+            } else {
+                // For synchronous results, schedule delayed cleanup to allow fire-and-forget operations
+                this.scheduleContextCleanup(context);
+                return result;
+            }
+        } catch (error) {
+            // Always clean up on error with grace period
+            this.scheduleContextCleanup(context);
+            throw error;
+        }
+    }
+
+    private scheduleContextCleanup(context: Map<string, any>): void {
+        const timer = setTimeout(() => {
+            // Remove from stack if still present
+            const index = this.contextStack.indexOf(context);
+            if (index !== -1) {
+                this.contextStack.splice(index, 1);
+            }
+            this.cleanupTimers.delete(context);
+        }, this.CLEANUP_GRACE_PERIOD);
+
+        this.cleanupTimers.set(context, timer);
+    }
+}

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

@@ -0,0 +1,158 @@
+import type { CryptoProvider } from "@triliumnext/core";
+import { sha1 } from "js-sha1";
+import { sha256 } from "js-sha256";
+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;
+    }
+
+    hmac(secret: string | Uint8Array, value: string | Uint8Array): string {
+        const secretStr = typeof secret === "string" ? secret : new TextDecoder().decode(secret);
+        const valueStr = typeof value === "string" ? value : new TextDecoder().decode(value);
+        // sha256.hmac returns hex, convert to base64 to match Node's behavior
+        const hexHash = sha256.hmac(secretStr, valueStr);
+        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 btoa(String.fromCharCode(...bytes));
+    }
+}
+
+/**
+ * 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,120 @@
+import type { WebSocketMessage } from "@triliumnext/commons";
+import type { ClientMessageHandler, MessageHandler,MessagingProvider } 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 clientMessageHandler?: ClientMessageHandler;
+    private isDisposed = false;
+
+    constructor() {
+        // Listen for incoming messages from the main thread
+        self.addEventListener("message", this.handleIncomingMessage);
+    }
+
+    private handleIncomingMessage = (event: MessageEvent) => {
+        if (this.isDisposed) return;
+
+        const { type, message } = event.data || {};
+
+        if (type === "WS_MESSAGE" && message) {
+            // Dispatch to the client message handler (used by ws.ts for log-error, log-info, ping)
+            if (this.clientMessageHandler) {
+                try {
+                    this.clientMessageHandler("main-thread", message);
+                } catch (e) {
+                    console.error("[WorkerMessagingProvider] Error in client message handler:", e);
+                }
+            }
+
+            // 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);
+        }
+    }
+
+    /**
+     * Send a message to a specific client.
+     * In worker context, there's only one client (the main thread), so clientId is ignored.
+     */
+    sendMessageToClient(_clientId: string, message: WebSocketMessage): boolean {
+        if (this.isDisposed) {
+            return false;
+        }
+
+        this.sendMessageToAllClients(message);
+        return true;
+    }
+
+    /**
+     * Register a handler for incoming client messages.
+     */
+    setClientMessageHandler(handler: ClientMessageHandler): void {
+        this.clientMessageHandler = handler;
+    }
+
+    /**
+     * 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 = [];
+    }
+}

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

@@ -0,0 +1,36 @@
+import type { PlatformProvider } from "@triliumnext/core";
+
+/** Maps URL query parameter names to TRILIUM_ environment variable names. */
+const QUERY_TO_ENV: Record<string, string> = {
+    "safeMode": "TRILIUM_SAFE_MODE",
+    "startNoteId": "TRILIUM_START_NOTE_ID",
+};
+
+export default class StandalonePlatformProvider implements PlatformProvider {
+    readonly isElectron = false;
+    readonly isMac = false;
+    readonly isWindows = false;
+
+    private envMap: Record<string, string> = {};
+
+    constructor(queryString: string) {
+        const params = new URLSearchParams(queryString);
+        for (const [queryKey, envKey] of Object.entries(QUERY_TO_ENV)) {
+            if (params.has(queryKey)) {
+                this.envMap[envKey] = params.get(queryKey) || "true";
+            }
+        }
+    }
+
+    crash(message: string): void {
+        console.error("[Standalone] FATAL:", message);
+        self.postMessage({
+            type: "FATAL_ERROR",
+            message
+        });
+    }
+
+    getEnv(key: string): string | undefined {
+        return this.envMap[key];
+    }
+}

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

@@ -0,0 +1,93 @@
+import type { ExecOpts, RequestProvider } from "@triliumnext/core";
+
+/**
+ * Fetch-based implementation of RequestProvider for browser environments.
+ *
+ * Uses the Fetch API instead of Node's http/https modules.
+ * Proxy support is not available in browsers, so the proxy option is ignored.
+ */
+export default class FetchRequestProvider implements RequestProvider {
+
+    async exec<T>(opts: ExecOpts): Promise<T> {
+        const paging = opts.paging || {
+            pageCount: 1,
+            pageIndex: 0,
+            requestId: "n/a"
+        };
+
+        const headers: Record<string, string> = {
+            "Content-Type": paging.pageCount === 1 ? "application/json" : "text/plain",
+            "pageCount": String(paging.pageCount),
+            "pageIndex": String(paging.pageIndex),
+            "requestId": paging.requestId
+        };
+
+        // Note: the Cookie header is a forbidden header in fetch —
+        // the browser manages cookies automatically via credentials: 'include'.
+
+        if (opts.auth?.password) {
+            headers["trilium-cred"] = btoa(`dummy:${opts.auth.password}`);
+        }
+
+        let body: string | undefined;
+        if (opts.body) {
+            body = typeof opts.body === "object" ? JSON.stringify(opts.body) : opts.body;
+        }
+
+        const controller = new AbortController();
+        const timeoutId = opts.timeout
+            ? setTimeout(() => controller.abort(), opts.timeout)
+            : undefined;
+
+        try {
+            const response = await fetch(opts.url, {
+                method: opts.method,
+                headers,
+                body,
+                signal: controller.signal,
+                credentials: "include"
+            });
+
+            if ([200, 201, 204].includes(response.status)) {
+                const text = await response.text();
+                return text.trim() ? JSON.parse(text) : null;
+            }
+            const text = await response.text();
+            let errorMessage: string;
+            try {
+                const json = JSON.parse(text);
+                errorMessage = json?.message || "";
+            } catch {
+                errorMessage = text.substring(0, 100);
+            }
+            throw new Error(`${response.status} ${opts.method} ${opts.url}: ${errorMessage}`);
+
+        } catch (e: any) {
+            if (e.name === "AbortError") {
+                throw new Error(`${opts.method} ${opts.url} failed, error: timeout after ${opts.timeout}ms`);
+            }
+            if (e instanceof TypeError && e.message === "Failed to fetch") {
+                const isCrossOrigin = !opts.url.startsWith(location.origin);
+                if (isCrossOrigin) {
+                    throw new Error(`Request to ${opts.url} was blocked. The server may not allow requests from this origin (CORS), or it may be unreachable.`);
+                }
+                throw new Error(`Request to ${opts.url} failed. The server may be unreachable.`);
+            }
+            throw e;
+        } finally {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        }
+    }
+
+    async getImage(imageUrl: string): Promise<ArrayBuffer> {
+        const response = await fetch(imageUrl);
+
+        if (!response.ok) {
+            throw new Error(`${response.status} GET ${imageUrl} failed`);
+        }
+
+        return await response.arrayBuffer();
+    }
+}

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

@@ -0,0 +1,613 @@
+import { type BindableValue, default as sqlite3InitModule } from "@sqlite.org/sqlite-wasm";
+import type { DatabaseProvider, RunResult, Statement, Transaction } from "@triliumnext/core";
+
+// 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,
+        private sqlite3: Sqlite3Module,
+        private sql: string
+    ) {}
+
+    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();
+            // Get the last insert row ID using the C API
+            const lastInsertRowid = this.db.pointer ? this.sqlite3.capi.sqlite3_last_insert_rowid(this.db.pointer) : 0;
+            this.stmt.reset();
+            return {
+                changes,
+                lastInsertRowid: typeof lastInsertRowid === "bigint" ? Number(lastInsertRowid) : lastInsertRowid
+            };
+        } 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;
+    }
+
+    /**
+     * Detect the prefix used for a parameter name in the SQL query.
+     * SQLite supports @name, :name, and $name parameter styles.
+     * Returns the prefix character, or ':' as default if not found.
+     */
+    private detectParamPrefix(paramName: string): string {
+        // Search for the parameter with each possible prefix
+        for (const prefix of [':', '@', '$']) {
+            // Use word boundary to avoid partial matches
+            const pattern = new RegExp(`\\${prefix}${paramName}(?![a-zA-Z0-9_])`);
+            if (pattern.test(this.sql)) {
+                return prefix;
+            }
+        }
+        // Default to ':' if not found (most common in Trilium)
+        return ':';
+    }
+
+    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 $)
+            // We detect the prefix used in the SQL for each parameter
+            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 {
+                    // Detect the prefix used in the SQL and apply it
+                    const prefix = this.detectParamPrefix(key);
+                    bindings[`${prefix}${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");
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] In-memory database created 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.sqlite3!, query);
+        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/lightweight/translation_provider.ts

@@ -0,0 +1,16 @@
+import { LOCALE_IDS } from "@triliumnext/commons";
+import type i18next from "i18next";
+import I18NextHttpBackend from "i18next-http-backend";
+
+export default async function translationProvider(i18nextInstance: typeof i18next, locale: LOCALE_IDS) {
+    await i18nextInstance.use(I18NextHttpBackend).init({
+        lng: locale,
+        fallbackLng: "en",
+        ns: "server",
+        backend: {
+            loadPath: `${import.meta.resolve("../server-assets/translations")}/{{lng}}/{{ns}}.json`
+        },
+        returnEmptyString: false,
+        debug: true
+    });
+}

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

@@ -0,0 +1,110 @@
+import LocalServerWorker from "./local-server-worker?worker";
+let localWorker: Worker | null = null;
+const pending = new Map();
+
+function showFatalErrorDialog(message: string) {
+    alert(message);
+}
+
+export function startLocalServerWorker() {
+    if (localWorker) return localWorker;
+    localWorker = new LocalServerWorker();
+    localWorker.postMessage({ type: "INIT", queryString: location.search });
+
+    // Handle worker errors during initialization
+    localWorker.onerror = (event) => {
+        console.error("[LocalBridge] Worker error:", event);
+        // Reject all pending requests
+        for (const [, resolver] of pending) {
+            resolver.reject(new Error(`Worker error: ${event.message}`));
+        }
+        pending.clear();
+    };
+
+    localWorker.onmessage = (event) => {
+        const msg = event.data;
+
+        // Handle fatal platform crashes (shown as a dialog to the user)
+        if (msg?.type === "FATAL_ERROR") {
+            console.error("[LocalBridge] Fatal error:", msg.message);
+            showFatalErrorDialog(msg.message);
+            return;
+        }
+
+        // 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 [, resolver] of pending) {
+                resolver.reject(new Error(msg.error?.message || "Unknown worker error"));
+            }
+            pending.clear();
+            return;
+        }
+
+        // Handle WebSocket-like messages from the worker (for frontend updates)
+        if (msg?.type === "WS_MESSAGE" && msg.message) {
+            // Dispatch a custom event that ws.ts listens to in standalone mode
+            window.dispatchEvent(new CustomEvent("trilium:ws-message", {
+                detail: msg.message
+            }));
+            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<{ body?: ArrayBuffer }>((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: unknown) {
+            const errorMessage = e instanceof Error ? e.message : String(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(errorMessage).buffer
+                }
+            });
+        }
+    });
+}

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

@@ -0,0 +1,273 @@
+// =============================================================================
+// ERROR HANDLERS FIRST - No static imports above this!
+// ES modules hoist static imports, so they execute BEFORE any code runs.
+// We use dynamic imports below to ensure error handlers are registered first.
+// =============================================================================
+
+self.onerror = (message, source, lineno, colno, error) => {
+    const errorMsg = `[Worker] Uncaught error: ${message}\n  at ${source}:${lineno}:${colno}`;
+    console.error(errorMsg, error);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(message),
+                source,
+                lineno,
+                colno,
+                stack: error?.stack || new Error().stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report error:", e);
+    }
+    return false;
+};
+
+self.onunhandledrejection = (event) => {
+    const reason = event.reason;
+    const errorMsg = `[Worker] Unhandled rejection: ${reason?.message || reason}`;
+    console.error(errorMsg, reason);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(reason?.message || reason),
+                stack: reason?.stack || new Error().stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report rejection:", e);
+    }
+};
+
+console.log("[Worker] Error handlers installed, loading modules...");
+
+// =============================================================================
+// TYPE-ONLY IMPORTS (erased at runtime, safe as static imports)
+// =============================================================================
+import type { BrowserRouter } from './lightweight/browser_router';
+
+// =============================================================================
+// MODULE STATE (populated by dynamic imports)
+// =============================================================================
+let BrowserSqlProvider: typeof import('./lightweight/sql_provider').default;
+let WorkerMessagingProvider: typeof import('./lightweight/messaging_provider').default;
+let BrowserExecutionContext: typeof import('./lightweight/cls_provider').default;
+let BrowserCryptoProvider: typeof import('./lightweight/crypto_provider').default;
+let FetchRequestProvider: typeof import('./lightweight/request_provider').default;
+let StandalonePlatformProvider: typeof import('./lightweight/platform_provider').default;
+let translationProvider: typeof import('./lightweight/translation_provider').default;
+let createConfiguredRouter: typeof import('./lightweight/browser_routes').createConfiguredRouter;
+
+// Instance state
+let sqlProvider: InstanceType<typeof BrowserSqlProvider> | null = null;
+let messagingProvider: InstanceType<typeof WorkerMessagingProvider> | null = null;
+
+// 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;
+let queryString = "";
+
+/**
+ * Load all required modules using dynamic imports.
+ * This allows errors to be caught by our error handlers.
+ */
+async function loadModules(): Promise<void> {
+    console.log("[Worker] Loading lightweight modules...");
+    const [
+        sqlModule,
+        messagingModule,
+        clsModule,
+        cryptoModule,
+        requestModule,
+        platformModule,
+        translationModule,
+        routesModule
+    ] = await Promise.all([
+        import('./lightweight/sql_provider.js'),
+        import('./lightweight/messaging_provider.js'),
+        import('./lightweight/cls_provider.js'),
+        import('./lightweight/crypto_provider.js'),
+        import('./lightweight/request_provider.js'),
+        import('./lightweight/platform_provider.js'),
+        import('./lightweight/translation_provider.js'),
+        import('./lightweight/browser_routes.js')
+    ]);
+
+    BrowserSqlProvider = sqlModule.default;
+    WorkerMessagingProvider = messagingModule.default;
+    BrowserExecutionContext = clsModule.default;
+    BrowserCryptoProvider = cryptoModule.default;
+    FetchRequestProvider = requestModule.default;
+    StandalonePlatformProvider = platformModule.default;
+    translationProvider = translationModule.default;
+    createConfiguredRouter = routesModule.createConfiguredRouter;
+
+    // Create instances
+    sqlProvider = new BrowserSqlProvider();
+    messagingProvider = new WorkerMessagingProvider();
+
+    console.log("[Worker] Lightweight modules loaded successfully");
+}
+
+/**
+ * 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 {
+            // First, load all modules dynamically
+            await loadModules();
+
+            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");
+            } 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...");
+            const schemaModule = await import("@triliumnext/core/src/assets/schema.sql?raw");
+            coreModule = await import("@triliumnext/core");
+            await coreModule.initializeCore({
+                executionContext: new BrowserExecutionContext(),
+                crypto: new BrowserCryptoProvider(),
+                messaging: messagingProvider!,
+                request: new FetchRequestProvider(),
+                platform: new StandalonePlatformProvider(queryString),
+                translations: translationProvider,
+                schema: schemaModule.default,
+                dbConfig: {
+                    provider: sqlProvider!,
+                    isReadOnly: false,
+                    onTransactionCommit: () => {
+                        coreModule?.ws.sendTransactionEntityChangesToAllClients();
+                    },
+                    onTransactionRollback: () => {
+                        // No-op for now
+                    }
+                }
+            });
+            coreModule.ws.init();
+
+            console.log("[Worker] Supported routes", Object.keys(coreModule.routes));
+
+            // Create and configure the router
+            router = createConfiguredRouter();
+            console.log("[Worker] Router configured");
+
+            // initializeDb runs initDbConnection inside an execution context,
+            // which resolves dbReady — required before beccaLoaded can settle.
+            coreModule.sql_init.initializeDb();
+
+            if (coreModule.sql_init.isDbInitialized()) {
+                console.log("[Worker] Database already initialized, loading becca...");
+                await coreModule.becca_loader.beccaLoaded;
+            } else {
+                console.log("[Worker] Database not initialized, skipping becca load (will be loaded during DB initialization)");
+            }
+
+            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;
+}
+
+interface LocalRequest {
+    method: string;
+    url: string;
+    body?: unknown;
+    headers?: Record<string, string>;
+}
+
+// Main dispatch
+async function dispatch(request: LocalRequest) {
+    // 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) return;
+
+    if (msg.type === "INIT") {
+        queryString = msg.queryString || "";
+        return;
+    }
+
+    if (msg.type !== "LOCAL_REQUEST") return;
+
+    const { id, request } = msg;
+
+    try {
+        const response = await dispatch(request);
+
+        // 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,84 @@
+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
+    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 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();
+
+        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 loadScripts() {
+    await import("../../client/src/index.js");
+}
+
+bootstrap();

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,188 @@
+import prefresh from '@prefresh/vite';
+import { join } from 'path';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const clientAssets = ["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 = [
+    sqliteWasmPlugin,  // Always include SQLite WASM files
+    viteStaticCopy({
+        targets: clientAssets.map((asset) => ({
+            src: `../../client/src/${asset}/*`,
+            dest: asset
+        })),
+        // Enable watching in development
+        ...(isDev && {
+            watch: {
+                reloadPageOnChange: true
+            }
+        })
+    }),
+    viteStaticCopy({
+        targets: [
+            {
+                src: "../../server/src/assets/*",
+                dest: "server-assets"
+            }
+        ]
+    }),
+    // Watch client files for changes in development
+    ...(isDev ? [
+        prefresh(),
+        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 /
+    envDir: __dirname,  // Load .env files from client-standalone directory, not src/
+    cacheDir: '../../../node_modules/.vite/apps/client-standalone',
+    base: "",
+    plugins,
+    esbuild: {
+        jsx: 'automatic',
+        jsxImportSource: 'preact',
+        jsxDev: isDev
+    },
+    css: {
+        transformer: 'lightningcss',
+        devSourcemap: isDev
+    },
+    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'),
+            },
+            output: {
+                entryFileNames: (chunkInfo) => {
+                    // Service worker and other workers should be at root level
+                    if (chunkInfo.name === 'sw') {
+                        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/package.json

@@ -16,7 +16,6 @@
     "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@algolia/autocomplete-js": "1.19.6",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
@@ -44,7 +43,8 @@
     "@univerjs/preset-sheets-note": "0.18.0",
     "@univerjs/preset-sheets-sort": "0.18.0",
     "@univerjs/presets": "0.18.0",
-    "@zumer/snapdom": "2.5.0",
+    "@zumer/snapdom": "2.6.0",
+    "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
     "clsx": "2.1.1",
@@ -53,12 +53,12 @@
     "draggabilly": "3.0.0",
     "force-graph": "1.51.2",
     "globals": "17.4.0",
-    "i18next": "25.10.3",
+    "i18next": "25.10.10",
     "i18next-http-backend": "3.0.2",
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.40",
+    "katex": "0.16.43",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
@@ -66,9 +66,9 @@
     "mermaid": "11.13.0",
     "mind-elixir": "5.9.3",
     "normalize.css": "8.0.1",
-    "panzoom": "9.4.3",
+    "panzoom": "9.4.4",
     "preact": "10.29.0",
-    "react-i18next": "16.6.0",
+    "react-i18next": "16.6.6",
     "react-window": "2.2.7",
     "reveal.js": "6.0.0",
     "rrule": "2.8.1",
@@ -86,9 +86,9 @@
     "@types/mark.js": "8.11.12",
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.4",
+    "happy-dom": "20.8.8",
     "lightningcss": "1.32.0",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.3.0"
+    "vite-plugin-static-copy": "3.4.0"
   }
-}
+}

apps/client/src/assets/icon-color.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>Trilium Notes</title>
+	<style type="text/css">
+		.st0{fill:#95C980;}
+		.st1{fill:#72B755;}
+		.st2{fill:#4FA52B;}
+		.st3{fill:#EE8C89;}
+		.st4{fill:#E96562;}
+		.st5{fill:#E33F3B;}
+		.st6{fill:#EFB075;}
+		.st7{fill:#E99547;}
+		.st8{fill:#E47B19;}
+	</style>
+	<g>
+		<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
+		<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
+		<path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
+	
+		<path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
+		<path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
+		<path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
+
+		<path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
+		<path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
+		<path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
+	</g>
+</svg>

apps/client/src/components/entrypoints.ts

@@ -1,6 +1,5 @@
 import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
-import { closeAllHeadlessAutocompletes } from "../services/autocomplete_core.js";
 import bundleService from "../services/bundle.js";
 import dateNoteService from "../services/date_notes.js";
 import froca from "../services/froca.js";
@@ -198,7 +197,7 @@ export default class Entrypoints extends Component {
 
     hideAllPopups() {
         if (utils.isDesktop()) {
-            closeAllHeadlessAutocompletes();
+            $(".aa-input").autocomplete("close");
         }
     }
 

apps/client/src/components/tab_manager.ts

@@ -1,16 +1,15 @@
-import type FNote from "../entities/fnote.js";
-import { closeAllHeadlessAutocompletes } from "../services/autocomplete_core.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import options from "../services/options.js";
-import server from "../services/server.js";
-import SpacedUpdate from "../services/spaced_update.js";
-import treeService from "../services/tree.js";
-import Mutex from "../utils/mutex.js";
-import type { EventData } from "./app_context.js";
-import appContext from "./app_context.js";
 import Component from "./component.js";
+import SpacedUpdate from "../services/spaced_update.js";
+import server from "../services/server.js";
+import options from "../services/options.js";
+import froca from "../services/froca.js";
+import treeService from "../services/tree.js";
 import NoteContext from "./note_context.js";
+import appContext from "./app_context.js";
+import Mutex from "../utils/mutex.js";
+import linkService from "../services/link.js";
+import type { EventData } from "./app_context.js";
+import type FNote from "../entities/fnote.js";
 
 interface TabState {
     contexts: NoteContext[];
@@ -430,7 +429,10 @@ export default class TabManager extends Component {
             }
 
             // close dangling autocompletes after closing the tab
-            closeAllHeadlessAutocompletes();
+            const $autocompleteEl = $(".aa-input");
+            if ("autocomplete" in $autocompleteEl) {
+                $autocompleteEl.autocomplete("close");
+            }
 
             // close dangling tooltips
             $("body > div.tooltip").remove();

apps/client/src/desktop.ts

@@ -1,3 +1,5 @@
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
 

apps/client/src/index.ts

@@ -16,6 +16,17 @@ async function initJQuery() {
     const $ = (await import("jquery")).default;
     window.$ = $;
     window.jQuery = $;
+
+    // Polyfill removed jQuery methods for autocomplete.js compatibility
+    ($ as any).isArray = Array.isArray;
+    ($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+    ($ as any).isPlainObject = function(obj: any) {
+        if (obj == null || typeof obj !== 'object') { return false; }
+        const proto = Object.getPrototypeOf(obj);
+        if (proto === null) { return true; }
+        const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+        return typeof Ctor === 'function' && Ctor === Object;
+    };
 }
 
 async function setupGlob() {
@@ -25,10 +36,37 @@ async function setupGlob() {
     window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
     window.glob = {
         ...json,
-        activeDialog: null
+        activeDialog: null,
+        device: json.device || getDevice()
     };
 }
 
+function getDevice() {
+    // Respect user's manual override via URL.
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("print")) {
+        return "print";
+    } else if (urlParams.has("desktop")) {
+        return "desktop";
+    } else if (urlParams.has("mobile")) {
+        return "mobile";
+    }
+
+    const deviceCookie = document.cookie.split("; ").find(row => row.startsWith("trilium-device="))?.split("=")[1];
+    if (deviceCookie === "desktop" || deviceCookie === "mobile") return deviceCookie;
+    return isMobile() ? "mobile" : "desktop";
+}
+
+// https://stackoverflow.com/a/73731646/944162
+function isMobile() {
+    const mQ = matchMedia?.("(pointer:coarse)");
+    if (mQ?.media === "(pointer:coarse)") return !!mQ.matches;
+
+    if ("orientation" in window) return true;
+    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i;
+    return userAgentsRegEx.test(navigator.userAgent);
+}
+
 async function loadBootstrapCss() {
     // We have to selectively import Bootstrap CSS based on text direction.
     if (glob.isRtl) {
@@ -74,6 +112,8 @@ function loadIcons() {
 }
 
 function setBodyAttributes() {
+    if (!glob.dbInitialized) return;
+
     const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
     const classesToSet = [
         device,
@@ -94,6 +134,11 @@ function setBodyAttributes() {
 }
 
 async function loadScripts() {
+    if (!glob.dbInitialized) {
+        await import("./setup.js");
+        return;
+    }
+
     switch (glob.device) {
         case "mobile":
             await import("./mobile.js");

apps/client/src/layouts/desktop_layout.tsx

@@ -30,6 +30,7 @@ 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 StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
 import NoteIconWidget from "../widgets/note_icon.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
@@ -186,6 +187,7 @@ export default class DesktopLayout {
                     )
             )
             .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
+            .optChild(glob.isStandalone, <StandaloneWarningBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.

apps/client/src/layouts/mobile_layout.tsx

@@ -13,6 +13,7 @@ import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
 import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar";
 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";
@@ -55,6 +56,7 @@ export default class MobileLayout {
                             .child(
                                 new SplitNoteContainer(() =>
                                     new NoteWrapperWidget()
+                                        .optChild(glob.isStandalone, <StandaloneWarningBar />)
                                         .child(
                                             new FlexContainer("row")
                                                 .class("title-row note-split-title")

apps/client/src/mobile.ts

@@ -1,3 +1,5 @@
+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";

apps/client/src/runtime.ts

@@ -8,6 +8,17 @@ async function loadBootstrap() {
     }
 }
 
+// Polyfill removed jQuery methods for autocomplete.js compatibility
+($ as any).isArray = Array.isArray;
+($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+($ as any).isPlainObject = function(obj: any) {
+    if (obj == null || typeof obj !== 'object') { return false; }
+    const proto = Object.getPrototypeOf(obj);
+    if (proto === null) { return true; }
+    const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+    return typeof Ctor === 'function' && Ctor === Object;
+};
+
 (window as any).$ = $;
 (window as any).jQuery = $;
 await loadBootstrap();

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

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { shouldAutocompleteHandleEnterKey } from "./attribute_autocomplete.js";
-
-describe("attribute autocomplete enter handling", () => {
-    it("delegates plain Enter when the panel is open and an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(true);
-    });
-
-    it("does not delegate plain Enter when there is no active suggestion", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: false }
-        )).toBe(false);
-    });
-
-    it("does not delegate plain Enter when the panel is closed", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: false, hasActiveItem: false }
-        )).toBe(false);
-    });
-
-    it("does not delegate Ctrl+Enter even when an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: true, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(false);
-    });
-
-    it("does not delegate Cmd+Enter even when an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: true },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(false);
-    });
-
-    it("ignores non-Enter keys", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "ArrowDown", ctrlKey: false, metaKey: false },
-            { isPanelOpen: false, hasActiveItem: false }
-        )).toBe(true);
-    });
-});

apps/client/src/services/attribute_autocomplete.ts

@@ -1,450 +1,114 @@
-import type { AutocompleteApi as CoreAutocompleteApi, BaseItem } from "@algolia/autocomplete-core";
-import { createAutocomplete } from "@algolia/autocomplete-core";
-
 import type { AttributeType } from "../entities/fattribute.js";
-import { bindAutocompleteInput, createHeadlessPanelController, registerHeadlessAutocompleteCloser, withHeadlessSourceDefaults } from "./autocomplete_core.js";
 import server from "./server.js";
 
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-interface NameItem extends BaseItem {
-    name: string;
-}
-
-export function shouldAutocompleteHandleEnterKey(
-    event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey">,
-    { isPanelOpen, hasActiveItem }: { isPanelOpen: boolean; hasActiveItem: boolean }
-) {
-    if (event.key !== "Enter") {
-        return true;
-    }
-
-    if (event.ctrlKey || event.metaKey) {
-        return false;
-    }
-
-    return isPanelOpen && hasActiveItem;
-}
-
-interface InitAttributeNameOptions {
-    /** The <input> element where the user types */
+interface InitOptions {
     $el: JQuery<HTMLElement>;
     attributeType?: AttributeType | (() => AttributeType);
     open: boolean;
-    /** Called when the user selects a value or the panel closes */
-    onValueChange?: (value: string) => void;
-}
-
-// ---------------------------------------------------------------------------
-// Instance tracking
-// ---------------------------------------------------------------------------
-
-interface ManagedInstance {
-    autocomplete: CoreAutocompleteApi<NameItem>;
-    panelEl: HTMLElement;
-    cleanup: () => void;
-}
-
-const instanceMap = new WeakMap<HTMLElement, ManagedInstance>();
-
-function renderItems(
-    panelEl: HTMLElement,
-    items: NameItem[],
-    activeItemId: number | null,
-    onSelect: (item: NameItem) => void,
-    onActivate: (index: number) => void,
-    onDeactivate: () => void
-): void {
-    panelEl.innerHTML = "";
-    if (items.length === 0) {
-        panelEl.style.display = "none";
-        return;
-    }
-    const list = document.createElement("ul");
-    list.className = "aa-core-list";
-    items.forEach((item, index) => {
-        const li = document.createElement("li");
-        li.className = "aa-core-item";
-        if (index === activeItemId) {
-            li.classList.add("aa-core-item--active");
-        }
-        li.textContent = item.name;
-        li.addEventListener("mousemove", () => {
-            if (activeItemId === index) {
-                return;
-            }
-
-            onActivate(index);
-        });
-        li.addEventListener("mouseleave", (event) => {
-            const relatedTarget = event.relatedTarget;
-            if (relatedTarget instanceof HTMLElement && li.contains(relatedTarget)) {
-                return;
-            }
-
-            onDeactivate();
-        });
-        li.addEventListener("mousedown", (e) => {
-            e.preventDefault(); // prevent input blur
-            e.stopPropagation();
-            onSelect(item);
-        });
-        list.appendChild(li);
-    });
-    panelEl.appendChild(list);
-}
-
-// ---------------------------------------------------------------------------
-// Attribute name autocomplete — new (autocomplete-core, headless)
-// ---------------------------------------------------------------------------
-
-function initAttributeNameAutocomplete({ $el, attributeType, open, onValueChange }: InitAttributeNameOptions) {
-    const inputEl = $el[0] as HTMLInputElement;
-    const syncQueryFromInputValue = (autocomplete: CoreAutocompleteApi<NameItem>) => {
-        autocomplete.setQuery(inputEl.value || "");
-    };
-
-    // Already initialized — just open if requested
-    if (instanceMap.has(inputEl)) {
-        if (open) {
-            const inst = instanceMap.get(inputEl)!;
-            syncQueryFromInputValue(inst.autocomplete);
-            inst.autocomplete.setIsOpen(true);
-            inst.autocomplete.refresh();
-        }
-        return;
-    }
-
-    const panelController = createHeadlessPanelController({ inputEl });
-    const { panelEl } = panelController;
-
-    let isPanelOpen = false;
-    let hasActiveItem = false;
-
-    const autocomplete = createAutocomplete<NameItem>({
-        openOnFocus: true,
-        defaultActiveItemId: 0,
-        shouldPanelOpen() {
-            return true;
-        },
-
-        getSources({ query }) {
-            return [
-                withHeadlessSourceDefaults({
-                    sourceId: "attribute-names",
-                    getItems() {
-                        const type = typeof attributeType === "function" ? attributeType() : attributeType;
-                        return server
-                            .get<string[]>(`attribute-names/?type=${type}&query=${encodeURIComponent(query)}`)
-                            .then((names) => names.map((name) => ({ name })));
-                    },
-                    getItemInputValue({ item }) {
-                        return item.name;
-                    },
-                    onSelect({ item }) {
-                        inputEl.value = item.name;
-                        autocomplete.setQuery(item.name);
-                        autocomplete.setIsOpen(false);
-                        onValueChange?.(item.name);
-                    },
-                }),
-            ];
-        },
-
-        onStateChange({ state }) {
-            isPanelOpen = state.isOpen;
-            hasActiveItem = state.activeItemId !== null;
-
-            // Render items
-            const collections = state.collections;
-            const items = collections.length > 0 ? (collections[0].items as NameItem[]) : [];
-            const activeId = state.activeItemId ?? null;
-
-            if (state.isOpen && items.length > 0) {
-                renderItems(
-                    panelEl,
-                    items,
-                    activeId,
-                    (item) => {
-                        inputEl.value = item.name;
-                        autocomplete.setQuery(item.name);
-                        autocomplete.setIsOpen(false);
-                        onValueChange?.(item.name);
-                    },
-                    (index) => {
-                        autocomplete.setActiveItemId(index);
-                    },
-                    () => {
-                        autocomplete.setActiveItemId(null);
-                    }
-                );
-                panelController.startPositioning();
-            } else {
-                panelController.hide();
-            }
-
-            if (!state.isOpen) {
-                panelController.hide();
-            }
-        },
-    });
-
-    const unregisterGlobalCloser = registerHeadlessAutocompleteCloser(() => {
-        autocomplete.setIsOpen(false);
-        panelController.hide();
-    });
-
-    const cleanupInputBindings = bindAutocompleteInput<NameItem>({
-        inputEl,
-        autocomplete,
-        onInput(e, handlers) {
-            handlers.onChange(e as any);
-        },
-        onFocus(e, handlers) {
-            syncQueryFromInputValue(autocomplete);
-            handlers.onFocus(e as any);
-        },
-        onBlur() {
-            // Delay to allow mousedown on panel items
-            setTimeout(() => {
-                autocomplete.setIsOpen(false);
-                panelController.hide();
-                onValueChange?.(inputEl.value);
-            }, 50);
-        },
-        onKeyDown(e, handlers) {
-            if (!shouldAutocompleteHandleEnterKey(e, { isPanelOpen, hasActiveItem })) {
-                return;
-            }
-
-            if (e.key === "Enter") {
-                // Prevent the enter key from propagating to parent dialogs
-                // (which might interpret it as "submit" or "save and close")
-                e.stopPropagation();
-            }
-
-            handlers.onKeyDown(e as any);
-        }
-    });
-
-    const cleanup = () => {
-        unregisterGlobalCloser();
-        cleanupInputBindings();
-        panelController.destroy();
-    };
-
-    instanceMap.set(inputEl, { autocomplete, panelEl, cleanup });
-
-    if (open) {
-        syncQueryFromInputValue(autocomplete);
-        autocomplete.setIsOpen(true);
-        autocomplete.refresh();
-        panelController.startPositioning();
-    }
-}
-
-
-
-// ---------------------------------------------------------------------------
-// Label value autocomplete (headless autocomplete-core)
-// ---------------------------------------------------------------------------
-
-interface LabelValueInitOptions {
-    $el: JQuery<HTMLElement>;
-    open: boolean;
     nameCallback?: () => string;
-    onValueChange?: (value: string) => void;
 }
 
-function initLabelValueAutocomplete({ $el, open, nameCallback, onValueChange }: LabelValueInitOptions) {
-    const inputEl = $el[0] as HTMLInputElement;
-    const syncQueryFromInputValue = (autocomplete: CoreAutocompleteApi<NameItem>) => {
-        autocomplete.setQuery(inputEl.value || "");
-    };
+/**
+ * @param $el - element on which to init autocomplete
+ * @param attributeType - "relation" or "label" or callback providing one of those values as a type of autocompleted attributes
+ * @param open - should the autocomplete be opened after init?
+ */
+function initAttributeNameAutocomplete({ $el, attributeType, open }: InitOptions) {
+    if (!$el.hasClass("aa-input")) {
+        $el.autocomplete(
+            {
+                appendTo: document.querySelector("body"),
+                hint: false,
+                openOnFocus: true,
+                minLength: 0,
+                tabAutocomplete: false
+            },
+            [
+                {
+                    displayKey: "name",
+                    // disabling cache is important here because otherwise cache can stay intact when switching between attribute type which will lead to autocomplete displaying attribute names for incorrect attribute type
+                    cache: false,
+                    source: async (term, cb) => {
+                        const type = typeof attributeType === "function" ? attributeType() : attributeType;
 
-    if (instanceMap.has(inputEl)) {
-        if (open) {
-            const inst = instanceMap.get(inputEl)!;
-            syncQueryFromInputValue(inst.autocomplete);
-            inst.autocomplete.setIsOpen(true);
-            inst.autocomplete.refresh();
-        }
+                        const names = await server.get<string[]>(`attribute-names/?type=${type}&query=${encodeURIComponent(term)}`);
+                        const result = names.map((name) => ({ name }));
+
+                        cb(result);
+                    }
+                }
+            ]
+        );
+
+        $el.on("autocomplete:opened", () => {
+            if ($el.attr("readonly")) {
+                $el.autocomplete("close");
+            }
+        });
+    }
+
+    if (open) {
+        $el.autocomplete("open");
+    }
+}
+
+async function initLabelValueAutocomplete({ $el, open, nameCallback }: InitOptions) {
+    if ($el.hasClass("aa-input")) {
+        // we reinit every time because autocomplete seems to have a bug where it retains state from last
+        // open even though the value was reset
+        $el.autocomplete("destroy");
+    }
+
+    let attributeName = "";
+    if (nameCallback) {
+        attributeName = nameCallback();
+    }
+
+    if (attributeName.trim() === "") {
         return;
     }
 
-    const panelController = createHeadlessPanelController({ inputEl });
-    const { panelEl } = panelController;
+    const attributeValues = (await server.get<string[]>(`attribute-values/${encodeURIComponent(attributeName)}`)).map((attribute) => ({ value: attribute }));
 
-    let isPanelOpen = false;
-    let hasActiveItem = false;
-    let isSelecting = false;
+    if (attributeValues.length === 0) {
+        return;
+    }
 
-    let cachedAttributeName = "";
-    let cachedAttributeValues: NameItem[] = [];
-
-    const handleSelect = (item: NameItem) => {
-        isSelecting = true;
-        inputEl.value = item.name;
-        inputEl.dispatchEvent(new Event("input", { bubbles: true }));
-        autocomplete.setQuery(item.name);
-        autocomplete.setIsOpen(false);
-        onValueChange?.(item.name);
-        isSelecting = false;
-
-        setTimeout(() => {
-            // Preserve the legacy contract: several consumers still commit the
-            // selected value from their existing Enter key handlers instead of
-            // listening to the autocomplete selection event directly.
-            inputEl.dispatchEvent(new KeyboardEvent("keydown", {
-                key: "Enter",
-                code: "Enter",
-                keyCode: 13,
-                which: 13,
-                bubbles: true,
-                cancelable: true
-            }));
-        }, 0);
-    };
-
-    const autocomplete = createAutocomplete<NameItem>({
-        openOnFocus: true,
-        defaultActiveItemId: null,
-        shouldPanelOpen() {
-            return true;
+    $el.autocomplete(
+        {
+            appendTo: document.querySelector("body"),
+            hint: false,
+            openOnFocus: false, // handled manually
+            minLength: 0,
+            tabAutocomplete: false
         },
+        [
+            {
+                displayKey: "value",
+                cache: false,
+                source: async function (term, cb) {
+                    term = term.toLowerCase();
 
-        getSources({ query }) {
-            return [
-                withHeadlessSourceDefaults({
-                    sourceId: "attribute-values",
-                    async getItems() {
-                        const attributeName = nameCallback ? nameCallback() : "";
-                        if (!attributeName.trim()) {
-                            return [];
-                        }
+                    const filtered = attributeValues.filter((attr) => attr.value.toLowerCase().includes(term));
 
-                        if (attributeName !== cachedAttributeName || cachedAttributeValues.length === 0) {
-                            cachedAttributeName = attributeName;
-                            const values = await server.get<string[]>(`attribute-values/${encodeURIComponent(attributeName)}`);
-                            cachedAttributeValues = values.map((name) => ({ name }));
-                        }
-
-                        const q = query.toLowerCase();
-                        return cachedAttributeValues.filter((attr) => attr.name.toLowerCase().includes(q));
-                    },
-                    getItemInputValue({ item }) {
-                        return item.name;
-                    },
-                    onSelect({ item }) {
-                        handleSelect(item);
-                    },
-                }),
-            ];
-        },
-
-        onStateChange({ state }) {
-            isPanelOpen = state.isOpen;
-            hasActiveItem = state.activeItemId !== null;
-
-            const collections = state.collections;
-            const items = collections.length > 0 ? (collections[0].items as NameItem[]) : [];
-            const activeId = state.activeItemId ?? null;
-
-            if (state.isOpen && items.length > 0) {
-                renderItems(
-                    panelEl,
-                    items,
-                    activeId,
-                    handleSelect,
-                    (index) => {
-                        autocomplete.setActiveItemId(index);
-                    },
-                    () => {
-                        autocomplete.setActiveItemId(null);
-                    }
-                );
-                panelController.startPositioning();
-            } else {
-                panelController.hide();
+                    cb(filtered);
+                }
             }
+        ]
+    );
 
-            if (!state.isOpen) {
-                panelController.hide();
-            }
-        },
-    });
-
-    const unregisterGlobalCloser = registerHeadlessAutocompleteCloser(() => {
-        autocomplete.setIsOpen(false);
-        panelController.hide();
-    });
-
-    const cleanupInputBindings = bindAutocompleteInput<NameItem>({
-        inputEl,
-        autocomplete,
-        onInput(e, handlers) {
-            if (!isSelecting) {
-                handlers.onChange(e as any);
-            }
-        },
-        onFocus(e, handlers) {
-            const attributeName = nameCallback ? nameCallback() : "";
-            if (attributeName !== cachedAttributeName) {
-                cachedAttributeName = "";
-                cachedAttributeValues = [];
-            }
-            syncQueryFromInputValue(autocomplete);
-            handlers.onFocus(e as any);
-        },
-        onBlur() {
-            setTimeout(() => {
-                autocomplete.setIsOpen(false);
-                panelController.hide();
-                onValueChange?.(inputEl.value);
-            }, 50);
-        },
-        onKeyDown(e, handlers) {
-            if (!shouldAutocompleteHandleEnterKey(e, { isPanelOpen, hasActiveItem })) {
-                return;
-            }
-
-            if (e.key === "Enter") {
-                e.stopPropagation();
-            }
-
-            handlers.onKeyDown(e as any);
+    $el.on("autocomplete:opened", () => {
+        if ($el.attr("readonly")) {
+            $el.autocomplete("close");
         }
     });
 
-    const cleanup = () => {
-        unregisterGlobalCloser();
-        cleanupInputBindings();
-        panelController.destroy();
-    };
-
-    instanceMap.set(inputEl, { autocomplete, panelEl, cleanup });
-
     if (open) {
-        syncQueryFromInputValue(autocomplete);
-        autocomplete.setIsOpen(true);
-        autocomplete.refresh();
-        panelController.startPositioning();
-    }
-}
-
-export function destroyAutocomplete($el: JQuery<HTMLElement> | HTMLElement) {
-    const inputEl = $el instanceof HTMLElement ? $el : $el[0] as HTMLInputElement;
-    const instance = instanceMap.get(inputEl);
-    if (instance) {
-        instance.cleanup();
-        instanceMap.delete(inputEl);
+        $el.autocomplete("open");
     }
 }
 
 export default {
     initAttributeNameAutocomplete,
-    destroyAutocomplete,
-    initLabelValueAutocomplete,
+    initLabelValueAutocomplete
 };

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

@@ -1,93 +0,0 @@
-import $ from "jquery";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    showSpy,
-    hideSpy,
-    updateDisplayedShortcutsSpy,
-    saveFocusedElementSpy,
-    focusSavedElementSpy
-} = vi.hoisted(() => ({
-    showSpy: vi.fn(),
-    hideSpy: vi.fn(),
-    updateDisplayedShortcutsSpy: vi.fn(),
-    saveFocusedElementSpy: vi.fn(),
-    focusSavedElementSpy: vi.fn()
-}));
-
-vi.mock("bootstrap", () => ({
-    Modal: {
-        getOrCreateInstance: vi.fn(() => ({
-            show: showSpy,
-            hide: hideSpy
-        }))
-    }
-}));
-
-vi.mock("./keyboard_actions.js", () => ({
-    default: {
-        updateDisplayedShortcuts: updateDisplayedShortcutsSpy
-    }
-}));
-
-vi.mock("./focus.js", () => ({
-    saveFocusedElement: saveFocusedElementSpy,
-    focusSavedElement: focusSavedElementSpy
-}));
-
-import { closeAllHeadlessAutocompletes, registerHeadlessAutocompleteCloser } from "./autocomplete_core.js";
-import { openDialog } from "./dialog.js";
-
-describe("headless autocomplete closing", () => {
-    const unregisterClosers: Array<() => void> = [];
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        (window as any).glob = {
-            ...(window as any).glob,
-            activeDialog: null
-        };
-    });
-
-    afterEach(() => {
-        while (unregisterClosers.length > 0) {
-            unregisterClosers.pop()?.();
-        }
-    });
-
-    it("closes every registered closer and skips unregistered ones", () => {
-        const closer1 = vi.fn();
-        const closer2 = vi.fn();
-        const closer3 = vi.fn();
-
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer1));
-        const unregister2 = registerHeadlessAutocompleteCloser(closer2);
-        unregisterClosers.push(unregister2);
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer3));
-
-        unregister2();
-
-        closeAllHeadlessAutocompletes();
-
-        expect(closer1).toHaveBeenCalledTimes(1);
-        expect(closer2).not.toHaveBeenCalled();
-        expect(closer3).toHaveBeenCalledTimes(1);
-    });
-
-    it("closes registered autocompletes when a dialog finishes hiding", async () => {
-        const closer = vi.fn();
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer));
-
-        const dialogEl = document.createElement("div");
-        const $dialog = $(dialogEl);
-
-        await openDialog($dialog, false);
-        $dialog.trigger("hidden.bs.modal");
-
-        expect(showSpy).toHaveBeenCalledTimes(1);
-        expect(updateDisplayedShortcutsSpy).toHaveBeenCalledWith($dialog);
-        expect(saveFocusedElementSpy).toHaveBeenCalledTimes(1);
-        expect(closer).toHaveBeenCalledTimes(1);
-        expect(focusSavedElementSpy).toHaveBeenCalledTimes(1);
-    });
-});

apps/client/src/services/autocomplete_core.ts

@@ -1,195 +0,0 @@
-import type { AutocompleteApi, AutocompleteSource, BaseItem } from "@algolia/autocomplete-core";
-
-export const HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR = ".aa-core-panel";
-
-type HeadlessSourceDefaults = Required<Pick<AutocompleteSource<any>, "getItemUrl" | "onActive" | "onResolve">>;
-
-const headlessAutocompleteClosers = new Set<() => void>();
-
-export function withHeadlessSourceDefaults<TSource extends AutocompleteSource<any>>(
-    source: TSource
-): TSource & HeadlessSourceDefaults {
-    return {
-        getItemUrl() {
-            return undefined;
-        },
-        onActive() {
-            // Headless consumers handle highlight side effects themselves.
-        },
-        onResolve() {
-            // Headless consumers resolve and render items manually.
-        },
-        ...source
-    } as TSource & HeadlessSourceDefaults;
-}
-
-export function registerHeadlessAutocompleteCloser(close: () => void) {
-    headlessAutocompleteClosers.add(close);
-
-    return () => {
-        headlessAutocompleteClosers.delete(close);
-    };
-}
-
-export function closeAllHeadlessAutocompletes() {
-    for (const close of Array.from(headlessAutocompleteClosers)) {
-        close();
-    }
-}
-
-interface HeadlessPanelControllerOptions {
-    inputEl: HTMLElement;
-    container?: HTMLElement | null;
-    className?: string;
-    containedClassName?: string;
-}
-
-export function createHeadlessPanelController({
-    inputEl,
-    container,
-    className = "aa-core-panel",
-    containedClassName = "aa-core-panel--contained"
-}: HeadlessPanelControllerOptions) {
-    const panelEl = document.createElement("div");
-    panelEl.className = className;
-
-    const isContained = Boolean(container);
-    if (isContained) {
-        panelEl.classList.add(containedClassName);
-        container!.appendChild(panelEl);
-    } else {
-        document.body.appendChild(panelEl);
-    }
-
-    panelEl.style.display = "none";
-
-    let rafId: number | null = null;
-
-    const positionPanel = () => {
-        if (isContained) {
-            panelEl.style.position = "static";
-            panelEl.style.top = "";
-            panelEl.style.left = "";
-            panelEl.style.width = "100%";
-            panelEl.style.display = "block";
-            return;
-        }
-
-        const rect = inputEl.getBoundingClientRect();
-        panelEl.style.position = "fixed";
-        panelEl.style.top = `${rect.bottom}px`;
-        panelEl.style.left = `${rect.left}px`;
-        panelEl.style.width = `${rect.width}px`;
-        panelEl.style.display = "block";
-    };
-
-    const stopPositioning = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-        }
-    };
-
-    const startPositioning = () => {
-        if (isContained) {
-            positionPanel();
-            return;
-        }
-
-        if (rafId !== null) {
-            return;
-        }
-
-        const update = () => {
-            positionPanel();
-            rafId = requestAnimationFrame(update);
-        };
-
-        update();
-    };
-
-    const hide = () => {
-        panelEl.style.display = "none";
-        stopPositioning();
-    };
-
-    const destroy = () => {
-        hide();
-        panelEl.remove();
-    };
-
-    return {
-        panelEl,
-        hide,
-        destroy,
-        startPositioning,
-        stopPositioning
-    };
-}
-
-type InputHandlers<TItem extends BaseItem> = ReturnType<AutocompleteApi<TItem>["getInputProps"]>;
-
-interface InputBinding<TEvent extends Event = Event> {
-    type: string;
-    listener: (event: TEvent) => void;
-}
-
-interface BindAutocompleteInputOptions<TItem extends BaseItem> {
-    inputEl: HTMLInputElement;
-    autocomplete: AutocompleteApi<TItem>;
-    onInput?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onFocus?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onBlur?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onKeyDown?: (event: KeyboardEvent, handlers: InputHandlers<TItem>) => void;
-    extraBindings?: InputBinding[];
-}
-
-export function bindAutocompleteInput<TItem extends BaseItem>({
-    inputEl,
-    autocomplete,
-    onInput,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    extraBindings = []
-}: BindAutocompleteInputOptions<TItem>) {
-    const handlers = autocomplete.getInputProps({ inputElement: inputEl });
-
-    const bindings: InputBinding[] = [
-        {
-            type: "input",
-            listener: (event: Event) => {
-                onInput?.(event, handlers);
-            }
-        },
-        {
-            type: "focus",
-            listener: (event: Event) => {
-                onFocus?.(event, handlers);
-            }
-        },
-        {
-            type: "blur",
-            listener: (event: Event) => {
-                onBlur?.(event, handlers);
-            }
-        },
-        {
-            type: "keydown",
-            listener: (event: Event) => {
-                onKeyDown?.(event as KeyboardEvent, handlers);
-            }
-        },
-        ...extraBindings
-    ];
-
-    bindings.forEach(({ type, listener }) => {
-        inputEl.addEventListener(type, listener as EventListener);
-    });
-
-    return () => {
-        bindings.forEach(({ type, listener }) => {
-            inputEl.removeEventListener(type, listener as EventListener);
-        });
-    };
-}

apps/client/src/services/dialog.ts

@@ -1,11 +1,9 @@
 import { Modal } from "bootstrap";
-
 import appContext from "../components/app_context.js";
 import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
-import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
-import { closeAllHeadlessAutocompletes } from "./autocomplete_core.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) {
@@ -17,7 +15,10 @@ export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog =
     Modal.getOrCreateInstance($dialog[0], config).show();
 
     $dialog.on("hidden.bs.modal", () => {
-        closeAllHeadlessAutocompletes();
+        const $autocompleteEl = $(".aa-input");
+        if ("autocomplete" in $autocompleteEl) {
+            $autocompleteEl.autocomplete("close");
+        }
 
         if (!glob.activeDialog || glob.activeDialog === $dialog) {
             focusSavedElement();

apps/client/src/services/doc_renderer.ts

@@ -5,7 +5,7 @@ import { formatCodeBlocks } from "./syntax_highlight.js";
 
 export default function renderDoc(note: FNote) {
     return new Promise<JQuery<HTMLElement>>((resolve) => {
-        let docName = note.getLabelValue("docName");
+        const docName = note.getLabelValue("docName");
         const $content = $("<div>");
 
         if (docName) {
@@ -16,7 +16,7 @@ export default function renderDoc(note: FNote) {
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
                     $content.load(fallbackUrl, async () => {
-                        await processContent(fallbackUrl, $content)
+                        await processContent(fallbackUrl, $content);
                         resolve($content);
                     });
                     return;
@@ -37,9 +37,9 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
     const dir = url.substring(0, url.lastIndexOf("/"));
 
     // Images are relative to the docnote but that will not work when rendered in the application since the path breaks.
-    $content.find("img").each((i, el) => {
+    $content.find("img").each((_i, el) => {
         const $img = $(el);
-        $img.attr("src", dir + "/" + $img.attr("src"));
+        $img.attr("src", `${dir}/${$img.attr("src")}`);
     });
 
     formatCodeBlocks($content);
@@ -51,7 +51,17 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
 function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
-
-    const basePath = window.glob.isDev ? window.glob.assetPath + "/.." : window.glob.assetPath;
-    return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
+    // The user guide is available only in English, so make sure we are requesting correctly since 404s in standalone client are treated differently.
+    if (docNameValue.includes("User%20Guide")) language = "en";
+    return `${getBasePath()}/doc_notes/${language}/${docNameValue}.html`;
+}
+
+function getBasePath() {
+    if (window.glob.isStandalone) {
+        return `server-assets`;
+    }
+    if (window.glob.isDev) {
+        return `${window.glob.assetPath  }/..`;
+    }
+    return window.glob.assetPath;
 }

apps/client/src/services/froca.ts

@@ -1,11 +1,11 @@
+import appContext from "../components/app_context.js";
+import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
+import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
+import FBlob, { type FBlobRow } from "../entities/fblob.js";
 import FBranch, { type FBranchRow } from "../entities/fbranch.js";
 import FNote, { type FNoteRow } from "../entities/fnote.js";
-import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
-import server from "./server.js";
-import appContext from "../components/app_context.js";
-import FBlob, { type FBlobRow } from "../entities/fblob.js";
-import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
 import type { Froca } from "./froca-interface.js";
+import server from "./server.js";
 
 interface SubtreeResponse {
     notes: FNoteRow[];
@@ -44,8 +44,9 @@ class FrocaImpl implements Froca {
     }
 
     async loadInitialTree() {
-        const resp = await server.get<SubtreeResponse>("tree");
+        if (!glob.dbInitialized) return;
 
+        const resp = await server.get<SubtreeResponse>("tree");
         // clear the cache only directly before adding new content which is important for e.g., switching to protected session
         this.#clear();
         this.addResp(resp);
@@ -77,7 +78,7 @@ class FrocaImpl implements Froca {
         for (const noteRow of noteRows) {
             const { noteId } = noteRow;
 
-            let note = this.notes[noteId];
+            const note = this.notes[noteId];
 
             if (note) {
                 note.update(noteRow);
@@ -240,9 +241,8 @@ class FrocaImpl implements Froca {
                     console.trace(`Can't find note '${noteId}'`);
 
                     return null;
-                } else {
-                    return this.notes[noteId];
                 }
+                return this.notes[noteId];
             })
             .filter((note) => !!note) as FNote[];
     }
@@ -263,9 +263,8 @@ class FrocaImpl implements Froca {
                     console.trace(`Can't find note '${noteId}'`);
 
                     return null;
-                } else {
-                    return this.notes[noteId];
                 }
+                return this.notes[noteId];
             })
             .filter((note) => !!note) as FNote[];
     }
@@ -338,11 +337,10 @@ class FrocaImpl implements Froca {
             attachmentRows = await server.getWithSilentNotFound<FAttachmentRow[]>(`attachments/${attachmentId}/all`);
         } catch (e: any) {
             if (silentNotFoundError) {
-                logInfo(`Attachment '${attachmentId}' not found, but silentNotFoundError is enabled: ` + e.message);
+                logInfo(`Attachment '${attachmentId}' not found, but silentNotFoundError is enabled: ${e.message}`);
                 return null;
-            } else {
-                throw e;
             }
+            throw e;
         }
 
         const attachments = this.processAttachmentRows(attachmentRows);

apps/client/src/services/frontend_script_api.ts

@@ -206,7 +206,7 @@ export interface Api {
      * Instance name identifies particular Trilium instance. It can be useful for scripts
      * if some action needs to happen on only one specific instance.
      */
-    getInstanceName(): string;
+    getInstanceName(): string | null;
 
     /**
      * @returns date in YYYY-MM-DD format

apps/client/src/services/i18n.ts

@@ -1,16 +1,17 @@
-import options from "./options.js";
+import { type Locale, LOCALE_IDS, setDayjsLocale } from "@triliumnext/commons";
 import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
-import server from "./server.js";
-import { LOCALE_IDS, setDayjsLocale, type Locale } from "@triliumnext/commons";
 import { initReactI18next } from "react-i18next";
 
+import options from "./options.js";
+import server from "./server.js";
+
 let locales: Locale[] | null;
 
 /**
  * A deferred promise that resolves when translations are initialized.
  */
-export let translationsInitializedPromise = $.Deferred();
+export const translationsInitializedPromise = $.Deferred();
 
 export async function initLocale() {
     const locale = ((options.get("locale") as string) || "en") as LOCALE_IDS;
@@ -34,7 +35,7 @@ export async function initLocale() {
 
 export function getAvailableLocales() {
     if (!locales) {
-        throw new Error("Tried to load list of locales, but localization is not yet initialized.")
+        throw new Error("Tried to load list of locales, but localization is not yet initialized.");
     }
 
     return locales;

apps/client/src/services/keyboard_actions.ts

@@ -1,9 +1,8 @@
-import type { ActionKeyboardShortcut } from "@triliumnext/commons";
-
-import appContext from "../components/app_context.js";
-import type Component from "../components/component.js";
 import server from "./server.js";
+import appContext from "../components/app_context.js";
 import shortcutService, { ShortcutBinding } from "./shortcuts.js";
+import type Component from "../components/component.js";
+import type { ActionKeyboardShortcut } from "@triliumnext/commons";
 
 const keyboardActionRepo: Record<string, ActionKeyboardShortcut> = {};
 
@@ -52,10 +51,7 @@ async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, c
 getActionsForScope("window").then((actions) => {
     for (const action of actions) {
         for (const shortcut of action.effectiveShortcuts ?? []) {
-            shortcutService.bindGlobalShortcut(shortcut, () => {
-                const ntxId = appContext.tabManager?.activeNtxId ?? null;
-                appContext.triggerCommand(action.actionName, { ntxId });
-            });
+            shortcutService.bindGlobalShortcut(shortcut, () => appContext.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
         }
     }
 });

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,14 +1,4 @@
-export type LabelType = "text" | "textarea" | "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/utils.ts

@@ -135,6 +135,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`.
  */
@@ -816,7 +818,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;
     }
@@ -903,6 +905,10 @@ export function getErrorMessage(e: unknown) {
 
 }
 
+export function replaceHtmlEscapedSlashes(str: string) {
+    return str.replace(///g, "/");
+}
+
 /**
  * Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected.
  * @param placement a string optionally containing a "left" or "right" value.

apps/client/src/services/ws.ts

@@ -1,21 +1,21 @@
-import utils from "./utils.js";
-import toastService from "./toast.js";
-import server from "./server.js";
-import options from "./options.js";
-import frocaUpdater from "./froca_updater.js";
-import appContext from "../components/app_context.js";
-import { t } from "./i18n.js";
-import type { EntityChange } from "../server_types.js";
 import { WebSocketMessage } from "@triliumnext/commons";
-import toast from "./toast.js";
+
+import appContext from "../components/app_context.js";
+import type { EntityChange } from "../server_types.js";
+import frocaUpdater from "./froca_updater.js";
+import { t } from "./i18n.js";
+import options from "./options.js";
+import server from "./server.js";
+import toastService from "./toast.js";
+import utils from "./utils.js";
 
 type MessageHandler = (message: WebSocketMessage) => void;
 let messageHandlers: MessageHandler[] = [];
 
 let ws: WebSocket;
-let lastAcceptedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
-let lastAcceptedEntityChangeSyncId = window.glob.maxEntityChangeSyncIdAtLoad;
-let lastProcessedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
+let lastAcceptedEntityChangeId = window.glob.maxEntityChangeIdAtLoad ?? 0;
+let lastAcceptedEntityChangeSyncId = window.glob.maxEntityChangeSyncIdAtLoad ?? 0;
+let lastProcessedEntityChangeId = window.glob.maxEntityChangeIdAtLoad ?? 0;
 let lastPingTs: number;
 let frontendUpdateDataQueue: EntityChange[] = [];
 
@@ -57,6 +57,49 @@ export function unsubscribeToMessage(messageHandler: MessageHandler) {
     messageHandlers = messageHandlers.filter(handler => handler !== messageHandler);
 }
 
+/**
+ * Dispatch a message to all handlers and process it.
+ * This is the main entry point for incoming messages from any provider
+ * (WebSocket, Worker, etc.)
+ */
+export async function dispatchMessage(message: WebSocketMessage) {
+    // Notify all subscribers
+    for (const messageHandler of messageHandlers) {
+        messageHandler(message);
+    }
+
+    // Use string type for flexibility - server sends more message types than are typed
+    const messageType = message.type as string;
+    const msg = message as any;
+
+    // Process the message
+    if (messageType === "ping") {
+        lastPingTs = Date.now();
+    } else if (messageType === "reload-frontend") {
+        utils.reloadFrontendApp("received request from backend to reload frontend");
+    } else if (messageType === "frontend-update") {
+        await executeFrontendUpdate(msg.data.entityChanges);
+    } else if (messageType === "sync-hash-check-failed") {
+        toastService.showError(t("ws.sync-check-failed"), 60000);
+    } else if (messageType === "consistency-checks-failed") {
+        toastService.showError(t("ws.consistency-checks-failed"), 50 * 60000);
+    } else if (messageType === "api-log-messages") {
+        appContext.triggerEvent("apiLogMessages", { noteId: msg.noteId, messages: msg.messages });
+    } else if (messageType === "toast") {
+        toastService.showMessage(msg.message);
+    } else if (messageType === "execute-script") {
+        // TODO: Remove after porting the file
+        // @ts-ignore
+        const bundleService = (await import("./bundle.js")).default as any;
+        // TODO: Remove after porting the file
+        // @ts-ignore
+        const froca = (await import("./froca.js")).default as any;
+        const originEntity = msg.originEntityId ? await froca.getNote(msg.originEntityId) : null;
+
+        bundleService.getAndExecuteBundle(msg.currentNoteId, originEntity, msg.script, msg.params);
+    }
+}
+
 // used to serialize frontend update operations
 let consumeQueuePromise: Promise<void> | null = null;
 
@@ -112,38 +155,13 @@ async function executeFrontendUpdate(entityChanges: EntityChange[]) {
     }
 }
 
-async function handleMessage(event: MessageEvent<any>) {
-    const message = JSON.parse(event.data);
-
-    for (const messageHandler of messageHandlers) {
-        messageHandler(message);
-    }
-
-    if (message.type === "ping") {
-        lastPingTs = Date.now();
-    } else if (message.type === "reload-frontend") {
-        utils.reloadFrontendApp("received request from backend to reload frontend");
-    } else if (message.type === "frontend-update") {
-        await executeFrontendUpdate(message.data.entityChanges);
-    } else if (message.type === "sync-hash-check-failed") {
-        toastService.showError(t("ws.sync-check-failed"), 60000);
-    } else if (message.type === "consistency-checks-failed") {
-        toastService.showError(t("ws.consistency-checks-failed"), 50 * 60000);
-    } else if (message.type === "api-log-messages") {
-        appContext.triggerEvent("apiLogMessages", { noteId: message.noteId, messages: message.messages });
-    } else if (message.type === "toast") {
-        toastService.showMessage(message.message);
-    } else if (message.type === "execute-script") {
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const bundleService = (await import("./bundle.js")).default as any;
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const froca = (await import("./froca.js")).default as any;
-        const originEntity = message.originEntityId ? await froca.getNote(message.originEntityId) : null;
-
-        bundleService.getAndExecuteBundle(message.currentNoteId, originEntity, message.script, message.params);
-    }
+/**
+ * WebSocket message handler - parses the event and dispatches to generic handler.
+ * This is only used in WebSocket mode (not standalone).
+ */
+async function handleWebSocketMessage(event: MessageEvent<string>) {
+    const message = JSON.parse(event.data) as WebSocketMessage;
+    await dispatchMessage(message);
 }
 
 let entityChangeIdReachedListeners: {
@@ -161,7 +179,7 @@ function waitForEntityChangeId(desiredEntityChangeId: number) {
 
     return new Promise<void>((res, rej) => {
         entityChangeIdReachedListeners.push({
-            desiredEntityChangeId: desiredEntityChangeId,
+            desiredEntityChangeId,
             resolvePromise: res,
             start: Date.now()
         });
@@ -228,16 +246,21 @@ function connectWebSocket() {
     // use wss for secure messaging
     const ws = new WebSocket(webSocketUri);
     ws.onopen = () => console.debug(utils.now(), `Connected to server ${webSocketUri} with WebSocket`);
-    ws.onmessage = handleMessage;
+    ws.onmessage = handleWebSocketMessage;
     // we're not handling ws.onclose here because reconnection is done in sendPing()
 
     return ws;
 }
 
 async function sendPing() {
+    if (!ws) {
+        // In standalone mode, there's no WebSocket — nothing to ping.
+        return;
+    }
+
     if (Date.now() - lastPingTs > 30000) {
         console.warn(utils.now(), "Lost websocket connection to the backend");
-        toast.showPersistent({
+        toastService.showPersistent({
             id: "lost-websocket-connection",
             title: t("ws.lost-websocket-connection-title"),
             message: t("ws.lost-websocket-connection-message"),
@@ -246,7 +269,7 @@ async function sendPing() {
     }
 
     if (ws.readyState === ws.OPEN) {
-        toast.closePersistent("lost-websocket-connection");
+        toastService.closePersistent("lost-websocket-connection");
         ws.send(
             JSON.stringify({
                 type: "ping",
@@ -262,7 +285,18 @@ async function sendPing() {
 
 setTimeout(() => {
     if (glob.device === "print") return;
+    if (!glob.dbInitialized) return;
 
+    if (glob.isStandalone) {
+        // In standalone mode, listen for messages from the local worker via custom event
+        window.addEventListener("trilium:ws-message", ((event: CustomEvent<WebSocketMessage>) => {
+            dispatchMessage(event.detail);
+        }) as EventListener);
+        console.debug(utils.now(), "Standalone mode: listening for worker messages");
+        return;
+    }
+
+    // Normal mode: use WebSocket
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/setup.css

@@ -0,0 +1,420 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+}
+
+body.setup {
+    margin: 0;
+    padding: 0;
+
+    &>.setup-outer-wrapper {
+        width: 100dvw;
+        height: 100dvh;
+
+        body:not(.electron) & {
+            @media (min-width: 700px) {
+                background:
+                    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
+                    radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
+                    radial-gradient(ellipse at 60% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
+                    var(--left-pane-background-color);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 2em;
+            }
+        }
+
+        .setup-container {
+            background-color: var(--main-background-color);
+            border-radius: 16px;
+            padding: 2em;
+            flex-direction: column;
+            gap: 2rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            position: relative;
+            height: 100%;
+
+            @media (min-width: 700px) {
+                display: flex;
+                width: 750px;
+                height: 650px;
+                top: unset;
+                overflow: hidden;
+            }
+
+            .setup-options {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                gap: 1rem;
+
+                .setup-option-card {
+                    padding: 1.5em;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+
+                    &.disabled {
+                        cursor: not-allowed;
+                        opacity: 0.5;
+                        background-color: transparent;
+                        border-color: var(--main-border-color)
+                    }
+
+                    &:not(.disabled):hover {
+                        background-color: var(--card-background-hover-color);
+                        filter: contrast(105%);
+                        transition: background-color .2s ease-out;
+                    }
+
+                    .tn-icon {
+                        font-size: 2.5em;
+                        color: var(--muted-text-color);
+                    }
+
+                    h3 {
+                        font-size: 1.5em;
+                        font-weight: normal;
+                    }
+
+                    p:last-of-type {
+                        margin-bottom: 0;
+                        color: var(--muted-text-color);
+                    }
+                }
+            }
+        }
+
+        .page {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            padding: 2em;
+            overflow: auto;
+
+            >.back-button {
+                position: absolute;
+                top: 2em;
+                left: 2em;
+                color: var(--muted-text-color);
+
+                .tn-icon {
+                    margin-right: 0.4em;
+                }
+            }
+
+            >main {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                padding-top: 1em;
+                min-height: 0;
+            }
+
+            &.contentless {
+                justify-content: center;
+                align-items: center;
+            }
+
+            >footer {
+                display: flex;
+                justify-content: flex-end;
+                gap: 0.5rem;
+                border-top: 1px solid var(--main-border-color);
+                padding-top: 1rem;
+                margin-inline: -2em;
+                padding-inline: 2em;
+            }
+
+            >.page-error {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                background: var(--admonition-caution-accent-color);
+                z-index: 1;
+                margin: 0;
+                border-radius: 0;
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+                padding-right: 2.5em;
+
+                button {
+                    position: absolute;
+                    top: 0.5em;
+                    right: 0.5em;
+                }
+            }
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            width: 80%;
+            margin-inline: auto;
+
+            .form-group {
+                margin-bottom: 0;
+            }
+
+            .admonition {
+                margin: 0;
+            }
+        }
+
+        .form-item-with-icon {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .tn-icon {
+                font-size: 1.5em;
+                color: var(--muted-text-color);
+            }
+        }
+    }
+
+    .sync-illustration {
+        display: flex;
+        justify-content: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5rem;
+
+        .tn-icon {
+            font-size: 3em;
+            color: var(--muted-text-color);
+        }
+
+        >div {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            gap: 0.5rem;
+            line-height: 1;
+            font-size: 0.85rem;
+        }
+
+        .sync-illustration-arrows {
+            width: 60px;
+            height: 3em;
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                border: 2px dashed var(--main-border-color);
+                top: 1.5em;
+                left: 0;
+                right: 0;
+            }
+        }
+    }
+
+    .illustration-icon {
+        font-size: 4em;
+        text-align: center;
+        color: var(--muted-text-color);
+        opacity: 0.6;
+        margin-block: 1rem;
+    }
+
+    .illustration-logo {
+        width: 96px;
+        height: 96px;
+        margin: auto;
+    }
+
+    h1 {
+        font-size: 1.4em;
+        text-align: center;
+    }
+
+    h1 + p {
+        text-align: center;
+        color: var(--muted-text-color);
+        margin-bottom: 0;
+    }
+
+    .tooltip {
+        z-index: 15 !important;
+    }
+}
+
+body.setup.background-effects,
+body.setup.background-effects .setup-container {
+    background: transparent;
+}
+
+/* macOS: draggable title bar region and traffic light buttons */
+body.setup.platform-darwin {
+    .drag-region {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 40px;
+        -webkit-app-region: drag;
+        z-index: 10;
+    }
+
+    .back-button {
+        -webkit-app-region: no-drag;
+        z-index: 11;
+    }
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Slide transitions */
+.slide-page {
+    position: absolute;
+    inset: 0;
+}
+
+.slide-out-forward,
+.slide-out-backward,
+.slide-in-forward,
+.slide-in-backward {
+    animation-duration: 0.35s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+.slide-out-forward {
+    animation-name: slide-out-left;
+}
+
+.slide-out-backward {
+    animation-name: slide-out-right;
+}
+
+.slide-in-forward {
+    animation-name: slide-in-right;
+}
+
+.slide-in-backward {
+    animation-name: slide-in-left;
+}
+
+.page.select-language {
+    .dropdownWrapper {
+        padding-bottom: 2em;
+        width: 80%;
+        margin: auto;
+    }
+
+    .dropdownWrapper,
+    .dropdown,
+    .dropdown-menu {
+        height: 100%;
+    }
+
+    .dropdown-menu {
+        box-sizing: border-box;
+        overflow: auto;
+    }
+}
+
+.page.sync-from-desktop {
+    .card-columns {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+    }
+
+    .sync-from-desktop-waiting {
+        margin-top: 2rem;
+        text-align: center;
+
+        .main {
+            font-size: 1.35em;
+        }
+
+        .subtle {
+            color: var(--muted-text-color);
+        }
+    }
+
+    .ip-addresses {
+        min-width: 250px;
+        user-select: text;
+        display: flex;
+        flex-direction: column;
+        font-family: var(--monospace-font-family);
+        font-size: 0.9em;
+
+        .tn-card-body {
+            overflow: auto;
+            padding-bottom: 0.5em;
+
+            > :first-child {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.page.sync-in-progress {
+    .sync-progress {
+        margin-top: 0.5rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        progress {
+            width: 100%;
+            height: 1rem;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            appearance: none;
+
+            &::-webkit-progress-bar {
+                background-color: var(--main-border-color);
+            }
+
+            &::-webkit-progress-value {
+                background-color: var(--main-text-color);
+                transition: width 0.2s ease-out;
+            }
+        }
+
+        span {
+            font-size: 0.85rem;
+            color: var(--muted-text-color);
+            min-width: 2.5em;
+            text-align: right;
+        }
+    }
+}
+
+@keyframes slide-out-left {
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(-100%); opacity: 0; }
+}
+
+@keyframes slide-out-right {
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes slide-in-right {
+    from { transform: translateX(100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-in-left {
+    from { transform: translateX(-100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
+}

apps/client/src/setup.ts

@@ -1,204 +0,0 @@
-import "jquery";
-
-import utils from "./services/utils.js";
-
-type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
-type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
-
-class SetupController {
-    private step: SetupStep;
-    private setupType: SetupType = "";
-    private syncPollIntervalId: number | null = null;
-    private rootNode: HTMLElement;
-    private setupTypeForm: HTMLFormElement;
-    private syncFromServerForm: HTMLFormElement;
-    private setupTypeNextButton: HTMLButtonElement;
-    private setupTypeInputs: HTMLInputElement[];
-    private syncServerHostInput: HTMLInputElement;
-    private syncProxyInput: HTMLInputElement;
-    private passwordInput: HTMLInputElement;
-    private sections: Record<SetupStep, HTMLElement>;
-
-    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
-        this.rootNode = rootNode;
-        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
-        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
-        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
-        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
-        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
-        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
-        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
-        this.passwordInput = mustGetElement("password", HTMLInputElement);
-        this.sections = {
-            "setup-type": mustGetElement("setup-type-section", HTMLElement),
-            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
-            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
-            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
-            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
-        };
-    }
-
-    init() {
-        this.setupTypeForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.selectSetupType();
-        });
-
-        this.syncFromServerForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.finish();
-        });
-
-        for (const input of this.setupTypeInputs) {
-            input.addEventListener("change", () => {
-                this.setupType = input.value as SetupType;
-                this.render();
-            });
-        }
-
-        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
-            backButton.addEventListener("click", () => {
-                this.back();
-            });
-        }
-
-        const serverAddress = `${location.protocol}//${location.host}`;
-        $("#current-host").html(serverAddress);
-
-        if (this.step === "sync-in-progress") {
-            this.startSyncPolling();
-        }
-
-        this.render();
-        this.rootNode.style.display = "";
-    }
-
-    private async selectSetupType() {
-        if (this.setupType === "new-document") {
-            this.setStep("new-document-in-progress");
-
-            await $.post("api/setup/new-document");
-            window.location.replace("./setup");
-            return;
-        }
-
-        if (this.setupType) {
-            this.setStep(this.setupType);
-        }
-    }
-
-    private back() {
-        this.setStep("setup-type");
-        this.setupType = "";
-
-        for (const input of this.setupTypeInputs) {
-            input.checked = false;
-        }
-
-        this.render();
-    }
-
-    private async finish() {
-        const syncServerHost = this.syncServerHostInput.value.trim();
-        const syncProxy = this.syncProxyInput.value.trim();
-        const password = this.passwordInput.value;
-
-        if (!syncServerHost) {
-            showAlert("Trilium server address can't be empty");
-            return;
-        }
-
-        if (!password) {
-            showAlert("Password can't be empty");
-            return;
-        }
-
-        // not using server.js because it loads too many dependencies
-        const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost,
-            syncProxy,
-            password
-        });
-
-        if (resp.result === "success") {
-            hideAlert();
-            this.setStep("sync-in-progress");
-            this.startSyncPolling();
-        } else {
-            showAlert(`Sync setup failed: ${resp.error}`);
-        }
-    }
-
-    private setStep(step: SetupStep) {
-        this.step = step;
-        this.render();
-    }
-
-    private render() {
-        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
-            section.style.display = step === this.step ? "" : "none";
-        }
-
-        this.setupTypeNextButton.disabled = !this.setupType;
-    }
-
-    private getSelectedSetupType(): SetupType {
-        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
-    }
-
-    private startSyncPolling() {
-        if (this.syncPollIntervalId !== null) {
-            return;
-        }
-
-        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
-    }
-}
-
-async function checkOutstandingSyncs() {
-    const { outstandingPullCount, initialized } = await $.get("api/sync/stats");
-
-    if (initialized) {
-        if (utils.isElectron()) {
-            const remote = utils.dynamicRequire("@electron/remote");
-            remote.app.relaunch();
-            remote.app.exit(0);
-        } else {
-            utils.reloadFrontendApp();
-        }
-    } else {
-        $("#outstanding-syncs").html(outstandingPullCount);
-    }
-}
-
-function showAlert(message: string) {
-    $("#alert").text(message);
-    $("#alert").show();
-}
-
-function hideAlert() {
-    $("#alert").hide();
-}
-
-function getSyncInProgress() {
-    const el = document.getElementById("syncInProgress");
-    if (!el || !(el instanceof HTMLMetaElement)) return false;
-    return !!parseInt(el.content);
-}
-
-function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
-    const element = document.getElementById(id);
-
-    if (!element || !(element instanceof ctor)) {
-        throw new Error(`Expected element #${id}`);
-    }
-
-    return element as InstanceType<T>;
-}
-
-addEventListener("DOMContentLoaded", (event) => {
-    const rootNode = document.getElementById("setup-dialog");
-    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
-
-    new SetupController(rootNode, getSyncInProgress()).init();
-});

apps/client/src/setup.tsx

@@ -0,0 +1,524 @@
+import "./setup.css";
+
+import { LOCALES, SetupSyncFromServerResponse } from "@triliumnext/commons";
+import clsx from "clsx";
+import { ComponentChildren, render } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
+
+import logo from "./assets/icon-color.svg?url";
+import { initLocale, t } from "./services/i18n";
+import server from "./services/server";
+import { isElectron, replaceHtmlEscapedSlashes } from "./services/utils";
+import ActionButton from "./widgets/react/ActionButton";
+import Admonition from "./widgets/react/Admonition";
+import Button from "./widgets/react/Button";
+import { Card, CardFrame, CardSection } from "./widgets/react/Card";
+import FormGroup from "./widgets/react/FormGroup";
+import FormList, { FormListItem } from "./widgets/react/FormList";
+import FormTextBox from "./widgets/react/FormTextBox";
+import Icon from "./widgets/react/Icon";
+
+async function main() {
+    await initLocale();
+
+    const bodyWrapper = document.createElement("div");
+    bodyWrapper.classList.add("setup-outer-wrapper");
+    document.body.classList.add("setup");
+    if (isElectron()) {
+        document.body.classList.add("electron", `platform-${window.process.platform}`, "background-effects");
+    }
+    render(<App />, bodyWrapper);
+    document.body.replaceChildren(bodyWrapper);
+}
+
+type State = "selectLanguage" | "firstOptions" | "createNewDocumentOptions" | "createNewDocumentWithDemo" | "createNewDocumentEmpty" | "syncFromDesktop" | "syncFromServer" | "syncFromServerInProgress" | "syncFromDesktopInProgress" | "syncFailed";
+
+const STATE_ORDER: State[] = ["selectLanguage", "firstOptions", "createNewDocumentOptions", "createNewDocumentWithDemo", "createNewDocumentEmpty", "syncFromDesktop", "syncFromServer", "syncFromServerInProgress", "syncFromDesktopInProgress", "syncFailed"];
+
+function renderState(state: State, setState: (state: State) => void) {
+    switch (state) {
+        case "selectLanguage": return <SelectLanguage setState={setState} />;
+        case "firstOptions": return <SetupOptions setState={setState} />;
+        case "createNewDocumentOptions": return <CreateNewDocumentOptions setState={setState} />;
+        case "createNewDocumentWithDemo": return <CreateNewDocumentInProgress withDemo />;
+        case "createNewDocumentEmpty": return <CreateNewDocumentInProgress />;
+        case "syncFromServer": return <SyncFromServer setState={setState} />;
+        case "syncFromDesktop": return <SyncFromDesktop setState={setState} />;
+        case "syncFromServerInProgress": return <SyncInProgress device="server" />;
+        case "syncFromDesktopInProgress": return <SyncInProgress device="desktop" />;
+        default: return null;
+    }
+}
+
+function App() {
+    const [state, setState] = useState<State>("selectLanguage");
+    const [prevState, setPrevState] = useState<State | null>(null);
+    const [transitioning, setTransitioning] = useState(false);
+    const prevStateRef = useRef<State>(state);
+
+    function handleSetState(newState: State) {
+        setPrevState(prevStateRef.current);
+        prevStateRef.current = newState;
+        setTransitioning(true);
+        setState(newState);
+    }
+
+    const direction = prevState !== null
+        ? STATE_ORDER.indexOf(state) > STATE_ORDER.indexOf(prevState) ? "forward" : "backward"
+        : "forward";
+
+    return (
+        <div class="setup-container">
+            <div class="drag-region" />
+            {transitioning && prevState !== null && (
+                <div
+                    class={`slide-page slide-out-${direction}`}
+                    onAnimationEnd={() => {
+                        setTransitioning(false);
+                        setPrevState(null);
+                    }}
+                >
+                    {renderState(prevState, handleSetState)}
+                </div>
+            )}
+            <div class={`slide-page ${transitioning ? `slide-in-${direction}` : "slide-current"}`} key={state}>
+                {renderState(state, handleSetState)}
+            </div>
+        </div>
+    );
+}
+
+function SelectLanguage({ setState }: { setState: (state: State) => void }) {
+    const { t, i18n } = useTranslation();
+    const [ currentLocale, setCurrentLocale ] = useState(i18n.language);
+    const filteredLocales = useMemo(() => LOCALES.filter(l => !l.contentOnly), []);
+
+    return (
+        <SetupPage
+            title={t("setup.language")}
+            className="select-language"
+            illustration={<Icon icon="bx bx-globe" className="illustration-icon" />}
+            footer={<Button text={t("setup.continue")} kind="primary" onClick={() => setState("firstOptions")} />}
+        >
+            <FormList onSelect={async (id) => {
+                await i18n.changeLanguage(id);
+                setCurrentLocale(id);
+            }}>
+                {filteredLocales.map(locale => (
+                    <FormListItem key={locale.id} value={locale.id} active={locale.id === currentLocale}>{locale.name}</FormListItem>
+                ))}
+            </FormList>
+        </SetupPage>
+    );
+}
+
+function SetupOptions({ setState }: { setState: (state: State) => void }) {
+    return (
+        <SetupPage
+            title={t("setup.heading")}
+            className="setup-options-container"
+            illustration={<img src={logo} alt="Setup illustration" className="illustration-logo" />}
+            onBack={() => setState("selectLanguage")}
+        >
+            <div class="setup-options">
+                <SetupOptionCard
+                    icon="bx bx-file-blank"
+                    title={t("setup.new-document")}
+                    description={t("setup.new-document-description")}
+                    onClick={() => setState("createNewDocumentOptions")}
+                />
+
+                <SetupOptionCard
+                    icon="bx bx-server"
+                    title={t("setup.sync-from-server")}
+                    description={t("setup.sync-from-server-description")}
+                    onClick={() => setState("syncFromServer")}
+                />
+
+                <SetupOptionCard
+                    icon="bx bx-desktop"
+                    title={t("setup.sync-from-desktop")}
+                    description={t("setup.sync-from-desktop-description")}
+                    disabled={glob.isStandalone}
+                    onClick={() => setState("syncFromDesktop")}
+                />
+            </div>
+        </SetupPage>
+    );
+}
+
+type SyncStep = "connecting" | "syncing" | "finalizing";
+
+function getSyncStep(stats: { outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }): SyncStep {
+    if (stats.initialized) {
+        return "finalizing"; // will reload momentarily
+    }
+    if (stats.totalPullCount !== null && stats.outstandingPullCount > 0) {
+        return "syncing";
+    }
+    if (stats.totalPullCount !== null && stats.outstandingPullCount === 0) {
+        return "finalizing";
+    }
+    return "connecting";
+}
+
+function SyncInProgress({ device }: { device: "server" | "desktop" }) {
+    const stats = useOutstandingSyncInfo();
+    const step = getSyncStep(stats);
+
+    useEffect(() => {
+        if (stats.initialized) {
+            onSetupFinished();
+        }
+    }, [stats.initialized]);
+
+    const steps: { key: SyncStep; label: string }[] = [
+        { key: "connecting", label: t("setup.sync-step-connecting") },
+        { key: "syncing", label: t("setup.sync-step-syncing") },
+        { key: "finalizing", label: t("setup.sync-step-finalizing") }
+    ];
+
+    const currentIndex = steps.findIndex((s) => s.key === step);
+
+    const syncingDone = currentIndex > steps.findIndex((s) => s.key === "syncing");
+    let progress = 0;
+    if (syncingDone) {
+        progress = 100;
+    } else if (stats.totalPullCount) {
+        progress = Math.round(((stats.totalPullCount - stats.outstandingPullCount) / stats.totalPullCount) * 100);
+    }
+
+    return (
+        <SetupPage
+            className="sync-in-progress"
+            illustration={<SyncIllustration targetDevice={device} />}
+            title={t("setup.sync-in-progress-title")}
+        >
+            <Card className="sync-steps">
+                {steps.map((s, i) => (
+                    <CardSection className={i < currentIndex ? "completed" : i === currentIndex ? "active" : ""} key={s.key}>
+                        <Icon icon={i < currentIndex ? "bx bx-check-circle" : i === currentIndex ? "bx bx-loader-circle bx-spin" : "bx bx-circle"} />{" "}
+                        {s.label}
+                        {s.key === "syncing" && (
+                            <div class="sync-progress">
+                                <progress value={syncingDone ? 1 : stats.totalPullCount! - stats.outstandingPullCount} max={syncingDone ? 1 : stats.totalPullCount!} />
+                                <span>{progress}%</span>
+                            </div>
+                        )}
+                    </CardSection>
+                ))}
+            </Card>
+        </SetupPage>
+    );
+}
+
+function useOutstandingSyncInfo() {
+    const [ outstandingPullCount, setOutstandingPullCount ] = useState(0);
+    const [ totalPullCount, setTotalPullCount ] = useState<number | null>(null);
+    const [ initialized, setInitialized ] = useState(false);
+
+    async function refresh() {
+        const resp = await server.get<{ outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }>("sync/stats");
+        setOutstandingPullCount(resp.outstandingPullCount);
+        setTotalPullCount(resp.totalPullCount);
+        setInitialized(resp.initialized);
+    }
+
+    useEffect(() => {
+        const interval = setInterval(refresh, 1000);
+        refresh();
+
+        return () => clearInterval(interval);
+    }, []);
+    return { outstandingPullCount, totalPullCount, initialized };
+}
+
+function CreateNewDocumentOptions({ setState }: { setState: (state: State) => void }) {
+    return (
+        <SetupPage
+            className="create-new-document-options"
+            title={t("setup.create-new-document-options-title")}
+            illustration={<Icon icon="bx bx-star" className="illustration-icon" />}
+            onBack={() => setState("firstOptions")}
+        >
+            <div class="setup-options">
+                <SetupOptionCard icon="bx bx-book-open" title={t("setup.create-new-document-options-with-demo")} description={t("setup.create-new-document-options-with-demo-description")} onClick={() => setState("createNewDocumentWithDemo")} />
+                <SetupOptionCard icon="bx bx-file-blank" title={t("setup.create-new-document-options-empty")} description={t("setup.create-new-document-options-empty-description")} onClick={() => setState("createNewDocumentEmpty")} />
+            </div>
+        </SetupPage>
+    );
+}
+
+function CreateNewDocumentInProgress({ withDemo = false }: { withDemo?: boolean }) {
+    useEffect(() => {
+        server.post(`setup/new-document${withDemo ? "" : "?skipDemoDb"}`).then(onSetupFinished);
+    }, [ withDemo ]);
+
+    return (
+        <SetupPage
+            className="create-new-document"
+            title={t("setup.create-new-document-title")}
+            description={t("setup.create-new-document-description")}
+            illustration={<Icon icon="bx bx-loader-circle bx-spin" className="illustration-icon" />}
+        />
+    );
+}
+
+function SyncFromServer({ setState }: { setState: (state: State) => void }) {
+    const [ syncServerHost, setSyncServerHost ] = useState("");
+    const [ password, setPassword ] = useState("");
+    const [ syncProxy, setSyncProxy ] = useState("");
+    const [ error, setError ] = useState<string | null>(null);
+    const [ errorId, setErrorId ] = useState(0);
+    const [ isWrongPassword, setIsWrongPassword ] = useState(false);
+    const isValid = syncServerHost.trim() !== "" && password !== "";
+
+    function raiseError(message: string) {
+        setError(message);
+        setErrorId(id => id + 1);
+    }
+
+    async function handleFinishSetup() {
+        try {
+            const resp = await server.post<SetupSyncFromServerResponse>("setup/sync-from-server", {
+                syncServerHost: syncServerHost.trim(),
+                syncProxy: syncProxy.trim(),
+                password
+            });
+
+            if (resp.result === "success") {
+                setState("syncFromServerInProgress");
+            } else if (resp.error.includes("Incorrect password")) {
+                setIsWrongPassword(true);
+            } else {
+                raiseError(t("setup.sync-failed", { message: resp.error }));
+            }
+        } catch (e) {
+            raiseError(e instanceof Error ? e.message : String(e));
+        }
+    }
+
+    return (
+        <SetupPage
+            className="sync-from-server top-aligned"
+            title={t("setup.sync-from-server")}
+            description={t("setup.sync-from-server-page-description")}
+            illustration={<SyncIllustration targetDevice="server" />}
+            error={error}
+            errorId={errorId}
+            onBack={() => setState("firstOptions")}
+            footer={<Button text={t("setup.button-finish-setup")} kind="primary" onClick={handleFinishSetup} disabled={!isValid} />}
+        >
+            <form>
+                <Card>
+                    <CardSection>
+                        <FormGroup label={t("setup.server-host")} name="serverHost">
+                            <FormTextBox
+                                placeholder={t("setup.server-host-placeholder")}
+                                currentValue={syncServerHost} onChange={setSyncServerHost}
+                                autocomplete="trilium-sync-server-host"
+                                required
+                            />
+                        </FormGroup>
+                    </CardSection>
+
+                    <CardSection>
+                        <FormGroup
+                            label={t("setup.server-password")} name="serverPassword"
+                            error={isWrongPassword ? t("setup.wrong-password") : undefined}
+                        >
+                            <FormTextBox
+                                type="password"
+                                currentValue={password} onChange={setPassword}
+                                autocomplete="trilium-sync-server-password"
+                                required
+                            />
+                        </FormGroup>
+                    </CardSection>
+                </Card>
+
+                <Card heading={t("setup.advanced-options")}>
+                    <CardSection>
+                        <FormGroup
+                            name="proxyServer"
+                            label={t("setup.proxy-server")}
+                            description={isElectron() ? t("setup.proxy-instruction") : undefined}
+                        >
+                            <FormTextBox placeholder={t("setup.proxy-server-placeholder")} currentValue={syncProxy} onChange={setSyncProxy} />
+                        </FormGroup>
+                    </CardSection>
+                </Card>
+            </form>
+        </SetupPage>
+    );
+}
+
+function SyncFromDesktop({ setState }: { setState: (state: State) => void }) {
+    const networkAddresses = getNetworkAddresses();
+
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            const status = await server.get<{ schemaExists: boolean }>("setup/status");
+            if (status.schemaExists) {
+                setState("syncFromDesktopInProgress");
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [setState]);
+
+    return (
+        <SetupPage
+            className="sync-from-desktop"
+            title={t("setup.sync-from-desktop")}
+            illustration={<SyncIllustration targetDevice="desktop" />}
+            onBack={() => setState("firstOptions")}
+        >
+            <div class="card-columns">
+                <Card heading="On the other device">
+                    <CardSection>1. {t("setup.sync-from-desktop-step1")}</CardSection>
+                    <CardSection>2. {t("setup.sync-from-desktop-step2")}</CardSection>
+                    <CardSection>3. {t("setup.sync-from-desktop-step3")}</CardSection>
+                    <CardSection>4. {t("setup.sync-from-desktop-step4")}</CardSection>
+                    <CardSection>5. {t("setup.sync-from-desktop-step5")}</CardSection>
+                </Card>
+
+                {networkAddresses.length > 0 && (
+                    <Card heading={t("setup.your-ip-addresses")} className="ip-addresses">
+                        {networkAddresses.map((addr) => (
+                            <CardSection key={addr}>{addr}</CardSection>
+                        ))}
+                    </Card>
+                )}
+            </div>
+
+            <div class="sync-from-desktop-waiting">
+                <div class="main"><Icon icon="bx bx-loader-circle bx-spin" />{" "} {t("setup.sync-from-desktop-waiting")}</div>
+                <div class="subtle">{t("setup.sync-from-desktop-warning")}</div>
+            </div>
+        </SetupPage>
+    );
+}
+
+function SyncIllustration({ targetDevice }: { targetDevice: "desktop" | "server" }) {
+    return (
+        <div class="sync-illustration">
+            <div>
+                <Icon icon={isElectron() ? "bx bx-desktop" : "bx bx-globe"} />
+                {t("setup.sync-illustration-this-device")}
+            </div>
+            <div class="sync-illustration-arrows" />
+            <div>
+                <Icon icon={targetDevice === "desktop" ? "bx bx-desktop" : "bx bx-server"} />
+                {targetDevice === "desktop" ? t("setup.sync-illustration-desktop-app") : t("setup.sync-illustration-server")}
+            </div>
+        </div>
+    );
+}
+
+function SetupOptionCard({ title, description, icon, onClick, disabled }: { title: string; description: string, icon: string, onClick?: () => void, disabled?: boolean }) {
+    return (
+        <CardFrame
+            className={clsx("setup-option-card", { disabled })}
+            onClick={disabled ? undefined : onClick}
+        >
+            <Icon icon={icon} />
+
+            <div>
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </CardFrame>
+    );
+}
+
+function SetupPage({ title, description, className, illustration, children, footer, error, errorId, onBack }: {
+    title: string;
+    description?: string;
+    error?: string | null;
+    errorId?: number;
+    className?: string;
+    illustration?: ComponentChildren;
+    children?: ComponentChildren;
+    footer?: ComponentChildren;
+    onBack?: () => void;
+}) {
+    const [ showError, setShowError ] = useState(!!error);
+    useEffect(() => {
+        if (error) {
+            setShowError(true);
+        }
+    }, [ error, errorId ]);
+
+    return (
+        <div className={clsx("page", className, { "contentless": !children })}>
+            {onBack && (
+                <Button
+                    className="back-button"
+                    icon="bx bx-arrow-back"
+                    text={t("setup.button-back")}
+                    onClick={onBack}
+                    kind="lowProfile"
+                />
+            )}
+            {error && showError && (
+                <Admonition className="page-error" type="caution">
+                    <ActionButton icon="bx bx-x" text={t("setup.dismiss-error")} onClick={() => setShowError(false)}  />
+                    {replaceHtmlEscapedSlashes(error)}
+                </Admonition>
+            )}
+
+            {illustration}
+            <h1>{title}</h1>
+            {description && <p class="page-description">{description}</p>}
+            {children && <main>
+                {children}
+            </main>}
+            {footer && <footer>{footer}</footer>}
+        </div>
+    );
+}
+
+function getNetworkAddresses(): string[] {
+    if (!isElectron()) {
+        return [`${location.protocol}//${location.host}`];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const os = require("os") as typeof import("os");
+    const interfaces = os.networkInterfaces();
+    const addresses: string[] = [];
+
+    for (const nets of Object.values(interfaces)) {
+        if (!nets) continue;
+        for (const net of nets) {
+            if (net.internal) continue;
+            if (net.family === "IPv6" && net.scopeid !== 0) continue;
+            addresses.push(net.address);
+        }
+    }
+
+    // Sort by likelihood of being the local network address.
+    addresses.sort((a, b) => networkScore(a) - networkScore(b));
+
+    return addresses.map((addr) => `${location.protocol}//${addr}:${location.port}`);
+}
+
+function networkScore(addr: string): number {
+    if (addr.startsWith("192.168.")) return 0;
+    if (addr.startsWith("10.")) return 1;
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(addr)) return 2;
+    if (addr.includes(":")) return 4; // IPv6
+    return 3;
+}
+
+function onSetupFinished() {
+    if (isElectron()) {
+        // On Electron we need to use the setup route because it handles the closing of the setup window and opening the main app window.
+        location.href = "setup";
+    } else {
+        location.reload();
+    }
+}
+
+main();

apps/client/src/stylesheets/style.css

@@ -892,6 +892,33 @@ table.promoted-attributes-in-tooltip th {
     opacity: 1;
 }
 
+.algolia-autocomplete {
+    width: calc(100% - 30px);
+    z-index: 2000 !important;
+}
+
+.algolia-autocomplete-container .aa-dropdown-menu {
+    position: inherit !important;
+    overflow: auto;
+}
+
+.algolia-autocomplete .aa-input,
+.algolia-autocomplete .aa-hint {
+    width: 100%;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+    width: 100%;
+    background-color: var(--main-background-color);
+    border: 1px solid var(--main-border-color);
+    border-top: none;
+    z-index: 2000 !important;
+    max-height: 500px;
+    overflow: auto;
+    padding: 0;
+    margin: 0;
+}
+
 .aa-dropdown-menu .aa-suggestion {
     cursor: pointer;
     padding: 6px 16px;
@@ -933,153 +960,6 @@ table.promoted-attributes-in-tooltip th {
     background-color: var(--active-item-background-color);
 }
 
-/* ===== @algolia/autocomplete-core (headless, custom panel) ===== */
-
-.aa-core-panel {
-    z-index: 10000;
-    background-color: var(--main-background-color);
-    border: 1px solid var(--main-border-color);
-    border-top: none;
-    max-height: 500px;
-    overflow: auto;
-    padding: 0;
-    margin: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.aa-core-panel.aa-dropdown-menu {
-    width: 100%;
-}
-
-.aa-core-panel--contained {
-    position: static !important;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-}
-
-.aa-core-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.aa-core-item {
-    cursor: pointer;
-    padding: 7px 16px;
-    margin: 0;
-    white-space: normal;
-}
-
-.aa-core-item--active {
-    color: var(--active-item-text-color);
-    background-color: var(--active-item-background-color);
-}
-
-.aa-core-item .note-suggestion {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    width: 100%;
-}
-
-.aa-core-item .icon,
-.aa-core-item .command-icon {
-    flex-shrink: 0;
-    line-height: 1.4;
-    margin-top: 1px;
-}
-
-.aa-core-item .text {
-    min-width: 0;
-    flex: 1;
-}
-
-.aa-core-item .aa-core-primary-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.aa-core-item .search-result-title {
-    display: block;
-    min-width: 0;
-    line-height: 1.35;
-    word-break: break-word;
-    font-size: 1.02em;
-}
-
-.aa-core-item .search-result-attributes {
-    display: block;
-    margin-top: 1px;
-    font-size: 0.8em;
-    color: var(--muted-text-color);
-    opacity: 0.65;
-    line-height: 1.2;
-    word-break: break-word;
-}
-
-.aa-core-item .search-result-attributes {
-    padding-inline-start: 14px;
-}
-
-.aa-core-item .aa-core-shortcut,
-.aa-core-item kbd.command-shortcut {
-    flex-shrink: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--muted-text-color);
-    font-family: inherit !important;
-    font-size: 0.8em;
-    opacity: 0.85;
-}
-
-.aa-core-item .command-suggestion {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    font-size: 0.9em;
-}
-
-.aa-core-item .command-content {
-    flex-grow: 1;
-    min-width: 0;
-}
-
-.aa-core-item .command-name {
-    font-weight: bold;
-    line-height: 1.35;
-}
-
-.aa-core-item .command-description {
-    font-size: 0.8em;
-    line-height: 1.3;
-    opacity: 0.75;
-}
-
-.aa-core-item .search-result-title b,
-.aa-core-item .search-result-path b,
-.aa-core-item .search-result-attributes b,
-.aa-core-item .command-name b,
-.aa-core-item .command-description b {
-    color: var(--admonition-warning-accent-color);
-    text-decoration: underline;
-}
-
-.aa-core-item .aa-core-separator {
-    padding: 0 2px;
-}
-
-.jump-to-note-results .aa-core-panel--contained {
-    max-height: calc(80vh - 200px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-}
-
 .help-button {
     float: inline-end;
     background: none;

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

@@ -128,8 +128,8 @@
     margin-inline: auto;
 }
 
-/* The headless autocomplete panel rendered into the empty-note results container */
-.note-detail-empty .aa-core-panel--contained {
+/* The search results list */
+.note-detail-empty span.aa-dropdown-menu {
     margin-top: 1em;
     border: unset;
 }

apps/client/src/translations/ca/translation.json

@@ -93,7 +93,10 @@
     "digits": "dígits",
     "inheritable": "Heretable",
     "delete": "Suprimeix",
-    "color_type": "Color"
+    "color_type": "Color",
+    "textarea": "Text multi linia",
+    "date_time": "Data i hora",
+    "precision_title": "Quants dígits han d'estar disponibles per a coma flotant a la interfície de configuració."
   },
   "rename_label": {
     "to": "Per"

apps/client/src/translations/cn/translation.json

@@ -446,7 +446,8 @@
     "and_more": "... 以及另外 {{count}} 个。",
     "print_landscape": "导出为 PDF 时，将页面方向更改为横向而不是纵向。",
     "print_page_size": "导出为 PDF 时，更改页面大小。支持的值：<code>A0</code>、<code>A1</code>、<code>A2</code>、<code>A3</code>、<code>A4</code>、<code>A5</code>、<code>A6</code>、<code>Legal</code>、<code>Letter</code>、<code>Tabloid</code>、<code>Ledger</code>。",
-    "color_type": "颜色"
+    "color_type": "颜色",
+    "textarea": "多行文本"
   },
   "attribute_editor": {
     "help_text_body1": "要添加标签，只需输入例如 <code>#rock</code> 或者如果您还想添加值，则例如 <code>#year = 2020</code>",
@@ -2167,5 +2168,52 @@
   },
   "setup_form": {
     "more_info": "了解更多"
+  },
+  "media": {
+    "play": "播放（空格）",
+    "pause": "暂停（空格）",
+    "back-10s": "后退10秒（左箭头键）",
+    "forward-30s": "前进30秒",
+    "mute": "静音（M）",
+    "unmute": "取消静音（M）",
+    "playback-speed": "播放速度",
+    "loop": "循环播放",
+    "disable-loop": "禁用循环播放",
+    "rotate": "旋转",
+    "picture-in-picture": "画中画",
+    "exit-picture-in-picture": "退出画中画",
+    "fullscreen": "全屏（F）",
+    "exit-fullscreen": "退出全屏",
+    "unsupported-format": "此文件格式不支持媒体预览：\n{{mime}}",
+    "zoom-to-fit": "缩放以填充",
+    "zoom-reset": "重置缩放以填充"
+  },
+  "mermaid": {
+    "sample_diagrams": "示例图：",
+    "sample_flowchart": "流程图",
+    "sample_class": "类图",
+    "sample_sequence": "时序图",
+    "sample_entity_relationship": "实体关系图",
+    "sample_state": "状态图",
+    "sample_mindmap": "思维导图",
+    "sample_architecture": "架构图",
+    "sample_block": "模块图",
+    "sample_c4": "C4 图",
+    "sample_gantt": "甘特图",
+    "sample_git": "Git 流程图",
+    "sample_kanban": "看板图",
+    "sample_packet": "数据包图",
+    "sample_pie": "饼图",
+    "sample_quadrant": "象限图",
+    "sample_radar": "雷达图",
+    "sample_requirement": "需求图",
+    "sample_sankey": "桑基图",
+    "sample_timeline": "时间轴图",
+    "sample_treemap": "树形图",
+    "sample_user_journey": "用户旅程图",
+    "sample_xy": "散点图",
+    "sample_venn": "韦恩图",
+    "sample_ishikawa": "鱼骨图",
+    "placeholder": "输入你的美人鱼图的内容，或者使用下面的示例图之一。"
   }
 }

apps/client/src/translations/de/translation.json

@@ -446,7 +446,8 @@
     "and_more": "... und {{count}} mehr.",
     "print_landscape": "Beim Export als PDF, wird die Seitenausrichtung Querformat anstatt Hochformat verwendet.",
     "print_page_size": "Beim Export als PDF, wird die Größe der Seite angepasst. Unterstützte Größen: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
-    "color_type": "Farbe"
+    "color_type": "Farbe",
+    "textarea": "Mehrzeilen-Text"
   },
   "attribute_editor": {
     "help_text_body1": "Um ein Label hinzuzufügen, gebe einfach z.B. ein. <code>#rock</code> oder wenn du auch einen Wert hinzufügen möchten, dann z.B. <code>#year = 2024</code>",

apps/client/src/translations/en/translation.json

@@ -2230,5 +2230,56 @@
     "sample_xy": "XY",
     "sample_venn": "Venn",
     "sample_ishikawa": "Ishikawa"
+  },
+  "setup": {
+    "heading": "Get started with Trilium",
+    "new-document": "New knowledge base",
+    "new-document-description": "Start with a clean knowledge base and begin right away.",
+    "sync-from-desktop": "Connect a desktop app",
+    "sync-from-desktop-description": "You only have a Trilium desktop app running on another device. This device will sync its data from that desktop app.",
+    "sync-from-server": "Connect to an existing server",
+    "sync-from-server-description": "You have a Trilium server running elsewhere (either self-hosted or in the cloud). This device will sync its data from that server.",
+    "next": "Next",
+    "init-in-progress": "Document initialization in progress",
+    "redirecting": "You will be shortly redirected to the application.",
+    "title": "Setup",
+    "sync-from-server-page-description": "Enter your server details below to connect your existing workspace.",
+    "sync-in-progress-title": "Sync in progress",
+    "sync-in-progress-description": "Your device is now connected and items are being synchronized.",
+    "button-back": "Back",
+    "button-finish-setup": "Finish setup",
+    "sync-step-connecting": "Connecting to server",
+    "sync-step-syncing": "Syncing data",
+    "sync-step-finalizing": "Setting up options",
+    "create-new-document-options-title": "How would you like to start?",
+    "create-new-document-options-with-demo": "With demo content",
+    "create-new-document-options-with-demo-description": "Explore Trilium with example content.",
+    "create-new-document-options-empty": "Empty",
+    "create-new-document-options-empty-description": "Start with a blank knowledge base. You can import demo notes later.",
+    "create-new-document-title": "Preparing your knowledge base",
+    "create-new-document-description": "This will only take a moment.",
+    "sync-illustration-this-device": "This device",
+    "sync-illustration-desktop-app": "Your desktop app",
+    "sync-illustration-server": "Your server",
+    "sync-from-desktop-step1": "Open your desktop instance of Trilium Notes.",
+    "sync-from-desktop-step2": "From the Trilium Menu, click Options.",
+    "sync-from-desktop-step3": "Click on Sync category in the note tree.",
+    "sync-from-desktop-step4": "Change server instance address to point to one of the addresses on the right and click Save.",
+    "sync-from-desktop-step5": "Click the \"Test sync\" button to verify connection is successful.",
+    "sync-from-desktop-warning": "Make sure both devices are on the same network.",
+    "sync-from-desktop-waiting": "Waiting for connection...",
+    "advanced-options": "Advanced options",
+    "sync-failed": "Failed to sync: {{message}}",
+    "server-host": "Trilium server address",
+    "server-host-placeholder": "https://<hostname>:<port>",
+    "server-password": "Password",
+    "proxy-server": "Proxy server (optional)",
+    "proxy-server-placeholder": "https://<hostname>:<port>",
+    "proxy-instruction": "If you leave proxy setting blank, system proxy will be used.",
+    "dismiss-error": "Dismiss error",
+    "wrong-password": "Incorrect password. Please try again.",
+    "language": "Language",
+    "continue": "Continue",
+    "your-ip-addresses": "Addresses for this device"
   }
 }

apps/client/src/translations/ga/translation.json

@@ -477,7 +477,8 @@
     "and_more": "... agus {{count}} eile.",
     "print_landscape": "Agus é á onnmhairiú go PDF, athraítear treoshuíomh an leathanaigh go tírdhreach seachas portráid.",
     "print_page_size": "Agus é á easpórtáil go PDF, athraítear méid an leathanaigh. Luachanna tacaithe: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
-    "color_type": "Dath"
+    "color_type": "Dath",
+    "textarea": "Téacs Il-líne"
   },
   "attribute_editor": {
     "help_text_body1": "Chun lipéad a chur leis, clóscríobh m.sh. <code>#rock</code> nó más mian leat luach a chur leis freisin ansin m.sh. <code>#year = 2020</code>",

apps/client/src/translations/it/translation.json

@@ -520,7 +520,7 @@
     "custom_name_label": "Nome del motore di ricerca personalizzato",
     "custom_name_placeholder": "Personalizza il nome del motore di ricerca",
     "custom_url_label": "L'URL del motore di ricerca personalizzato deve includere {keyword} come segnaposto per il termine di ricerca.",
-    "custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
+    "custom_url_placeholder": "Personalizza indirizzo url del motore di ricerca"
   },
   "sql_table_schemas": {
     "tables": "Tabelle"
@@ -917,7 +917,8 @@
     "print_landscape": "Quando si esporta in PDF, cambia l'orientamento della pagina da verticale a orizzontale.",
     "print_page_size": "Quando si esporta in PDF, modifica le dimensioni della pagina. Valori supportati: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
     "color_type": "Colore",
-    "share_root": "segna la nota che viene servita su /share root."
+    "share_root": "segna la nota che viene servita su /share root.",
+    "textarea": "Testo su più righe"
   },
   "attribute_editor": {
     "help_text_body1": "Per aggiungere un'etichetta, basta digitare ad esempio <code>#rock</code> oppure, se si desidera aggiungere anche un valore, ad esempio <code>#year = 2020</code>",
@@ -2197,5 +2198,52 @@
   },
   "setup_form": {
     "more_info": "Per saperne di più"
+  },
+  "media": {
+    "play": "Gioca (Barra spaziatrice)",
+    "pause": "Pausa (Barra spaziatrice)",
+    "back-10s": "Indietro di 10 (tasto freccia sinistra)",
+    "forward-30s": "Avanti 30s",
+    "mute": "Muto (M)",
+    "unmute": "Riattiva audio (M)",
+    "playback-speed": "Velocità di riproduzione",
+    "loop": "Ciclo",
+    "disable-loop": "Disattiva il ciclo",
+    "rotate": "Ruota",
+    "picture-in-picture": "Immagine nell'immagine",
+    "exit-picture-in-picture": "Esci dalla modalità picture-in-picture",
+    "fullscreen": "Schermo intero (F)",
+    "exit-fullscreen": "Esci dalla modalità a schermo intero",
+    "unsupported-format": "Per questo formato di file non è disponibile l'anteprima multimediale:\n{{mime}}",
+    "zoom-to-fit": "Ingrandisci per riempire",
+    "zoom-reset": "Ripristina lo zoom a schermo intero"
+  },
+  "mermaid": {
+    "placeholder": "Digita il contenuto del tuo diagramma Mermaid oppure utilizza uno dei diagrammi di esempio riportati di seguito.",
+    "sample_diagrams": "Esempi di diagrammi:",
+    "sample_flowchart": "Diagramma di flusso",
+    "sample_class": "Classe",
+    "sample_sequence": "Sequenza",
+    "sample_entity_relationship": "Relazioni tra entità",
+    "sample_state": "Stato",
+    "sample_mindmap": "Mappa mentale",
+    "sample_architecture": "Architettura",
+    "sample_block": "Blocco",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Packet",
+    "sample_pie": "Torta",
+    "sample_quadrant": "Quadrante",
+    "sample_radar": "Radar",
+    "sample_requirement": "Requisito",
+    "sample_sankey": "Chiave",
+    "sample_timeline": "Cronologia",
+    "sample_treemap": "Treemap",
+    "sample_user_journey": "Percorso dell'utente",
+    "sample_xy": "XY",
+    "sample_venn": "Venn",
+    "sample_ishikawa": "Ishikawa"
   }
 }

apps/client/src/translations/pl/translation.json

@@ -117,7 +117,7 @@
     "no_path_to_clone_to": "Brak ścieżki do sklonowania.",
     "note_cloned": "Notatka \"{{clonedTitle}}\" została sklonowana do \"{{targetTitle}}\"",
     "help_on_links": "Pomoc dotycząca linków",
-    "target_parent_note": "Docelowa notatka nadrzędna"
+    "target_parent_note": "Docelowa notatka pierwotna"
   },
   "help": {
     "title": "Ściągawka",
@@ -126,7 +126,7 @@
     "collapseExpand": "zwiń/rozwiń węzeł",
     "notSet": "nie ustawiono",
     "goBackForwards": "idź wstecz / do przodu w historii",
-    "showJumpToNoteDialog": "pokaż okno <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Przejdź do\"</a>",
+    "showJumpToNoteDialog": "pokaż <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Przejdź do\"</a>",
     "scrollToActiveNote": "przewiń do aktywnej notatki",
     "jumpToParentNote": "przejdź do notatki nadrzędnej",
     "collapseWholeTree": "zwiń całe drzewo notatek",
@@ -402,7 +402,8 @@
     "and_more": "... i {{count}} więcej.",
     "print_landscape": "Podczas eksportowania do PDF zmienia orientację strony na poziomą zamiast pionowej.",
     "print_page_size": "Podczas eksportowania do PDF zmienia rozmiar strony. Obsługiwane wartości: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
-    "color_type": "Kolor"
+    "color_type": "Kolor",
+    "textarea": "Wiele linii tekstu"
   },
   "import": {
     "importIntoNote": "Importuj do notatki",
@@ -1613,7 +1614,7 @@
     "password_changed_success": "Hasło zostało zmienione. Trilium zostanie przeładowane po naciśnięciu OK."
   },
   "multi_factor_authentication": {
-    "title": "Uwierzytelnianie wieloskładnikowe (MFA)",
+    "title": "Uwierzytelnianie wieloskładnikowe",
     "description": "Uwierzytelnianie wieloskładnikowe (MFA) dodaje dodatkową warstwę zabezpieczeń do Twojego konta. Zamiast tylko wpisywać hasło do logowania, MFA wymaga podania jednego lub więcej dodatkowych dowodów tożsamości. W ten sposób, nawet jeśli ktoś zdobędzie Twoje hasło, nadal nie będzie mógł uzyskać dostępu do Twojego konta bez drugiej informacji. To jak dodanie dodatkowego zamka do drzwi, utrudniającego włamanie.<br><br>Proszę postępować zgodnie z poniższymi instrukcjami, aby włączyć MFA. Jeśli nie skonfigurujesz poprawnie, logowanie powróci do samego hasła.",
     "mfa_enabled": "Włącz uwierzytelnianie wieloskładnikowe",
     "mfa_method": "Metoda MFA",
@@ -1628,7 +1629,7 @@
     "totp_secret_generated": "Sekret TOTP wygenerowany",
     "totp_secret_warning": "Proszę zapisać wygenerowany sekret w bezpiecznym miejscu. Nie zostanie pokazany ponownie.",
     "totp_secret_regenerate_confirm": "Czy na pewno chcesz ponownie wygenerować sekret TOTP? To unieważni poprzedni sekret TOTP i wszystkie istniejące kody odzyskiwania.",
-    "recovery_keys_title": "Klucze odzyskiwania logowania jednokrotnego (SSO)",
+    "recovery_keys_title": "Klucze odzyskiwania logowania jednokrotnego",
     "recovery_keys_description": "Klucze odzyskiwania logowania jednokrotnego służą do logowania w przypadku braku dostępu do kodów Authenticator.",
     "recovery_keys_description_warning": "Klucze odzyskiwania nie zostaną pokazane ponownie po opuszczeniu strony, przechowuj je w bezpiecznym miejscu.<br>Po użyciu klucza odzyskiwania nie można go użyć ponownie.",
     "recovery_keys_error": "Błąd generowania kodów odzyskiwania",
@@ -1766,7 +1767,7 @@
     "book": "Kolekcja",
     "mermaid-diagram": "Diagram Mermaid",
     "canvas": "Płótno",
-    "web-view": "Widok WWW",
+    "web-view": "Widok strony web",
     "mind-map": "Mapa myśli",
     "file": "Plik",
     "image": "Obraz",
@@ -1815,9 +1816,9 @@
     "modal_title": "Konfiguracja listy wyróżnień",
     "menu_configure": "Konfiguracja listy wyróżnień...",
     "no_highlights": "Nie znaleziono wyróżnień.",
-    "title_with_count_one": "{{count}} podświetlenie",
-    "title_with_count_few": "{{count}} podświetlenia",
-    "title_with_count_many": "{{count}} podświetleń"
+    "title_with_count_one": "{{count}} wyróżnienie",
+    "title_with_count_few": "{{count}} wyróżnienia",
+    "title_with_count_many": "{{count}} wyróżnień"
   },
   "quick-search": {
     "placeholder": "Szybkie wyszukiwanie",
@@ -2070,7 +2071,7 @@
     "read_only_temporarily_disabled_description": "Ta notatka jest obecnie edytowalna, ale normalnie jest tylko do odczytu. Notatka powróci do trybu tylko do odczytu, gdy tylko przejdziesz do innej notatki.\n\nKliknij, aby ponownie włączyć tryb tylko do odczytu.",
     "shared_publicly": "Udostępniona publicznie",
     "shared_locally": "Udostępniona lokalnie",
-    "clipped_note": "Wycinek WWW",
+    "clipped_note": "Wycinek z sieci",
     "clipped_note_description": "Ta notatka została pierwotnie pobrana z {{url}}.\n\nKliknij, aby przejść do źródłowej strony internetowej.",
     "execute_script": "Uruchom skrypt",
     "execute_script_description": "Ta notatka jest notatką skryptową. Kliknij, aby wykonać skrypt.",
@@ -2236,7 +2237,7 @@
     "sample_c4": "C4",
     "sample_gantt": "Wykres Gantta",
     "sample_git": "Diagram Git",
-    "sample_kanban": "Kanban",
+    "sample_kanban": "Tablica Kanban",
     "sample_packet": "Diagram pakietów",
     "sample_pie": "Wykres kołowy",
     "sample_quadrant": "Diagram kwadrantowy",

apps/client/src/translations/ro/translation.json

@@ -2137,5 +2137,55 @@
     "title_few": "{{count}} taburi",
     "title_other": "{{count}} de taburi",
     "more_options": "Mai multe opțiuni"
+  },
+  "setup": {
+    "heading": "Începeți cu Trilium",
+    "new-document": "Nouă bază de cunoștințe",
+    "new-document-description": "Începeți cu o bază de cunoștințe curată și începeți imediat.",
+    "sync-from-desktop": "Conectează o aplicație desktop",
+    "sync-from-desktop-description": "Aveți doar o aplicație Trilium desktop rulând pe un alt dispozitiv. Acest dispozitiv va sincroniza datele de la acea aplicație desktop.",
+    "sync-from-server": "Conectează-te la un server existent",
+    "sync-from-server-description": "Aveți un server Trilium care rulează în altă parte (fie auto-găzduit, fie în cloud). Acest dispozitiv va sincroniza datele de la acel server.",
+    "next": "Următorul",
+    "init-in-progress": "Inițializarea documentului în curs",
+    "redirecting": "Veți fi redirecționat în scurt timp către aplicație.",
+    "title": "Configurare",
+    "sync-from-server-page-description": "Introduceți detaliile serverului dvs. mai jos pentru a vă conecta la spațiul de lucru existent.",
+    "sync-in-progress-title": "Sincronizare în curs",
+    "sync-in-progress-description": "Dispozitivul dvs. este acum conectat și elementele sunt sincronizate.",
+    "button-back": "Înapoi",
+    "button-finish-setup": "Finalizează configurarea",
+    "sync-step-connecting": "Conectare la server",
+    "sync-step-syncing": "Sincronizare date",
+    "sync-step-finalizing": "Setarea opțiunilor",
+    "create-new-document-options-title": "Cum doriți să începeți?",
+    "create-new-document-options-with-demo": "Cu conținut demonstrativ",
+    "create-new-document-options-with-demo-description": "Explorează Trilium cu conținut exemplu.",
+    "create-new-document-options-empty": "Gol",
+    "create-new-document-options-empty-description": "Începeți cu o bază de cunoștințe goală. Puteți importa notițe demo mai târziu.",
+    "create-new-document-title": "Pregătirea bazei de cunoștințe",
+    "create-new-document-description": "Acest proces va dura doar câteva momente.",
+    "sync-illustration-this-device": "Acest dispozitiv",
+    "sync-illustration-desktop-app": "Aplicație desktop",
+    "sync-illustration-server": "Server de sincronizare",
+    "sync-from-desktop-step1": "Deschideți aplicația Trilium Notes pentru desktop.",
+    "sync-from-desktop-step2": "Din meniul Trilium, dați clic pe Opțiuni.",
+    "sync-from-desktop-step3": "Clic pe categoria „Sincronizare”.",
+    "sync-from-desktop-step4": "Schimbați adresa server-ului către: {{- host}} și apăsați „Salvează”.",
+    "sync-from-desktop-step5": "Clic pe butonul „Testează sincronizarea” pentru a verifica dacă conexiunea a fost făcută cu succes.",
+    "sync-from-desktop-final": "După ce ați finalizat acești pași, puteți trece la pasul următor.",
+    "sync-from-desktop-waiting": "Așteptare pentru conexiune...",
+    "advanced-options": "Opțiuni avansate",
+    "sync-failed": "Sincronizare eșuată: {{message}}",
+    "server-host": "Adresa serverului Trilium",
+    "server-host-placeholder": "https://<hostname>:<port>",
+    "server-password": "Parolă",
+    "proxy-server": "Server proxy (opțional)",
+    "proxy-server-placeholder": "https://<hostname>:<port>",
+    "proxy-instruction": " Dacă lăsați setarea proxy necompletată, va fi utilizat proxy-ul sistemului.",
+    "dismiss-error": "Închide mesajul de eroare",
+    "wrong-password": "Parolă greșită. Vă rugăm să încercați din nou.",
+    "language": "Limbă",
+    "continue": "Continuă"
   }
 }

apps/client/src/translations/tw/translation.json

@@ -2226,7 +2226,7 @@
     "sample_sankey": "桑基圖",
     "sample_timeline": "時間軸",
     "sample_treemap": "樹狀圖",
-    "sample_user_journey": "用戶旅程",
+    "sample_user_journey": "使用者旅程",
     "sample_xy": "XY 圖表",
     "sample_venn": "韋恩圖",
     "sample_ishikawa": "魚骨圖"

apps/client/src/types.d.ts

@@ -1,4 +1,4 @@
-import { IconRegistry, Locale } from "@triliumnext/commons";
+import { BootstrapDefinition } from "@triliumnext/commons";
 
 import appContext, { AppContext } from "./components/app_context";
 import type FNote from "./entities/fnote";
@@ -6,6 +6,7 @@ import type { PrintReport } from "./print";
 import type { lint } from "./services/eslint";
 import type { Froca } from "./services/froca-interface";
 import { Library } from "./services/library_loader";
+import { Suggestion } from "./services/note_autocomplete";
 import server from "./services/server";
 import utils from "./services/utils";
 
@@ -14,10 +15,9 @@ interface ElectronProcess {
     platform: string;
 }
 
-interface CustomGlobals {
+interface CustomGlobals extends BootstrapDefinition {
     isDesktop: typeof utils.isDesktop;
     isMobile: typeof utils.isMobile;
-    device: "mobile" | "desktop" | "print";
     getComponentByEl: typeof appContext.getComponentByEl;
     getHeaders: typeof server.getHeaders;
     getReferenceLinkTitle: (href: string) => Promise<string>;
@@ -30,32 +30,7 @@ interface CustomGlobals {
     SEARCH_HELP_TEXT: string;
     activeDialog: JQuery<HTMLElement> | null;
     componentId: string;
-    csrfToken: string;
-    baseApiUrl: string;
-    isProtectedSessionAvailable: boolean;
-    isDev: boolean;
-    isMainWindow: boolean;
-    maxEntityChangeIdAtLoad: number;
-    maxEntityChangeSyncIdAtLoad: number;
-    assetPath: string;
-    appPath: string;
-    instanceName: string;
-    appCssNoteIds: string[];
-    triliumVersion: string;
-    TRILIUM_SAFE_MODE: boolean;
-    platform?: typeof process.platform;
     linter: typeof lint;
-    hasNativeTitleBar: boolean;
-    hasBackgroundEffects: boolean;
-    isElectron: boolean;
-    isRtl: boolean;
-    iconRegistry: IconRegistry;
-    themeCssUrl: string;
-    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
-    iconPackCss: string;
-    headingStyle: "plain" | "underline" | "markdown";
-    layoutOrientation: "vertical" | "horizontal";
-    currentLocale: Locale;
 }
 
 type RequireMethod = (moduleName: string) => any;
@@ -82,7 +57,34 @@ declare global {
         "note-load-progress": CustomEvent<{ progress: number }>;
     }
 
+    interface AutoCompleteConfig {
+        appendTo?: HTMLElement | null;
+        hint?: boolean;
+        openOnFocus?: boolean;
+        minLength?: number;
+        tabAutocomplete?: boolean;
+        autoselect?: boolean;
+        dropdownMenuContainer?: HTMLElement;
+        debug?: boolean;
+    }
+
+    type AutoCompleteCallback = (values: AutoCompleteArg[]) => void;
+
+    interface AutoCompleteArg {
+        name?: string;
+        value?: string;
+        notePathTitle?: string;
+        displayKey?: "name" | "value" | "notePathTitle";
+        cache?: boolean;
+        source?: (term: string, cb: AutoCompleteCallback) => void,
+        templates?: {
+            suggestion: (suggestion: Suggestion) => string | undefined
+        }
+    }
+
     interface JQuery {
+        autocomplete: (action?: "close" | "open" | "destroy" | "val" | AutoCompleteConfig, args?: AutoCompleteArg[] | string) => JQuery<HTMLElement>;
+
         getSelectedNotePath(): string | undefined;
         getSelectedNoteId(): string | null;
         setSelectedNotePath(notePath: string | null | undefined);

apps/client/src/widgets/PromotedAttributes.tsx

@@ -1,6 +1,6 @@
 import "./PromotedAttributes.css";
 
-import { UpdateAttributeResponse } from "@triliumnext/commons";
+import { DefinitionObject, LabelType, UpdateAttributeResponse } from "@triliumnext/commons";
 import clsx from "clsx";
 import { ComponentChild, createElement, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from "preact/hooks";
@@ -8,11 +8,10 @@ import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from
 import NoteContext from "../components/note_context";
 import FAttribute from "../entities/fattribute";
 import FNote from "../entities/fnote";
-import attributeAutocompleteService from "../services/attribute_autocomplete";
 import { Attribute } from "../services/attribute_parser";
 import attributes from "../services/attributes";
 import { t } from "../services/i18n";
-import { DefinitionObject, extractAttributeDefinitionTypeAndName, LabelType } from "../services/promoted_attribute_definition_parser";
+import { extractAttributeDefinitionTypeAndName } from "../services/promoted_attribute_definition_parser";
 import server from "../services/server";
 import { randomString } from "../services/utils";
 import ws from "../services/ws";
@@ -37,7 +36,8 @@ interface CellProps {
     setCellToFocus(cell: Cell): void;
 }
 
-type OnChangeEventData = TargetedEvent<HTMLInputElement | HTMLTextAreaElement, Event> | InputEvent;
+type OnChangeEventData = TargetedEvent<HTMLInputElement | HTMLTextAreaElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
+type OnChangeListener = (e: OnChangeEventData) => void | Promise<void>;
 
 export default function PromotedAttributes() {
     const { note, componentId, noteContext } = useNoteContext();
@@ -201,9 +201,10 @@ function LabelInput(props: CellProps & { inputId: string }) {
     }, [ cell, componentId, note, setCells ]);
     const extraInputProps: InputHTMLAttributes = {};
 
-    useTextLabelAutocomplete(inputId, valueAttr, definition, async (value) => {
-        setDraft(value);
-        await updateAttribute(note, cell, componentId, value, setCells);
+    useTextLabelAutocomplete(inputId, valueAttr, definition, (e) => {
+        if (e.currentTarget instanceof HTMLInputElement) {
+            setDraft(e.currentTarget.value);
+        }
     });
 
     // React to model changes.
@@ -259,7 +260,7 @@ function LabelInput(props: CellProps & { inputId: string }) {
                     className="open-external-link-button"
                     icon="bx bx-window-open"
                     title={t("promoted_attributes.open_external_link")}
-                    onClick={() => {
+                    onClick={(e) => {
                         const inputEl = document.getElementById(inputId) as HTMLInputElement | null;
                         const url = inputEl?.value;
                         if (url) {
@@ -414,31 +415,55 @@ function InputButton({ icon, className, title, onClick }: {
     );
 }
 
-function useTextLabelAutocomplete(inputId: string, valueAttr: Attribute, definition: DefinitionObject, onValueChange: (value: string) => void) {
+function useTextLabelAutocomplete(inputId: string, valueAttr: Attribute, definition: DefinitionObject, onChangeListener: OnChangeListener) {
+    const [ attributeValues, setAttributeValues ] = useState<{ value: string }[] | null>(null);
+
+    // Obtain data.
     useEffect(() => {
         if (definition.labelType !== "text") {
             return;
         }
 
+        server.get<string[]>(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then((_attributesValues) => {
+            setAttributeValues(_attributesValues.map((attribute) => ({ value: attribute })));
+        });
+    }, [ definition.labelType, valueAttr.name ]);
+
+    // Initialize autocomplete.
+    useEffect(() => {
+        if (attributeValues?.length === 0) return;
         const el = document.getElementById(inputId) as HTMLInputElement | null;
-        if (!el) {
-            return;
-        }
+        if (!el) return;
 
         const $input = $(el);
-        attributeAutocompleteService.initLabelValueAutocomplete({
-            $el: $input,
-            open: false,
-            nameCallback: () => valueAttr.name,
-            onValueChange: (value) => {
-                onValueChange(value);
-            }
-        });
+        $input.autocomplete(
+            {
+                appendTo: document.querySelector("body"),
+                hint: false,
+                autoselect: false,
+                openOnFocus: true,
+                minLength: 0,
+                tabAutocomplete: false
+            },
+            [
+                {
+                    displayKey: "value",
+                    source (term, cb) {
+                        term = term.toLowerCase();
 
-        return () => {
-            attributeAutocompleteService.destroyAutocomplete($input);
-        };
-    }, [ definition.labelType, inputId, onValueChange, valueAttr.name ]);
+                        const filtered = (attributeValues ?? []).filter((attr) => attr.value.toLowerCase().includes(term));
+
+                        cb(filtered);
+                    }
+                }
+            ]
+        );
+
+        $input.off("autocomplete:selected");
+        $input.on("autocomplete:selected", onChangeListener);
+
+        return () => $input.autocomplete("destroy");
+    }, [ inputId, attributeValues, onChangeListener ]);
 }
 
 async function updateAttribute(note: FNote, cell: Cell, componentId: string, value: string | undefined, setCells: Dispatch<StateUpdater<Cell[] | undefined>>) {

apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx

@@ -1,14 +1,16 @@
-import { useState } from "preact/hooks";
-import FNote from "../../entities/fnote";
 import "./UserAttributesList.css";
-import { useTriliumEvent } from "../react/hooks";
-import attributes from "../../services/attributes";
-import { DefinitionObject } from "../../services/promoted_attribute_definition_parser";
-import { formatDateTime } from "../../utils/formatters";
+
+import type { DefinitionObject } from "@triliumnext/commons";
 import { ComponentChildren, CSSProperties } from "preact";
+import { useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import { getReadableTextColor } from "../../services/css_class_manager";
+import { formatDateTime } from "../../utils/formatters";
+import { useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
-import { getReadableTextColor } from "../../services/css_class_manager";
 
 interface UserAttributesListProps {
     note: FNote;
@@ -29,7 +31,7 @@ export default function UserAttributesDisplay({ note, ignoredAttributes }: UserA
         <div className="user-attributes">
             {userAttributes?.map(attr => buildUserAttribute(attr))}
         </div>
-    )
+    );
 
 }
 
@@ -46,13 +48,13 @@ function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore:  stri
 }
 
 function UserAttribute({ attr, children, style }: { attr: AttributeWithDefinitions, children: ComponentChildren, style?: CSSProperties }) {
-    const className = `${attr.type === "label" ? "label" + " " + attr.def.labelType : "relation"}`;
+    const className = attr.type === "label" ? `label ${attr.def.labelType}` : "relation";
 
     return (
         <span key={attr.friendlyName} className={`user-attribute type-${className}`} style={style}>
             {children}
         </span>
-    )
+    );
 }
 
 function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
@@ -61,7 +63,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
     let style: CSSProperties | undefined;
 
     if (attr.type === "label") {
-        let value = attr.value;
+        const value = attr.value;
         switch (attr.def.labelType) {
             case "number":
                 let formattedValue = value;
@@ -102,7 +104,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
         content = <>{defaultLabel}<NoteLink notePath={attr.value} showNoteIcon /></>;
     }
 
-    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>
+    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>;
 }
 
 function getAttributesWithDefinitions(note: FNote, attributesToIgnore: string[] = []): AttributeWithDefinitions[] {

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -1,7 +1,6 @@
 import appContext from "../../components/app_context.js";
 import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import type { Attribute } from "../../services/attribute_parser.js";
-import { HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR } from "../../services/autocomplete_core.js";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
 import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
 import froca from "../../services/froca.js";
@@ -376,13 +375,13 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             }
         });
         this.$inputName.on("change", () => this.userEditedAttribute());
+        this.$inputName.on("autocomplete:closed", () => this.userEditedAttribute());
 
         this.$inputName.on("focus", () => {
             attributeAutocompleteService.initAttributeNameAutocomplete({
                 $el: this.$inputName,
                 attributeType: () => (["relation", "relation-definition"].includes(this.attrType || "") ? "relation" : "label"),
-                open: true,
-                onValueChange: () => this.userEditedAttribute(),
+                open: true
             });
         });
 
@@ -395,12 +394,12 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             }
         });
         this.$inputValue.on("change", () => this.userEditedAttribute());
+        this.$inputValue.on("autocomplete:closed", () => this.userEditedAttribute());
         this.$inputValue.on("focus", () => {
             attributeAutocompleteService.initLabelValueAutocomplete({
                 $el: this.$inputValue,
                 open: true,
-                nameCallback: () => String(this.$inputName.val()),
-                onValueChange: () => this.userEditedAttribute(),
+                nameCallback: () => String(this.$inputName.val())
             });
         });
 
@@ -481,9 +480,7 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
         this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find(".related-notes-more-notes");
 
         $(window).on("mousedown", (e) => {
-            if (!$(e.target).closest(this.$widget[0]).length
-                && !$(e.target).closest(HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR).length
-                && !$(e.target).closest("#context-menu-container").length) {
+            if (!$(e.target).closest(this.$widget[0]).length && !$(e.target).closest(".algolia-autocomplete").length && !$(e.target).closest("#context-menu-container").length) {
                 this.hide();
             }
         });

apps/client/src/widgets/buttons/global_menu.tsx

@@ -8,7 +8,7 @@ import { CommandNames } from "../../components/app_context";
 import Component from "../../components/component";
 import { ExperimentalFeature, ExperimentalFeatureId, experimentalFeatures, isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features";
 import { t } from "../../services/i18n";
-import utils, { dynamicRequire, isElectron, isMobile, reloadFrontendApp } from "../../services/utils";
+import utils, { dynamicRequire, isElectron, isMobile, isStandalone, reloadFrontendApp } from "../../services/utils";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList";
 import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
@@ -251,7 +251,7 @@ function ToggleWindowOnTop() {
 function useTriliumUpdateStatus() {
     const [ latestVersion, setLatestVersion ] = useState<string>();
     const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates");
-    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion);
+    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, window.glob.triliumVersion);
 
     async function updateVersionStatus() {
         const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
@@ -269,7 +269,7 @@ function useTriliumUpdateStatus() {
     }
 
     useEffect(() => {
-        if (!checkForUpdates) {
+        if (!checkForUpdates || !isStandalone) {
             setLatestVersion(undefined);
             return;
         }

apps/client/src/widgets/collections/board/data.spec.ts

@@ -1,8 +1,9 @@
-import { it, describe, expect } from "vitest";
-import { buildNote } from "../../../test/easy-froca";
-import { getBoardData } from "./data";
+import { describe, expect, it } from "vitest";
+
 import FBranch from "../../../entities/fbranch";
 import froca from "../../../services/froca";
+import { buildNote } from "../../../test/easy-froca";
+import { getBoardData } from "./data";
 
 describe("Board data", () => {
     it("deduplicates cloned notes", async () => {

apps/client/src/widgets/collections/table/columns.tsx

@@ -1,11 +1,12 @@
-import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
-import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import { LabelType } from "@triliumnext/commons";
 import { JSX } from "preact";
-import { renderReactWidget } from "../../react/react_utils.jsx";
-import Icon from "../../react/Icon.jsx";
 import { useEffect, useRef, useState } from "preact/hooks";
+import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
+
 import froca from "../../../services/froca.js";
+import Icon from "../../react/Icon.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
+import { renderReactWidget } from "../../react/react_utils.jsx";
 
 type ColumnType = LabelType | "relation";
 
@@ -85,7 +86,7 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
             rowHandle: movableRows,
             width: calculateIndexColumnWidth(rowNumberHint, movableRows),
             formatter: wrapFormatter(({ cell, formatterParams }) => <div>
-                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded"></span>{" "}</>}
+                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded" />{" "}</>}
                 {cell.getRow().getPosition(true)}
             </div>),
             formatterParams: { movableRows } satisfies RowNumberFormatterParams
@@ -207,14 +208,14 @@ function wrapEditor(Component: (opts: EditorOpts) => JSX.Element): ((
     editorParams: {},
 ) => HTMLElement | false) {
     return (cell, _, success, cancel, editorParams) => {
-        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />
+        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />;
         return renderReactWidget(null, elWithParams)[0];
     };
 }
 
 function NoteFormatter({ cell }: FormatterOpts) {
     const noteId = cell.getValue();
-    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null)
+    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null);
 
     useEffect(() => {
         if (!noteId || note?.noteId === noteId) return;
@@ -238,5 +239,5 @@ function RelationEditor({ cell, success }: EditorOpts) {
             hideAllButtons: true
         }}
         noteIdChanged={success}
-    />
+    />;
 }

apps/client/src/widgets/collections/table/rows.ts

@@ -1,5 +1,7 @@
+import { LabelType } from "@triliumnext/commons";
+
 import FNote from "../../../entities/fnote.js";
-import { extractAttributeDefinitionTypeAndName, type LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import { extractAttributeDefinitionTypeAndName } from "../../../services/promoted_attribute_definition_parser.js";
 import type { AttributeDefinitionInformation } from "./columns.js";
 
 export type TableData = {
@@ -49,7 +51,7 @@ export async function buildRowDefinitions(parentNote: FNote, infos: AttributeDef
             isArchived: note.isArchived,
             branchId: branch.branchId,
             colorClass: note.getColorClass()
-        }
+        };
 
         if (note.hasChildren() && (maxDepth < 0 || currentDepth < maxDepth)) {
             const { definitions, rowNumber: subRowNumber } = (await buildRowDefinitions(note, infos, includeArchived, maxDepth, currentDepth + 1));

apps/client/src/widgets/dialogs/about.tsx

@@ -1,13 +1,14 @@
-import Modal from "../react/Modal.js";
+import type { AppInfo } from "@triliumnext/commons";
+import type { CSSProperties } from "preact/compat";
+import { useState } from "preact/hooks";
+
 import { t } from "../../services/i18n.js";
-import { formatDateTime } from "../../utils/formatters.js";
+import openService from "../../services/open.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
-import openService from "../../services/open.js";
-import { useState } from "preact/hooks";
-import type { CSSProperties } from "preact/compat";
-import type { AppInfo } from "@triliumnext/commons";
+import { formatDateTime } from "../../utils/formatters.js";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import Modal from "../react/Modal.js";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
@@ -54,15 +55,15 @@ export default function AboutDialog() {
                     <tr>
                         <th>{t("about.build_revision")}</th>
                         <td className="selectable-text">
-                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
+                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak} rel="noreferrer">{appInfo.buildRevision}</a>}
                         </td>
                     </tr>
-                    <tr>
+                    { appInfo?.dataDirectory && <tr>
                         <th>{t("about.data_directory")}</th>
                         <td className="data-directory">
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} style={forceWordBreak} />)}
                         </td>
-                    </tr>
+                    </tr>}
                 </tbody>
             </table>
         </Modal>
@@ -76,8 +77,8 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
             openService.openDirectory(directory);
         };
 
-        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>
-    } else {
-        return <span className="selectable-text" style={style}>{directory}</span>;
-    }
+        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>;
+    } 
+    return <span className="selectable-text" style={style}>{directory}</span>;
+    
 }

apps/client/src/widgets/dialogs/add_link.spec.tsx

@@ -1,160 +0,0 @@
-import $ from "jquery";
-import type { ComponentChildren } from "preact";
-import { render } from "preact";
-import { act } from "preact/test-utils";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    triliumEventHandlers,
-    latestModalPropsRef,
-    latestNoteAutocompletePropsRef,
-    addLinkSpy,
-    logErrorSpy,
-    showRecentNotesSpy,
-    setTextSpy
-} = vi.hoisted(() => ({
-    triliumEventHandlers: new Map<string, (payload: any) => void>(),
-    latestModalPropsRef: { current: null as any },
-    latestNoteAutocompletePropsRef: { current: null as any },
-    addLinkSpy: vi.fn(() => Promise.resolve()),
-    logErrorSpy: vi.fn(),
-    showRecentNotesSpy: vi.fn(),
-    setTextSpy: vi.fn()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/tree", () => ({
-    default: {
-        getNoteIdFromUrl: (notePath: string) => notePath.split("/").at(-1),
-        getNoteTitle: vi.fn(async () => "Target note")
-    }
-}));
-
-vi.mock("../../services/ws", () => ({
-    logError: logErrorSpy
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        showRecentNotes: showRecentNotesSpy,
-        setText: setTextSpy
-    }
-}));
-
-vi.mock("../react/react_utils", () => ({
-    refToJQuerySelector: (ref: { current: HTMLInputElement | null }) => ref.current ? $(ref.current) : $()
-}));
-
-vi.mock("../react/hooks", () => ({
-    useTriliumEvent: (name: string, handler: (payload: any) => void) => {
-        triliumEventHandlers.set(name, handler);
-    }
-}));
-
-vi.mock("../react/Modal", () => ({
-    default: (props: any) => {
-        latestModalPropsRef.current = props;
-
-        if (!props.show) {
-            return null;
-        }
-
-        return (
-            <form onSubmit={(e) => {
-                e.preventDefault();
-                props.onSubmit?.();
-            }}>
-                {props.children}
-                {props.footer}
-            </form>
-        );
-    }
-}));
-
-vi.mock("../react/FormGroup", () => ({
-    default: ({ children }: { children: ComponentChildren }) => <div>{children}</div>
-}));
-
-vi.mock("../react/Button", () => ({
-    default: ({ text }: { text: string }) => <button type="submit">{text}</button>
-}));
-
-vi.mock("../react/FormRadioGroup", () => ({
-    default: () => null
-}));
-
-vi.mock("../react/NoteAutocomplete", () => ({
-    default: (props: any) => {
-        latestNoteAutocompletePropsRef.current = props;
-        return <input ref={props.inputRef} />;
-    }
-}));
-
-import AddLinkDialog from "./add_link";
-
-describe("AddLinkDialog", () => {
-    let container: HTMLDivElement;
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        latestModalPropsRef.current = null;
-        latestNoteAutocompletePropsRef.current = null;
-        triliumEventHandlers.clear();
-        container = document.createElement("div");
-        document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-        act(() => {
-            render(null, container);
-        });
-        container.remove();
-    });
-
-    it("submits the selected note when Enter picks an autocomplete suggestion", async () => {
-        act(() => {
-            render(<AddLinkDialog />, container);
-        });
-
-        const showDialog = triliumEventHandlers.get("showAddLinkDialog");
-        expect(showDialog).toBeTypeOf("function");
-
-        await act(async () => {
-            showDialog?.({
-                text: "",
-                hasSelection: false,
-                addLink: addLinkSpy
-            });
-        });
-
-        const suggestion = {
-            notePath: "root/target-note",
-            noteTitle: "Target note"
-        };
-
-        act(() => {
-            latestNoteAutocompletePropsRef.current.onKeyDownCapture({
-                key: "Enter",
-                ctrlKey: false,
-                metaKey: false,
-                shiftKey: false,
-                altKey: false,
-                isComposing: false
-            });
-            latestNoteAutocompletePropsRef.current.onChange(suggestion);
-        });
-
-        expect(latestModalPropsRef.current.show).toBe(false);
-        expect(logErrorSpy).not.toHaveBeenCalled();
-
-        await act(async () => {
-            latestModalPropsRef.current.onHidden();
-        });
-
-        expect(addLinkSpy).toHaveBeenCalledWith("root/target-note", null);
-    });
-});

apps/client/src/widgets/dialogs/add_link.tsx

@@ -1,17 +1,15 @@
-import type { JSX } from "preact";
-import { useEffect,useRef, useState } from "preact/hooks";
-
 import { t } from "../../services/i18n";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
-import tree from "../../services/tree";
-import { logError } from "../../services/ws";
-import Button from "../react/Button";
-import FormGroup from "../react/FormGroup.js";
-import FormRadioGroup from "../react/FormRadioGroup";
-import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
+import Button from "../react/Button";
+import FormRadioGroup from "../react/FormRadioGroup";
 import NoteAutocomplete from "../react/NoteAutocomplete";
+import { useRef, useState, useEffect } from "preact/hooks";
+import tree from "../../services/tree";
+import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { logError } from "../../services/ws";
+import FormGroup from "../react/FormGroup.js";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
@@ -28,8 +26,6 @@ export default function AddLinkDialog() {
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
     const hasSubmittedRef = useRef(false);
-    const suggestionRef = useRef<Suggestion | null>(null);
-    const submitOnSelectionRef = useRef(false);
 
     useTriliumEvent("showAddLinkDialog", opts => {
         setOpts(opts);
@@ -89,44 +85,15 @@ export default function AddLinkDialog() {
             .trigger("select");
     }
 
-    function submitSelectedLink(selectedSuggestion: Suggestion | null) {
-        submitOnSelectionRef.current = false;
-        hasSubmittedRef.current = Boolean(selectedSuggestion);
-
-        if (!selectedSuggestion) {
-            logError("No link to add.");
-            return;
-        }
-
-        // Insertion logic in onHidden because it needs focus.
-        setShown(false);
-    }
-
-    function onSuggestionChange(nextSuggestion: Suggestion | null) {
-        suggestionRef.current = nextSuggestion;
-        setSuggestion(nextSuggestion);
-
-        if (submitOnSelectionRef.current && nextSuggestion) {
-            submitSelectedLink(nextSuggestion);
-        }
-    }
-
-    function onAutocompleteKeyDownCapture(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) {
-        if (e.key !== "Enter" || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.isComposing) {
-            return;
-        }
-
-        submitOnSelectionRef.current = true;
-    }
-
-    function onAutocompleteKeyUpCapture(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) {
-        if (e.key === "Enter") {
-            submitOnSelectionRef.current = false;
-        }
-    }
-
     function onSubmit() {
-        submitSelectedLink(suggestionRef.current);
+        hasSubmittedRef.current = true;
+
+        if (suggestion) {
+            // Insertion logic in onHidden because it needs focus.
+            setShown(false);
+        } else {
+            logError("No link to add.");
+        }
     }
 
     const autocompleteRef = useRef<HTMLInputElement>(null);
@@ -142,22 +109,19 @@ export default function AddLinkDialog() {
             onSubmit={onSubmit}
             onShown={onShown}
             onHidden={() => {
-                submitOnSelectionRef.current = false;
-
                 // Insert the link.
-                if (hasSubmittedRef.current && suggestionRef.current && opts) {
+                if (hasSubmittedRef.current && suggestion && opts) {
                     hasSubmittedRef.current = false;
 
-                    if (suggestionRef.current.notePath) {
+                    if (suggestion.notePath) {
                         // Handle note link
-                        opts.addLink(suggestionRef.current.notePath, linkType === "reference-link" ? null : linkTitle);
-                    } else if (suggestionRef.current.externalLink) {
+                        opts.addLink(suggestion.notePath, linkType === "reference-link" ? null : linkTitle);
+                    } else if (suggestion.externalLink) {
                         // Handle external link
-                        opts.addLink(suggestionRef.current.externalLink, linkTitle, true);
+                        opts.addLink(suggestion.externalLink, linkTitle, true);
                     }
                 }
 
-                suggestionRef.current = null;
                 setSuggestion(null);
                 setShown(false);
             }}
@@ -166,9 +130,7 @@ export default function AddLinkDialog() {
             <FormGroup label={t("add_link.note")} name="note">
                 <NoteAutocomplete
                     inputRef={autocompleteRef}
-                    onChange={onSuggestionChange}
-                    onKeyDownCapture={onAutocompleteKeyDownCapture}
-                    onKeyUpCapture={onAutocompleteKeyUpCapture}
+                    onChange={setSuggestion}
                     opts={{
                         allowExternalLinks: true,
                         allowCreatingNotes: true

apps/client/src/widgets/dialogs/jump_to_note.tsx

@@ -1,15 +1,14 @@
+import Modal from "../react/Modal";
+import Button from "../react/Button";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+import { t } from "../../services/i18n";
 import { useRef, useState } from "preact/hooks";
-
+import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
 import appContext from "../../components/app_context";
 import commandRegistry from "../../services/command_registry";
-import { t } from "../../services/i18n";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
-import shortcutService from "../../services/shortcuts";
-import Button from "../react/Button";
-import { useTriliumEvent } from "../react/hooks";
-import Modal from "../react/Modal";
-import NoteAutocomplete from "../react/NoteAutocomplete";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
+import shortcutService from "../../services/shortcuts";
 
 const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
 
@@ -24,14 +23,14 @@ export default function JumpToNoteDialogComponent() {
     const [ initialText, setInitialText ] = useState(isCommandMode ? "> " : "");
     const actualText = useRef<string>(initialText);
     const [ shown, setShown ] = useState(false);
-
-    async function openDialog(commandMode: boolean) {
+    
+    async function openDialog(commandMode: boolean) {        
         let newMode: Mode;
         let initialText = "";
 
         if (commandMode) {
             newMode = "commands";
-            initialText = ">";
+            initialText = ">";            
         } else if (Date.now() - lastOpenedTs <= KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000 && actualText.current) {
             // if you open the Jump To dialog soon after using it previously, it can often mean that you
             // actually want to search for the same thing (e.g., you opened the wrong note at first try)
@@ -59,7 +58,7 @@ export default function JumpToNoteDialogComponent() {
         if (!suggestion) {
             return;
         }
-
+        
         setShown(false);
         if (suggestion.notePath) {
             appContext.tabManager.getActiveContext()?.setNote(suggestion.notePath);
@@ -84,7 +83,7 @@ export default function JumpToNoteDialogComponent() {
         $autoComplete
             .trigger("focus")
             .trigger("select");
-
+            
         // Add keyboard shortcut for full search
         shortcutService.bindElShortcut($autoComplete, "ctrl+return", () => {
             if (!isCommandMode) {
@@ -92,7 +91,7 @@ export default function JumpToNoteDialogComponent() {
             }
         });
     }
-
+    
     async function showInFullSearch() {
         try {
             setShown(false);
@@ -127,18 +126,18 @@ export default function JumpToNoteDialogComponent() {
                     setIsCommandMode(text.startsWith(">"));
                 }}
                 onChange={onItemSelected}
-            />}
+                />}
             onShown={onShown}
             onHidden={() => setShown(false)}
-            footer={!isCommandMode && <Button
-                className="show-in-full-text-button"
-                text={t("jump_to_note.search_button")}
+            footer={!isCommandMode && <Button 
+                className="show-in-full-text-button" 
+                text={t("jump_to_note.search_button")} 
                 keyboardShortcut="Ctrl+Enter"
                 onClick={showInFullSearch}
             />}
             show={shown}
         >
-            <div className="jump-to-note-results" ref={containerRef} />
+            <div className="algolia-autocomplete-container jump-to-note-results" ref={containerRef}></div>
         </Modal>
     );
 }

apps/client/src/widgets/dialogs/prompt.tsx

@@ -1,12 +1,11 @@
 import { useRef, useState } from "preact/hooks";
-
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
-import FormGroup from "../react/FormGroup";
-import FormTextBox from "../react/FormTextBox";
-import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
+import FormTextBox from "../react/FormTextBox";
+import FormGroup from "../react/FormGroup";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -41,7 +40,7 @@ export default function PromptDialog() {
         opts.current = newOpts;
         setValue(newOpts.defaultValue ?? "");
         setShown(true);
-    });
+    })
 
     return (
         <Modal
@@ -61,7 +60,7 @@ export default function PromptDialog() {
                 answerRef.current?.select();
             }}
             onSubmit={() => {
-                submitValue.current = answerRef.current?.value || value;
+                submitValue.current = value;
                 setShown(false);
             }}
             onHidden={() => {

apps/client/src/widgets/dialogs/recent_changes.tsx

@@ -27,6 +27,7 @@ export default function RecentChangesDialog() {
     });
 
     useEffect(() => {
+        if (!ancestorNoteId) return;
         server.get<RecentChangeRow[]>(`recent-changes/${ancestorNoteId}`)
             .then(async (recentChanges) => {
                 // preload all notes into cache

apps/client/src/widgets/dialogs/revisions.tsx

@@ -284,7 +284,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
     }
 }
 
-function RevisionContentText({ content }: { content: string | Buffer<ArrayBufferLike> | undefined }) {
+function RevisionContentText({ content }: { content: string | Uint8Array | undefined }) {
     const contentRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
         if (contentRef.current?.querySelector("span.math-tex")) {
@@ -296,7 +296,7 @@ function RevisionContentText({ content }: { content: string | Buffer<ArrayBuffer
 
 function RevisionContentDiff({ noteContent, itemContent, itemType }: {
     noteContent?: string,
-    itemContent: string | Buffer<ArrayBufferLike> | undefined,
+    itemContent: string | Uint8Array | undefined,
     itemType: string
 }) {
     const contentRef = useRef<HTMLDivElement>(null);

apps/client/src/widgets/layout/StandaloneWarningBar.tsx

@@ -0,0 +1,26 @@
+import { isMobile } from "../../services/utils";
+import Admonition from "../react/Admonition";
+
+export default function StandaloneWarningBar() {
+    return (
+        <div
+            className="standalone-warning-bar"
+            style={{
+                contain: "none"
+            }}
+        >
+            <Admonition
+                type="caution"
+                style={{
+                    margin: 0,
+                    fontSize: "0.8em"
+                }}
+            >
+                {isMobile()
+                    ? "Running Trilium standalone. Beware of data loss and other issues."
+                    : "You are running Trilium in standalone mode. Some features are not available, and you may experience issues or data loss. Use the desktop application or self-hosted server for the best experience."
+                }
+            </Admonition>
+        </div>
+    );
+}

apps/client/src/widgets/react/Admonition.tsx

@@ -1,15 +1,16 @@
-import { ComponentChildren } from "preact";
+import { HTML } from "mermaid/dist/diagram-api/types.js";
+import { ComponentChildren, HTMLAttributes } from "preact";
 
-interface AdmonitionProps {
+interface AdmonitionProps extends Pick<HTMLAttributes<HTMLDivElement>, "style"> {
     type: "warning" | "note" | "caution";
     children: ComponentChildren;
     className?: string;
 }
 
-export default function Admonition({ type, children, className }: AdmonitionProps) {
+export default function Admonition({ type, children, className, ...props }: AdmonitionProps) {
     return (
-        <div className={`admonition ${type} ${className}`} role="alert">
+        <div className={`admonition ${type} ${className}`} role="alert" {...props}>
             {children}
         </div>
-    )
+    );
 }

apps/client/src/widgets/react/Collapsible.tsx

@@ -43,13 +43,13 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
                     setFullyExpanded(true);
                 }, 250);
                 return () => clearTimeout(timeout);
-            } else {
-                setFullyExpanded(true);
-            }
+            } 
+            setFullyExpanded(true);
+            
         } else {
             setFullyExpanded(false);
         }
-    }, [expanded, transitionEnabled])
+    }, [expanded, transitionEnabled]);
 
     return (
         <div className={clsx("collapsible", className, {
@@ -58,7 +58,10 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
         })}>
             <button
                 className="collapsible-title tn-low-profile"
-                onClick={() => setExpanded(!expanded)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setExpanded(!expanded);
+                }}
                 aria-expanded={expanded}
                 aria-controls={contentId}
             >

apps/client/src/widgets/react/FormGroup.tsx

@@ -1,5 +1,6 @@
 import { cloneElement, ComponentChildren, RefObject, VNode } from "preact";
 import { CSSProperties } from "preact/compat";
+
 import { useUniqueName } from "./hooks";
 
 interface FormGroupProps {
@@ -8,6 +9,7 @@ interface FormGroupProps {
     label?: string;
     title?: string;
     className?: string;
+    error?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     children: VNode<any>;
     description?: string | ComponentChildren;
@@ -15,7 +17,7 @@ interface FormGroupProps {
     style?: CSSProperties;
 }
 
-export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style }: FormGroupProps) {
+export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style, error }: FormGroupProps) {
     const id = useUniqueName(name);
     const childWithId = cloneElement(children, { id });
 
@@ -26,6 +28,7 @@ export default function FormGroup({ name, label, title, className, children, des
 
             {childWithId}
 
+            {error && <div><small className="form-text text-danger">{error}</small></div>}
             {description && <div><small className="form-text">{description}</small></div>}
         </div>
     );
@@ -41,4 +44,4 @@ export function FormMultiGroup({ label, children }: { label: string, children: C
             {children}
         </div>
     );
-}
+}

apps/client/src/widgets/react/NoteAutocomplete.spec.tsx

@@ -1,135 +0,0 @@
-import $ from "jquery";
-import { render } from "preact";
-import { act } from "preact/test-utils";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    initNoteAutocompleteSpy,
-    setTextSpy,
-    clearTextSpy
-} = vi.hoisted(() => ({
-    initNoteAutocompleteSpy: vi.fn(($el) => $el),
-    setTextSpy: vi.fn(),
-    clearTextSpy: vi.fn()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        initNoteAutocomplete: initNoteAutocompleteSpy,
-        setText: setTextSpy,
-        clearText: clearTextSpy
-    }
-}));
-
-import NoteAutocomplete from "./NoteAutocomplete";
-
-describe("NoteAutocomplete", () => {
-    let container: HTMLDivElement;
-    let setNoteSpy: ReturnType<typeof vi.fn>;
-    let getSelectedNoteIdSpy: ReturnType<typeof vi.fn>;
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        container = document.createElement("div");
-        document.body.appendChild(container);
-
-        setNoteSpy = vi.fn(() => Promise.resolve());
-        getSelectedNoteIdSpy = vi.fn(() => "selected-note-id");
-
-        ($.fn as any).setNote = setNoteSpy;
-        ($.fn as any).getSelectedNoteId = getSelectedNoteIdSpy;
-    });
-
-    afterEach(() => {
-        act(() => {
-            render(null, container);
-        });
-        container.remove();
-    });
-
-    it("syncs text props through the headless helper functions", () => {
-        act(() => {
-            render(<NoteAutocomplete text="hello" />, container);
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-
-        expect(initNoteAutocompleteSpy).toHaveBeenCalledTimes(1);
-        expect(initNoteAutocompleteSpy.mock.calls[0][0][0]).toBe(input);
-        expect(setTextSpy).toHaveBeenCalledTimes(1);
-        expect(setTextSpy.mock.calls[0][0][0]).toBe(input);
-        expect(setTextSpy).toHaveBeenCalledWith(expect.anything(), "hello");
-
-        act(() => {
-            render(<NoteAutocomplete text="" />, container);
-        });
-
-        expect(clearTextSpy).toHaveBeenCalled();
-    });
-
-    it("syncs noteId props through the jQuery setNote extension", () => {
-        act(() => {
-            render(<NoteAutocomplete noteId="note-123" />, container);
-        });
-
-        expect(setNoteSpy).toHaveBeenCalledWith("note-123");
-        expect(clearTextSpy).not.toHaveBeenCalled();
-    });
-
-    it("forwards autocomplete selection and clear events to consumers", () => {
-        const onChange = vi.fn();
-        const noteIdChanged = vi.fn();
-
-        act(() => {
-            render(<NoteAutocomplete onChange={onChange} noteIdChanged={noteIdChanged} />, container);
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        const $input = $(input);
-        const suggestion = { notePath: "root/child-note", noteTitle: "Child note" };
-
-        $input.trigger("autocomplete:noteselected", [suggestion]);
-
-        expect(onChange).toHaveBeenCalledWith(suggestion);
-        expect(noteIdChanged).toHaveBeenCalledWith("child-note");
-
-        input.value = "";
-        $input.trigger("change");
-
-        expect(onChange).toHaveBeenCalledWith(null);
-    });
-
-    it("forwards onTextChange, onKeyDown and onBlur events", () => {
-        const onTextChange = vi.fn();
-        const onKeyDown = vi.fn();
-        const onBlur = vi.fn();
-
-        act(() => {
-            render(
-                <NoteAutocomplete
-                    onTextChange={onTextChange}
-                    onKeyDown={onKeyDown}
-                    onBlur={onBlur}
-                />,
-                container
-            );
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        const $input = $(input);
-
-        input.value = "typed text";
-        $input.trigger("input");
-        $input.trigger($.Event("keydown", { originalEvent: new KeyboardEvent("keydown", { key: "Enter" }) }));
-        $input.trigger("blur");
-
-        expect(onTextChange).toHaveBeenCalledWith("typed text");
-        expect(onKeyDown).toHaveBeenCalledWith(expect.any(KeyboardEvent));
-        expect(onBlur).toHaveBeenCalledWith("selected-note-id");
-    });
-});

apps/client/src/widgets/react/NoteAutocomplete.tsx

@@ -1,9 +1,8 @@
-import type { JSX,RefObject } from "preact";
-import type { CSSProperties } from "preact/compat";
-import { useEffect } from "preact/hooks";
-
 import { t } from "../../services/i18n";
+import { useEffect } from "preact/hooks";
 import note_autocomplete, { Options, type Suggestion } from "../../services/note_autocomplete";
+import type { RefObject } from "preact";
+import type { CSSProperties } from "preact/compat";
 import { useSyncedRef } from "./hooks";
 
 interface NoteAutocompleteProps {
@@ -17,111 +16,85 @@ interface NoteAutocompleteProps {
     onChange?: (suggestion: Suggestion | null) => void;
     onTextChange?: (text: string) => void;
     onKeyDown?: (e: KeyboardEvent) => void;
-    onKeyDownCapture?: JSX.KeyboardEventHandler<HTMLInputElement>;
-    onKeyUpCapture?: JSX.KeyboardEventHandler<HTMLInputElement>;
     onBlur?: (newValue: string) => void;
     noteIdChanged?: (noteId: string) => void;
     noteId?: string;
 }
 
-export default function NoteAutocomplete({ id, inputRef: externalInputRef, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged, onKeyDown, onKeyDownCapture, onKeyUpCapture, onBlur }: NoteAutocompleteProps) {
+export default function NoteAutocomplete({ id, inputRef: externalInputRef, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged, onKeyDown, onBlur }: NoteAutocompleteProps) {
     const ref = useSyncedRef<HTMLInputElement>(externalInputRef);
 
     useEffect(() => {
         if (!ref.current) return;
         const $autoComplete = $(ref.current);
 
+        // clear any event listener added in previous invocation of this function
+        $autoComplete
+            .off("autocomplete:noteselected")
+            .off("autocomplete:commandselected")
+
         note_autocomplete.initNoteAutocomplete($autoComplete, {
             ...opts,
             container: container?.current
         });
-    }, [opts, container?.current]);
-
-    useEffect(() => {
-        if (!ref.current) return;
-        const $autoComplete = $(ref.current);
-        const inputListener = () => onTextChange?.($autoComplete[0].value);
-        const keyDownListener = (e) => e.originalEvent && onKeyDown?.(e.originalEvent);
-        const blurListener = () => onBlur?.($autoComplete.getSelectedNoteId() ?? "");
-
         if (onTextChange) {
-            $autoComplete.on("input", inputListener);
+            $autoComplete.on("input", () => onTextChange($autoComplete[0].value));
         }
         if (onKeyDown) {
-            $autoComplete.on("keydown", keyDownListener);
+            $autoComplete.on("keydown", (e) => e.originalEvent && onKeyDown(e.originalEvent));
         }
         if (onBlur) {
-            $autoComplete.on("blur", blurListener);
+            $autoComplete.on("blur", () => onBlur($autoComplete.getSelectedNoteId() ?? ""));
         }
+    }, [opts, container?.current]);
 
-        return () => {
-            if (onTextChange) {
-                $autoComplete.off("input", inputListener);
-            }
-            if (onKeyDown) {
-                $autoComplete.off("keydown", keyDownListener);
-            }
-            if (onBlur) {
-                $autoComplete.off("blur", blurListener);
-            }
-        };
-    }, [onBlur, onKeyDown, onTextChange]);
-
+    // On change event handlers.
     useEffect(() => {
         if (!ref.current) return;
         const $autoComplete = $(ref.current);
-        if (!(onChange || noteIdChanged)) {
-            return;
-        }
 
-        const autoCompleteListener = (_e, suggestion) => {
-            onChange?.(suggestion);
+        if (onChange || noteIdChanged) {
+            const autoCompleteListener = (_e, suggestion) => {
+                onChange?.(suggestion);
 
-            if (noteIdChanged) {
-                const noteId = suggestion?.notePath?.split("/")?.at(-1);
-                noteIdChanged(noteId);
-            }
-        };
-        const changeListener = (e) => {
-            if (!ref.current?.value) {
-                autoCompleteListener(e, null);
-            }
-        };
-
-        $autoComplete
-            .on("autocomplete:noteselected", autoCompleteListener)
-            .on("autocomplete:externallinkselected", autoCompleteListener)
-            .on("autocomplete:commandselected", autoCompleteListener)
-            .on("change", changeListener);
-
-        return () => {
+                if (noteIdChanged) {
+                    const noteId = suggestion?.notePath?.split("/")?.at(-1);
+                    noteIdChanged(noteId);
+                }
+            };
+            const changeListener = (e) => {
+                if (!ref.current?.value) {
+                    autoCompleteListener(e, null);
+                }
+            };
             $autoComplete
-                .off("autocomplete:noteselected", autoCompleteListener)
-                .off("autocomplete:externallinkselected", autoCompleteListener)
-                .off("autocomplete:commandselected", autoCompleteListener)
-                .off("change", changeListener);
-        };
-    }, [onChange, noteIdChanged]);
+                .on("autocomplete:noteselected", autoCompleteListener)
+                .on("autocomplete:externallinkselected", autoCompleteListener)
+                .on("autocomplete:commandselected", autoCompleteListener)
+                .on("change", changeListener);
+            return () => {
+                $autoComplete
+                    .off("autocomplete:noteselected", autoCompleteListener)
+                    .off("autocomplete:externallinkselected", autoCompleteListener)
+                    .off("autocomplete:commandselected", autoCompleteListener)
+                    .off("change", changeListener);
+            };
+        }
+    }, [opts, container?.current, onChange, noteIdChanged])
 
     useEffect(() => {
         if (!ref.current) return;
         const $autoComplete = $(ref.current);
 
         if (noteId) {
-            void $autoComplete.setNote(noteId);
-            return;
+            $autoComplete.setNote(noteId);
+        } else if (text) {
+            note_autocomplete.setText($autoComplete, text);
+        } else {
+            $autoComplete.setSelectedNotePath("");
+            $autoComplete.autocomplete("val", "");
+            ref.current.value = "";
         }
-
-        if (text !== undefined) {
-            if (text) {
-                note_autocomplete.setText($autoComplete, text);
-            } else {
-                note_autocomplete.clearText($autoComplete);
-            }
-            return;
-        }
-
-        note_autocomplete.clearText($autoComplete);
     }, [text, noteId]);
 
     return (
@@ -130,8 +103,6 @@ export default function NoteAutocomplete({ id, inputRef: externalInputRef, text,
                 id={id}
                 ref={ref}
                 className="note-autocomplete form-control"
-                onKeyDownCapture={onKeyDownCapture}
-                onKeyUpCapture={onKeyUpCapture}
                 placeholder={placeholder ?? t("add_link.search_note")} />
         </div>
     );

apps/client/src/widgets/type_widgets/Empty.css

@@ -50,8 +50,9 @@ body.desktop {
     border-radius: 8px;
 }
 
-.note-detail-empty-results .aa-core-panel--contained {
-    border: 0;
+.note-detail-empty-results .aa-dropdown-menu {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-top: 0;
 }
 
 .empty-tab-search label {

apps/client/src/widgets/type_widgets/text/snippets.ts

@@ -3,7 +3,6 @@ import froca from "../../../services/froca.js";
 import type LoadResults from "../../../services/load_results.js";
 import search from "../../../services/search.js";
 import type { TemplateDefinition } from "@triliumnext/ckeditor5";
-import appContext from "../../../components/app_context.js";
 import type FNote from "../../../entities/fnote.js";
 
 interface TemplateData {
@@ -21,20 +20,25 @@ const debouncedHandleContentUpdate = debounce(handleContentUpdate, 1000);
  * @returns the list of templates.
  */
 export default async function getTemplates() {
-    // Build the definitions and populate the cache.
-    const snippets = await search.searchForNotes("#textSnippet");
-    const definitions: TemplateDefinition[] = [];
-    for (const snippet of snippets) {
-        const { description } = await invalidateCacheFor(snippet);
+    try {
+        // Build the definitions and populate the cache.
+        const snippets = await search.searchForNotes("#textSnippet");
+        const definitions: TemplateDefinition[] = [];
+        for (const snippet of snippets) {
+            const { description } = await invalidateCacheFor(snippet);
 
-        definitions.push({
-            title: snippet.title,
-            data: () => templateCache.get(snippet.noteId)?.content ?? "",
-            icon: buildIcon(snippet),
-            description
-        });
+            definitions.push({
+                title: snippet.title,
+                data: () => templateCache.get(snippet.noteId)?.content ?? "",
+                icon: buildIcon(snippet),
+                description
+            });
+        }
+        return definitions;
+    } catch (e) {
+        logError("Error while building text snippet templates: ", e);
+        return [];
     }
-    return definitions;
 }
 
 async function invalidateCacheFor(snippet: FNote) {

apps/client/vite.config.mts

@@ -87,7 +87,6 @@ export default defineConfig(() => ({
             input: {
                 index: join(__dirname, "index.html"),
                 login: join(__dirname, "src", "login.ts"),
-                setup: join(__dirname, "src", "setup.ts"),
                 set_password: join(__dirname, "src", "set_password.ts"),
                 runtime: join(__dirname, "src", "runtime.ts"),
                 print: join(__dirname, "src", "print.tsx")

apps/db-compare/package.json

@@ -5,7 +5,7 @@
   "description": "Tool to compare content of Trilium databases. Useful for debugging sync problems.",
   "dependencies": {
     "colors": "1.4.0",
-    "diff": "8.0.3",
+    "diff": "8.0.4",
     "sqlite": "5.1.1",
     "sqlite3": "6.0.1"
   },

apps/desktop-standalone/.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: shalithasuranga
+patreon: shalithasuranga
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

apps/desktop-standalone/.gitignore

@@ -0,0 +1,18 @@
+# Developer tools' files
+.lite_workspace.lua
+
+# Neutralinojs binaries and builds
+/bin
+/dist
+
+# Neutralinojs client (minified)
+neutralino.js
+
+# Neutralinojs related files
+.storage
+*.log
+.tmp
+
+# Files managed by the build script
+resources
+neutralino.config.json

apps/desktop-standalone/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Neutralinojs and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/desktop-standalone/README.md

@@ -0,0 +1,15 @@
+# neutralinojs-minimal
+
+The default template for a Neutralinojs app. It's possible to use your favorite frontend framework by using [these steps](https://neutralino.js.org/docs/getting-started/using-frontend-libraries).
+
+## Contributors
+
+[![Contributors](https://contrib.rocks/image?repo=neutralinojs/neutralinojs-minimal)](https://github.com/neutralinojs/neutralinojs-minimal/graphs/contributors)
+
+## License
+
+[MIT](LICENSE)
+
+## Icon credits
+
+- `trayIcon.png` - Made by [Freepik](https://www.freepik.com) and downloaded from [Flaticon](https://www.flaticon.com)

apps/desktop-standalone/neutralino.template.config.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://raw.githubusercontent.com/neutralinojs/neutralinojs/main/schemas/neutralino.config.schema.json",
+  "applicationId": "js.neutralino.sample",
+  "version": "1.0.0",
+  "defaultMode": "window",
+  "port": 0,
+  "documentRoot": "/resources/",
+  "url": "/",
+  "enableServer": true,
+  "enableNativeAPI": true,
+  "tokenSecurity": "one-time",
+  "logging": {
+    "enabled": true,
+    "writeToLogFile": true
+  },
+  "nativeAllowList": [
+    "app.*",
+    "os.*",
+    "debug.log"
+  ],
+  "globalVariables": {
+    "TEST1": "Hello",
+    "TEST2": [
+      2,
+      4,
+      5
+    ],
+    "TEST3": {
+      "value1": 10,
+      "value2": {}
+    }
+  },
+  "modes": {
+    "window": {
+      "title": "Trilium Notes Lite",
+      "width": 800,
+      "height": 500,
+      "minWidth": 400,
+      "minHeight": 200,
+      "center": true,
+      "fullScreen": false,
+      "alwaysOnTop": false,
+      "icon": "/resources/assets/icon.png",
+      "enableInspector": true,
+      "borderless": false,
+      "maximize": false,
+      "hidden": false,
+      "resizable": true,
+      "exitProcessOnClose": true
+    },
+    "browser": {
+      "globalVariables": {
+        "TEST": "Test value browser"
+      },
+      "nativeBlockList": [
+        "filesystem.*"
+      ]
+    },
+    "cloud": {
+      "url": "/resources/#cloud",
+      "nativeAllowList": [
+        "app.*"
+      ]
+    },
+    "chrome": {
+      "width": 800,
+      "height": 500,
+      "args": "--user-agent=\"Neutralinojs chrome mode\"",
+      "nativeBlockList": [
+        "filesystem.*",
+        "os.*"
+      ]
+    }
+  },
+  "cli": {
+    "binaryName": "standalone-desktop",
+    "resourcesPath": "/resources/",
+    "extensionsPath": "/extensions/",
+    "clientLibrary": "/resources/js/neutralino.js",
+    "binaryVersion": "6.4.0",
+    "clientVersion": "6.4.0"
+  }
+}