From 49d014235f6640278b0aa388fb625bc0ea565ddd Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Thu, 2 Apr 2026 09:42:31 +0800
Subject: [PATCH] chore: record journal

---
 .trellis/workspace/hechang27-sprt/index.md    |  7 +-
 .../workspace/hechang27-sprt/journal-1.md     | 75 +++++++++++++++++++
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/.trellis/workspace/hechang27-sprt/index.md b/.trellis/workspace/hechang27-sprt/index.md
index 0c09ef1..c6f0946 100644
--- a/.trellis/workspace/hechang27-sprt/index.md
+++ b/.trellis/workspace/hechang27-sprt/index.md
@@ -8,8 +8,8 @@
 
 <!-- @@@auto:current-status -->
 - **Active File**: `journal-1.md`
-- **Total Sessions**: 11
-- **Last Active**: 2026-04-01
+- **Total Sessions**: 12
+- **Last Active**: 2026-04-02
 <!-- @@@/auto:current-status -->
 
 ---
@@ -19,7 +19,7 @@
 <!-- @@@auto:active-documents -->
 | File | Lines | Status |
 |------|-------|--------|
-| `journal-1.md` | ~444 | Active |
+| `journal-1.md` | ~519 | Active |
 <!-- @@@/auto:active-documents -->
 
 ---
@@ -29,6 +29,7 @@
 <!-- @@@auto:session-history -->
 | # | Date | Title | Commits |
 |---|------|-------|---------|
+| 12 | 2026-04-02 | Pretext integration exploration - virtual table issues | `0764ee2` |
 | 11 | 2026-04-01 | Research Pretext.js integration approach | `423d7ef` |
 | 10 | 2026-04-01 | Separate CSS classes for mini-table and real table cells | `423d7ef` |
 | 9 | 2026-03-31 | Optimize list-table-v2 resize performance | `5e88867` |
diff --git a/.trellis/workspace/hechang27-sprt/journal-1.md b/.trellis/workspace/hechang27-sprt/journal-1.md
index f080928..3e56454 100644
--- a/.trellis/workspace/hechang27-sprt/journal-1.md
+++ b/.trellis/workspace/hechang27-sprt/journal-1.md
@@ -442,3 +442,78 @@ Implemented 3-layer performance optimization for list-table-v2: (1) Height-chang
 ### Next Steps
 
 - None - task complete
+
+
+## Session 12: Pretext integration exploration - virtual table issues
+
+**Date**: 2026-04-02
+**Task**: Pretext integration exploration - virtual table issues
+
+### Summary
+
+(Add summary)
+
+### Main Changes
+
+## Session Summary
+
+Attempted to integrate Pretext.js into `list-table-v2.vue` for synchronous row height calculation without DOM reflow.
+
+## What Was Done
+
+1. **Created `useColumnWidthCalculator.ts`** - Composable that mathematically replicates CSS flexbox column width distribution for el-table-v2
+
+2. **Created `usePretextHeight.ts`** - Composable for calculating text heights using Pretext.js with caching
+
+3. **Attempted VirtualTable approach** - Created a functional JSX component inside list-table-v2 that:
+   - Receives width directly from `el-auto-resizer` slot props
+   - Calculates `estimatedRowHeight` using Pretext synchronously during render
+   - Uses `toRaw()` to break reactive chains and avoid recursion
+
+4. **Issues encountered**:
+   - **Recursion error**: `onItemRendered` callback in el-table-v2 was triggering reactive loops
+   - **Fixed by** removing nested `computed` and using `toRaw()`
+   - **Virtual row count bug**: el-table-v2 only rendered 3 rows instead of ~10 with estimatedRowHeight set
+   - The VirtualTable approach caused el-table-v2's DynamicSizeGrid to miscalculate the virtual scroll window
+
+5. **Root cause**: el-table-v2's DynamicSizeGrid uses `estimatedRowHeight` to calculate how many rows to render in the viewport. With actual rows at 28px but estimated heights causing miscalculations, the virtual scroller wasn't showing all rows.
+
+6. **Reverted changes**: Reverted list-table-v2.vue to original code since the VirtualTable approach wasn't working correctly.
+
+## Key Files Created
+
+- `packages/base/data/useColumnWidthCalculator.ts` - Flex column width calculator
+- `packages/base/data/usePretextHeight.ts` - Pretext height calculator composable
+
+## Lessons Learned
+
+1. el-table-v2's virtual scrolling is sensitive to `estimatedRowHeight` accuracy
+2. CSS variables don't work in Canvas (Pretext) context - must use plain font specs
+3. Reactive loops can occur when el-table-v2 callbacks trigger Vue reactivity
+4. `toRaw()` helps break reactivity but isn't a complete solution
+5. The original mini-table DOM measurement approach works correctly (10 rows showing)
+
+## Next Steps
+
+- Investigate why el-table-v2's DynamicSizeGrid miscalculates with Pretext-estimated heights
+- Consider using Pretext only for initial estimate, then relying on mini-table for refinement
+- Or find a different integration point that doesn't conflict with el-table-v2's internal calculations
+
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `0764ee2` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete