@celestia-island/hikari 0.52.1 → 0.53.0

package/package.json

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

package/src/i18n/context.ts

@@ -54,6 +54,13 @@ localeCache.set("en", enFallback);
 // every language without knowing which locale is currently active.
 let mergedMessages: Record<string, Messages> = {};
 
+/** The app-selected hikari locale ("en" until setLocale runs). Date and
+ *  time formatters consume this so display follows the user's chosen
+ *  language instead of the browser's. */
+export function activeLocale(): string {
+  return state.locale;
+}
+
 export async function setLocale(locale: string): Promise<void> {
   if (!localeCache.has(locale)) {
     localeCache.set(locale, buildLocaleMessages(locale));

package/src/index.ts

@@ -268,6 +268,7 @@ export {
 export {
   useI18n,
   setLocale,
+  activeLocale,
   mergeMessages,
 } from "./i18n/context";
 
@@ -455,6 +456,8 @@ export {
   formatPriceUsd,
   formatRelativeTime,
   formatDateTime,
+  formatDate,
+  formatTime,
   formatMs,
   type RelativeTimeT,
 } from "./utils/format";

package/src/utils/format.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { formatRelativeTime, type RelativeTimeT } from "./format";
+import { formatDate, formatDateTime, formatRelativeTime, formatTime, type RelativeTimeT } from "./format";
 
 const MIN = 60_000;
 const HOUR = 3_600_000;
@@ -114,3 +114,47 @@ describe("formatRelativeTime", () => {
     expect(calls).toHaveLength(0);
   });
 });
+
+// ── Locale awareness (2026-09-15) ────────────────────────────────────
+// Every locale-sensitive formatter must follow the app-selected hikari
+// locale (setLocale), not the browser default: a zh-Hans app on an en
+// browser used to render dates as "9/13/2026" next to zh words.
+
+describe("locale-aware date formatting", () => {
+  it("formatDate composes the locale's full day label", async () => {
+    const { setLocale } = await import("../i18n/context");
+    const d = new Date(2026, 8, 13);
+    await setLocale("zh-Hans");
+    expect(formatDate(d, { month: "short", day: "numeric" })).toBe("9月13日");
+    await setLocale("en");
+    expect(formatDate(d, { month: "short", day: "numeric" })).toBe("Sep 13");
+    // Whole-date default: no opts = the locale's own date format.
+    expect(formatDate(d)).toContain("2026");
+  });
+
+  it("formatTime follows the locale's clock convention", async () => {
+    const { setLocale } = await import("../i18n/context");
+    const d = new Date(2026, 8, 13, 15, 24);
+    await setLocale("en");
+    expect(formatTime(d)).toMatch(/3:24/);
+    await setLocale("zh-Hans");
+    expect(formatTime(d)).toMatch(/15:24/);
+  });
+
+  it("formatDateTime renders through the app locale", async () => {
+    const { setLocale } = await import("../i18n/context");
+    await setLocale("ja");
+    const out = formatDateTime(new Date(2026, 8, 13, 15, 24));
+    expect(out).toMatch(/2026/);
+    // ja month rendering carries the 月 particle from the ja locale data.
+    expect(out).toMatch(/9月13日|9\/13/);
+    await setLocale("en");
+  });
+
+  it("formatDate/formatTime return empty for missing or invalid input", () => {
+    expect(formatDate("")).toBe("");
+    expect(formatDate("nope")).toBe("");
+    expect(formatTime(0)).toBe("");
+    expect(formatTime("junk")).toBe("");
+  });
+});

package/src/utils/format.ts

@@ -5,7 +5,14 @@
  * Consolidates the hand-rolled copies previously scattered across
  * arona (formatDate/formatUptime/formatNumber) and shittim-chest
  * (formatTokenCount/formatMediaTime).
- */
+ *
+ * Every locale-sensitive formatter resolves its locale through the
+ * hikari i18n state (activeLocale()), NOT the browser default: the app
+ * selects its language explicitly (setLocale on switch), and dates that
+ * follow the browser while every word around them follows the app read
+ * as mixed-language output (2026-09-15 user report: "9月 13" headings
+ * under a zh-Hans app on an en browser). */
+import { activeLocale } from "../i18n/context";
 
 /** "1234" -> "1.2k", "2500000" -> "2.5M". */
 export function formatTokenCount(n: number): string {
@@ -75,14 +82,15 @@ export function formatRelativeTime(
       t?.("common.time.weeksAgo", "{n} w ago", { n: weeks }) ?? `${weeks}w ago`
     );
   }
-  return d.toLocaleDateString();
+  return d.toLocaleDateString(activeLocale());
 }
 
 // Media timestamps ("m:ss") already live on the media-player kit — one
 // definition, re-exported so `../utils/format` is the single import site.
 export { formatMediaTime } from "../components/HkMediaControlBar";
 
-/** Absolute timestamp formatting with a shared locale-aware renderer. */
+/** Absolute timestamp formatting with a shared locale-aware renderer.
+ *  Follows the app-selected hikari locale (see activeLocale). */
 export function formatDateTime(
   input: string | number | Date,
   opts?: { dateStyle?: "short" | "medium" | "long"; timeStyle?: "short" | "medium" },
@@ -90,12 +98,39 @@ export function formatDateTime(
   if (!input) return "";
   const d = input instanceof Date ? input : new Date(input);
   if (isNaN(d.getTime())) return "";
-  return d.toLocaleString(undefined, {
+  return d.toLocaleString(activeLocale(), {
     dateStyle: opts?.dateStyle ?? "medium",
     timeStyle: opts?.timeStyle ?? "short",
   });
 }
 
+/** Date-only rendering (no time), following the app-selected hikari
+ *  locale. `opts` is the raw Intl.DateTimeFormatOptions passthrough —
+ *  omit it for the locale's whole-date default, or scope to a slice
+ *  (e.g. { month: "short", day: "numeric" } for day-group headings). */
+export function formatDate(
+  input: string | number | Date,
+  opts?: Intl.DateTimeFormatOptions,
+): string {
+  if (!input) return "";
+  const d = input instanceof Date ? input : new Date(input);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleDateString(activeLocale(), opts);
+}
+
+/** Time-only rendering (no date), following the app-selected hikari
+ *  locale. `opts` is the raw Intl.DateTimeFormatOptions passthrough —
+ *  omit it for the locale's default (en "3:24 PM", zh "15:24"). */
+export function formatTime(
+  input: string | number | Date,
+  opts?: Intl.DateTimeFormatOptions,
+): string {
+  if (!input) return "";
+  const d = input instanceof Date ? input : new Date(input);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleTimeString(activeLocale(), opts);
+}
+
 /** Milliseconds for latency/duration displays: sub-second keeps one
  *  decimal, >=1s switches to whole seconds (and beyond to minutes).
  *  Thousands-grouped for the rare large value. */