@celestia-island/hikari 0.54.1 → 0.54.2

package/package.json

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

package/src/components/HkFileBrowserDialog.tsx

@@ -81,7 +81,7 @@ function formatModified(value: string | number | undefined): string {
   if (value === undefined) return "";
   if (typeof value === "number") {
     const date = new Date(value);
-    return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+    return Number.isNaN(date.getTime()) ? String(value) : formatDateTime(date);
   }
   return value;
 }

package/src/components/HkModal.close-collapse.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Source contract for the DESKTOP modal close choreography (user report
+ * 2026-09-15): the unveil expands the visible box outward from the
+ * center (bottom-10% clip + +5% offset at t=0, full box at t=1), but the
+ * close had degenerated into a fade + downward drift — the box read as
+ * shrinking straight down instead of folding back into its center.
+ *
+ * The close now runs the unveil's TRUE reverse, which is only safe
+ * because the leave pins an identity clip: interpolating
+ * `none → inset()` is DISCRETE (the #508 regression — the footer band
+ * vanished at the first frame), while identical `inset → inset` shape
+ * functions interpolate continuously.
+ *
+ * Pinned on the stylesheet SOURCE (computed animation geometry is not
+ * observable in happy-dom), mirroring the themeToggleChrome /
+ * tokenHygiene guard pattern.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkModal.scss"), "utf-8");
+
+/** The desktop choreography block — the mobile sheet block (≤767px)
+ *  carries its own enter/leave classes and must not leak in. */
+const desktop = src.slice(
+  src.indexOf("@media (min-width: 768px)"),
+  src.indexOf("@media (max-width: 767px)"),
+);
+
+/** Body of one flat rule (no nested braces in this block). */
+function bodyOf(selector: string): string {
+  const escaped = selector.replace(/\./g, "\\.");
+  const match = desktop.match(new RegExp(`${escaped}\\s*{([^}]*)}`));
+  expect(match, `rule ${selector} must exist in the desktop block`).toBeTruthy();
+  return match![1].replace(/\s+/g, " ").trim();
+}
+
+function clipOf(selector: string): string {
+  const body = bodyOf(selector);
+  const match = body.match(/clip-path:\s*([^;]+);?/);
+  expect(match, `${selector} must declare a clip-path`).toBeTruthy();
+  return match![1].replace(/\s+/g, " ").trim();
+}
+
+describe("HkModal desktop close-collapse contract (user report 2026-09-15)", () => {
+  it("pins the identity clip in leave-from, identical to enter-to (no discrete clip jump)", () => {
+    // The #508 regression guard: leave-from WITHOUT a clip makes
+    // none → inset() interpolate discretely and the footer band vanish
+    // at the first frame of the close.
+    expect(clipOf(".hk-modal-content-leave-from")).toBe(
+      clipOf(".hk-modal-content-enter-to"),
+    );
+  });
+
+  it("mirrors the unveil geometry: leave-to clips like enter-from", () => {
+    // Bottom-10% clip + same rounding on both ends of the mirror — the
+    // visible box collapses symmetrically back to 90% centered.
+    expect(clipOf(".hk-modal-content-leave-to")).toBe(
+      clipOf(".hk-modal-content-enter-from"),
+    );
+  });
+
+  it("transitions clip-path on leave (the collapse animates, not snaps)", () => {
+    const body = bodyOf(".hk-modal-content-leave-active");
+    expect(body).toMatch(/clip-path\s+var\(--hk-modal-duration/);
+    expect(body).toMatch(/will-change:\s*[^;]*clip-path/);
+  });
+
+  it("keeps the close a rigid ride: no scaleY squash anywhere in the desktop block", () => {
+    // History: #512 collapsed via scaleY (content squashed), #524
+    // reverted to a bare drift. The clip choreography moves whole
+    // pixels of the visible window — the frame itself never distorts.
+    expect(desktop).not.toContain("scaleY");
+    expect(desktop).not.toContain("transform-origin");
+  });
+});

package/src/components/HkModal.scss

@@ -123,18 +123,26 @@
     will-change: transform, opacity, clip-path;
   }
 
-  // Close: the whole frame fades and drifts down as ONE piece — the
-  // unveil's clip does NOT re-run on close. Re-clipping first made the
-  // bottom band (usually the footer) vanish at the very first frame of
-  // the close while the rest was still on screen, which read as broken
-  // (user report 2026-09-14).
+  // Close: the unveil's TRUE reverse — the visible box collapses back
+  // toward the center (top edge sweeps down, bottom edge sweeps up,
+  // content rides rigidly — never squashed) while the frame fades
+  // (user report 2026-09-15: the fade+drift close read as the box
+  // shrinking straight down instead of folding back into its center).
+  // The earlier re-clip attempt (#508) broke because leave-from had no
+  // clip at all: interpolating `none → inset()` is DISCRETE, so the
+  // bottom band (the footer) vanished at the first frame. Pinning the
+  // identity clip in leave-from — byte-identical to enter-to — makes
+  // the same-shape insets interpolate continuously, which structurally
+  // rules that jump out while restoring the symmetric collapse.
   .hk-modal-content-leave-active {
     transition:
       opacity var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
       transform var(--hk-modal-duration, 0.32s)
+        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
+      clip-path var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: transform, opacity;
+    will-change: transform, opacity, clip-path;
   }
 
   .hk-modal-content-enter-from {
@@ -154,11 +162,20 @@
   .hk-modal-content-leave-from {
     opacity: 1;
     transform: translate(-50%, -50%);
+    // The pinned identity clip: identical to enter-to so the leave's
+    // clip interpolates (never jumps) — see the close note above.
+    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)));
   }
 
   .hk-modal-content-leave-to {
     opacity: 0;
+    // Mirror of enter-from: shifted +5% with the bottom 10% clipped, the
+    // visible box is 90% and centered — both edges ease toward the
+    // center line, exactly reversing the unveil.
     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)));
   }
 }
 

package/src/utils/format.test.ts

@@ -55,12 +55,16 @@ describe("formatRelativeTime", () => {
     expect(formatRelativeTime(ago(29 * DAY))).toBe("4w ago");
   });
 
-  it("falls to the absolute-date path at >= 30d", () => {
+  it("falls to the absolute-date path at >= 30d, in the app locale", async () => {
     const d = ago(30 * DAY);
-    // Do not pin a locale-specific rendering; assert the value comes
-    // from the same Date's toLocaleDateString().
-    expect(formatRelativeTime(d)).toBe(d.toLocaleDateString());
-    expect(formatRelativeTime(d).length).toBeGreaterThan(0);
+    // The absolute tier must follow the app-selected hikari locale (the
+    // R2 sweep found the old assertion compared the BROWSER default,
+    // which proves nothing about locale-following).
+    const { setLocale } = await import("../i18n/context");
+    await setLocale("zh-Hans");
+    expect(formatRelativeTime(d)).toBe(d.toLocaleDateString("zh-Hans"));
+    await setLocale("en");
+    expect(formatRelativeTime(d)).toBe(d.toLocaleDateString("en"));
   });
 
   it("clamps future timestamps into the justNow tier", () => {
@@ -107,10 +111,11 @@ describe("formatRelativeTime", () => {
     });
   });
 
-  it("keeps absolute dates away from the translator", () => {
+  it("keeps absolute dates away from the translator", async () => {
     const { t, calls } = makeCaptureT();
     const d = ago(45 * DAY);
-    expect(formatRelativeTime(d, t)).toBe(d.toLocaleDateString());
+    const { activeLocale } = await import("../i18n/context");
+    expect(formatRelativeTime(d, t)).toBe(d.toLocaleDateString(activeLocale()));
     expect(calls).toHaveLength(0);
   });
 });

package/src/utils/format.ts

@@ -56,7 +56,8 @@ export type RelativeTimeT = (
  *  Pass an optional translator for localized variants; defaults to
  *  compact English text. Tiers: <1min justNow, <60min minutes,
  *  <24h hours, <7d days, <30d weeks, otherwise an absolute
- *  locale-rendered date (browser locale, like formatDateTime).
+ *  locale-rendered date (the app-selected hikari locale, like
+ *  formatDateTime).
  *  The translator owns {n} interpolation — hikari's own useI18n().t
  *  does NOT interpolate named params, so wrap it (the canonical key
  *  set lives in the per-locale i18n time bundles). */