feat: add wheel event handling and corresponding tests for x-foldview-ng

[PupilTong]

Summary by CodeRabbit

• New Features

  • Wheel support for foldview components enabling coordinated, smooth scrolling between parent and nested scroll areas.

• Tests

  • Added fixtures and an automated test suite validating wheel interaction scenarios, parent-first behavior, and smooth continuation into inner scroll regions.

• Chores

  • Added a patch release entry for the web-elements package.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: c4761b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@lynx-js/web-elements	Patch
@lynx-js/web-core-wasm	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds non-passive wheel handling and centralized scroll-delta coordination to x-foldview-ng; introduces two HTML test fixtures and a Playwright test suite validating parent/child wheel scrolling behaviors.

Changes

Cohort / File(s)	Summary
Changeset \.changeset/nasty-clouds-win.md	New patch changeset entry for @lynx-js/web-elements announcing wheel handling and tests.
Core implementation packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts	Add non-passive wheel listener; introduce #handleWheel and #handleScrollDelta; refactor touch handling to delegate to scroll-delta workflow; maintain per-element scrollTop tracking and current-scrolling-element state.
Test fixtures packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/wheel-parent-first.html, packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/wheel-smooth-continue.html	New static fixtures with nested foldview and inner scrollable content to exercise wheel scenarios.
Test suite packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts	New Playwright tests and helpers (wait, goto) with two cases (wheel-parent-first, wheel-smooth-continue) asserting outer/inner scroll behavior after wheel events.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• Sherry-hue
• colinaaa

Poem

🐰 I twitched my whiskers at the wheel,
A gentle nudge, a folded peel,
Parent rolled first, the children sighed,
Delta hops where scrolls abide,
I thump a joyful, looping heel 🎠

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding wheel event handling support to x-foldview-ng and corresponding tests, which is reflected throughout the entire changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts`:
- Around line 178-188: The code currently updates the parent scroll twice by
assigning parentElement.scrollTop and then calling parentElement.scrollBy,
causing double-scrolling; modify the handler in
XFoldviewSlotNgTouchEventsHandler to only perform one action: if smoothParent is
true, calculate appliedDelta using this.#parentScrollTop and previousScrollTop
but do not set parentElement.scrollTop—use parentElement.scrollBy({ top:
appliedDelta, behavior: 'smooth' }) and update this.#parentScrollTop after the
smooth call; if smoothParent is false, set parentElement.scrollTop directly
using this.#parentScrollTop (and update this.#parentScrollTop accordingly) and
remove the redundant scrollBy call, keeping references to this.#parentScrollTop,
previousScrollTop, appliedDelta and smoothParent to locate the code.

🧹 Nitpick comments (4)

packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts (1)

109-113: Redundant null check.

this.#elements is always truthy after assignment on line 107, making the if check unnecessary.

♻️ Suggested simplification

-    if (this.#elements) {
-      for (const element of this.#elements) {
-        this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
-      }
+    for (const element of this.#elements) {
+      this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
     }

packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts (3)

7-11: Consider using Playwright's built-in waiting utilities.

Hardcoded setTimeout delays can cause test flakiness—tests may fail on slower CI machines or pass prematurely. Consider using Playwright's waitForFunction or expect(...).poll() for more reliable assertions.

♻️ Example using polling assertion

// Instead of:
await page.mouse.wheel(0, 120);
await wait(200);
expect(await foldview.evaluate((dom: HTMLElement) => dom.scrollTop)).toBeGreaterThan(foldviewInitial);

// Consider:
await page.mouse.wheel(0, 120);
await expect.poll(
  () => foldview.evaluate((dom: HTMLElement) => dom.scrollTop),
  { timeout: 2000 }
).toBeGreaterThan(foldviewInitial);

---

26-28: Redundant locator.

scrollview already references #inner-scroll (line 27), so line 28 can reuse it.

♻️ Suggested simplification

     const foldview = page.locator('#foldview');
     const scrollview = page.locator('#inner-scroll');
-    await page.locator('#inner-scroll').hover();
+    await scrollview.hover();

---

62-64: Same redundant locator pattern.

Reuse the scrollview variable for the hover call.

♻️ Suggested simplification

     const foldview = page.locator('#foldview');
     const scrollview = page.locator('#inner-scroll');
-    await page.locator('#inner-scroll').hover();
+    await scrollview.hover();

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will not alter performance

✅ 63 untouched benchmarks
⏩ 3 skipped benchmarks¹

---

_{Comparing PupilTong:p/hw/foldview-support-wheel (c4761b4) with main (5e7e43c)}

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

Web Explorer

#7378 Bundle Size — 384.73KiB (+0.13%).

c4761b4(current) vs 5e7e43c main#7374(baseline)

Bundle metrics   3 changes 1 regression

	Current #7378	Baseline #7374
Initial JS	154.71KiB(+0.32%)	154.23KiB
Initial CSS	35.05KiB	35.05KiB
Cache Invalidation	40.14%	0%
Chunks	8	8
Assets	8	8
Modules	238(-0.42%)	239
Duplicate Modules	16	16
Duplicate Code	2.99%	2.99%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #7378	Baseline #7374
JS	252.66KiB (+0.19%)	252.17KiB
Other	97.02KiB	97.02KiB
CSS	35.05KiB	35.05KiB

Bundle analysis report Branch PupilTong:p/hw/foldview-support-... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}