Phase 4: typed notes

.github/workflows/ci.yml

@@ -127,6 +127,32 @@ jobs:
             tests/ui/results
           retention-days: 7
 
+  perf-typing:
+    # Phase 4's typing benchmark, in-page measure only (ARCHITECTURE.md section 24.5): every typing condition and
+    # the motion gestures, recorded as an artifact. Hosted runners are too noisy for the 16 ms gate itself, which
+    # the reference laptop's run checks with OPENNOTE_TYPING_GATE=1 (docs/perf/phase-4.md).
+    runs-on: windows-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - name: Install tools
+        run: npm ci
+      - name: Typing benchmark
+        run: npm run perf:typing
+      - name: Keep the numbers
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: perf-typing
+          path: tests/perf/typing/results
+          retention-days: 30
+
   windows-app:
     # Rust checks and a test build of the desktop app on Windows, the first target platform.
     runs-on: windows-latest

.gitignore

@@ -14,3 +14,4 @@ tests/e2e/.drivers/
 tests/e2e/logs/
 tests/ui/report/
 tests/ui/results/
+tests/perf/typing/results/

README.md

@@ -10,14 +10,26 @@ OpenNote is an open-source note-taking app that combines your favorite writing,
 
 OpenNote is in early development. Each phase of the [development plan](docs/DEVELOPMENT.md#5-phases) gets its own branch and merges into `main` when it meets its exit gate.
 
-| Phase                                   | Focus                                                                                  | Status                                       |
-| --------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------- |
-| 0                                       | Project foundation                                                                     | Done and merged                              |
-| 1                                       | Spikes that test ink, text, PDF export, and audio                                      | Done and merged                              |
-| 2                                       | [App shell and navigation](https://github.com/XrxcGH/OpenNote/pull/8)                  | Done and merged 2026-10-02                   |
-| 3                                       | [Document model and storage](https://github.com/XrxcGH/OpenNote/pull/9)                | Done and merged 2026-10-03                   |
-| 4                                       | Typed notes (text, Markdown, tables, code)                                             | In progress                                  |
-| [5 to 14](docs/DEVELOPMENT.md#5-phases) | Ink, export, charts, search, audio, math, import, intelligence, hardening, and release | Core in progress; beta build being assembled |
+| Phase                                   | Focus                                                                                    | Status                                                                            |
+| --------------------------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| 0                                       | Project foundation                                                                       | Done and merged                                                                   |
+| 1                                       | Spikes that test ink, text, PDF export, and audio                                        | Done and merged                                                                   |
+| 2                                       | [App shell and navigation](https://github.com/XrxcGH/OpenNote/pull/8)                    | Done and merged 2026-10-02                                                        |
+| 3                                       | [Document model and storage](https://github.com/XrxcGH/OpenNote/pull/9)                  | Done and merged 2026-10-03                                                        |
+| 4                                       | [Typed notes (text, Markdown, tables, code)](https://github.com/XrxcGH/OpenNote/pull/15) | Done and merged 2026-10-03                                                        |
+| [5 to 14](docs/DEVELOPMENT.md#5-phases) | Ink, export, charts, search, audio, math, import, intelligence, hardening, and release   | In progress, being wired into the app; a first beta build exists on branch `beta` |
+
+## What the app does today
+
+OpenNote runs as a Windows desktop app. You can organize notebooks, sections, and pages, and write typed notes on a page, either in a simple document flow or in text boxes you place anywhere. Pages save on their own and recover after a crash. Typed notes support:
+
+- Text boxes, headings, lists, checkboxes, bold and italic, links, quotes, and callouts
+- Markdown shortcuts as you type (for example `# ` for a heading), and Markdown paste
+- Images by paste, drag, or file picker, with resize and crop
+- Tables, and code blocks with syntax highlighting
+- Spell check through the Windows spelling service
+
+Ink, export, charts, search, audio, math, and import are still being wired into the app.
 
 ## Downloads
 
@@ -39,28 +51,46 @@ cd OpenNote
 npm install && npm start
 ```
 
-That opens the OpenNote window in development mode. Run `npm run setup-hooks` once, so CHECKS runs before every commit. [CONTRIBUTING.md](CONTRIBUTING.md) has the full setup, the npm scripts, and the workflow for branches and pull requests.
+That opens the OpenNote window in development mode. Run `npm run setup-hooks` once, so CHECKS runs before every commit. To test your changes, run:
+
+```sh
+npm test                 # CHECKS, lint rule, and unit tests
+npm run test:components  # component tests in the installed Edge or Chrome
+npm run test:ui          # screen and accessibility tests in Playwright
+npm run test:e2e         # real-app tests, which need tauri-driver and msedgedriver
+npm run perf:typing      # the typing latency benchmark
+cargo test --workspace   # Rust tests
+```
+
+[CONTRIBUTING.md](CONTRIBUTING.md) has the full setup, every npm script, and the workflow for branches and pull requests.
 
 ## Repository map
 
 ```text
-app/           The desktop app (Phase 2)
+app/           The desktop app (Phases 2 and 4)
   src/         TypeScript and React interface
+    editor/    The typed notes editor: schema, Markdown, tables, and highlighting
+    features/
+      page/    The page view: text boxes, images, paste, and spell check
+    services/
+      pages/   The page service contract, with its Tauri and in-memory versions
   src-tauri/   Rust shell, built on Tauri 2
 brand/         Design tokens, logo, and app icon
 checks/        The CHECKS quality gate
 crates/        Rust libraries (Phase 3)
   core/        Document model, file format, storage, undo, and search
   updater/     Self-updater (fetch, verify, install, rollback)
 docs/          Plans, specs, and guides
-  adr/         Architecture decision records
+  adr/         Architecture decision records, including Phase 4's 0020 to 0026
   design/      Screen wireframes and the generator that draws them
   format/      Note file format specification and tools
+  perf/        Performance records, starting with Phase 4's typing numbers
 spikes/        Throwaway Phase 1 experiments and their results
 tests/         End-to-end, UI, performance, and crash tests (Phase 3)
   crash/       Crash safety tests that kill the app during saves
-  e2e/         Smoke set of real-app tests (keyboard, screen reader)
+  e2e/         Real-app tests: the smoke set (keyboard, screen reader) and typed notes
   perf/        Performance benchmarks for every budget
+    typing/    The typing latency benchmark for the 20-page note (Phase 4)
   ui/          Screenshot tests of every screen and size
 .github/       Issue and pull request templates, and the CI and release workflows
 ```

app/bundle-budget.json

@@ -1,7 +1,16 @@
 {
-  "startup": { "jsKb": 160, "cssKb": 15 },
+  "startup": { "jsKb": 180, "cssKb": 15 },
+  "after": { "within": "features/page/", "entry": "features/page/PageBody" },
   "lazyKb": {
-    "features/page": 150,
+    "editor/markdown/worker": 45,
+    "editor/highlight": 20,
+    "highlight.js/lib/languages": 5,
+    "features/page/history": 25,
+    "features/page/readAloud": 10,
+    "features/page/styles": 15,
+    "features/page/readingOrder": 15,
+    "features/page/PageBody": 225,
+    "features/page": 40,
     "features/palette": 40,
     "features/settings": 40,
     "features/setup": 40,

app/scripts/check-bundle.test.ts

@@ -35,6 +35,38 @@ describe('check-bundle', () => {
     ]);
   });
 
+  it('counts a group that loads after another one without what that one loads', () => {
+    const manifest: Manifest = {
+      'index.html': { file: 'assets/index.js', isEntry: true },
+      'src/features/page/PageBody.tsx': {
+        file: 'assets/page.js',
+        src: 'src/features/page/PageBody.tsx',
+        isDynamicEntry: true,
+        imports: ['_editor.js'],
+      },
+      '_editor.js': { file: 'assets/editor.js' },
+      'src/features/page/history/chunk.ts': {
+        file: 'assets/history.js',
+        src: 'src/features/page/history/chunk.ts',
+        isDynamicEntry: true,
+        imports: ['_editor.js', '_diff.js'],
+      },
+      '_diff.js': { file: 'assets/diff.js' },
+      'src/features/palette/Palette.tsx': {
+        file: 'assets/palette.js',
+        src: 'src/features/palette/Palette.tsx',
+        isDynamicEntry: true,
+        imports: ['_editor.js'],
+      },
+    };
+    const budget: Budget = { ...BUDGET, after: { within: 'features/page/', entry: 'features/page/PageBody' } };
+    expect(groups(manifest, budget).slice(2)).toEqual([
+      { name: 'src/features/page/PageBody.tsx', files: ['assets/page.js', 'assets/editor.js'], limitKb: 3 },
+      { name: 'src/features/page/history/chunk.ts', files: ['assets/history.js', 'assets/diff.js'], limitKb: 3 },
+      { name: 'src/features/palette/Palette.tsx', files: ['assets/palette.js', 'assets/editor.js'], limitKb: 2 },
+    ]);
+  });
+
   it('measures gzipped sizes and reports groups over their limit', () => {
     const dist = mkdtempSync(join(tmpdir(), 'bundle-'));
     writeFileSync(join(dist, 'small.js'), 'export {};');

app/scripts/check-bundle.ts

@@ -2,7 +2,8 @@
 // gzips each group of files, and fails when a group passes its limit in app/bundle-budget.json. The groups are:
 // - start-up JavaScript: the entry and everything it imports statically
 // - start-up CSS: the style sheets of those chunks
-// - one lazy group per dynamic import, without what start-up already loads
+// - one lazy group per dynamic import, without what start-up already loads. A group that only ever loads after
+//   another one (the page's on-demand chunks load after the page) also leaves out what that one loads.
 //
 // Run after `npm run app:build`:
 //   node app/scripts/check-bundle.ts [--dist app/dist] [--compare-with <old report.json>] [--report <out.json>]
@@ -29,6 +30,11 @@ export interface Budget {
   /** Limits for lazy groups whose source path contains the key, such as "features/palette". */
   lazyKb: Record<string, number>;
   lazyDefaultKb: number;
+  /**
+   * Lazy groups that load only after another one: a group whose source path contains `within` counts without the
+   * files of the group whose path contains `entry`, which is loaded by then.
+   */
+  after?: { within: string; entry: string };
 }
 
 export interface Group {
@@ -68,8 +74,13 @@ export function groups(manifest: Manifest, budget: Budget): Group[] {
       limitKb: budget.startup.cssKb,
     },
   ];
-  for (const key of keys.filter((k) => manifest[k].isDynamicEntry)) {
-    const own = [...staticClosure(manifest, [key])].filter((k) => !startup.has(k)).map((k) => manifest[k]);
+  const lazyKeys = keys.filter((k) => manifest[k].isDynamicEntry);
+  const first = budget.after && lazyKeys.find((k) => k.includes(budget.after!.entry));
+  const loadedFirst = first ? staticClosure(manifest, [first]) : new Set<string>();
+  for (const key of lazyKeys) {
+    const follows = first !== undefined && key !== first && key.includes(budget.after!.within);
+    const loaded = (k: string) => startup.has(k) || (follows && loadedFirst.has(k));
+    const own = [...staticClosure(manifest, [key])].filter((k) => !loaded(k)).map((k) => manifest[k]);
     const limit = Object.entries(budget.lazyKb).find(([fragment]) => key.includes(fragment))?.[1];
     const files = [...own.map((chunk) => chunk.file), ...new Set(own.flatMap((chunk) => chunk.css ?? []))];
     result.push({ name: manifest[key].src ?? key, files, limitKb: limit ?? budget.lazyDefaultKb });

app/scripts/package-imports.test.ts

@@ -0,0 +1,49 @@
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { importsIn, packageImports } from './package-imports.ts';
+
+describe('importsIn', () => {
+  it('finds static imports, re-exports, and lazy imports of packages', () => {
+    const source = [
+      "import { Editor } from '@tiptap/core';",
+      "import Moon, {\n  type Icon,\n} from '@phosphor-icons/react/dist/csr/Moon';",
+      "export { lowlight } from 'lowlight';",
+      "const load = () => import('markdown-it');",
+    ].join('\n');
+    expect(importsIn(source)).toEqual([
+      '@tiptap/core',
+      '@phosphor-icons/react/dist/csr/Moon',
+      'lowlight',
+      'markdown-it',
+    ]);
+  });
+
+  it('leaves out the app’s own modules, types, styles, Node, and the test runner', () => {
+    const source = [
+      "import { t } from '../strings/t';",
+      "import type { Root } from 'hast';",
+      "import type { Node } from '@tiptap/pm/model';",
+      "export type { Plugin } from 'vite';",
+      "import sheet from 'some-package/style.css';",
+      "import { readFileSync } from 'node:fs';",
+      "import { expect } from 'vitest';",
+      "import { page } from 'vitest/browser';",
+    ].join('\n');
+    expect(importsIn(source)).toEqual([]);
+  });
+});
+
+describe('packageImports', () => {
+  const found = packageImports(join(import.meta.dirname, '..', 'src'));
+
+  it('lists what the app imports, once each and sorted', () => {
+    expect(found).toContain('react');
+    expect(found).toContain('@tiptap/pm/state');
+    expect(found).toEqual([...new Set(found)].sort());
+  });
+
+  it('lists the modules lazy chunks import, which a late scan would meet mid-test', () => {
+    expect(found.some((name) => name.startsWith('@phosphor-icons/react/dist/csr/'))).toBe(true);
+    expect(found.some((name) => name.startsWith('highlight.js/lib/languages/'))).toBe(true);
+  });
+});

app/scripts/package-imports.ts

@@ -0,0 +1,43 @@
+// The package modules the app's source imports, for the component tests' dependency bundling (vitest.config.ts).
+//
+// Vite bundles a package the first time it meets it. One it meets after the tests start, in a chunk that loads
+// lazily, reloads the page under a running test, and the test fails. Vite's own scan misses some of them, so on a
+// machine with no cache (CI) the first run failed. Listing every import bundles them all before the first test.
+
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/** `import ... from 'x'`, `export ... from 'x'`, and `import('x')`, where x is a package and no type import. */
+const IMPORT = /\b(?:import|export)\s+(?!type\b)[^'"`;]*?\bfrom\s+'([^'./][^']*)'|\bimport\(\s*'([^'./][^']*)'\s*\)/g;
+
+/** Packages that are not bundled for the browser: Node's own, the test runner's, and type-only ones. */
+const SKIPPED = /^(node:|virtual:|vitest($|\/)|@vitest\/|hast$)/;
+
+const SOURCE = /\.tsx?$/;
+const TEST = /\.test\.tsx?$/;
+
+/** The package modules imported in one module's text. */
+export function importsIn(source: string): string[] {
+  const found: string[] = [];
+  for (const match of source.matchAll(IMPORT)) {
+    const name = match[1] ?? match[2];
+    if (name && !SKIPPED.test(name) && !/\.css$|\?/.test(name)) found.push(name);
+  }
+  return found;
+}
+
+/** Every package module imported under `dir`, outside test files, sorted. */
+export function packageImports(dir: string): string[] {
+  const found = new Set<string>();
+  const walk = (folder: string): void => {
+    for (const entry of readdirSync(folder, { withFileTypes: true })) {
+      const path = join(folder, entry.name);
+      if (entry.isDirectory()) walk(path);
+      else if (SOURCE.test(entry.name) && !TEST.test(entry.name)) {
+        for (const name of importsIn(readFileSync(path, 'utf8'))) found.add(name);
+      }
+    }
+  };
+  walk(dir);
+  return [...found].sort();
+}

app/src-tauri/Cargo.toml

@@ -28,6 +28,8 @@ serde.workspace = true
 serde_json.workspace = true
 sha2.workspace = true
 tauri = { version = "2", features = [] }
+# Web images for paste (Phase 4 ARCHITECTURE.md section 12.2), with the same TLS stack and version as the updater.
+ureq = { version = "3.4.2", default-features = false, features = ["native-tls-no-default"] }
 
 [target.'cfg(windows)'.dependencies]
 webview2-com = "0.39.1"
@@ -39,14 +41,18 @@ features = [
   "Networking_Connectivity",
   "UI_ViewManagement",
   "Win32_Foundation",
+  "Win32_Globalization",
   "Win32_Graphics_Dwm",
   "Win32_Graphics_Gdi",
+  "Win32_Graphics_Imaging",
   "Win32_Security",
   "Win32_Storage_FileSystem",
   "Win32_System_Com",
   "Win32_System_Com_StructuredStorage",
   "Win32_System_DataExchange",
   "Win32_System_LibraryLoader",
+  "Win32_System_Memory",
+  "Win32_System_Ole",
   "Win32_System_Registry",
   "Win32_System_Threading",
   "Win32_System_Variant",

app/src-tauri/capabilities/default.json

@@ -34,6 +34,29 @@
     "allow-updater-unskip",
     "allow-updater-go-back",
     "allow-notes-snapshot-load",
-    "allow-notes-snapshot-save"
+    "allow-notes-snapshot-save",
+    "allow-page-open",
+    "allow-page-apply",
+    "allow-page-undo",
+    "allow-page-redo",
+    "allow-page-save-now",
+    "allow-page-close",
+    "allow-history-list",
+    "allow-history-open",
+    "allow-history-restore",
+    "allow-history-restore-blocks",
+    "allow-history-name",
+    "allow-clipboard-facts",
+    "allow-clipboard-read",
+    "allow-image-import",
+    "allow-image-import-url",
+    "allow-image-import-clip",
+    "allow-spell-languages",
+    "allow-spell-check",
+    "allow-spell-suggest",
+    "allow-spell-add-word",
+    "allow-spell-remove-word",
+    "allow-speech-voices",
+    "allow-speech-synthesize"
   ]
 }