@celestia-island/hikari 0.49.2 → 0.49.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.49.2",
+  "version": "0.49.4",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkDatePicker.test.ts

@@ -393,7 +393,7 @@ describe("HkDatePicker", () => {
     await nextTick();
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
-    expect(panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle("2026");
     const navs = () => panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-nav");
     navs()?.[1].click();
     await nextTick();
@@ -413,23 +413,36 @@ describe("HkDatePicker", () => {
     const stage = panel()?.querySelector<HTMLElement>(".hk-dp-stage");
     expect(stage).not.toBeNull();
     expect(stage?.children.length).toBe(1); // the single days pane
+    const pickCount = () =>
+      stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length ?? 0;
+    // Destination state = the entering pane mounted AND the leaving pane
+    // gone; mid-transition both conditions half-hold.
+    const settledDrill = (days: boolean) => (): boolean =>
+      days
+        ? stage?.children.length === 1 &&
+          stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length === 42
+        : pickCount() === 12 && stage?.children.length === 1;
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
+    await waitForView("the months grid settled to one pane", settledDrill(false));
     expect(panel()?.querySelector<HTMLElement>(".hk-dp-stage")).toBe(stage);
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
     expect(stage?.children.length).toBe(1); // one pane at a time after settle
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
     await settle();
+    await waitForView("the years grid settled to one pane", settledDrill(false));
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     // back steps down the stack one level at a time: years → months → days.
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-back")?.click();
     await settle();
+    await waitForView("the months grid again, one pane", settledDrill(false));
     expect(stage?.getAttribute("data-dir")).toBe("back");
-    expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']").length).toBe(12);
+    expect(pickCount()).toBe(12);
     panel()?.querySelector<HTMLButtonElement>(".hk-dp-back")?.click();
     await settle();
+    await waitForView("the days grid settled to one pane", settledDrill(true));
     expect(stage?.getAttribute("data-dir")).toBe("back");
     expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length).toBe(42);
   });

package/src/components/HkDateTimePicker.test.ts

@@ -83,6 +83,20 @@ async function waitForTitle(expected: string): Promise<void> {
   }
 }
 
+/** The pick cells of the drilled months view (exactly 12 once mounted). */
+function pickCells(): HTMLButtonElement[] {
+  return Array.from(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell[data-variant='pick']") ?? []);
+}
+
+/** Generic state poll over the same drill race: wait until `probe` holds. */
+async function waitForView(desc: string, probe: () => boolean): Promise<void> {
+  const deadline = Date.now() + 2000;
+  while (!probe()) {
+    if (Date.now() > deadline) throw new Error(`view never reached: ${desc}`);
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
 function picker(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".hk-dtp");
 }
@@ -178,6 +192,10 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
+    // Destination state = the months pane mounted AND the leaving days
+    // pane gone — mid-transition both conditions half-hold.
+    await waitForView("the months grid settled to one pane", () =>
+      pickCells().length === 12 && picker()?.querySelectorAll(".hk-dtp-cell").length === 12);
     const cells = Array.from(picker()?.querySelectorAll<HTMLElement>(".hk-dtp-cell") ?? [])
       .map((c) => c.textContent ?? "");
     const expected = Array.from({ length: 12 }, (_, i) =>
@@ -196,6 +214,7 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
+    await waitForView("the months grid", () => pickCells().length === 12);
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
     expect(picker()?.querySelector<HTMLElement>(".hk-dtp-stage")).toBe(stage);
     expect(stage?.children.length).toBe(1); // one pane at a time after settle
@@ -205,8 +224,9 @@ describe("HkDateTimePicker", () => {
     expect(picker()?.querySelectorAll(".hk-dtp-step").length).toBe(2);
     picker()?.querySelector<HTMLButtonElement>(".hk-dtp-back")?.click();
     await settle();
+    await waitForView("the days grid settled to one pane", () =>
+      dayCells().length === 42 && stage?.children.length === 1);
     expect(stage?.getAttribute("data-dir")).toBe("back");
-    expect(dayCells().length).toBe(42);
   });
 
   it("shifts the year with the chevrons inside the month view", async () => {
@@ -229,7 +249,8 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    expect(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell[data-variant='pick']").length).toBe(12);
+    await waitForView("the months grid", () => pickCells().length === 12);
+    expect(pickCells().length).toBe(12);
     // The first step button is "Hour +"; bumping it changes only the time
     // part of the model, which must not yank the view back to days.
     const upBtn = picker()?.querySelector<HTMLButtonElement>(".hk-dtp-step-btn");

package/src/components/HkModal.scss

@@ -86,48 +86,64 @@
 }
 
 // ------
-// Content enter/leave transitions
+// Content enter/leave transitions (desktop ≥768px)
 //
-// Compositor-driven pop: the frame fades and scales 0.94 → 1 — transform
-// and opacity ONLY, no layout properties. The previous desktop reveal
-// animated `height` (calc-size keywords): height is a layout property, so
-// every animation frame re-laid-out the entire modal subtree — for a
-// content-heavy modal (a full graph stage, long report bodies) that is
-// visible frame drops through the whole open/close, made worse by the
-// frame's own backdrop-filter whose sampling region then also changed per
-// frame. transform/opacity run on the compositor: zero layout, zero
-// paint, and the blurred surface keeps a constant region. Mirrors the
-// mobile sheet's translateY reveal, which has always been transform-based.
+// Height-style unveil WITHOUT layout: the visible box starts at 90% of
+// its height and grows to 100% while the frame settles from a +5% offset
+// back to rest (user spec 2026-09-14). Numbers line up so the character
+// of the old height-grow reveal is preserved exactly:
+//   t=0  box [center−0.45h, center+0.45h] shifted +0.05h, bottom 10%
+//        clipped → visible [center−0.40h, center+0.40h] (the old 80%
+//        centered start);
+//   t=1  clip 0, offset 0 → visible [center−0.50h, center+0.50h];
+//   the bottom edge is pinned at its final line the whole time and the
+//   top edge sweeps up 0.1h — content rides rigidly (never squashed).
+// Implemented with transform (translate) + clip-path (inset) + opacity:
+// all compositor/paint-level, zero layout per frame — the previous
+// height-keyword reveal re-laid-out the entire modal subtree every frame
+// and re-filtered the frame's own backdrop blur per frame (visible frame
+// drops on content-heavy modals, chest history topic detail). Scoped to
+// ≥768px; ≤767px keeps the sheet's translateY choreography below.
 // ------
 
-.hk-modal-content-enter-active {
-  transition:
-    opacity var(--hk-modal-duration, 0.3s)
-      var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-    transform var(--hk-modal-duration, 0.3s)
-      var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
-  will-change: transform, opacity;
-}
+@media (min-width: 768px) {
+  .hk-modal-content-enter-active {
+    transition:
+      opacity var(--hk-modal-duration, 0.3s)
+        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
+      transform var(--hk-modal-duration, 0.3s)
+        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
+      clip-path var(--hk-modal-duration, 0.3s)
+        var(--hk-modal-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+    will-change: transform, opacity, clip-path;
+  }
 
-.hk-modal-content-leave-active {
-  transition:
-    opacity var(--hk-modal-duration, 0.25s)
-      var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
-    transform var(--hk-modal-duration, 0.25s)
-      var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
-  will-change: transform, opacity;
-}
+  .hk-modal-content-leave-active {
+    transition:
+      opacity var(--hk-modal-duration, 0.25s)
+        var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
+      transform var(--hk-modal-duration, 0.25s)
+        var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
+      clip-path var(--hk-modal-duration, 0.25s)
+        var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
+    will-change: transform, opacity, clip-path;
+  }
 
-.hk-modal-content-enter-from,
-.hk-modal-content-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.94);
-}
+  .hk-modal-content-enter-from,
+  .hk-modal-content-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) translateY(5%);
+    clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
+                                 var(--hk-modal-radius, var(--radius-lg, 12px)));
+  }
 
-.hk-modal-content-enter-to,
-.hk-modal-content-leave-from {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
+  .hk-modal-content-enter-to,
+  .hk-modal-content-leave-from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+    clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
+                              var(--hk-modal-radius, var(--radius-lg, 12px)));
+  }
 }
 
 // ------