@hayasaka7/haya-pet 0.3.13 → 0.3.14

package/CHANGELOG.md

@@ -7,6 +7,22 @@ All notable changes to HAYA Pet are documented here. This project adheres to
 > 0.2.0 npm publish; they are listed under 0.2.1, which is the first version that
 > ships them.
 
+## [0.3.14]
+
+### Changed
+- **The session-bubble folder now opens and closes with a smooth animation.**
+  Folding or unfolding the bubbles used to pop them in and out instantly; the
+  panel now grows out of (and shrinks back into) the folder button's corner with
+  a light scale-and-fade — a macOS-popover feel. The transform-origin follows the
+  panel's open direction and alignment, so it always springs from whichever corner
+  sits against the button. The animation is GPU-composited (transform + opacity
+  only, no reflow), so the folder button and the placement math stay put; the list
+  also **stays mounted while collapsed**, which preserves both the scroll position
+  and the live status spinner across a toggle, and it drops out of hit-testing once
+  hidden so the pixel-precise click-through overlay still ignores it. A
+  reduced-motion preference (`prefers-reduced-motion`) snaps the panel open/closed
+  instead of animating.
+
 ## [0.3.13]
 
 ### Added

package/apps/companion/src/renderer/session-bubbles.js

@@ -56,26 +56,23 @@ export function createBubbleList(container, { collapsed = false, onRender } = {}
     }
     updateFolderButton(folderButtonEl, lastBubbles, isCollapsed);
 
-    if (isCollapsed) {
-      // Drop the list while collapsed; it's rebuilt (with restored scroll) on
-      // the next expand. Collapse/expand is an explicit user action, so losing
-      // an in-progress scroll gesture there is fine.
-      if (listEl) {
-        listEl.remove();
-        listEl = undefined;
-      }
-    } else {
-      if (!listEl) {
-        // The list itself must be pointer-active (not just the bubbles): with
-        // more than three sessions it scrolls, and the scrollbar + the gaps
-        // between bubbles belong to the list element — if it stayed
-        // click-through, wheel/drag there would fall through to the desktop.
-        listEl = document.createElement("div");
-        listEl.className = "bubble-list interactive";
-        container.appendChild(listEl);
-      }
-      reconcileBubbles(listEl, lastBubbles);
+    // The list stays mounted whether open or collapsed so the collapse can
+    // animate out (a macOS-popover shrink+fade, see styles.css) instead of
+    // vanishing; this also preserves the scroll position and the spinner across
+    // a toggle. The `collapsed` class drives the transition and, once faded,
+    // drops the list from hit-testing (pointer-events + visibility), so the
+    // click-through overlay ignores it — hence it also sheds the `interactive`
+    // marker while collapsed.
+    if (!listEl) {
+      // The list itself must be pointer-active (not just the bubbles): with more
+      // than three sessions it scrolls, and the scrollbar + the gaps between
+      // bubbles belong to the list element — if it stayed click-through, wheel/
+      // drag there would fall through to the desktop.
+      listEl = document.createElement("div");
+      container.appendChild(listEl);
     }
+    reconcileBubbles(listEl, lastBubbles);
+    listEl.className = isCollapsed ? "bubble-list collapsed" : "bubble-list interactive";
 
     // Let the host reposition the panel now that its size is known. This must
     // happen BEFORE the scroll restore below: the host's placement pass is what
@@ -84,7 +81,9 @@ export function createBubbleList(container, { collapsed = false, onRender } = {}
     // scrollTop assigned to it would clamp back to 0.
     onRender?.();
 
-    if (listEl) {
+    // Restoring scroll only matters while the list is visible; a collapsed list
+    // keeps the scrollTop it had, so it reopens exactly where the user left it.
+    if (!isCollapsed) {
       applyListScroll(listEl, scrollTargetSessionId, lastScrollTop);
       lastScrollTop = listEl.scrollTop;
     }

package/apps/companion/src/renderer/styles.css

@@ -150,6 +150,25 @@ body {
   max-width: 300px;
   overflow-y: auto;
   pointer-events: auto;
+  /* Open/close grows out of the folder-button corner (transform-origin set per
+     open direction below), macOS-popover style. transform + opacity are
+     GPU-composited and don't reflow, so the button and placement math stay put. */
+  transform-origin: top left;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Collapsed: shrink toward the anchor corner and fade out, then drop out of
+   hit-testing (visibility + pointer-events) once the fade finishes so the
+   click-through overlay ignores it. Re-expanding reverses this instantly. */
+.bubble-list.collapsed {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+  visibility: hidden;
+  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+    visibility 0s 0.18s;
 }
 
 /* Scrolling is by design (at most three bubbles are visible at once), so give
@@ -176,6 +195,13 @@ body {
 .bubble-list[data-open-align="left"] { left: 0; right: auto; }
 .bubble-list[data-open-align="right"] { right: 0; left: auto; }
 
+/* Anchor the grow/shrink to whichever corner sits against the folder button, so
+   the panel appears to spring out of it (and collapse back into it). */
+.bubble-list[data-open-direction="down"][data-open-align="left"] { transform-origin: top left; }
+.bubble-list[data-open-direction="down"][data-open-align="right"] { transform-origin: top right; }
+.bubble-list[data-open-direction="up"][data-open-align="left"] { transform-origin: bottom left; }
+.bubble-list[data-open-direction="up"][data-open-align="right"] { transform-origin: bottom right; }
+
 .bubble {
   display: flex;
   align-items: flex-start;
@@ -270,3 +296,13 @@ body {
 @keyframes status-spin {
   to { transform: rotate(360deg); }
 }
+
+/* Respect a reduced-motion preference: snap the folder open/closed instead of
+   animating the caret and the panel. */
+@media (prefers-reduced-motion: reduce) {
+  .caret,
+  .bubble-list,
+  .bubble-list.collapsed {
+    transition: none;
+  }
+}

package/apps/companion/test/session-bubbles.test.mjs

@@ -110,7 +110,7 @@ test("updates the folder button in place (count and urgency dot)", () => {
   }
 });
 
-test("preserves scroll position across collapse and expand", () => {
+test("keeps the list mounted but marked collapsed, preserving scroll across a toggle", () => {
   const restoreDocument = installFakeDocument();
   try {
     const container = new FakeElement("div");
@@ -120,11 +120,20 @@ test("preserves scroll position across collapse and expand", () => {
     listView.render(bubbles);
     findList(container).scrollTop = 100;
 
+    // Collapsing keeps the node mounted (so it can animate out) but marks it
+    // collapsed and drops the `interactive` marker so hit-testing ignores it.
     listView.toggle();
-    assert.equal(findList(container), undefined);
-    listView.toggle();
+    const collapsed = findList(container);
+    assert.ok(collapsed);
+    assert.ok(collapsed.className.split(" ").includes("collapsed"));
+    assert.ok(!collapsed.className.split(" ").includes("interactive"));
 
-    assert.equal(findList(container).scrollTop, 100);
+    listView.toggle();
+    const expanded = findList(container);
+    assert.ok(!expanded.className.split(" ").includes("collapsed"));
+    assert.ok(expanded.className.split(" ").includes("interactive"));
+    // The scrollTop rode through untouched since the node was never rebuilt.
+    assert.equal(expanded.scrollTop, 100);
   } finally {
     restoreDocument();
   }
@@ -254,7 +263,7 @@ function makeBubbles(sessionIds) {
 }
 
 function findList(container) {
-  return container.children.find((child) => child.className === "bubble-list interactive");
+  return container.children.find((child) => child.className.split(" ").includes("bubble-list"));
 }
 
 function findButton(container) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayasaka7/haya-pet",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "type": "module",
   "description": "Generic AI CLI pet runtime foundation.",
   "keywords": [