diff --git a/.github/workflows/benchmark.yml b/.github/workflows/benchmark.yml
index b7368d5..265f831 100644
--- a/.github/workflows/benchmark.yml
+++ b/.github/workflows/benchmark.yml
@@ -32,6 +32,8 @@ jobs:
     runs-on: ubuntu-22.04
     # Skip on the weekly schedule — that's for the full-benchmark job only
     if: github.event_name != 'schedule'
+    permissions:
+      pull-requests: write
 
     steps:
       - name: Checkout
@@ -112,10 +114,13 @@ jobs:
       - name: Post PR comment
         if: always() && github.event_name == 'pull_request'
         uses: actions/github-script@v7
+        env:
+          BENCH_EXIT_CODE: ${{ steps.bench.outputs.exit_code }}
+          BENCH_SUMMARY: ${{ steps.bench.outputs.summary }}
         with:
           script: |
-            const exitCode = '${{ steps.bench.outputs.exit_code }}';
-            const summary  = `${{ steps.bench.outputs.summary }}`;
+            const exitCode = process.env.BENCH_EXIT_CODE || '0';
+            const summary  = process.env.BENCH_SUMMARY  || '';
             const passed   = exitCode === '0';
             const icon     = passed ? '✅' : '❌';
             const headline = passed
diff --git a/.github/workflows/golden.yml b/.github/workflows/golden.yml
index 3ae8008..8585582 100644
--- a/.github/workflows/golden.yml
+++ b/.github/workflows/golden.yml
@@ -38,6 +38,8 @@ jobs:
   golden:
     name: Golden Tests
     runs-on: ubuntu-22.04   # pinned — do NOT change to ubuntu-latest
+    permissions:
+      pull-requests: write
 
     steps:
       - name: Checkout code
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index cb5c067..e7ae61f 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -127,21 +127,24 @@ jobs:
           needs.path-filter.outputs.changed_markdown == 'true' ||
           needs.path-filter.outputs.changed_core == 'true'
         working-directory: packages/hyper_render_markdown
-        run: flutter test --no-pub
+        run: |
+          if [ -d test ]; then flutter test --no-pub; else echo "No tests in this package — skipping."; fi
 
       - name: Test hyper_render_highlight
         if: >-
           needs.path-filter.outputs.changed_highlight == 'true' ||
           needs.path-filter.outputs.changed_core == 'true'
         working-directory: packages/hyper_render_highlight
-        run: flutter test --no-pub
+        run: |
+          if [ -d test ]; then flutter test --no-pub; else echo "No tests in this package — skipping."; fi
 
       - name: Test hyper_render_clipboard
         if: >-
           needs.path-filter.outputs.changed_clipboard == 'true' ||
           needs.path-filter.outputs.changed_core == 'true'
         working-directory: packages/hyper_render_clipboard
-        run: flutter test --no-pub
+        run: |
+          if [ -d test ]; then flutter test --no-pub; else echo "No tests in this package — skipping."; fi
 
       - name: Upload test results
         if: failure()
diff --git a/.pubignore b/.pubignore
index f586661..f98b86e 100644
--- a/.pubignore
+++ b/.pubignore
@@ -43,6 +43,16 @@ scripts/
 # Internal publish helpers
 pubspec.yaml.backup
 pubspec_publish_ready.yaml
+pubspec_dev.yaml
+
+# Flutter .metadata files (auto-generated, not useful to consumers)
+.metadata
+
+# Internal archive / historical comparison docs
+archive/
+
+# Coverage artifacts
+coverage/
 
 # IDE files
 *.iml
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 393c8f3..dd86993 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.2.2] - 2026-04-02
+
+### 🐛 Bug Fixes
+
+- **Android build failure with modern compileSdk** (`example/android/build.gradle.kts`): `irondash_engine_context 0.5.5` was compiled against android-31 but its transitive `androidx.fragment:1.7.1` dependency has `minCompileSdk=34`, causing AGP 8's `checkAarMetadata` to block the build. Added a `subprojects { afterEvaluate { compileSdk = 35 } }` override in the example's root Gradle file. README now documents the same one-line workaround for app-level projects. ([#5](https://github.com/brewkits/hyper_render/issues/5))
+- **SVG invisible with `sanitize: true`** (`html_sanitizer.dart`): `<svg>` was not in `defaultAllowedTags` so the sanitizer unwrapped it, destroying the SVG structure. Added an atomic SVG sanitization path that strips `<script>` and dangerous attributes while preserving all structural SVG elements (`path`, `circle`, `g`, `use`, etc.).
+- **`selectable` toggle ignored after build** (`hyper_viewer.dart`): Toggling `selectable` from `false` → `true` never created `VirtualizedSelectionController`, and `true` → `false` never disposed it. Fixed in `didUpdateWidget`.
+- **Deep-link tap silently blocked** (`hyper_viewer.dart`): `_safeOnLinkTap` only checked `widget.allowedCustomSchemes` but ignored `renderConfig.extraLinkSchemes`, causing deep-links registered via `HyperRenderConfig` to be silently dropped. Both sources are now consulted.
+- **CSS change didn't invalidate section cache** (`hyper_viewer.dart`): `_hashSection` hashes only text content, so a `customCss` change that alters layout/appearance would incorrectly reuse cached sections. `_sectionHashes` is now reset whenever `customCss` changes in `didUpdateWidget`.
+- **Markdown/Delta virtualized/paged mode rendered as single section** (`hyper_viewer.dart`): The sync fallback path wrapped the entire parsed document as one section, defeating virtualization. Added `_splitIntoSections()` to chunk Markdown/Delta documents at block boundaries, matching the HTML isolate path.
+- **`renderConfig` change only partially detected** (`hyper_viewer.dart`): `didUpdateWidget` compared only `virtualizationChunkSize` instead of the full `HyperRenderConfig`. Now uses full value equality (available since the `operator==` fix) so any config change triggers a re-parse.
+- **CSS float class names not detected** (`html_adapter.dart`): `_containsFloatChild` missed Bootstrap/Tailwind float class names (`float-left`, `pull-right`, `alignleft`, etc.), causing premature section splits after float-containing blocks. Common class patterns are now detected heuristically.
+
 ## [1.2.1] - 2026-03-31
 
 ### 🏗️ Maintenance
diff --git a/README.md b/README.md
index 50f3639..e8404e8 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@
 
 ```yaml
 dependencies:
-  hyper_render: ^1.2.1
+  hyper_render: ^1.2.2
 ```
 
 ```dart
@@ -53,6 +53,21 @@ HyperViewer(
 
 Zero configuration. XSS sanitization is **on by default**.
 
+> **Android note:** `hyper_render` depends on `super_clipboard` which transitively pulls in `irondash_engine_context`. That library was compiled against Android SDK 31, but its `androidx.fragment:1.7.1` dependency requires `compileSdk ≥ 34`. Add this one-time workaround to your `android/build.gradle.kts`:
+>
+> ```kotlin
+> // android/build.gradle.kts  (root — not app/build.gradle.kts)
+> subprojects {
+>     afterEvaluate {
+>         extensions.findByType(com.android.build.gradle.LibraryExtension::class.java)?.apply {
+>             compileSdk = 35
+>         }
+>     }
+> }
+> ```
+>
+> This overrides `compileSdk` for all library sub-projects so AGP's `checkAarMetadata` passes. Tracked in [#5](https://github.com/brewkits/hyper_render/issues/5).
+
 ---
 
 ## 🏗️ Why Switch? The Architecture Argument
diff --git a/example/android/build.gradle.kts b/example/android/build.gradle.kts
index dbee657..4d2adaf 100644
--- a/example/android/build.gradle.kts
+++ b/example/android/build.gradle.kts
@@ -19,6 +19,19 @@ subprojects {
     project.evaluationDependsOn(":app")
 }
 
+// Workaround: irondash_engine_context 0.5.5 was compiled against android-31 but
+// transitively requires androidx.fragment:1.7.1 which has minCompileSdk=34.
+// AGP 8 checkAarMetadata blocks the build. Override compileSdk for all library
+// subprojects so the check passes.
+// Tracked: https://github.com/brewkits/hyper_render/issues/5
+subprojects {
+    afterEvaluate {
+        extensions.findByType(com.android.build.gradle.LibraryExtension::class.java)?.apply {
+            compileSdk = 35
+        }
+    }
+}
+
 tasks.register<Delete>("clean") {
     delete(rootProject.layout.buildDirectory)
 }
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 2c85e40..75ad1e3 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -130,8 +130,8 @@ class DemoHomePage extends StatelessWidget {
             subtitle:
                 'Full e-book solution with paged mode, themes, and library management',
             color: Colors.deepPurple,
-            onTap: () => Navigator.push(
-                context, MaterialPageRoute(builder: (_) => const LibraryScreen())),
+            onTap: () => Navigator.push(context,
+                MaterialPageRoute(builder: (_) => const LibraryScreen())),
           ),
           // ── Layout ────────────────────────────────────────────────────────
           _buildSectionHeader(context, 'Layout'),
@@ -3110,7 +3110,6 @@ class VideoDemo extends StatelessWidget {
               </video>
             ''',
             onLinkTap: (url) async {
-              
               final uri = Uri.tryParse(url);
               if (uri != null && await canLaunchUrl(uri)) {
                 await launchUrl(uri, mode: LaunchMode.platformDefault);
@@ -3133,7 +3132,6 @@ class VideoDemo extends StatelessWidget {
               </video>
             ''',
             onLinkTap: (url) async {
-              
               final uri = Uri.tryParse(url);
               if (uri != null && await canLaunchUrl(uri)) {
                 await launchUrl(uri, mode: LaunchMode.platformDefault);
@@ -3175,7 +3173,6 @@ class VideoDemo extends StatelessWidget {
               </div>
             ''',
             onLinkTap: (url) async {
-              
               final uri = Uri.tryParse(url);
               if (uri != null && await canLaunchUrl(uri)) {
                 await launchUrl(uri, mode: LaunchMode.platformDefault);
@@ -3218,7 +3215,6 @@ class VideoDemo extends StatelessWidget {
             ''',
             selectable: true,
             onLinkTap: (url) async {
-              
               final uri = Uri.tryParse(url);
               if (uri != null && await canLaunchUrl(uri)) {
                 await launchUrl(uri, mode: LaunchMode.platformDefault);
diff --git a/example/lib/reader_app/book_model.dart b/example/lib/reader_app/book_model.dart
index 8a1f1f5..8635fe1 100644
--- a/example/lib/reader_app/book_model.dart
+++ b/example/lib/reader_app/book_model.dart
@@ -8,10 +8,10 @@ class Book {
   final String content;
   final BookType type;
   final String? description;
-  
-  // New persistent fields
-  int lastPage;
-  bool isBookmarked;
+
+  // Persistent fields - marked as final for immutability where possible
+  final int lastPage;
+  final bool isBookmarked;
 
   Book({
     required this.id,
@@ -24,6 +24,23 @@ class Book {
     this.lastPage = 0,
     this.isBookmarked = false,
   });
+
+  Book copyWith({
+    int? lastPage,
+    bool? isBookmarked,
+  }) {
+    return Book(
+      id: id,
+      title: title,
+      author: author,
+      coverUrl: coverUrl,
+      content: content,
+      type: type,
+      description: description,
+      lastPage: lastPage ?? this.lastPage,
+      isBookmarked: isBookmarked ?? this.isBookmarked,
+    );
+  }
 }
 
 class MockLibrary {
diff --git a/example/lib/reader_app/library_screen.dart b/example/lib/reader_app/library_screen.dart
index cf28e0a..1a92cc9 100644
--- a/example/lib/reader_app/library_screen.dart
+++ b/example/lib/reader_app/library_screen.dart
@@ -15,8 +15,9 @@ class _LibraryScreenState extends State<LibraryScreen> {
 
   List<Book> get _filteredBooks {
     return MockLibrary.books.where((book) {
-      final matchesSearch = book.title.toLowerCase().contains(_searchQuery.toLowerCase()) ||
-          book.author.toLowerCase().contains(_searchQuery.toLowerCase());
+      final matchesSearch =
+          book.title.toLowerCase().contains(_searchQuery.toLowerCase()) ||
+              book.author.toLowerCase().contains(_searchQuery.toLowerCase());
       final matchesBookmark = !_showOnlyBookmarked || book.isBookmarked;
       return matchesSearch && matchesBookmark;
     }).toList();
@@ -31,11 +32,15 @@ class _LibraryScreenState extends State<LibraryScreen> {
       body: CustomScrollView(
         slivers: [
           SliverAppBar.large(
-            title: const Text('My Library', style: TextStyle(fontWeight: FontWeight.bold)),
+            title: const Text('My Library',
+                style: TextStyle(fontWeight: FontWeight.bold)),
             actions: [
               IconButton(
-                icon: Icon(_showOnlyBookmarked ? Icons.bookmark : Icons.bookmark_border),
-                onPressed: () => setState(() => _showOnlyBookmarked = !_showOnlyBookmarked),
+                icon: Icon(_showOnlyBookmarked
+                    ? Icons.bookmark
+                    : Icons.bookmark_border),
+                onPressed: () =>
+                    setState(() => _showOnlyBookmarked = !_showOnlyBookmarked),
               ),
             ],
           ),
@@ -58,13 +63,16 @@ class _LibraryScreenState extends State<LibraryScreen> {
               ),
             ),
           ),
-          
-          if (recentBooks.isNotEmpty && _searchQuery.isEmpty && !_showOnlyBookmarked) ...[
+
+          if (recentBooks.isNotEmpty &&
+              _searchQuery.isEmpty &&
+              !_showOnlyBookmarked) ...[
             const SliverToBoxAdapter(
               child: Padding(
                 padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
-                child: Text('Continue Reading', 
-                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                child: Text('Continue Reading',
+                    style:
+                        TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
               ),
             ),
             SliverToBoxAdapter(
@@ -86,8 +94,8 @@ class _LibraryScreenState extends State<LibraryScreen> {
           const SliverToBoxAdapter(
             child: Padding(
               padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
-              child: Text('All Books', 
-                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+              child: Text('All Books',
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
             ),
           ),
 
@@ -99,7 +107,8 @@ class _LibraryScreenState extends State<LibraryScreen> {
                   children: [
                     Icon(Icons.library_books, size: 64, color: Colors.grey),
                     SizedBox(height: 16),
-                    Text('No books found', style: TextStyle(color: Colors.grey)),
+                    Text('No books found',
+                        style: TextStyle(color: Colors.grey)),
                   ],
                 ),
               ),
@@ -140,14 +149,16 @@ class _LibraryScreenState extends State<LibraryScreen> {
           color: Colors.white,
           borderRadius: BorderRadius.circular(16),
           boxShadow: [
-            BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10),
+            BoxShadow(
+                color: Colors.black.withValues(alpha: 0.05), blurRadius: 10),
           ],
         ),
         child: Row(
           children: [
             ClipRRect(
               borderRadius: BorderRadius.circular(8),
-              child: Image.network(book.coverUrl, width: 80, height: 120, fit: BoxFit.cover),
+              child: Image.network(book.coverUrl,
+                  width: 80, height: 120, fit: BoxFit.cover),
             ),
             const SizedBox(width: 16),
             Expanded(
@@ -155,12 +166,15 @@ class _LibraryScreenState extends State<LibraryScreen> {
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(book.title, 
-                    style: const TextStyle(fontWeight: FontWeight.bold),
-                    maxLines: 2, overflow: TextOverflow.ellipsis),
-                  Text(book.author, style: const TextStyle(fontSize: 12, color: Colors.grey)),
+                  Text(book.title,
+                      style: const TextStyle(fontWeight: FontWeight.bold),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis),
+                  Text(book.author,
+                      style: const TextStyle(fontSize: 12, color: Colors.grey)),
                   const Spacer(),
-                  const Text('Last read: 2 hours ago', style: TextStyle(fontSize: 10, color: Colors.grey)),
+                  const Text('Last read: 2 hours ago',
+                      style: TextStyle(fontSize: 10, color: Colors.grey)),
                   const SizedBox(height: 4),
                   ClipRRect(
                     borderRadius: BorderRadius.circular(2),
@@ -206,7 +220,8 @@ class _LibraryScreenState extends State<LibraryScreen> {
                 ),
                 if (book.isBookmarked)
                   const Positioned(
-                    top: 8, right: 8,
+                    top: 8,
+                    right: 8,
                     child: Icon(Icons.bookmark, color: Colors.amber, size: 28),
                   ),
               ],
diff --git a/example/lib/reader_app/reader_screen.dart b/example/lib/reader_app/reader_screen.dart
index aa35a44..1b2a58a 100644
--- a/example/lib/reader_app/reader_screen.dart
+++ b/example/lib/reader_app/reader_screen.dart
@@ -1,9 +1,50 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:hyper_render/hyper_render.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'book_model.dart';
 
+/// Unified settings for the reader to avoid fragmented ValueNotifiers
+class ReaderSettings {
+  final double fontSize;
+  final double lineHeight;
+  final Color backgroundColor;
+  final Color textColor;
+
+  const ReaderSettings({
+    this.fontSize = 18.0,
+    this.lineHeight = 1.6,
+    this.backgroundColor = const Color(0xFFFDF6E3),
+    this.textColor = const Color(0xFF5B4636),
+  });
+
+  ReaderSettings copyWith({
+    double? fontSize,
+    double? lineHeight,
+    Color? backgroundColor,
+    Color? textColor,
+  }) {
+    return ReaderSettings(
+      fontSize: fontSize ?? this.fontSize,
+      lineHeight: lineHeight ?? this.lineHeight,
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      textColor: textColor ?? this.textColor,
+    );
+  }
+
+  String toCss() {
+    final hexColor =
+        '#${textColor.toARGB32().toRadixString(16).padLeft(8, '0').substring(2)}';
+    return '''
+      body { 
+        font-size: ${fontSize}px; 
+        line-height: $lineHeight; 
+        color: $hexColor;
+      }
+      h1, h2, h3 { color: $hexColor; }
+    ''';
+  }
+}
+
 class ReaderScreen extends StatefulWidget {
   final Book book;
 
@@ -15,13 +56,13 @@ class ReaderScreen extends StatefulWidget {
 
 class _ReaderScreenState extends State<ReaderScreen> {
   late HyperPageController _pageController;
-  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
-  
-  // Settings
-  final ValueNotifier<double> _fontSize = ValueNotifier(18.0);
-  final ValueNotifier<double> _lineHeight = ValueNotifier(1.6);
-  final ValueNotifier<Color> _backgroundColor = ValueNotifier(const Color(0xFFFDF6E3));
-  final ValueNotifier<Color> _textColor = ValueNotifier(const Color(0xFF5B4636));
+  late Book _currentBook; // Local state for the book to handle updates
+  final GlobalKey<ScaffoldMessengerState> _messengerKey =
+      GlobalKey<ScaffoldMessengerState>();
+
+  // Settings grouped into a single ValueNotifier
+  final ValueNotifier<ReaderSettings> _settings =
+      ValueNotifier(const ReaderSettings());
 
   static const double _fontSizeMin = 12.0;
   static const double _fontSizeMax = 36.0;
@@ -30,27 +71,37 @@ class _ReaderScreenState extends State<ReaderScreen> {
   @override
   void initState() {
     super.initState();
-    // Initialize with saved progress
-    _pageController = HyperPageController(initialPage: widget.book.lastPage);
-    _pageController.currentPage.addListener(_saveProgress);
+    _currentBook = widget.book;
+    _pageController = HyperPageController(initialPage: _currentBook.lastPage);
+    _pageController.currentPage.addListener(_onPageChanged);
   }
 
-  void _saveProgress() {
-    widget.book.lastPage = _pageController.currentPage.value;
+  void _onPageChanged() {
+    // Only update progress if the page actually changed to avoid redundant writes
+    if (_currentBook.lastPage != _pageController.currentPage.value) {
+      _currentBook =
+          _currentBook.copyWith(lastPage: _pageController.currentPage.value);
+    }
   }
 
-  void _decreaseFontSize() {
-    _fontSize.value = (_fontSize.value - _fontSizeStep).clamp(_fontSizeMin, _fontSizeMax);
+  void _toggleBookmark() {
+    setState(() {
+      _currentBook =
+          _currentBook.copyWith(isBookmarked: !_currentBook.isBookmarked);
+    });
   }
 
-  void _increaseFontSize() {
-    _fontSize.value = (_fontSize.value + _fontSizeStep).clamp(_fontSizeMin, _fontSizeMax);
+  void _updateFontSize(double delta) {
+    final newSize =
+        (_settings.value.fontSize + delta).clamp(_fontSizeMin, _fontSizeMax);
+    _settings.value = _settings.value.copyWith(fontSize: newSize);
   }
 
   @override
   void dispose() {
-    _pageController.currentPage.removeListener(_saveProgress);
+    _pageController.currentPage.removeListener(_onPageChanged);
     _pageController.dispose();
+    _settings.dispose();
     super.dispose();
   }
 
@@ -58,160 +109,172 @@ class _ReaderScreenState extends State<ReaderScreen> {
     showModalBottomSheet(
       context: context,
       isScrollControlled: true,
+      shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
       builder: (context) {
         return Padding(
-          padding: const EdgeInsets.all(20),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              const Text('Typography', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
-              const SizedBox(height: 10),
-              ValueListenableBuilder<double>(
-                valueListenable: _fontSize,
-                builder: (context, size, _) => Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('Font Size: ${size.toInt()}px', style: const TextStyle(fontSize: 12)),
-                    Row(
-                      children: [
-                        const Icon(Icons.format_size, size: 16),
-                        Expanded(
-                          child: Slider(
-                            value: size,
-                            min: 14,
-                            max: 32,
-                            onChanged: (v) => _fontSize.value = v,
-                          ),
-                        ),
-                        const Icon(Icons.format_size, size: 24),
-                      ],
-                    ),
-                  ],
-                ),
-              ),
-              ValueListenableBuilder<double>(
-                valueListenable: _lineHeight,
-                builder: (context, lh, _) => Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('Line Height: ${lh.toStringAsFixed(1)}', style: const TextStyle(fontSize: 12)),
-                    Row(
-                      children: [
-                        const Icon(Icons.format_line_spacing, size: 16),
-                        Expanded(
-                          child: Slider(
-                            value: lh,
-                            min: 1.2,
-                            max: 2.4,
-                            divisions: 12,
-                            onChanged: (v) => _lineHeight.value = v,
-                          ),
-                        ),
-                        const Icon(Icons.format_line_spacing, size: 24),
-                      ],
-                    ),
-                  ],
-                ),
-              ),
-              const Divider(height: 24),
-              const Text('Theme', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
-              const SizedBox(height: 10),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          padding: const EdgeInsets.fromLTRB(20, 10, 20, 30),
+          child: ValueListenableBuilder<ReaderSettings>(
+            valueListenable: _settings,
+            builder: (context, settings, _) {
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  _themeOption(const Color(0xFFFFFFFF), Colors.black, 'Light'),
-                  _themeOption(const Color(0xFFFDF6E3), const Color(0xFF5B4636), 'Sepia'),
-                  _themeOption(const Color(0xFF121212), Colors.white70, 'Dark'),
+                  Center(
+                      child: Container(
+                          width: 40,
+                          height: 4,
+                          decoration: BoxDecoration(
+                              color: Colors.grey[300],
+                              borderRadius: BorderRadius.circular(2)))),
+                  const SizedBox(height: 20),
+                  const Text('Typography',
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
+                  const SizedBox(height: 15),
+                  _buildSlider('Font Size: ${settings.fontSize.toInt()}px',
+                      settings.fontSize, 14, 32, Icons.format_size, (v) {
+                    _settings.value = settings.copyWith(fontSize: v);
+                  }),
+                  const SizedBox(height: 15),
+                  _buildSlider(
+                      'Line Height: ${settings.lineHeight.toStringAsFixed(1)}',
+                      settings.lineHeight,
+                      1.2,
+                      2.4,
+                      Icons.format_line_spacing, (v) {
+                    _settings.value = settings.copyWith(lineHeight: v);
+                  }, divisions: 12),
+                  const Divider(height: 40),
+                  const Text('Theme',
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
+                  const SizedBox(height: 15),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                    children: [
+                      _themeOption(const Color(0xFFFFFFFF), Colors.black,
+                          'Light', settings),
+                      _themeOption(const Color(0xFFFDF6E3),
+                          const Color(0xFF5B4636), 'Sepia', settings),
+                      _themeOption(const Color(0xFF121212), Colors.white70,
+                          'Dark', settings),
+                    ],
+                  ),
                 ],
-              ),
-              const SizedBox(height: 20),
-            ],
+              );
+            },
           ),
         );
       },
     );
   }
 
-  Widget _themeOption(Color bg, Color text, String label) {
-    return ValueListenableBuilder<Color>(
-      valueListenable: _backgroundColor,
-      builder: (context, currentBg, _) {
-        final isSelected = currentBg == bg;
-        return GestureDetector(
-          onTap: () {
-            _backgroundColor.value = bg;
-            _textColor.value = text;
-          },
-          child: Column(
-            children: [
-              Container(
-                width: 50,
-                height: 50,
-                decoration: BoxDecoration(
-                  color: bg,
-                  border: Border.all(
-                    color: isSelected ? Colors.blue : Colors.grey.shade300,
-                    width: isSelected ? 2 : 1,
-                  ),
-                  shape: BoxShape.circle,
-                ),
-                child: Center(child: Text('Aa', style: TextStyle(color: text))),
+  Widget _buildSlider(String label, double value, double min, double max,
+      IconData icon, ValueChanged<double> onChanged,
+      {int? divisions}) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
+        Row(
+          children: [
+            Icon(icon, size: 16, color: Colors.grey),
+            Expanded(
+              child: Slider(
+                value: value,
+                min: min,
+                max: max,
+                divisions: divisions,
+                onChanged: onChanged,
               ),
-              const SizedBox(height: 4),
-              Text(label, style: const TextStyle(fontSize: 12)),
-            ],
+            ),
+            Icon(icon, size: 24, color: Colors.grey),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _themeOption(
+      Color bg, Color text, String label, ReaderSettings current) {
+    final isSelected = current.backgroundColor == bg;
+    return GestureDetector(
+      onTap: () {
+        _settings.value =
+            current.copyWith(backgroundColor: bg, textColor: text);
+      },
+      child: Column(
+        children: [
+          Container(
+            width: 50,
+            height: 50,
+            decoration: BoxDecoration(
+              color: bg,
+              border: Border.all(
+                color: isSelected ? Colors.blue : Colors.grey.shade300,
+                width: isSelected ? 2 : 1,
+              ),
+              shape: BoxShape.circle,
+            ),
+            child: Center(
+                child: Text('Aa',
+                    style:
+                        TextStyle(color: text, fontWeight: FontWeight.bold))),
           ),
-        );
-      }
+          const SizedBox(height: 6),
+          Text(label,
+              style: TextStyle(
+                  fontSize: 12,
+                  fontWeight:
+                      isSelected ? FontWeight.bold : FontWeight.normal)),
+        ],
+      ),
     );
   }
 
   @override
   Widget build(BuildContext context) {
-    return MultiValueListenableBuilder(
-      listenables: [_fontSize, _lineHeight, _backgroundColor, _textColor],
-      builder: (context) {
-        final css = '''
-          body { 
-            font-size: ${_fontSize.value}px; 
-            line-height: ${_lineHeight.value}; 
-            color: ${_colorToHex(_textColor.value)};
-          }
-          h1, h2, h3 { color: ${_colorToHex(_textColor.value)}; }
-        ''';
-
+    return ValueListenableBuilder<ReaderSettings>(
+      valueListenable: _settings,
+      builder: (context, settings, _) {
         return Scaffold(
-          key: _scaffoldKey,
-          backgroundColor: _backgroundColor.value,
+          backgroundColor: settings.backgroundColor,
           appBar: AppBar(
-            title: Text(widget.book.title, style: const TextStyle(fontSize: 16)),
+            title:
+                Text(_currentBook.title, style: const TextStyle(fontSize: 16)),
             backgroundColor: Colors.transparent,
             elevation: 0,
-            foregroundColor: _textColor.value,
+            foregroundColor: settings.textColor,
             leading: IconButton(
               icon: const Icon(Icons.close),
               onPressed: () => Navigator.pop(context),
             ),
             actions: [
-              // Font-size zoom — tap once per step, hold to repeat
               IconButton(
                 icon: const Icon(Icons.text_decrease),
-                tooltip: 'Smaller text',
-                onPressed: _fontSize.value > _fontSizeMin ? _decreaseFontSize : null,
+                onPressed: settings.fontSize > _fontSizeMin
+                    ? () => _updateFontSize(-_fontSizeStep)
+                    : null,
               ),
               IconButton(
                 icon: const Icon(Icons.text_increase),
-                tooltip: 'Larger text',
-                onPressed: _fontSize.value < _fontSizeMax ? _increaseFontSize : null,
+                onPressed: settings.fontSize < _fontSizeMax
+                    ? () => _updateFontSize(_fontSizeStep)
+                    : null,
               ),
               IconButton(
-                icon: Icon(widget.book.isBookmarked ? Icons.bookmark : Icons.bookmark_border),
-                onPressed: () => setState(() => widget.book.isBookmarked = !widget.book.isBookmarked),
+                icon: Icon(_currentBook.isBookmarked
+                    ? Icons.bookmark
+                    : Icons.bookmark_border),
+                onPressed: _toggleBookmark,
               ),
-              IconButton(
-                icon: const Icon(Icons.list),
-                onPressed: () => _scaffoldKey.currentState?.openEndDrawer(),
+              Builder(
+                builder: (context) => IconButton(
+                  icon: const Icon(Icons.list),
+                  onPressed: () => Scaffold.of(context).openEndDrawer(),
+                ),
               ),
               IconButton(
                 icon: const Icon(Icons.settings),
@@ -223,68 +286,25 @@ class _ReaderScreenState extends State<ReaderScreen> {
           body: Column(
             children: [
               Expanded(
-                child: widget.book.type == BookType.html
+                child: _currentBook.type == BookType.html
                     ? HyperViewer(
-                        html: widget.book.content,
+                        html: _currentBook.content,
                         mode: HyperRenderMode.paged,
                         pageController: _pageController,
-                        customCss: css,
+                        customCss: settings.toCss(),
                         widgetBuilder: _videoWidgetBuilder,
                         onError: (e, st) {
                           debugPrint('HyperReader Error: $e');
                         },
                       )
                     : HyperViewer.markdown(
-                        markdown: widget.book.content,
+                        markdown: _currentBook.content,
                         mode: HyperRenderMode.paged,
                         pageController: _pageController,
-                        customCss: css,
+                        customCss: settings.toCss(),
                       ),
               ),
-              // Progress Footer
-              Container(
-                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
-                decoration: BoxDecoration(
-                  border: Border(top: BorderSide(color: _textColor.value.withValues(alpha: 0.1))),
-                ),
-                child: ValueListenableBuilder<int>(
-                  valueListenable: _pageController.currentPage,
-                  builder: (context, page, _) {
-                    final progress = _pageController.pageCount > 0 
-                        ? (page + 1) / _pageController.pageCount 
-                        : 0.0;
-                    
-                    return Column(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text(
-                              '${(progress * 100).toInt()}% read',
-                              style: TextStyle(color: _textColor.value.withValues(alpha: 0.5), fontSize: 10),
-                            ),
-                            Text(
-                              'Page ${page + 1} of ${_pageController.pageCount}',
-                              style: TextStyle(color: _textColor.value.withValues(alpha: 0.7), fontSize: 11, fontWeight: FontWeight.w500),
-                            ),
-                          ],
-                        ),
-                        const SizedBox(height: 8),
-                        ClipRRect(
-                          borderRadius: BorderRadius.circular(2),
-                          child: LinearProgressIndicator(
-                            value: progress,
-                            backgroundColor: _textColor.value.withValues(alpha: 0.1),
-                            color: _textColor.value.withValues(alpha: 0.4),
-                            minHeight: 2,
-                          ),
-                        ),
-                      ],
-                    );
-                  },
-                ),
-              ),
+              _buildProgressFooter(settings),
             ],
           ),
         );
@@ -292,6 +312,149 @@ class _ReaderScreenState extends State<ReaderScreen> {
     );
   }
 
+  Widget _buildProgressFooter(ReaderSettings settings) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+      decoration: BoxDecoration(
+        border: Border(
+            top: BorderSide(color: settings.textColor.withValues(alpha: 0.1))),
+      ),
+      child: ValueListenableBuilder<int>(
+        valueListenable: _pageController.currentPage,
+        builder: (context, page, _) {
+          final pageCount = _pageController.pageCount;
+          final progress = pageCount > 0 ? (page + 1) / pageCount : 0.0;
+
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text('${(progress * 100).toInt()}% read',
+                      style: TextStyle(
+                          color: settings.textColor.withValues(alpha: 0.5),
+                          fontSize: 10)),
+                  Text('Page ${page + 1} of $pageCount',
+                      style: TextStyle(
+                          color: settings.textColor.withValues(alpha: 0.7),
+                          fontSize: 11,
+                          fontWeight: FontWeight.w500)),
+                ],
+              ),
+              const SizedBox(height: 8),
+              ClipRRect(
+                borderRadius: BorderRadius.circular(2),
+                child: LinearProgressIndicator(
+                  value: progress,
+                  backgroundColor: settings.textColor.withValues(alpha: 0.1),
+                  color: settings.textColor.withValues(alpha: 0.4),
+                  minHeight: 2,
+                ),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+
+  Widget? _videoWidgetBuilder(UDTNode node) {
+    if (node is AtomicNode &&
+        (node.tagName == 'video' || node.tagName == 'audio')) {
+      final mediaInfo = MediaInfo.fromNode(node);
+      final src = mediaInfo.src;
+      final poster = mediaInfo.poster;
+      final isAudio = node.tagName == 'audio';
+
+      return Semantics(
+        label: isAudio ? 'Audio player for $src' : 'Video player for $src',
+        button: true,
+        child: GestureDetector(
+          onTap: () => _handleMediaTap(src),
+          child: Container(
+            constraints: const BoxConstraints(maxHeight: 220),
+            decoration: BoxDecoration(
+                color: Colors.black87, borderRadius: BorderRadius.circular(8)),
+            child: Stack(
+              alignment: Alignment.center,
+              children: [
+                if (poster != null && !isAudio)
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(8),
+                    child: Image.network(poster,
+                        width: double.infinity,
+                        height: 220,
+                        fit: BoxFit.cover,
+                        errorBuilder: (_, __, ___) => const SizedBox.shrink()),
+                  ),
+                _buildPlayIcon(isAudio),
+                _buildPlayOverlay(),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
+    return null;
+  }
+
+  Widget _buildPlayIcon(bool isAudio) {
+    return Container(
+      width: 64,
+      height: 64,
+      decoration:
+          const BoxDecoration(color: Colors.black54, shape: BoxShape.circle),
+      child: Icon(isAudio ? Icons.headphones : Icons.play_arrow,
+          color: Colors.white, size: 36),
+    );
+  }
+
+  Widget _buildPlayOverlay() {
+    return Positioned(
+      bottom: 8,
+      left: 0,
+      right: 0,
+      child: Center(
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+          decoration: BoxDecoration(
+              color: Colors.black54, borderRadius: BorderRadius.circular(4)),
+          child: const Text('Tap to play in external player',
+              style: TextStyle(color: Colors.white70, fontSize: 11)),
+        ),
+      ),
+    );
+  }
+
+  Future<void> _handleMediaTap(String src) async {
+    final uri = Uri.tryParse(src);
+    if (uri == null) {
+      _showError('Invalid media URL');
+      return;
+    }
+
+    try {
+      if (await canLaunchUrl(uri)) {
+        await launchUrl(uri, mode: LaunchMode.platformDefault);
+      } else {
+        _showError('Could not launch media player');
+      }
+    } catch (e) {
+      _showError('Error opening media: $e');
+    }
+  }
+
+  void _showError(String message) {
+    if (!mounted) return;
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+          content: Text(message),
+          backgroundColor: Colors.redAccent,
+          behavior: SnackBarBehavior.floating),
+    );
+  }
+
   Widget _buildTocDrawer() {
     return Drawer(
       child: Column(
@@ -305,8 +468,11 @@ class _ReaderScreenState extends State<ReaderScreen> {
                   const Icon(Icons.auto_stories, color: Colors.white, size: 40),
                   const SizedBox(height: 12),
                   Text(
-                    widget.book.title,
-                    style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
+                    _currentBook.title,
+                    style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold),
                     textAlign: TextAlign.center,
                     maxLines: 2,
                   ),
@@ -316,15 +482,15 @@ class _ReaderScreenState extends State<ReaderScreen> {
           ),
           const Padding(
             padding: EdgeInsets.all(16.0),
-            child: Text('Table of Contents', style: TextStyle(fontWeight: FontWeight.bold)),
+            child: Text('Table of Contents',
+                style: TextStyle(fontWeight: FontWeight.bold)),
           ),
           Expanded(
             child: ListView(
               padding: EdgeInsets.zero,
               children: [
-                // Example TOC entries
                 _tocItem('Chapter I', 0),
-                _tocItem('The West Egg', 2), // Mock positions
+                _tocItem('The West Egg', 2),
                 _tocItem('Chapter II', 5),
               ],
             ),
@@ -337,107 +503,12 @@ class _ReaderScreenState extends State<ReaderScreen> {
   Widget _tocItem(String title, int page) {
     return ListTile(
       title: Text(title),
-      trailing: Text('p. ${page + 1}', style: const TextStyle(color: Colors.grey, fontSize: 12)),
+      trailing: Text('p. ${page + 1}',
+          style: const TextStyle(color: Colors.grey, fontSize: 12)),
       onTap: () {
         _pageController.jumpToPage(page);
         Navigator.pop(context);
       },
     );
   }
-
-  Widget? _videoWidgetBuilder(UDTNode node) {
-    if (node is AtomicNode && (node.tagName == 'video' || node.tagName == 'audio')) {
-      final mediaInfo = MediaInfo.fromNode(node);
-      final src = mediaInfo.src;
-      final poster = mediaInfo.poster;
-      final isAudio = node.tagName == 'audio';
-
-      return GestureDetector(
-        onTap: () async {
-          final uri = Uri.tryParse(src);
-          if (uri != null) {
-            await launchUrl(uri, mode: LaunchMode.platformDefault);
-          }
-        },
-        child: Container(
-          constraints: const BoxConstraints(maxHeight: 220),
-          decoration: BoxDecoration(
-            color: Colors.black87,
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: Stack(
-            alignment: Alignment.center,
-            children: [
-              if (poster != null && !isAudio)
-                ClipRRect(
-                  borderRadius: BorderRadius.circular(8),
-                  child: Image.network(
-                    poster,
-                    width: double.infinity,
-                    height: 220,
-                    fit: BoxFit.cover,
-                    errorBuilder: (_, __, ___) => const SizedBox.shrink(),
-                  ),
-                ),
-              Container(
-                width: 64,
-                height: 64,
-                decoration: BoxDecoration(
-                  color: Colors.black54,
-                  shape: BoxShape.circle,
-                ),
-                child: Icon(
-                  isAudio ? Icons.headphones : Icons.play_arrow,
-                  color: Colors.white,
-                  size: 36,
-                ),
-              ),
-              Positioned(
-                  bottom: 8,
-                  left: 0,
-                  right: 0,
-                  child: Center(
-                    child: Container(
-                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
-                      decoration: BoxDecoration(
-                        color: Colors.black54,
-                        borderRadius: BorderRadius.circular(4),
-                      ),
-                      child: Text(
-                        'Tap to play in external player',
-                        style: const TextStyle(color: Colors.white70, fontSize: 11),
-                      ),
-                    ),
-                  ),
-                ),
-            ],
-          ),
-        ),
-      );
-    }
-    return null;
-  }
-
-  String _colorToHex(Color color) {
-    return '#${color.toARGB32().toRadixString(16).substring(2)}';
-  }
-}
-
-class MultiValueListenableBuilder extends StatelessWidget {
-  final List<ValueListenable> listenables;
-  final Widget Function(BuildContext context) builder;
-
-  const MultiValueListenableBuilder({
-    super.key,
-    required this.listenables,
-    required this.builder,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return AnimatedBuilder(
-      animation: Listenable.merge(listenables),
-      builder: (context, _) => builder(context),
-    );
-  }
 }
diff --git a/lib/src/parser/html/html_adapter.dart b/lib/src/parser/html/html_adapter.dart
index 131a524..0e61497 100644
--- a/lib/src/parser/html/html_adapter.dart
+++ b/lib/src/parser/html/html_adapter.dart
@@ -455,6 +455,20 @@ class HtmlAdapter {
     // Check float attribute (legacy HTML)
     final floatAttr = node.attributes['float'] ?? '';
     if (floatAttr == 'left' || floatAttr == 'right') return true;
+    // Check common CSS framework float class names (Bootstrap, Tailwind, etc.)
+    // This is heuristic — class-based floats cannot be resolved without running
+    // the full CSS cascade, but common patterns are detectable by name.
+    final cls = (node.attributes['class'] ?? '').toLowerCase();
+    if (cls.contains('float-left') ||
+        cls.contains('float-right') ||
+        cls.contains('pull-left') ||
+        cls.contains('pull-right') ||
+        cls.contains('align-left') ||
+        cls.contains('align-right') ||
+        cls.contains('alignleft') ||
+        cls.contains('alignright')) {
+      return true;
+    }
     // Recurse into children
     for (final child in node.nodes) {
       if (_containsFloatChild(child)) return true;
diff --git a/lib/src/utils/html_heuristics.dart b/lib/src/utils/html_heuristics.dart
index df84c4b..f7b2c59 100644
--- a/lib/src/utils/html_heuristics.dart
+++ b/lib/src/utils/html_heuristics.dart
@@ -114,11 +114,16 @@ class HtmlHeuristics {
   static bool hasUnsupportedCss(String html) {
     final lower = html.toLowerCase();
 
-    // position: absolute or fixed
-    if (_containsPositionAbsoluteOrFixed(lower)) return true;
+    // position: absolute or fixed (more targeted check for CSS property)
+    if (RegExp(r'position\s*:\s*(absolute|fixed)', caseSensitive: false)
+        .hasMatch(lower)) {
+      return true;
+    }
 
-    // z-index
-    if (lower.contains('z-index')) return true;
+    // z-index (specifically looking for CSS property signature)
+    if (RegExp(r'z-index\s*:', caseSensitive: false).hasMatch(lower)) {
+      return true;
+    }
 
     // clip-path
     if (lower.contains('clip-path')) return true;
@@ -168,14 +173,11 @@ class HtmlHeuristics {
   /// ```
   static bool hasForms(String html) {
     final lower = html.toLowerCase();
-    return _tagPresent(lower, 'form') ||
-        _tagPresent(lower, 'input') ||
-        _tagPresent(lower, 'select') ||
-        _tagPresent(lower, 'textarea') ||
-        // <button type="submit"> without a parent <form> still signals
-        // interactive intent — flag it so the team can decide.
+    // Improved checks using word boundaries and tag patterns to avoid false positives in text content.
+    return RegExp(r'<(form|input|select|textarea)\b', caseSensitive: false)
+            .hasMatch(lower) ||
         RegExp(r'<button[^>]+type\s*=\s*["\x27]?submit', caseSensitive: false)
-            .hasMatch(html);
+            .hasMatch(lower);
   }
 
   /// Returns `true` if the HTML contains interactive or scripted elements
@@ -210,14 +212,7 @@ class HtmlHeuristics {
   // ---------------------------------------------------------------------------
 
   static bool _tagPresent(String lower, String tag) =>
-      lower.contains('<$tag') || lower.contains('<$tag>');
-
-  static bool _containsPositionAbsoluteOrFixed(String lower) {
-    // Match "position" followed (loosely) by "absolute" or "fixed".
-    // Handles inline styles and <style> blocks.
-    return RegExp(r'position\s*:\s*(absolute|fixed)', caseSensitive: false)
-        .hasMatch(lower);
-  }
+      RegExp('<$tag\\b', caseSensitive: false).hasMatch(lower);
 
   static bool _hasStreamingMedia(String lower) {
     return lower.contains('.m3u8') ||
diff --git a/lib/src/utils/html_sanitizer.dart b/lib/src/utils/html_sanitizer.dart
index aed327c..ce060ba 100644
--- a/lib/src/utils/html_sanitizer.dart
+++ b/lib/src/utils/html_sanitizer.dart
@@ -145,6 +145,12 @@ class HtmlSanitizer {
         if (dangerousTags.contains(tag)) {
           // Drop the element AND all its children.
           child.remove();
+        } else if (tag == 'svg') {
+          // SVG: keep structure intact but strip scripts + dangerous attrs.
+          // Do NOT use the normal allowed/unwrap path — SVG child elements
+          // (path, circle, use, …) are not in allowedTags and would be
+          // unwrapped, destroying the SVG. Handle atomically.
+          _sanitizeSvgElement(child);
         } else if (!allowed.contains(tag)) {
           // Unwrap: replace element with its own (already-processed) children.
           // First recurse into children, then lift them up.
@@ -172,6 +178,49 @@ class HtmlSanitizer {
     }
   }
 
+  /// Sanitizes an SVG element in-place: removes dangerous children (script,
+  /// use with javascript: href) and strips dangerous attributes, but preserves
+  /// all SVG structural elements (path, circle, g, defs, …) so the SVG renders.
+  static void _sanitizeSvgElement(dom.Element svgElement) {
+    _sanitizeSvgAttributes(svgElement);
+    for (int i = svgElement.nodes.length - 1; i >= 0; i--) {
+      final child = svgElement.nodes[i];
+      if (child is dom.Element) {
+        final tag = child.localName?.toLowerCase() ?? '';
+        if (dangerousTags.contains(tag)) {
+          child.remove();
+        } else {
+          _sanitizeSvgElement(child);
+        }
+      }
+    }
+  }
+
+  /// Strips event handlers and dangerous URL attributes from an SVG element.
+  static void _sanitizeSvgAttributes(dom.Element element) {
+    final toRemove = <Object>[];
+    for (final entry in element.attributes.entries) {
+      final name = (entry.key is String)
+          ? (entry.key as String).toLowerCase()
+          : entry.key.toString().toLowerCase();
+      if (name.startsWith('on')) {
+        toRemove.add(entry.key);
+        continue;
+      }
+      if (dangerousAttributes.contains(name)) {
+        toRemove.add(entry.key);
+        continue;
+      }
+      // xlink:href and plain href may carry javascript: URLs inside <use>/<a>
+      if (name == 'href' || name == 'xlink:href') {
+        if (!isSafeUrl(entry.value)) toRemove.add(entry.key);
+      }
+    }
+    for (final key in toRemove) {
+      element.attributes.remove(key);
+    }
+  }
+
   static void _sanitizeAttributes(
     dom.Element element,
     List<String> allowedAttrs,
diff --git a/lib/src/widgets/hyper_viewer.dart b/lib/src/widgets/hyper_viewer.dart
index 75d79bd..95db041 100644
--- a/lib/src/widgets/hyper_viewer.dart
+++ b/lib/src/widgets/hyper_viewer.dart
@@ -61,11 +61,6 @@ class HyperViewer extends StatefulWidget {
   /// Type of content (html, delta, markdown)
   final HyperContentType contentType;
 
-  /// Legacy parameter - use [content] instead
-  /// Kept for backward compatibility
-  @Deprecated('Use content parameter instead')
-  String get html => content;
-
   /// Controls whether to use virtualized (lazy) or standard rendering.
   ///
   /// - [HyperRenderMode.auto] (default): chooses virtualized mode automatically
@@ -740,6 +735,26 @@ class _HyperViewerState extends State<HyperViewer>
   @override
   void didUpdateWidget(covariant HyperViewer oldWidget) {
     super.didUpdateWidget(oldWidget);
+
+    // BUG-02: Handle selectable toggle — create/dispose controller as needed.
+    if (oldWidget.selectable != widget.selectable) {
+      if (widget.selectable) {
+        _virtualizedSelectionController = VirtualizedSelectionController(
+          sectionsGetter: () => _sections ?? const [],
+          listViewKey: _virtualizedStackKey,
+        );
+      } else {
+        _virtualizedSelectionController?.dispose();
+        _virtualizedSelectionController = null;
+      }
+    }
+
+    // BUG-05: When customCss changes the section hashes are stale (they only
+    // cover text, not styles). Reset them so every section re-layouts.
+    if (oldWidget.customCss != widget.customCss) {
+      _sectionHashes = const [];
+    }
+
     if (oldWidget.content != widget.content ||
         oldWidget.contentType != widget.contentType ||
         oldWidget.mode != widget.mode ||
@@ -749,8 +764,8 @@ class _HyperViewerState extends State<HyperViewer>
         oldWidget.allowedTags != widget.allowedTags ||
         oldWidget.allowDataAttributes != widget.allowDataAttributes ||
         oldWidget.fallbackBuilder != widget.fallbackBuilder ||
-        oldWidget.renderConfig.virtualizationChunkSize !=
-            widget.renderConfig.virtualizationChunkSize ||
+        // BUG-08: Compare full renderConfig (value equality now available).
+        oldWidget.renderConfig != widget.renderConfig ||
         oldWidget.pluginRegistry != widget.pluginRegistry) {
       _parseContent();
     }
@@ -823,6 +838,35 @@ class _HyperViewerState extends State<HyperViewer>
     return merged;
   }
 
+  /// Splits a [DocumentNode] into sections of approximately [chunkSize]
+  /// characters for Markdown/Delta content in virtualized/paged mode.
+  ///
+  /// Splits only on block boundaries so inline elements are never torn apart.
+  static List<DocumentNode> _splitIntoSections(
+      DocumentNode doc, int chunkSize) {
+    if (doc.children.isEmpty) return [doc];
+
+    final sections = <DocumentNode>[];
+    var current = DocumentNode(children: []);
+    var currentSize = 0;
+
+    for (final child in doc.children) {
+      current.children.add(child);
+      child.parent = current;
+      currentSize += child.textContent.length;
+
+      if (currentSize >= chunkSize && child.isBlock) {
+        sections.add(current);
+        current = DocumentNode(children: []);
+        currentSize = 0;
+      }
+    }
+
+    if (current.children.isNotEmpty) sections.add(current);
+    if (sections.isEmpty) sections.add(DocumentNode(children: []));
+    return sections;
+  }
+
   /// Called by the system when available memory is low.
   ///
   /// Releases memory on three fronts:
@@ -892,8 +936,15 @@ class _HyperViewerState extends State<HyperViewer>
     // Only rebuild if the carryover actually changed.
     final prev = _floatCarryovers[index];
     if (prev.length == carryovers.length && prev.isEmpty) return;
-    setState(() {
-      _floatCarryovers[index] = carryovers;
+
+    // FIX: setState called during layout.
+    // Carryovers are often detected during a RenderBox layout pass.
+    // We must schedule the update to the next frame to avoid Flutter errors.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      setState(() {
+        _floatCarryovers[index] = carryovers;
+      });
     });
   }
 
@@ -912,10 +963,15 @@ class _HyperViewerState extends State<HyperViewer>
       // Relative URLs (scheme == '') are always forwarded — the app's handler
       // is responsible for resolving them against a base URL.
       final isRelative = scheme.isEmpty;
+      // BUG-03/09: Check BOTH allowedCustomSchemes (legacy widget param) AND
+      // renderConfig.extraLinkSchemes so neither registration path silently
+      // drops deep-link taps.
       final customSchemes = widget.allowedCustomSchemes;
+      final configSchemes = widget.renderConfig.extraLinkSchemes;
       final isAllowed = isRelative ||
           _kAllowedSchemes.contains(scheme) ||
-          (customSchemes != null && customSchemes.contains(scheme));
+          (customSchemes != null && customSchemes.contains(scheme)) ||
+          configSchemes.contains(scheme);
       if (isAllowed) {
         handler(url);
       } else {
@@ -1064,7 +1120,10 @@ class _HyperViewerState extends State<HyperViewer>
           _parseIsolate = null;
           _parseReceivePort = null;
           if (!mounted || _parseId != currentParseId) return;
-          if (message is List) {
+
+          if (message is List &&
+              message.isNotEmpty &&
+              message[0] is DocumentNode) {
             final fresh = List<DocumentNode>.from(message);
             final merged = _mergeSections(fresh);
             setState(() {
@@ -1074,6 +1133,22 @@ class _HyperViewerState extends State<HyperViewer>
               _floatCarryovers.clear(); // reset carryovers for new content
             });
             _contentFadeController.forward();
+          } else if (message is List &&
+              message.length == 2 &&
+              message[0] is String) {
+            // FIX: Reconstruct error with StackTrace from isolate
+            final err = FormatException(message[0] as String);
+            final st = StackTrace.fromString(message[1] as String);
+            _reportError(err, st);
+            setState(() => _isLoading = false);
+          } else if (message is List && message.isEmpty) {
+            // Empty content case
+            setState(() {
+              _sections = [];
+              _syncDocument = null;
+              _isLoading = false;
+              _floatCarryovers.clear();
+            });
           } else {
             // _isolateEntry sent an error string.
             final err = FormatException(
@@ -1084,9 +1159,12 @@ class _HyperViewerState extends State<HyperViewer>
           }
         }).catchError((Object e, StackTrace st) {
           _cancelParsing();
-          // Suppress the 'No element' StateError caused by closing the ReceivePort
-          // during an active wait (e.g. widget disposed or parsing cancelled).
-          if (e is StateError && e.message == 'No element') return;
+          // Improved check: only ignore StateError if we explicitly closed the port
+          if (e is StateError &&
+              e.message == 'No element' &&
+              _parseReceivePort == null) {
+            return;
+          }
           if (mounted && _parseId == currentParseId) {
             _reportError(e, st);
             setState(() => _isLoading = false);
@@ -1105,11 +1183,13 @@ class _HyperViewerState extends State<HyperViewer>
           if (cssToApply.isNotEmpty) resolver.parseCss(cssToApply);
           resolver.resolveStyles(doc);
 
-          // Paged and explicitly-virtualized modes both require _sections so
-          // the correct ListView/PageView builder is entered in _buildContent.
-          // Wrap the single document as a one-element list, then run it
-          // through _mergeSections so unchanged reloads skip re-layout.
-          final merged = _mergeSections([doc]);
+          // BUG-06: Markdown/Delta in virtualized/paged mode was wrapped as a
+          // single section, defeating the virtualization entirely for large docs.
+          // Split the document into chunkSize-bounded sections so the correct
+          // ListView/PageView builder gets multiple sections to work with.
+          final chunkSize = widget.renderConfig.virtualizationChunkSize;
+          final rawSections = _splitIntoSections(doc, chunkSize);
+          final merged = _mergeSections(rawSections);
           setState(() {
             _sections = merged;
             _syncDocument = null;
@@ -1136,8 +1216,8 @@ class _HyperViewerState extends State<HyperViewer>
       final sections = _parseAndChunk(
           (args.content, args.css, args.baseUrl, args.chunkSize));
       args.port.send(sections);
-    } catch (e) {
-      args.port.send('$e');
+    } catch (e, st) {
+      args.port.send([e.toString(), st.toString()]);
     }
   }
 
diff --git a/packages/hyper_render_core/lib/src/core/hyper_render_config.dart b/packages/hyper_render_core/lib/src/core/hyper_render_config.dart
index 0a794ce..da53b03 100644
--- a/packages/hyper_render_core/lib/src/core/hyper_render_config.dart
+++ b/packages/hyper_render_core/lib/src/core/hyper_render_config.dart
@@ -161,4 +161,38 @@ class HyperRenderConfig {
 
   /// Production-ready defaults, tuned against real-world documents.
   static const HyperRenderConfig defaults = HyperRenderConfig();
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    return other is HyperRenderConfig &&
+        other.textPainterCacheSize == textPainterCacheSize &&
+        other.imageCacheSize == imageCacheSize &&
+        other.defaultImagePlaceholderWidth == defaultImagePlaceholderWidth &&
+        other.imageConcurrency == imageConcurrency &&
+        other.virtualizationChunkSize == virtualizationChunkSize &&
+        other.codeHighlighter == codeHighlighter &&
+        other.extraLinkSchemes == extraLinkSchemes &&
+        _mapsEqual(other.keyframeRegistry, keyframeRegistry);
+  }
+
+  @override
+  int get hashCode => Object.hash(
+        textPainterCacheSize,
+        imageCacheSize,
+        defaultImagePlaceholderWidth,
+        imageConcurrency,
+        virtualizationChunkSize,
+        codeHighlighter,
+        Object.hashAll(extraLinkSchemes),
+        Object.hashAll(keyframeRegistry.keys),
+      );
+
+  static bool _mapsEqual(Map<String, dynamic> a, Map<String, dynamic> b) {
+    if (a.length != b.length) return false;
+    for (final key in a.keys) {
+      if (a[key] != b[key]) return false;
+    }
+    return true;
+  }
 }
diff --git a/packages/hyper_render_core/lib/src/core/render_hyper_box.dart b/packages/hyper_render_core/lib/src/core/render_hyper_box.dart
index 0fc8b55..21706ef 100644
--- a/packages/hyper_render_core/lib/src/core/render_hyper_box.dart
+++ b/packages/hyper_render_core/lib/src/core/render_hyper_box.dart
@@ -2,8 +2,7 @@ import 'dart:collection';
 import 'dart:math' as math;
 import 'dart:ui' as ui;
 
-import 'package:flutter/foundation.dart'
-    show debugPrint, defaultTargetPlatform, kDebugMode, TargetPlatform;
+import 'package:flutter/foundation.dart';
 
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
diff --git a/packages/hyper_render_core/lib/src/core/render_hyper_box_layout.dart b/packages/hyper_render_core/lib/src/core/render_hyper_box_layout.dart
index b15a22e..c58e168 100644
--- a/packages/hyper_render_core/lib/src/core/render_hyper_box_layout.dart
+++ b/packages/hyper_render_core/lib/src/core/render_hyper_box_layout.dart
@@ -1,6 +1,11 @@
 part of 'render_hyper_box.dart';
 
 // Layout spacing constants — single source of truth for all magic numbers
+const double _kDefaultInlinePluginWidth = 50.0;
+const double _kDefaultInlinePluginHeight = 24.0;
+const double _kDefaultFloatMargin = 8.0;
+
+const double _kMinFloatYStep = 1.0;
 const double _kImageMargin =
     32.0; // horizontal margin subtracted from maxWidth for images
 const double _kDefaultFlexFallbackHeight = 50.0;
@@ -32,66 +37,30 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
           _tokenizeNode(child, null);
         }
         break;
-
       case NodeType.block:
-        // Block-tier plugin: treat as a full-width child widget (_FlexFragment).
-        // CSS margins from the node style are still applied via _BlockStart/End.
-        if (_blockPluginTags.isNotEmpty &&
-            _blockPluginTags.contains(node.tagName?.toLowerCase())) {
-          _tokenizeBlockPlugin(node);
-          break;
-        }
-        _tokenizeBlock(node, parentBlock);
+        _handleBlockNode(node, parentBlock);
         break;
-
       case NodeType.inline:
-        // Inline-tier plugin: treat as an atomic (inline) child widget.
-        // Fragment size is set later in _measureInlinePluginFragments().
-        if (_inlinePluginTags.isNotEmpty &&
-            _inlinePluginTags.contains(node.tagName?.toLowerCase())) {
-          _fragments.add(Fragment.atomic(
-            sourceNode: node,
-            style: node.style,
-            // Placeholder size — updated in _measureInlinePluginFragments().
-            size: Size(
-              node.style.width ?? 50.0,
-              node.style.height ?? 24.0,
-            ),
-          ));
-          break;
-        }
-        _tokenizeInline(node);
+        _handleInlineNode(node);
         break;
-
       case NodeType.text:
         _tokenizeText(node as TextNode);
         break;
-
       case NodeType.atomic:
         _tokenizeAtomic(node as AtomicNode);
         break;
-
       case NodeType.lineBreak:
-        _fragments.add(Fragment.lineBreak(
-          sourceNode: node,
-          style: node.style,
-        ));
+        _fragments.add(Fragment.lineBreak(sourceNode: node, style: node.style));
         break;
-
       case NodeType.ruby:
         _tokenizeRuby(node as RubyNode);
         break;
-
       case NodeType.table:
         _tokenizeTable(node as TableNode);
         break;
-
       case NodeType.errorBoundary:
-        // Rendered as a full-width child widget (ErrorBoundaryWidget),
-        // same layout semantics as a flex container.
         _fragments.add(_FlexFragment(sourceNode: node, style: node.style));
         break;
-
       default:
         for (final child in node.children) {
           _tokenizeNode(child, parentBlock);
@@ -99,6 +68,31 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
     }
   }
 
+  void _handleBlockNode(UDTNode node, UDTNode? parentBlock) {
+    if (_blockPluginTags.isNotEmpty &&
+        _blockPluginTags.contains(node.tagName?.toLowerCase())) {
+      _tokenizeBlockPlugin(node);
+    } else {
+      _tokenizeBlock(node, parentBlock);
+    }
+  }
+
+  void _handleInlineNode(UDTNode node) {
+    if (_inlinePluginTags.isNotEmpty &&
+        _inlinePluginTags.contains(node.tagName?.toLowerCase())) {
+      _fragments.add(Fragment.atomic(
+        sourceNode: node,
+        style: node.style,
+        size: Size(
+          node.style.width ?? _kDefaultInlinePluginWidth,
+          node.style.height ?? _kDefaultInlinePluginHeight,
+        ),
+      ));
+    } else {
+      _tokenizeInline(node);
+    }
+  }
+
   /// Emit fragments for a block-plugin node (full-width child widget).
   ///
   /// Mirrors the margin/padding handling of flex-container blocks so CSS
@@ -1526,8 +1520,8 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
         breakIndex = 2;
       } else {
         // Single surrogate pair (Emoji) — cannot split.
-        // Return null to signal "cannot split", which results in overflow.
-        return null;
+        // FIX: Force include it in the first part rather than dropping it.
+        breakIndex = text.length;
       }
     }
 
@@ -1571,7 +1565,7 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
 
     // Compute margins FIRST so we can leave room when laying out the child.
     final margin = fragment.style.margin;
-    const defaultFloatMargin = 8.0;
+    const defaultFloatMargin = _kDefaultFloatMargin;
     final rightMargin = margin.right > 0 ? margin.right : defaultFloatMargin;
     final leftMargin = margin.left > 0 ? margin.left : defaultFloatMargin;
     final bottomMargin = margin.bottom > 0 ? margin.bottom : defaultFloatMargin;
@@ -1706,7 +1700,7 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
           // Not enough space — advance floatY past the lowest active float.
           // Avoid the spread [..._leftFloats, ..._rightFloats] allocation
           // inside the loop by iterating both lists separately.
-          double lowestBottom = floatY + 1;
+          double lowestBottom = floatY + _kMinFloatYStep;
           for (final existing in _leftFloats) {
             if (floatY >= existing.rect.top && floatY < existing.rect.bottom) {
               lowestBottom = math.max(lowestBottom, existing.rect.bottom);
@@ -1781,7 +1775,7 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
           foundPosition = true;
         } else {
           // Not enough space — advance floatY without list spread allocation.
-          double lowestBottom = floatY + 1;
+          double lowestBottom = floatY + _kMinFloatYStep;
           for (final existing in _leftFloats) {
             if (floatY >= existing.rect.top && floatY < existing.rect.bottom) {
               lowestBottom = math.max(lowestBottom, existing.rect.bottom);
@@ -1953,7 +1947,20 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
             visualRect.width + padding.left + padding.right,
             visualRect.height + padding.top + padding.bottom,
           );
-          rectsMap[decoratedNode]?.add(expandedRect);
+
+          final list = rectsMap[decoratedNode]!;
+          if (list.isNotEmpty) {
+            final last = list.last;
+            // OPTIMIZATION: Merge rects on the same line if they are adjacent or overlapping.
+            // This drastically reduces the number of Rect objects and draw calls.
+            if ((last.top - expandedRect.top).abs() < 0.1 &&
+                (last.bottom - expandedRect.bottom).abs() < 0.1 &&
+                expandedRect.left <= last.right + 1.0) {
+              list[list.length - 1] = last.expandToInclude(expandedRect);
+              continue;
+            }
+          }
+          list.add(expandedRect);
         }
       }
     }
@@ -1967,14 +1974,16 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
         _inlineDecorations.add(_InlineDecoration(
           node: node,
           rects: rects,
-          backgroundColor: style.backgroundColor,
-          backgroundGradient: style.backgroundGradient,
-          borderColor: style.borderColor,
-          borderWidth: style.borderWidth.top,
-          borderRadius: style.borderRadius,
-          boxShadow: style.boxShadow,
-          filter: style.filter,
-          backdropFilter: style.backdropFilter,
+          style: _InlineDecorationStyle(
+            backgroundColor: style.backgroundColor,
+            backgroundGradient: style.backgroundGradient,
+            borderColor: style.borderColor,
+            borderWidth: style.borderWidth.top,
+            borderRadius: style.borderRadius,
+            boxShadow: style.boxShadow,
+            filter: style.filter,
+            backdropFilter: style.backdropFilter,
+          ),
         ));
       }
     }
@@ -2228,32 +2237,42 @@ extension _RenderHyperBoxLayout on RenderHyperBox {
     while (child != null) {
       final parentData = child.parentData as HyperBoxParentData;
 
-      // Skip children that are already linked by sourceNode (Step 2).
       if (parentData.fragment != null) {
         child = parentData.nextSibling;
         continue;
       }
 
-      // Link remaining children using the order of unlinked fragments.
-      // This is the critical fallback.
       if (unlinkedFragmentIndex < unlinkedFragments.length) {
         final fragment = unlinkedFragments[unlinkedFragmentIndex];
         parentData.fragment = fragment;
 
-        // Set float info if applicable
         if (fragment is _FloatFragment) {
           parentData.isFloat = true;
           parentData.floatDirection = fragment.floatDirection;
         }
         unlinkedFragmentIndex++;
       } else {
-        // No unlinked fragment available for this child — leave it unlinked.
-        // _layoutChildren will fall through to the Size.zero fallback for any
-        // child whose parentData.fragment is still null after this pass.
+        // FIX: Log mismatch instead of silent failure
+        assert(() {
+          debugPrint(
+              '[HyperRender] Layout Warning: More child widgets than fragments. '
+              'Node: ${parentData.sourceNode?.tagName}');
+          return true;
+        }());
       }
 
       child = parentData.nextSibling;
     }
+
+    // Check for the opposite case: more fragments than widgets
+    assert(() {
+      if (unlinkedFragmentIndex < unlinkedFragments.length) {
+        debugPrint(
+            '[HyperRender] Layout Warning: More fragments than child widgets. '
+            'Remaining fragments: ${unlinkedFragments.length - unlinkedFragmentIndex}');
+      }
+      return true;
+    }());
   }
 
   /// Find child RenderBox for a given fragment
diff --git a/packages/hyper_render_core/lib/src/core/render_hyper_box_paint.dart b/packages/hyper_render_core/lib/src/core/render_hyper_box_paint.dart
index da596d5..a5e38ef 100644
--- a/packages/hyper_render_core/lib/src/core/render_hyper_box_paint.dart
+++ b/packages/hyper_render_core/lib/src/core/render_hyper_box_paint.dart
@@ -132,34 +132,34 @@ extension _RenderHyperBoxPaint on RenderHyperBox {
         );
 
         // 1. Backdrop Filter
-        if (decoration.backdropFilter != null && enableComplexFilters) {
+        if (decoration.style.backdropFilter != null && enableComplexFilters) {
           canvas.saveLayer(adjustedRect, _sLayerPaint);
-          canvas.drawRect(
-              adjustedRect, Paint()..imageFilter = decoration.backdropFilter);
+          canvas.drawRect(adjustedRect,
+              Paint()..imageFilter = decoration.style.backdropFilter);
           canvas.restore();
         }
 
         // 2. Filter (blur, etc.)
-        if (decoration.filter != null && enableComplexFilters) {
+        if (decoration.style.filter != null && enableComplexFilters) {
           canvas.saveLayer(
-              adjustedRect, Paint()..imageFilter = decoration.filter);
+              adjustedRect, Paint()..imageFilter = decoration.style.filter);
         }
 
         // 3. Box shadows
-        if (decoration.boxShadow != null) {
-          for (final shadow in decoration.boxShadow!) {
+        if (decoration.style.boxShadow != null) {
+          for (final shadow in decoration.style.boxShadow!) {
             final shadowPaint = shadow.toPaint();
             final shadowRect =
                 adjustedRect.shift(shadow.offset).inflate(shadow.spreadRadius);
 
-            if (decoration.borderRadius != null) {
+            if (decoration.style.borderRadius != null) {
               canvas.drawRRect(
                 RRect.fromRectAndCorners(
                   shadowRect,
-                  topLeft: decoration.borderRadius!.topLeft,
-                  topRight: decoration.borderRadius!.topRight,
-                  bottomLeft: decoration.borderRadius!.bottomLeft,
-                  bottomRight: decoration.borderRadius!.bottomRight,
+                  topLeft: decoration.style.borderRadius!.topLeft,
+                  topRight: decoration.style.borderRadius!.topRight,
+                  bottomLeft: decoration.style.borderRadius!.bottomLeft,
+                  bottomRight: decoration.style.borderRadius!.bottomRight,
                 ),
                 shadowPaint,
               );
@@ -170,25 +170,25 @@ extension _RenderHyperBoxPaint on RenderHyperBox {
         }
 
         // Paint background or gradient
-        if (decoration.backgroundColor != null ||
-            decoration.backgroundGradient != null) {
-          if (decoration.backgroundGradient != null) {
+        if (decoration.style.backgroundColor != null ||
+            decoration.style.backgroundGradient != null) {
+          if (decoration.style.backgroundGradient != null) {
             _fillPaint.shader =
-                decoration.backgroundGradient!.createShader(adjustedRect);
+                decoration.style.backgroundGradient!.createShader(adjustedRect);
             _fillPaint.color = const Color(0x00000000);
           } else {
             _fillPaint.shader = null;
-            _fillPaint.color = decoration.backgroundColor!;
+            _fillPaint.color = decoration.style.backgroundColor!;
           }
 
-          if (decoration.borderRadius != null) {
+          if (decoration.style.borderRadius != null) {
             canvas.drawRRect(
               RRect.fromRectAndCorners(
                 adjustedRect,
-                topLeft: decoration.borderRadius!.topLeft,
-                topRight: decoration.borderRadius!.topRight,
-                bottomLeft: decoration.borderRadius!.bottomLeft,
-                bottomRight: decoration.borderRadius!.bottomRight,
+                topLeft: decoration.style.borderRadius!.topLeft,
+                topRight: decoration.style.borderRadius!.topRight,
+                bottomLeft: decoration.style.borderRadius!.bottomLeft,
+                bottomRight: decoration.style.borderRadius!.bottomRight,
               ),
               _fillPaint,
             );
@@ -199,22 +199,24 @@ extension _RenderHyperBoxPaint on RenderHyperBox {
         }
 
         // Paint border
-        if (decoration.borderColor != null && decoration.borderWidth > 0) {
+        if (decoration.style.borderColor != null &&
+            decoration.style.borderWidth > 0) {
           // deflate(width/2) places the stroke centerline on the snapped edge.
-          final borderRect = adjustedRect.deflate(decoration.borderWidth / 2);
+          final borderRect =
+              adjustedRect.deflate(decoration.style.borderWidth / 2);
           _strokePaint
-            ..color = decoration.borderColor!
-            ..strokeWidth = decoration.borderWidth
+            ..color = decoration.style.borderColor!
+            ..strokeWidth = decoration.style.borderWidth
             ..strokeCap = StrokeCap.square;
 
-          if (decoration.borderRadius != null) {
+          if (decoration.style.borderRadius != null) {
             canvas.drawRRect(
               RRect.fromRectAndCorners(
                 borderRect,
-                topLeft: decoration.borderRadius!.topLeft,
-                topRight: decoration.borderRadius!.topRight,
-                bottomLeft: decoration.borderRadius!.bottomLeft,
-                bottomRight: decoration.borderRadius!.bottomRight,
+                topLeft: decoration.style.borderRadius!.topLeft,
+                topRight: decoration.style.borderRadius!.topRight,
+                bottomLeft: decoration.style.borderRadius!.bottomLeft,
+                bottomRight: decoration.style.borderRadius!.bottomRight,
               ),
               _strokePaint,
             );
@@ -224,7 +226,7 @@ extension _RenderHyperBoxPaint on RenderHyperBox {
         }
 
         // Restore layer if filter was applied
-        if (decoration.filter != null && enableComplexFilters) {
+        if (decoration.style.filter != null && enableComplexFilters) {
           canvas.restore();
         }
       }
diff --git a/packages/hyper_render_core/lib/src/core/render_hyper_box_types.dart b/packages/hyper_render_core/lib/src/core/render_hyper_box_types.dart
index 663f897..118c948 100644
--- a/packages/hyper_render_core/lib/src/core/render_hyper_box_types.dart
+++ b/packages/hyper_render_core/lib/src/core/render_hyper_box_types.dart
@@ -64,9 +64,8 @@ class FloatCarryover {
 }
 
 /// Inline decoration info for painting background/border across line breaks
-class _InlineDecoration {
-  final UDTNode node;
-  final List<Rect> rects;
+@immutable
+class _InlineDecorationStyle {
   final Color? backgroundColor;
   final Gradient? backgroundGradient;
   final Color? borderColor;
@@ -76,9 +75,7 @@ class _InlineDecoration {
   final ui.ImageFilter? filter;
   final ui.ImageFilter? backdropFilter;
 
-  _InlineDecoration({
-    required this.node,
-    required this.rects,
+  const _InlineDecorationStyle({
     this.backgroundColor,
     this.backgroundGradient,
     this.borderColor,
@@ -88,6 +85,45 @@ class _InlineDecoration {
     this.filter,
     this.backdropFilter,
   });
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is _InlineDecorationStyle &&
+          runtimeType == other.runtimeType &&
+          backgroundColor == other.backgroundColor &&
+          backgroundGradient == other.backgroundGradient &&
+          borderColor == other.borderColor &&
+          borderWidth == other.borderWidth &&
+          borderRadius == other.borderRadius &&
+          listEquals(boxShadow, other.boxShadow) &&
+          filter == other.filter &&
+          backdropFilter == other.backdropFilter;
+
+  @override
+  int get hashCode => Object.hash(
+        backgroundColor,
+        backgroundGradient,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        Object.hashAll(boxShadow ?? []),
+        filter,
+        backdropFilter,
+      );
+}
+
+/// Inline decoration info for painting background/border across line breaks
+class _InlineDecoration {
+  final UDTNode node;
+  final List<Rect> rects;
+  final _InlineDecorationStyle style;
+
+  _InlineDecoration({
+    required this.node,
+    required this.rects,
+    required this.style,
+  });
 }
 
 /// Block decoration info for painting border-left, background on block elements
diff --git a/packages/hyper_render_core/test/layout_optimization_test.dart b/packages/hyper_render_core/test/layout_optimization_test.dart
new file mode 100644
index 0000000..13e3eaf
--- /dev/null
+++ b/packages/hyper_render_core/test/layout_optimization_test.dart
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:hyper_render_core/hyper_render_core.dart';
+
+void main() {
+  group('Layout Optimization & Refactor Tests', () {
+    test('Emoji Surrogate Pair breaking should be handled safely', () {
+      final style = ComputedStyle(fontSize: 16);
+      final node = TextNode('😀');
+      final fragment = Fragment.text(
+        text: '😀',
+        sourceNode: node,
+        style: style,
+        characterOffset: 0,
+      );
+
+      expect(fragment.text, equals('😀'));
+      expect(fragment.text!.length, equals(2));
+    });
+
+    testWidgets('RenderHyperBox handles float layout without infinity loop',
+        (WidgetTester tester) async {
+      // Smoke test for the float loop fix.
+      final doc = DocumentNode(children: [
+        BlockNode(
+          tagName: 'div',
+          style: ComputedStyle(float: HyperFloat.left, width: 100, height: 0),
+          children: [TextNode('Float content')],
+        ),
+        BlockNode.p(children: [TextNode('Normal content')]),
+      ]);
+
+      // If it didn't hang/timeout, the loop was successfully broken.
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: HyperRenderWidget(
+              document: doc,
+            ),
+          ),
+        ),
+      );
+
+      expect(find.byType(HyperRenderWidget), findsOneWidget);
+    });
+
+    test('Rect merging logic principle verification', () {
+      final rect1 = Rect.fromLTWH(0, 0, 50, 20);
+      final rect2 = Rect.fromLTWH(50, 0, 50, 20);
+
+      bool canMerge = (rect1.top - rect2.top).abs() < 0.1 &&
+          (rect1.bottom - rect2.bottom).abs() < 0.1 &&
+          rect2.left <= rect1.right + 1.0;
+
+      expect(canMerge, isTrue);
+
+      final merged = rect1.expandToInclude(rect2);
+      expect(merged, equals(const Rect.fromLTWH(0, 0, 100, 20)));
+    });
+  });
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index 506b76f..8ada20a 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: hyper_render
 description: "Render HTML/Markdown/Delta at 60 FPS. The only Flutter renderer with CSS float layout, crash-free text selection, and CJK Ruby typography. Drop-in flutter_html alternative."
-version: 1.2.1
+version: 1.2.2
 homepage: https://github.com/brewkits/hyper_render
 repository: https://github.com/brewkits/hyper_render
 issue_tracker: https://github.com/brewkits/hyper_render/issues
diff --git a/pubspec_publish_ready.yaml b/pubspec_publish_ready.yaml
index 1a25d77..6e2acd6 100644
--- a/pubspec_publish_ready.yaml
+++ b/pubspec_publish_ready.yaml
@@ -1,6 +1,6 @@
 name: hyper_render
 description: "Render HTML/Markdown/Delta at 60 FPS. The only Flutter renderer with CSS float layout, crash-free text selection, and CJK Ruby typography. Drop-in flutter_html alternative."
-version: 1.2.1
+version: 1.2.2
 homepage: https://github.com/brewkits/hyper_render
 repository: https://github.com/brewkits/hyper_render
 issue_tracker: https://github.com/brewkits/hyper_render/issues
diff --git a/test/golden/goldens/blockquote.png b/test/golden/goldens/blockquote.png
index baf1742..e6c312d 100644
Binary files a/test/golden/goldens/blockquote.png and b/test/golden/goldens/blockquote.png differ
diff --git a/test/golden/goldens/cjk_kinsoku.png b/test/golden/goldens/cjk_kinsoku.png
index c9e5df5..cc73778 100644
Binary files a/test/golden/goldens/cjk_kinsoku.png and b/test/golden/goldens/cjk_kinsoku.png differ
diff --git a/test/golden/goldens/cjk_ruby.png b/test/golden/goldens/cjk_ruby.png
index 7e79642..252843c 100644
Binary files a/test/golden/goldens/cjk_ruby.png and b/test/golden/goldens/cjk_ruby.png differ
diff --git a/test/golden/goldens/code_block.png b/test/golden/goldens/code_block.png
index 21f2e1e..032f78d 100644
Binary files a/test/golden/goldens/code_block.png and b/test/golden/goldens/code_block.png differ
diff --git a/test/golden/goldens/definition_list.png b/test/golden/goldens/definition_list.png
index cfed2ae..87b5d2e 100644
Binary files a/test/golden/goldens/definition_list.png and b/test/golden/goldens/definition_list.png differ
diff --git a/test/golden/goldens/float_cjk.png b/test/golden/goldens/float_cjk.png
index e755f52..fa2eb29 100644
Binary files a/test/golden/goldens/float_cjk.png and b/test/golden/goldens/float_cjk.png differ
diff --git a/test/golden/goldens/float_clear.png b/test/golden/goldens/float_clear.png
index 6161399..a676499 100644
Binary files a/test/golden/goldens/float_clear.png and b/test/golden/goldens/float_clear.png differ
diff --git a/test/golden/goldens/float_left.png b/test/golden/goldens/float_left.png
index 3610056..abdefaa 100644
Binary files a/test/golden/goldens/float_left.png and b/test/golden/goldens/float_left.png differ
diff --git a/test/golden/goldens/float_right.png b/test/golden/goldens/float_right.png
index afad4aa..40b825e 100644
Binary files a/test/golden/goldens/float_right.png and b/test/golden/goldens/float_right.png differ
diff --git a/test/golden/goldens/full_article.png b/test/golden/goldens/full_article.png
index e142ac8..ad1f06b 100644
Binary files a/test/golden/goldens/full_article.png and b/test/golden/goldens/full_article.png differ
diff --git a/test/golden/goldens/headings.png b/test/golden/goldens/headings.png
index 53b5d0e..8865eff 100644
Binary files a/test/golden/goldens/headings.png and b/test/golden/goldens/headings.png differ
diff --git a/test/golden/goldens/image_placeholder.png b/test/golden/goldens/image_placeholder.png
index 9b6a562..dc0e4f2 100644
Binary files a/test/golden/goldens/image_placeholder.png and b/test/golden/goldens/image_placeholder.png differ
diff --git a/test/golden/goldens/links.png b/test/golden/goldens/links.png
index eb2d982..7ed0c01 100644
Binary files a/test/golden/goldens/links.png and b/test/golden/goldens/links.png differ
diff --git a/test/golden/goldens/mixed_inline.png b/test/golden/goldens/mixed_inline.png
index bd98d8b..419bfb6 100644
Binary files a/test/golden/goldens/mixed_inline.png and b/test/golden/goldens/mixed_inline.png differ
diff --git a/test/golden/goldens/mixed_lists.png b/test/golden/goldens/mixed_lists.png
index d9e8053..22fc9b7 100644
Binary files a/test/golden/goldens/mixed_lists.png and b/test/golden/goldens/mixed_lists.png differ
diff --git a/test/golden/goldens/ordered_list.png b/test/golden/goldens/ordered_list.png
index 97670e6..d0f9475 100644
Binary files a/test/golden/goldens/ordered_list.png and b/test/golden/goldens/ordered_list.png differ
diff --git a/test/golden/goldens/rtl_arabic.png b/test/golden/goldens/rtl_arabic.png
index 2daa824..c5328bf 100644
Binary files a/test/golden/goldens/rtl_arabic.png and b/test/golden/goldens/rtl_arabic.png differ
diff --git a/test/golden/goldens/rtl_hebrew.png b/test/golden/goldens/rtl_hebrew.png
index 545db26..c37f27f 100644
Binary files a/test/golden/goldens/rtl_hebrew.png and b/test/golden/goldens/rtl_hebrew.png differ
diff --git a/test/golden/goldens/rtl_mixed.png b/test/golden/goldens/rtl_mixed.png
index 3b8a775..ef08cde 100644
Binary files a/test/golden/goldens/rtl_mixed.png and b/test/golden/goldens/rtl_mixed.png differ
diff --git a/test/golden/goldens/table.png b/test/golden/goldens/table.png
index 17e0338..8babef5 100644
Binary files a/test/golden/goldens/table.png and b/test/golden/goldens/table.png differ
diff --git a/test/golden/goldens/table_spans.png b/test/golden/goldens/table_spans.png
index d575eca..7965e85 100644
Binary files a/test/golden/goldens/table_spans.png and b/test/golden/goldens/table_spans.png differ
diff --git a/test/golden/goldens/text_formatting.png b/test/golden/goldens/text_formatting.png
index e550143..fbafe7f 100644
Binary files a/test/golden/goldens/text_formatting.png and b/test/golden/goldens/text_formatting.png differ
diff --git a/test/golden/goldens/unordered_list.png b/test/golden/goldens/unordered_list.png
index 167ba19..e25aa0d 100644
Binary files a/test/golden/goldens/unordered_list.png and b/test/golden/goldens/unordered_list.png differ