@celestia-island/hikari 0.49.0 → 0.49.1

package/package.json

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

package/src/components/HkBlockingToast.scss

@@ -11,7 +11,7 @@
   top: 4rem;
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
-  inset-inline-end: var(--viewport-gutter, 1rem);
+  inset-inline-end: var(--viewport-gutter, 16px);
   z-index: var(--hk-z-toast, 4000);
   max-width: 24rem;
   pointer-events: none;

package/src/components/HkDatePicker.test.ts

@@ -48,6 +48,43 @@ async function settle() {
   await nextTick();
 }
 
+/** Poll until the drilled view's title button reads `expected`. The drill
+ *  transition is frame/timeout based and a fixed 20 ms settle raced it on
+ *  the CI runner (the year-grid test once read the previous view's title),
+ *  so the view STATE — not a sleep — is what this waits on. */
+function titleText(): string {
+  return panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent ?? "";
+}
+
+async function waitForTitle(expected: string): Promise<void> {
+  const deadline = Date.now() + 2000;
+  for (;;) {
+    if (titleText() === expected) return;
+    if (Date.now() > deadline) {
+      throw new Error(`title never became ${JSON.stringify(expected)} (last: ${JSON.stringify(titleText())})`);
+    }
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
+/** 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 titleBtn(): HTMLButtonElement | null | undefined {
+  return panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn");
+}
+
+/** The pick cells of the CURRENT view (months or years, both carry 12). */
+function pickCells(): HTMLButtonElement[] {
+  return Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
+}
+
 function openViaEnter(harness: PickerHarness) {
   const trigger = harness.container.querySelector<HTMLElement>(".hk-dp-trigger");
   trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
@@ -326,23 +363,24 @@ describe("HkDatePicker", () => {
     const p = mountPicker({ modelValue: "2026-08-16" });
     openViaEnter(p);
     await nextTick();
-    // days → months
-    panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
-    await settle();
-    // months → years (the year button is the months-view title)
-    panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
-    await settle();
-    const yearCells = Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
-    expect(yearCells.length).toBe(12);
-    // 2027 sits inside the 2016–2027 block of the 2026 view year.
-    const t2027 = yearCells.find((c) => c.textContent === "2027");
-    t2027?.click();
-    await settle();
-    expect(panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent).toBe("2027");
-    const months = Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
-    months[6]?.click(); // July
-    await settle();
-    expect(panel()?.querySelectorAll(".hk-dp-cell").length).toBe(42);
+    // Every drill below waits for the DESTINATION view's state, not a
+    // fixed settle: the transition is frame/timeout based and the CI
+    // runner raced both the days→months click (the second click landed
+    // mid-transition and was swallowed) and the months→years read.
+    // days → months: the title button becomes the view year.
+    titleBtn()?.click();
+    await waitForView("the months grid of 2026", () => titleText() === "2026");
+    // months → years (the year button is the months-view title): the
+    // 2016–2027 block of the 2026 view year holds a 2027 cell.
+    titleBtn()?.click();
+    await waitForView("the year grid showing 2027", () =>
+      pickCells().some((c) => c.textContent === "2027"));
+    pickCells().find((c) => c.textContent === "2027")?.click();
+    // Picking a year lands on the months grid of that year.
+    await waitForTitle("2027");
+    pickCells()[6]?.click(); // July
+    // ...and picking a month lands back on the days grid.
+    await waitForView("the days grid", () => panel()?.querySelectorAll(".hk-dp-cell").length === 42);
     const fmt = new Intl.DateTimeFormat("en", { year: "numeric", month: "long" });
     expect(panel()?.querySelector<HTMLElement>(".hk-dp-title")?.textContent).toContain(
       fmt.format(new Date(2027, 6, 1)),

package/src/components/HkDateTimePicker.test.ts

@@ -8,6 +8,29 @@ const mounts: ReturnType<typeof createApp>[] = [];
 const containers: HTMLElement[] = [];
 const originalWidth = window.innerWidth;
 
+/** The fixed model the suite mounts with. Every expected year/month/day
+ *  in the assertions derives from THIS constant — never from a bare
+ *  literal, and never from Date.now() — so the file cannot rot when a
+ *  calendar year rolls over. */
+const BASE = new Date(2026, 7, 16, 9, 30);
+
+/** Local-ISO day (`YYYY-MM-DD`) — the native date input's wire format. */
+function isoDay(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+/** Local-ISO minute (`YYYY-MM-DDTHH:mm`) — datetime-local's wire format. */
+function isoMinute(d: Date): string {
+  return `${isoDay(d)}T${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+/** A day inside the mounted (BASE) month, optionally with a clock time. */
+function dayOf(day: number, hours?: number, minutes?: number): Date {
+  return hours === undefined
+    ? new Date(BASE.getFullYear(), BASE.getMonth(), day)
+    : new Date(BASE.getFullYear(), BASE.getMonth(), day, hours, minutes ?? 0);
+}
+
 interface PickerHarness {
   container: HTMLElement;
   emitted: Date[];
@@ -18,7 +41,7 @@ function mountPicker(props: Record<string, unknown> = {}): PickerHarness {
   document.body.appendChild(container);
   containers.push(container);
 
-  const value = ref(props.modelValue as Date ?? new Date(2026, 7, 16, 9, 30));
+  const value = ref(props.modelValue as Date ?? BASE);
   const emitted: Date[] = [];
   const Wrapper = defineComponent({
     setup() {
@@ -44,6 +67,22 @@ async function settle() {
   await nextTick();
 }
 
+/** Poll until the drilled view's title button reads `expected`. The drill
+ *  transition is frame/timeout based and a fixed 20 ms settle raced it
+ *  under full-suite load (the assertion once read the days-view title),
+ *  so the view STATE — not a sleep — is what this waits on. */
+async function waitForTitle(expected: string): Promise<void> {
+  const deadline = Date.now() + 2000;
+  for (;;) {
+    const title = picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent ?? "";
+    if (title === expected) return;
+    if (Date.now() > deadline) {
+      throw new Error(`title never became ${JSON.stringify(expected)} (last: ${JSON.stringify(title)})`);
+    }
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
 function picker(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".hk-dtp");
 }
@@ -124,7 +163,9 @@ describe("HkDateTimePicker", () => {
 
   it("re-derives month and weekday labels after a locale switch", async () => {
     mountPicker();
-    const zhMonth = new Intl.DateTimeFormat("zh-Hans", { month: "long" }).format(new Date(2026, 7, 1));
+    const zhMonth = new Intl.DateTimeFormat("zh-Hans", { month: "long" }).format(
+      new Date(BASE.getFullYear(), BASE.getMonth(), 1),
+    );
     await setLocale("zh-Hans");
     await nextTick();
     const title = picker()?.querySelector<HTMLElement>(".hk-dtp-title-btn")?.textContent ?? "";
@@ -173,14 +214,14 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle(String(BASE.getFullYear()));
     const navs = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-nav");
     navs?.[1].click();
     await nextTick();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2027");
+    await waitForTitle(String(BASE.getFullYear() + 1));
     navs?.[0].click();
     await nextTick();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle(String(BASE.getFullYear()));
   });
 
   it("time stepper bumps keep the drilled month view instead of snapping back", async () => {
@@ -205,14 +246,14 @@ describe("HkDateTimePicker", () => {
     expect(p.emitted.length).toBe(1);
     const d = p.emitted[0];
     expect(d instanceof Date).toBe(true);
-    expect([d.getFullYear(), d.getMonth(), d.getDate()]).toEqual([2026, 7, 20]);
+    expect([d.getFullYear(), d.getMonth(), d.getDate()]).toEqual([BASE.getFullYear(), BASE.getMonth(), 20]);
     expect([d.getHours(), d.getMinutes()]).toEqual([9, 30]);
   });
 
   it("disables days outside the inclusive min/max bounds", () => {
     mountPicker({
-      min: new Date(2026, 7, 10, 0, 0),
-      max: new Date(2026, 7, 20, 23, 59),
+      min: new Date(BASE.getFullYear(), BASE.getMonth(), 10, 0, 0),
+      max: new Date(BASE.getFullYear(), BASE.getMonth(), 20, 23, 59),
     });
     const byDay = new Map(
       dayCells().filter((c) => !c.classList.contains("is-out")).map((c) => [c.textContent ?? "", c]),
@@ -224,14 +265,14 @@ describe("HkDateTimePicker", () => {
   });
 
   it("blocked days never emit an update when clicked", async () => {
-    const p = mountPicker({ max: new Date(2026, 7, 20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59) });
     clickDay(25);
     await nextTick();
     expect(p.emitted).toEqual([]);
   });
 
   it("marks days present in markedDays with a dot", () => {
-    mountPicker({ markedDays: new Set(["2026-08-18"]) });
+    mountPicker({ markedDays: new Set([isoDay(dayOf(18))]) });
     const marked = Array.from(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell") ?? [])
       .filter((c) => c.querySelector(".hk-dtp-cell-dot"));
     expect(marked.length).toBe(1);
@@ -257,7 +298,7 @@ describe("HkDateTimePicker", () => {
     const input = nativeInput(p.container);
     expect(input).not.toBeNull();
     expect(input?.type).toBe("datetime-local");
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
     expect(p.container.querySelector(".hk-dtp")).toBeNull();
     expect(p.container.querySelector(".hk-dtp-grid")).toBeNull();
   });
@@ -267,18 +308,15 @@ describe("HkDateTimePicker", () => {
     const p = mountPicker({ showTime: false });
     const input = nativeInput(p.container);
     expect(input?.type).toBe("date");
-    expect(input?.value).toBe("2026-08-16");
+    expect(input?.value).toBe(isoDay(BASE));
   });
 
   it("passes min/max through to the native input in its wire format", () => {
     useMobileViewport();
-    const p = mountPicker({
-      min: new Date(2026, 7, 10, 8, 0),
-      max: new Date(2026, 7, 20, 18, 30),
-    });
+    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30) });
     const input = nativeInput(p.container);
-    expect(input?.min).toBe("2026-08-10T08:00");
-    expect(input?.max).toBe("2026-08-20T18:30");
+    expect(input?.min).toBe(isoMinute(dayOf(10, 8, 0)));
+    expect(input?.max).toBe(isoMinute(dayOf(20, 18, 30)));
   });
 
   it("keeps the custom calendar on mobile when nativeOnMobile is false", () => {
@@ -295,33 +333,34 @@ describe("HkDateTimePicker", () => {
     useMobileViewport();
     const p = mountPicker();
     const input = nativeInput(p.container);
-    input!.value = "2026-08-20T14:05";
+    input!.value = isoMinute(dayOf(20, 14, 5));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted.length).toBe(1);
-    expect(p.emitted[0].getTime()).toBe(new Date(2026, 7, 20, 14, 5).getTime());
-    expect(input?.value).toBe("2026-08-20T14:05");
+    expect(p.emitted[0].getTime()).toBe(dayOf(20, 14, 5).getTime());
+    expect(input?.value).toBe(isoMinute(dayOf(20, 14, 5)));
   });
 
   it("native date edits preserve the clock time when showTime is false", async () => {
     useMobileViewport();
     const p = mountPicker({ showTime: false });
     const input = nativeInput(p.container);
-    input!.value = "2026-08-20";
+    input!.value = isoDay(dayOf(20));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
-    expect(p.emitted[0].getTime()).toBe(new Date(2026, 7, 20, 9, 30).getTime());
+    expect(p.emitted[0].getTime()).toBe(dayOf(20, 9, 30).getTime());
   });
 
   it("native input edits outside the bounds are rejected and re-synced", async () => {
     useMobileViewport();
-    const p = mountPicker({ max: new Date(2026, 7, 20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59) });
     const input = nativeInput(p.container);
-    input!.value = "2026-09-01T10:00";
+    // Next month, past the max bound.
+    input!.value = isoMinute(new Date(BASE.getFullYear(), BASE.getMonth() + 1, 1, 10, 0));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted).toEqual([]);
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
   });
 
   it("clearing the native input falls back to the model value", async () => {
@@ -332,7 +371,7 @@ describe("HkDateTimePicker", () => {
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted).toEqual([]);
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
   });
 
   it("native input replaces even the popup chrome on mobile", () => {

package/src/components/HkToast.gutter.contract.test.ts

@@ -0,0 +1,25 @@
+/**
+ * Source contract: the toast stacks are floating layers too, so their
+ * screen-edge inset rides the same shared --viewport-gutter token as the
+ * anchored popups (16px desktop / 8px mobile, hikari #501). Pinned here
+ * so a refactor cannot quietly re-hardcode a pixel value or drift the
+ * fallback away from the token's declared desktop magnitude.
+ */
+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));
+
+describe("toast container viewport gutter contract", () => {
+  for (const sheet of ["HkToast.scss", "HkBlockingToast.scss"]) {
+    it(`${sheet} pins the container inset to the shared gutter token`, () => {
+      const css = readFileSync(join(here, sheet), "utf-8");
+      // EVERY inset-inline-end declaration in the sheet must be the
+      // gutter var — no re-hardcoded pixel sibling may creep in.
+      const decls = css.match(/inset-inline-end:[^;]+;/g) ?? [];
+      expect(decls).toEqual(["inset-inline-end: var(--viewport-gutter, 16px);"]);
+    });
+  }
+});

package/src/components/HkToast.scss

@@ -3,7 +3,7 @@
   top: 4rem;
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
-  inset-inline-end: var(--viewport-gutter, 1rem);
+  inset-inline-end: var(--viewport-gutter, 16px);
   /* Toast band — the topmost popup z band (POPUP_Z_BANDS.toast; mirror in
      theme.scss). The live value arrives inline from the popup manager. */
   z-index: var(--hk-z-toast, 4000);

package/src/runtime/historySafetyNet.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { installHistorySafetyNet, sanitizeHistoryUrl } from "./historySafetyNet";
+import { getHkRuntimeEntry } from "./registry";
 
 /**
  * The field bug this net closes (chest #754 lineage): some producer
@@ -136,4 +137,28 @@ describe("installHistorySafetyNet", () => {
     expect(sessionStorage.getItem("hikari:historyNet")).toBeNull();
     vi.restoreAllMocks();
   });
+
+  it("keeps the first install's fold target when a HALF-overwritten net re-patches", () => {
+    // The recorded half-self-heal edge: pushState keeps our patch while an
+    // external lib restores replaceState to native. A re-install with new
+    // options must NOT silently adopt them for the re-patched method —
+    // the still-installed first capture wins for behavior AND meta, or a
+    // per-method option split ships to production unnoticed.
+    installHistorySafetyNet({ fallback: "/" });
+    // Another library restores replaceState (pushState stays ours).
+    History.prototype.replaceState = nativeReplace;
+    // Re-install with a different fallback: the pushState marker makes
+    // this a no-op claim, so "/" must stay the active fold target.
+    installHistorySafetyNet({ fallback: "/landing" });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    history.replaceState(null, "", "https://evil.example/x");
+    // Folded to the FIRST install's "/" — never the re-install's
+    // "/landing" (which, being same-origin, would have navigated).
+    expect(window.location.pathname).toBe("/");
+    expect(sessionStorage.getItem("hikari:historyNet")).toContain("evil.example/x");
+    // ...and the registry meta reports the option set that is actually
+    // wired into the prototype, not the newest call's.
+    expect(getHkRuntimeEntry("historySafetyNet")?.meta?.fallback).toBe("/");
+    warn.mockRestore();
+  });
 });

package/src/runtime/historySafetyNet.ts

@@ -95,9 +95,15 @@ let historyNetRuntime: ReturnType<typeof reportHkRuntime> | null = null;
  *  our patch is still on the prototype skips re-patching (the `continue`
  *  below), so the first install's fallback/evidence stay in effect — the
  *  registry meta must report THOSE, not the newest call's options, or it
- *  would misreport the active fold target. */
+ *  would misreport the active fold target. The re-patch closure reads
+ *  THESE module captures, never the invocation locals: when a net is
+ *  HALF overwritten (say replaceState restored to native while pushState
+ *  is still ours) a re-install patches the foreign method with the
+ *  still-active capture, so behavior and meta can never diverge into
+ *  per-method options. */
 let activeFallback = "/";
 let activeEvidenceKey: string | false = DEFAULT_EVIDENCE_KEY;
+let activeOptions: HistorySafetyNetOptions = {};
 function ensureHistoryNetRuntime() {
   return (historyNetRuntime ??= reportHkRuntime("historySafetyNet", {
     kind: "hook",
@@ -120,6 +126,7 @@ export function installHistorySafetyNet(options: HistorySafetyNetOptions = {}):
     // active; a no-op re-install keeps the first install's capture.
     activeFallback = fallback;
     activeEvidenceKey = evidenceKey;
+    activeOptions = options;
   }
   ensureHistoryNetRuntime().setMeta({ fallback: activeFallback, evidenceKey: activeEvidenceKey === false ? "off" : activeEvidenceKey });
   ensureHistoryNetRuntime().pulse();
@@ -133,13 +140,16 @@ export function installHistorySafetyNet(options: HistorySafetyNetOptions = {}):
     }
     const native = current as (this: History, state: unknown, title: string, url?: string | URL | null) => unknown;
     if (typeof native !== "function") continue;
+    // The closure reads the ACTIVE capture, never this call's locals —
+    // the half-overwrite path above re-patches a foreign method while
+    // the first install's options stay in effect.
     const patched = function (this: History, state: unknown, title: string, url?: string | URL | null) {
-      const safe = sanitizeHistoryUrl(url, fallback);
+      const safe = sanitizeHistoryUrl(url, activeFallback);
       if (safe !== url) {
-        const info: HistoryCoercion = { method, raw: String(url ?? ""), foldedTo: fallback };
+        const info: HistoryCoercion = { method, raw: String(url ?? ""), foldedTo: activeFallback };
         coercions += 1;
         historyNetRuntime?.pulse({ coercions });
-        reportCoercion(info, evidenceKey, options);
+        reportCoercion(info, activeEvidenceKey, activeOptions);
       }
       return native.call(this, state as never, title, safe as never);
     };