@celestia-island/hikari 0.55.244 → 0.55.245

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.244",
+  "version": "0.55.245",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkSidebar.rail.test.tsx

@@ -542,4 +542,36 @@ describe("HkSidebar standalone rail: the menu group fold survives its own swap",
       "the expanded sidebar inherits the closed group",
     ).toBe("false");
   });
+
+  it("keeps the scroll position across density flips (the #44 P3 audit finding)", async () => {
+    vi.useFakeTimers();
+    const c = mountSidebar({ width: "240px", collapsible: true, collapsedWidth: "64px" });
+
+    // Collapse to the rail and settle the dissolve.
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(500);
+    const bodies = () => c.container.querySelectorAll<HTMLElement>(".hk-sidebar-body");
+    const active = () => bodies()[bodies().length - 1]!;
+    expect(bodies().length, "one settled generation").toBe(1);
+
+    // The user scrolls the rail partway down…
+    active().scrollTop = 120;
+
+    // …then a peek flips the density (the shell keys the swap on
+    // `railActive && !peeking`, so every peek open/close is a flip).
+    c.aside().dispatchEvent(new Event("pointerenter"));
+    await vi.advanceTimersByTimeAsync(900);
+    expect(active().scrollTop, "the peek's full generation resumes the scroll").toBe(120);
+
+    // Leaving the peek flips back to the rail dress; the position must
+    // survive that remount too.
+    c.aside().dispatchEvent(new Event("pointerleave"));
+    await vi.advanceTimersByTimeAsync(900);
+    expect(active().scrollTop, "the rail generation resumes the scroll").toBe(120);
+
+    // And a full expand is the same crossing.
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(900);
+    expect(active().scrollTop, "the expanded body resumes the scroll").toBe(120);
+  });
 });

package/src/components/HkSidebar.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
 
 import "./HkSidebar.scss";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
@@ -143,6 +143,34 @@ export default defineComponent({
     onMounted(attachBodyScrollbar);
     watch([bodyRef, bodyWrapRef], attachBodyScrollbar);
 
+    // Density flips remount the body band (the rail swap renders each
+    // generation's body FRESH), which used to snap the scroll back to the
+    // top on every flip — including each hover-peek open/close, because
+    // the shell keys the swap on `railActive && !peeking` (the #44 P3
+    // audit finding; probed: scrollTop 120 -> peek -> 0 -> back -> 0).
+    // The sidebar's own instance SURVIVES the flip (the swap lives inside
+    // it), so the position only needs to cross the remount. A flip patches
+    // the shared ref old -> null -> new: the null step still sees the
+    // LEAVING element as the old value (its DOM is alive for the
+    // dissolve), which is where the position is read from — an event-only
+    // save would miss programmatic scrolls (no `scroll` event fires for
+    // them), so the read happens on the ref hand-off itself and the
+    // onScroll below merely keeps the value fresh between flips. Raw
+    // scrollTop is an approximation across dresses (rail rows and full
+    // rows have different heights) — an exact restore would need an
+    // item-keyed anchor, not worth it for a nav list; the browser clamps
+    // any overshoot.
+    const savedScrollTop = ref(0);
+    const onBodyScroll = (e: Event): void => {
+      savedScrollTop.value = (e.currentTarget as HTMLElement).scrollTop;
+    };
+    watch(bodyRef, async (body, leaving) => {
+      if (leaving) savedScrollTop.value = leaving.scrollTop;
+      if (!body) return;
+      await nextTick();
+      body.scrollTop = savedScrollTop.value;
+    });
+
     onBeforeUnmount(() => {
       bodyScrollbar?.detach();
       bodyScrollbar = null;
@@ -199,7 +227,7 @@ export default defineComponent({
           <header class="hk-sidebar-header">{slots.header()}</header>
         ) : null}
         <div ref={bodyWrapRef} class="hk-sidebar-body-wrap">
-          <div ref={bodyRef} class="hk-sidebar-body">
+          <div ref={bodyRef} class="hk-sidebar-body" onScroll={onBodyScroll}>
             {/* Scoped params (ignored by plain slots): the density that
                 owns THIS generation so a host renders icon-only rows
                 while collapsed and full rows during a peek, plus the