fix: restore PDF pen capture and overhaul sticky/pens/pages

Reinstall PenCaptureBinding so stylus ink hits again; keep finger Listener translucent under pinch; page-anchor sticky with drag/resize; OneNote pen slots (brush+width+color); blank-note multi-page; default side button to hold-select-text.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/editor/canvas/pen_note_screen.dart

@@ -19,6 +19,7 @@ import '../engine/stroke_model.dart';
 import '../persistence/sidecar_repository.dart';
 import '../input/pen_config.dart';
 import '../input/pen_input_service.dart';
+import '../input/pen_slots.dart';
 import '../input/pressure_curve.dart' show kNaturalPressureGamma;
 import '../layout/viewport_fit.dart';
 import '../notebook/ink_stroke_adapter.dart';
@@ -42,47 +43,42 @@ class PenNoteScreen extends ConsumerStatefulWidget {
 class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
   static const _uuid = Uuid();
 
-  /// Live strokes in normalized coords (the canvas source of truth). Persisted
-  /// back to the note as InkStroke via the adapter on save.
-  List<PenStroke> _strokes = const [];
+  /// Per-page live strokes in normalized coords (the canvas source of truth).
+  final Map<int, List<PenStroke>> _strokesByPage = {};
 
-  /// Snapshot-before-change undo/redo of the stroke list.
+  /// Current page index (0-based) and total page count (min 1).
+  int _pageIndex = 0;
+  int _pageCount = 1;
+
+  /// Snapshot-before-change undo/redo scoped to the current page. Cleared on
+  /// page switch so undo never crosses pages.
   final List<List<PenStroke>> _undo = [];
   final List<List<PenStroke>> _redo = [];
 
+  bool _showPageScrubber = false;
+  double? _pageScrub;
+
   /// The single active-tool state (shared model across the 3 editors).
   EditorToolKind _tool = EditorToolKind.brush;
 
-  /// Selected brush for the BRUSH tool (fountain/ballpoint/pencil). The
-  /// highlighter tool always uses [BrushKind.highlighter]; local state only for
-  /// this increment (not persisted — see TODO(brush-persist-selection)).
-  BrushKind _penBrush = BrushKind.fountainPen;
-
   /// Selected shape for the SHAPE tool.
   ShapeKind _shapeKind = ShapeKind.line;
 
   /// Index of the currently selected committed stroke (SELECT tool), or null.
   int? _selectedStroke;
 
-  /// rnote-style per-brush color memory: each brush (and the highlighter)
-  /// remembers its own color. Selecting a brush restores its color; picking a
-  /// color updates ONLY the active brush's entry. In-memory only for this
-  /// increment (TODO(brush-color-persist)).
-  final Map<BrushKind, Color> _brushColors = {
-    BrushKind.fountainPen: Colors.black,
-    BrushKind.ballpoint: Colors.blue,
-    BrushKind.pencil: Colors.green,
-    BrushKind.highlighter: Colors.orange,
-  };
+  /// Highlighter keeps its own color (not a pen slot).
+  Color _highlighterColor = Colors.orange;
 
-  /// The brush whose color the color-dots edit: the highlighter when the
-  /// highlighter tool is active, otherwise the selected pen brush.
-  BrushKind get _activeColorBrush => _tool == EditorToolKind.highlighter
-      ? BrushKind.highlighter
-      : _penBrush;
+  /// Active pen brush from the selected slot (fallback until slots load).
+  BrushKind get _penBrush =>
+      _penSlots?.active.brush ?? BrushKind.fountainPen;
 
-  /// The active drawing color (the active brush's remembered color).
-  Color get _color => _brushColors[_activeColorBrush] ?? Colors.black;
+  /// Active drawing color: highlighter tool uses [_highlighterColor], else the
+  /// active pen slot's color.
+  Color get _color => _tool == EditorToolKind.highlighter
+      ? _highlighterColor
+      : (_penSlots?.active.color ?? Colors.black);
 
   /// The page-background template painted behind the ink (rnote-style). Default
   /// blank; persisted per-notebook in the sidecar.
@@ -96,23 +92,28 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
   /// Persistence flows through this note's `notebook.badnote.json` sidecar.
   String? _notePath;
 
-  /// Per-file sidecar persistence sink (strokes page 0 + title), debounced and
-  /// atomic — replaces the old SQLite Note/noteListProvider write path here.
+  /// Per-file sidecar persistence sink (strokes + pageCount + title), debounced
+  /// and atomic — replaces the old SQLite Note/noteListProvider write path here.
   SidecarRepository? _repo;
 
-  /// Page index a standalone note's strokes live under in the sidecar.
-  static const int _notePageIndex = 0;
-
   final TextEditingController _titleController = TextEditingController();
 
   PenConfigController? _penConfig;
+  PenSlotsController? _penSlots;
   final TransformationController _transform = TransformationController();
 
-  static const double _penWidthFraction = 0.006;
   static const double _highlighterWidthFraction = 0.02;
 
   static const List<Color> _palette = kInkPalette;
 
+  /// Current page's stroke list (PenCanvas source of truth).
+  List<PenStroke> get _strokes =>
+      _strokesByPage.putIfAbsent(_pageIndex, () => <PenStroke>[]);
+
+  set _strokes(List<PenStroke> value) {
+    _strokesByPage[_pageIndex] = value;
+  }
+
   @override
   void initState() {
     super.initState();
@@ -123,7 +124,7 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
       _titleController.text = note.title;
       // Seed from the in-memory note's strokes (e.g. tests) until the sidecar
       // load resolves and (if present) overrides with persisted strokes.
-      _strokes = penStrokesFromInk(note.strokes, kNoteLogicalPage);
+      _strokesByPage[0] = penStrokesFromInk(note.strokes, kNoteLogicalPage);
     } else {
       _titleController.text = 'Untitled';
     }
@@ -131,9 +132,8 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
     if (_notePath != null) _initPersistence(_notePath!);
   }
 
-  /// Open the note's `notebook.badnote.json` sidecar and, if it holds persisted
-  /// strokes / a title, hydrate the canvas from them. Strokes load as page-0
-  /// [EditorStroke]s converted to [PenStroke] (mirrors the PDF editor).
+  /// Open the note's `notebook.badnote.json` sidecar and hydrate every page of
+  /// strokes plus title / background / pageCount.
   Future<void> _initPersistence(String notePath) async {
     final repo = await SidecarRepository.open(notePath, docType: 'notebook');
     if (!mounted) {
@@ -141,19 +141,47 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
       return;
     }
     _repo = repo;
-    final loaded = repo.loadedStrokes[_notePageIndex];
     setState(() {
-      if (loaded != null && loaded.isNotEmpty) {
-        _strokes = [for (final es in loaded) _penStrokeFromEditor(es)];
-      }
-      final title = repo.loadedTitle;
-      if (title != null && title.isNotEmpty) {
-        _titleController.text = title;
-      }
-      _background = noteBackgroundFromName(repo.loadedBackground);
+      _hydrateFromRepo(repo);
     });
   }
 
+  /// Load all pages from [repo]. pageCount = max(sidecar.pageCount ?? 1,
+  /// highest stroke key + 1). Persists pageCount when the sidecar omitted it.
+  void _hydrateFromRepo(SidecarRepository repo) {
+    // Only replace in-memory strokes when the sidecar actually holds ink —
+    // otherwise keep the seed from widget.note (widget tests / cold open).
+    if (repo.loadedStrokes.isNotEmpty) {
+      _strokesByPage.clear();
+      for (final entry in repo.loadedStrokes.entries) {
+        if (entry.value.isEmpty) continue;
+        _strokesByPage[entry.key] = [
+          for (final es in entry.value) _penStrokeFromEditor(es),
+        ];
+      }
+    }
+    final fromKeys = _strokesByPage.isEmpty
+        ? 1
+        : _strokesByPage.keys.reduce((a, b) => a > b ? a : b) + 1;
+    final declared = repo.sidecar.pageCount ?? 1;
+    _pageCount = declared > fromKeys ? declared : fromKeys;
+    if (_pageCount < 1) _pageCount = 1;
+    if (_pageIndex >= _pageCount) _pageIndex = _pageCount - 1;
+    _undo.clear();
+    _redo.clear();
+    _selectedStroke = null;
+
+    final title = repo.loadedTitle;
+    if (title != null && title.isNotEmpty) {
+      _titleController.text = title;
+    }
+    _background = noteBackgroundFromName(repo.loadedBackground);
+
+    if (repo.sidecar.pageCount != _pageCount) {
+      repo.schedulePageCountSave(_pageCount);
+    }
+  }
+
   /// EditorStroke → live PenStroke (mirror of the PDF editor's loader). Brush
   /// is persisted on the EditorStroke now, so carry it through; old sidecars
   /// without the field decode to fountainPen (back-compat default).
@@ -170,15 +198,23 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
       );
 
   Future<void> _initPenConfig() async {
-    final controller = await PenConfigController.load();
+    final results = await Future.wait([
+      PenConfigController.load(),
+      PenSlotsController.load(),
+    ]);
+    final config = results[0] as PenConfigController;
+    final slots = results[1] as PenSlotsController;
     if (!mounted) {
-      controller.dispose();
+      config.dispose();
+      slots.dispose();
       return;
     }
-    controller.addListener(_onPenConfigChanged);
+    config.addListener(_onPenConfigChanged);
+    slots.addListener(_onPenSlotsChanged);
     setState(() {
-      _penConfig = controller;
-      _allowFingerDrawing = controller.value.fingerDrawing;
+      _penConfig = config;
+      _penSlots = slots;
+      _allowFingerDrawing = config.value.fingerDrawing;
     });
   }
 
@@ -186,6 +222,10 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
     if (mounted) setState(() {});
   }
 
+  void _onPenSlotsChanged() {
+    if (mounted) setState(() {});
+  }
+
   @override
   void dispose() {
     // Flush any pending sidecar write before tearing down (atomic write
@@ -197,6 +237,8 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
     }
     _penConfig?.removeListener(_onPenConfigChanged);
     _penConfig?.dispose();
+    _penSlots?.removeListener(_onPenSlotsChanged);
+    _penSlots?.dispose();
     _titleController.dispose();
     _transform.dispose();
     super.dispose();
@@ -256,11 +298,60 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
 
   // ── Persistence ──────────────────────────────────────────────────────────────
 
-  /// Persist the live pen strokes + title to the note's `notebook.badnote.json`
-  /// sidecar (strokes as page-0 [EditorStroke]s; title via the sidecar's title
-  /// field), debounced/atomic via [SidecarRepository]. Creates the notebook
-  /// folder lazily on first save when the screen was opened without a path.
-  /// Refreshes the home list and triggers local OCR for search indexing.
+  /// Schedule a stroke save for [pageIndex] (defaults to current) without
+  /// flushing. Used when switching pages so ink isn't lost mid-edit.
+  void _schedulePageStrokeSave([int? pageIndex]) {
+    final repo = _repo;
+    if (repo == null) return;
+    final idx = pageIndex ?? _pageIndex;
+    final pageStrokes = _strokesByPage[idx] ?? const <PenStroke>[];
+    final editorStrokes = <EditorStroke>[
+      for (final s in pageStrokes) EditorStroke.fromPenStroke(s),
+    ];
+    repo.scheduleStrokeSave(idx, editorStrokes);
+  }
+
+  void _goToPage(int index) {
+    if (_pageCount < 1) return;
+    final clamped = index.clamp(0, _pageCount - 1);
+    if (clamped == _pageIndex) {
+      setState(() {
+        _pageScrub = null;
+        _showPageScrubber = false;
+      });
+      return;
+    }
+    _schedulePageStrokeSave(_pageIndex);
+    setState(() {
+      _pageIndex = clamped;
+      _pageScrub = null;
+      _showPageScrubber = false;
+      _selectedStroke = null;
+      _undo.clear();
+      _redo.clear();
+    });
+  }
+
+  void _addPage() {
+    _schedulePageStrokeSave(_pageIndex);
+    setState(() {
+      _pageCount += 1;
+      _pageIndex = _pageCount - 1;
+      _strokesByPage.putIfAbsent(_pageIndex, () => <PenStroke>[]);
+      _pageScrub = null;
+      _showPageScrubber = false;
+      _selectedStroke = null;
+      _undo.clear();
+      _redo.clear();
+      _dirty = true;
+    });
+    _repo?.schedulePageCountSave(_pageCount);
+  }
+
+  /// Persist the live pen strokes + title + pageCount to the note's
+  /// `notebook.badnote.json` sidecar, debounced/atomic via [SidecarRepository].
+  /// Creates the notebook folder lazily on first save when the screen was opened
+  /// without a path. Refreshes the home list and triggers local OCR for search.
   Future<void> _save() async {
     if (!_dirty) return;
     final notifier = ref.read(noteListProvider.notifier);
@@ -284,12 +375,16 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
     }
     final repo = _repo!;
 
-    final editorStrokes = <EditorStroke>[
-      for (final s in _strokes) EditorStroke.fromPenStroke(s),
-    ];
     repo.scheduleTitleSave(title);
     repo.scheduleBackgroundSave(_background.name);
-    repo.scheduleStrokeSave(_notePageIndex, editorStrokes);
+    repo.schedulePageCountSave(_pageCount);
+    // Persist every page that has (or had) strokes in this session. Empty pages
+    // clear their sidecar entry via scheduleStrokeSave.
+    for (final idx in _strokesByPage.keys.toList()..sort()) {
+      _schedulePageStrokeSave(idx);
+    }
+    // Also ensure the current page is written even if never putIfAbsent'd empty.
+    _schedulePageStrokeSave(_pageIndex);
     await repo.flush();
 
     // Refresh the home list so the title/recency update is visible on return.
@@ -297,10 +392,12 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
     if (!mounted) return;
     setState(() => _dirty = false);
 
-    // Build an in-memory Note (id = note path) for OCR/FTS indexing only.
+    // Build an in-memory Note (id = note path) for OCR/FTS indexing only —
+    // flatten all pages into one stroke list.
     final inkStrokes = <InkStroke>[
-      for (final s in _strokes)
-        inkStrokeFromPen(s, kNoteLogicalPage, id: _uuid.v4(), createdAt: now),
+      for (final page in _strokesByPage.values)
+        for (final s in page)
+          inkStrokeFromPen(s, kNoteLogicalPage, id: _uuid.v4(), createdAt: now),
     ];
     _runLocalOcr(Note(
       id: _notePath!,
@@ -341,7 +438,7 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
 
   double get _strokeWidth => _tool == EditorToolKind.highlighter
       ? (_penConfig?.value.highlighterWidth ?? _highlighterWidthFraction)
-      : (_penConfig?.value.penWidth ?? _penWidthFraction);
+      : (_penSlots?.active.width ?? 0.006);
 
   // ── SELECT tool: select / move / delete (reuses the undo stacks) ─────────────
 
@@ -416,13 +513,20 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
                 ),
               ),
             ),
-            // Title pill (bottom-center).
+            // Title + page chrome (bottom-center).
             SafeArea(
               child: Align(
                 alignment: Alignment.bottomCenter,
                 child: Padding(
                   padding: const EdgeInsets.only(bottom: 16),
-                  child: _buildTitlePill(cs),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      _buildPagePill(cs),
+                      const SizedBox(height: 8),
+                      _buildTitlePill(cs),
+                    ],
+                  ),
                 ),
               ),
             ),
@@ -520,160 +624,175 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
       borderRadius: BorderRadius.circular(28),
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            // OneNote-style: each pen is its own slot with remembered color.
-            for (final b in kPenToolBrushes)
-              PenSlotButton(
-                kind: b,
-                selected: _tool == EditorToolKind.brush && _penBrush == b,
-                color: _brushColors[b] ?? Colors.black,
-                tooltip: brushLabelEn(b),
-                onPressed: () => setState(() {
-                  _penBrush = b;
-                  _tool = EditorToolKind.brush;
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // OneNote-style: each pen slot restores brush + color + thickness.
+              for (final slot in _penSlots?.slots ?? kDefaultPenSlots())
+                PenSlotButton(
+                  kind: slot.brush,
+                selected: _tool == EditorToolKind.brush &&
+                    (_penSlots?.activeId ?? 'slot_0') == slot.id,
+                  color: slot.color,
+                  widthHint: slot.width,
+                  tooltip: brushLabelEn(slot.brush),
+                  onPressed: () {
+                    _penSlots?.select(slot.id);
+                    setState(() => _tool = EditorToolKind.brush);
+                  },
+                ),
+              ToolButton(
+                icon: Icons.brush_outlined,
+                selected: _tool == EditorToolKind.highlighter,
+                tooltip: 'Highlighter',
+                onPressed: () =>
+                    setState(() => _tool = EditorToolKind.highlighter),
+              ),
+              ToolButton(
+                icon: Icons.cleaning_services_outlined,
+                selected: _tool == EditorToolKind.eraser,
+                tooltip: 'Eraser',
+                onPressed: () => setState(() => _tool = EditorToolKind.eraser),
+              ),
+              // Select (cursor) + shape tools.
+              ToolButton(
+                icon: Icons.ads_click,
+                selected: _tool == EditorToolKind.select,
+                tooltip: 'Select',
+                onPressed: () => setState(() => _tool = EditorToolKind.select),
+              ),
+              ShapePickerButton(
+                selected: _shapeKind,
+                active: _tool == EditorToolKind.shape,
+                tooltip: 'Shape',
+                labelFor: shapeLabelEn,
+                onActivate: () => setState(() => _tool = EditorToolKind.shape),
+                onSelected: (s) => setState(() {
+                  _shapeKind = s;
+                  _tool = EditorToolKind.shape;
                 }),
               ),
-            ToolButton(
-              icon: Icons.brush_outlined,
-              selected: _tool == EditorToolKind.highlighter,
-              tooltip: 'Highlighter',
-              onPressed: () =>
-                  setState(() => _tool = EditorToolKind.highlighter),
-            ),
-            ToolButton(
-              icon: Icons.cleaning_services_outlined,
-              selected: _tool == EditorToolKind.eraser,
-              tooltip: 'Eraser',
-              onPressed: () => setState(() => _tool = EditorToolKind.eraser),
-            ),
-            // Select (cursor) + shape tools.
-            ToolButton(
-              icon: Icons.ads_click,
-              selected: _tool == EditorToolKind.select,
-              tooltip: 'Select',
-              onPressed: () => setState(() => _tool = EditorToolKind.select),
-            ),
-            ShapePickerButton(
-              selected: _shapeKind,
-              active: _tool == EditorToolKind.shape,
-              tooltip: 'Shape',
-              labelFor: shapeLabelEn,
-              onActivate: () => setState(() => _tool = EditorToolKind.shape),
-              onSelected: (s) => setState(() {
-                _shapeKind = s;
-                _tool = EditorToolKind.shape;
-              }),
-            ),
-            if (_tool == EditorToolKind.select && _selectedStroke != null)
+              if (_tool == EditorToolKind.select && _selectedStroke != null)
+                ToolButton(
+                  icon: Icons.delete_outline,
+                  selected: false,
+                  tooltip: 'Delete selection',
+                  onPressed: _deleteSelected,
+                ),
+              PaletteDivider(cs: cs),
               ToolButton(
-                icon: Icons.delete_outline,
+                icon: Icons.undo,
                 selected: false,
-                tooltip: 'Delete selection',
-                onPressed: _deleteSelected,
+                tooltip: 'Undo',
+                onPressed: _undo.isNotEmpty ? _performUndo : null,
               ),
-            PaletteDivider(cs: cs),
-            ToolButton(
-              icon: Icons.undo,
-              selected: false,
-              tooltip: 'Undo',
-              onPressed: _undo.isNotEmpty ? _performUndo : null,
-            ),
-            ToolButton(
-              icon: Icons.redo,
-              selected: false,
-              tooltip: 'Redo',
-              onPressed: _redo.isNotEmpty ? _performRedo : null,
-            ),
-            PaletteDivider(cs: cs),
-            for (final c in _palette) _colorDot(c, cs),
-            PaletteDivider(cs: cs),
-            // Page-background template picker (rnote-style: blank / dots / ruled
-            // / grid / cornell). Persists per-notebook in the sidecar.
-            PopupMenuButton<NoteBackground>(
-              tooltip: 'Page background',
-              initialValue: _background,
-              onSelected: (b) {
-                setState(() {
-                  _background = b;
-                  _dirty = true;
-                });
-              },
-              itemBuilder: (context) => [
-                for (final b in NoteBackground.values)
-                  PopupMenuItem<NoteBackground>(
-                    value: b,
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Icon(noteBackgroundIcon(b), size: 20),
-                        const SizedBox(width: 10),
-                        Text(noteBackgroundLabel(b)),
-                        if (b == _background) ...[
-                          const SizedBox(width: 8),
-                          Icon(Icons.check, size: 18, color: cs.primary),
+              ToolButton(
+                icon: Icons.redo,
+                selected: false,
+                tooltip: 'Redo',
+                onPressed: _redo.isNotEmpty ? _performRedo : null,
+              ),
+              PaletteDivider(cs: cs),
+              for (final c in _palette) _colorDot(c, cs),
+              ThicknessPickerButton(
+                width: _penSlots?.active.width ?? 0.006,
+                onChanged: (w) => _penSlots?.setActiveWidth(w),
+              ),
+              PaletteDivider(cs: cs),
+              // Page-background template picker (rnote-style: blank / dots / ruled
+              // / grid / cornell). Persists per-notebook in the sidecar.
+              PopupMenuButton<NoteBackground>(
+                tooltip: 'Page background',
+                initialValue: _background,
+                onSelected: (b) {
+                  setState(() {
+                    _background = b;
+                    _dirty = true;
+                  });
+                },
+                itemBuilder: (context) => [
+                  for (final b in NoteBackground.values)
+                    PopupMenuItem<NoteBackground>(
+                      value: b,
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Icon(noteBackgroundIcon(b), size: 20),
+                          const SizedBox(width: 10),
+                          Text(noteBackgroundLabel(b)),
+                          if (b == _background) ...[
+                            const SizedBox(width: 8),
+                            Icon(Icons.check, size: 18, color: cs.primary),
+                          ],
                         ],
-                      ],
+                      ),
                     ),
+                ],
+                child: Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Icon(
+                        noteBackgroundIcon(_background),
+                        size: 22,
+                        color: cs.onSurfaceVariant,
+                      ),
+                      Icon(
+                        Icons.arrow_drop_down,
+                        size: 18,
+                        color: cs.onSurfaceVariant,
+                      ),
+                    ],
                   ),
-              ],
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Icon(
-                      noteBackgroundIcon(_background),
-                      size: 22,
-                      color: cs.onSurfaceVariant,
-                    ),
-                    Icon(
-                      Icons.arrow_drop_down,
-                      size: 18,
-                      color: cs.onSurfaceVariant,
-                    ),
-                  ],
                 ),
               ),
-            ),
-            PaletteDivider(cs: cs),
-            ToolButton(
-              icon: _allowFingerDrawing ? Icons.touch_app : Icons.do_not_touch,
-              selected: _allowFingerDrawing,
-              tooltip: _allowFingerDrawing
-                  ? 'Finger drawing ON'
-                  : 'Finger drawing OFF (pen only)',
-              onPressed: _toggleFingerDrawing,
-            ),
-            ToolButton(
-              icon: Icons.settings_outlined,
-              selected: false,
-              tooltip: 'Pen settings (width, pressure, eraser…)',
-              onPressed: _penConfig != null
-                  ? () => showPenSettingsSheet(context, _penConfig!)
-                  : null,
-            ),
-          ],
+              PaletteDivider(cs: cs),
+              ToolButton(
+                icon:
+                    _allowFingerDrawing ? Icons.touch_app : Icons.do_not_touch,
+                selected: _allowFingerDrawing,
+                tooltip: _allowFingerDrawing
+                    ? 'Finger drawing ON'
+                    : 'Finger drawing OFF (pen only)',
+                onPressed: _toggleFingerDrawing,
+              ),
+              ToolButton(
+                icon: Icons.settings_outlined,
+                selected: false,
+                tooltip: 'Pen settings (width, pressure, eraser…)',
+                onPressed: _penConfig != null
+                    ? () => showPenSettingsSheet(context, _penConfig!)
+                    : null,
+              ),
+            ],
+          ),
         ),
       ),
     );
   }
 
   Widget _colorDot(Color c, ColorScheme cs) {
-    // Selected against the ACTIVE brush's remembered color. A color tap updates
-    // only that brush's entry (rnote per-brush color memory).
+    // Selected against the ACTIVE slot (or highlighter) color. A color tap
+    // updates only the active slot / highlighter — not other slots.
     final selected = _color.toARGB32() == c.toARGB32() &&
         _tool != EditorToolKind.eraser &&
         _tool != EditorToolKind.select;
     return GestureDetector(
-      onTap: () => setState(() {
+      onTap: () {
         if (_tool == EditorToolKind.eraser ||
             _tool == EditorToolKind.select) {
-          _tool = EditorToolKind.brush;
+          setState(() => _tool = EditorToolKind.brush);
         }
-        _brushColors[_activeColorBrush] = c;
-      }),
+        if (_tool == EditorToolKind.highlighter) {
+          setState(() => _highlighterColor = c);
+        } else {
+          _penSlots?.setActiveColor(c);
+        }
+      },
       child: AnimatedContainer(
         duration: const Duration(milliseconds: 150),
         margin: const EdgeInsets.symmetric(horizontal: 3),
@@ -715,4 +834,88 @@ class _PenNoteScreenState extends ConsumerState<PenNoteScreen> {
       ),
     );
   }
+
+  /// Compact page chrome: prev / "n / total" / next, plus add-page. Tapping the
+  /// center label toggles a scrubber Slider when there is more than one page.
+  Widget _buildPagePill(ColorScheme cs) {
+    final total = _pageCount;
+    final scrub = _pageScrub;
+    final shown = (scrub ?? (_pageIndex + 1).toDouble()).round();
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (total > 1 && _showPageScrubber)
+          Container(
+            margin: const EdgeInsets.only(bottom: 8),
+            constraints: const BoxConstraints(maxWidth: 420),
+            child: Material(
+              color: cs.surfaceContainerHigh,
+              elevation: 3,
+              borderRadius: BorderRadius.circular(28),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: Slider(
+                  min: 1,
+                  max: total.toDouble(),
+                  value: (scrub ?? (_pageIndex + 1).toDouble())
+                      .clamp(1, total.toDouble()),
+                  divisions: total > 1 ? total - 1 : null,
+                  onChanged: (v) => setState(() => _pageScrub = v),
+                  onChangeEnd: (v) {
+                    setState(() => _pageScrub = v);
+                    _goToPage(v.round() - 1);
+                  },
+                ),
+              ),
+            ),
+          ),
+        Material(
+          color: cs.surfaceContainerHigh,
+          elevation: 3,
+          borderRadius: BorderRadius.circular(28),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                IconButton(
+                  tooltip: 'Previous page',
+                  icon: const Icon(Icons.chevron_left),
+                  onPressed: _pageIndex > 0
+                      ? () => _goToPage(_pageIndex - 1)
+                      : null,
+                ),
+                TextButton(
+                  onPressed: () {
+                    if (total > 1) {
+                      setState(() => _showPageScrubber = !_showPageScrubber);
+                    }
+                  },
+                  child: Text(
+                    '$shown / $total',
+                    style: TextStyle(
+                      color: cs.onSurface,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+                IconButton(
+                  tooltip: 'Next page',
+                  icon: const Icon(Icons.chevron_right),
+                  onPressed: _pageIndex < total - 1
+                      ? () => _goToPage(_pageIndex + 1)
+                      : null,
+                ),
+                IconButton(
+                  tooltip: 'Add page',
+                  icon: const Icon(Icons.add),
+                  onPressed: _addPage,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
 }