@celestia-island/hikari 0.55.72 → 0.55.74

package/package.json

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

package/src/composables/useSizeMorph.ts

@@ -529,6 +529,24 @@ export function useSizeMorph(
       dir === "reveal"
         ? `inset(0px 0 0 0 round ${radii})`
         : `inset(${insetPx}px 0 0 0 round ${radii})`;
+    // Reduced motion: the stylesheet collapses the clip transition to
+    // `none` — `transitionend` will never fire, and without this check the
+    // watchdog holds the clip for `durationMs + 350` ms while the page
+    // behind shows through it (round-24 phone report under
+    // `prefers-reduced-motion: reduce`: the sheet's top 254 px showed the
+    // page behind for 514 ms). Land now: the clip end state is already
+    // painted, the riders carry whatever motion survives, and the landing
+    // is the same `stopReveal()` that transitionend would have triggered.
+    let reduced = false;
+    try {
+      reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    } catch {
+      // matchMedia unavailable (SSR) — the sweep path is unreachable anyway.
+    }
+    if (reduced) {
+      stopReveal();
+      return;
+    }
     // The riders flip WITH the clip, in the same task, under a mirrored
     // transform transition — same duration, same easing, same start
     // moment, so the ride tracks the edge sample-for-sample. Their own

package/src/theme/themeLoaderContract.test.ts

@@ -73,12 +73,40 @@ describe("pre-paint theme loader mirrors the stock preset table", () => {
   });
 
   it("keeps the stored-id default literal a declared, known id", () => {
-    const match = /__celestiaDefaultTheme \|\| "([A-Za-z0-9_-]+)"/.exec(source);
+    // The chain is formatted across lines, so allow any whitespace between
+    // the operator and the literal.
+    const match = /__celestiaDefaultTheme\s*\|\|\s*"([A-Za-z0-9_-]+)"/.exec(source);
     expect(match, "the stored-id chain ends in a literal id").toBeTruthy();
     expect(declaredIds()).toContain(match![1]);
     expect(Object.keys(themePresets)).toContain(match![1]);
   });
 
+  it("consults the hikari engine keys ahead of the page default", () => {
+    // The running app persists its selection under these exact keys
+    // (useTheme.ts). Without them the loading screen repaints the default
+    // brand while the app restores another theme — the pre-paint and app
+    // halves would disagree on every non-default boot. The legacy per-app
+    // prefixed keys stay AHEAD of the engine keys for back-compat.
+    expect(source).toContain('localStorage.getItem("hikari-theme")');
+    expect(source).toContain('localStorage.getItem("hikari-theme-mode")');
+    // Order is asserted inside the tid chain itself — `window.__celestiaDefaultTheme`
+    // also appears earlier (the page-themes merge block), so a whole-file search
+    // would measure the wrong occurrence.
+    const chainStart = source.indexOf("var tid =");
+    const chainEnd = source.indexOf("var theme =", chainStart);
+    expect(chainStart, "the stored-id chain is still there").toBeGreaterThan(-1);
+    expect(chainEnd).toBeGreaterThan(chainStart);
+    const chain = source.slice(chainStart, chainEnd);
+    const prefixAt = chain.indexOf('storagePrefix() + "theme"');
+    const engineAt = chain.indexOf('localStorage.getItem("hikari-theme")');
+    const pageDefaultAt = chain.indexOf("window.__celestiaDefaultTheme");
+    expect(prefixAt, "the prefixed theme key is still read").toBeGreaterThan(-1);
+    expect(engineAt, "the engine theme key is read").toBeGreaterThan(-1);
+    expect(pageDefaultAt, "the page-declared default is still read").toBeGreaterThan(-1);
+    expect(engineAt, "prefixed key stays ahead of the engine key").toBeGreaterThan(prefixAt);
+    expect(engineAt, "engine key stays ahead of the page-declared default").toBeLessThan(pageDefaultAt);
+  });
+
   it.each(["dark", "light"] as const)(
     "mirrors every %s scheme's primary/bg/surface",
     (mode) => {