@squadbase/vantage 0.6.2-dev1.54bde93 → 0.6.2-dev1.5c79ef5

package/registry/ui/trend-indicator.tsx

@@ -15,6 +15,153 @@ import { cva } from "class-variance-authority"
 
 import { cn } from "@squadbase/vantage/ui"
 import type { TrendDirection } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
+
+const TEXT = {
+  ja: {
+    flat: (value: number) => `変化なし ${value}%`,
+    up: (value: number) => `${value}% 増加`,
+    down: (value: number) => `${value}% 減少`,
+  },
+  en: {
+    flat: (value: number) => `No change ${value}%`,
+    up: (value: number) => `Up ${value}%`,
+    down: (value: number) => `Down ${value}%`,
+  },
+}
 
 const trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
   variants: {
@@ -51,12 +198,8 @@ export const TrendIndicator = forwardRef<HTMLSpanElement, TrendIndicatorProps>(
 
     const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus
 
-    const ariaLabel =
-      direction === "neutral"
-        ? `変化なし ${value}%`
-        : direction === "up"
-          ? `${value}% 増加`
-          : `${value}% 減少`
+    const t = TEXT[uiLanguage(useLocale())]
+    const ariaLabel = direction === "neutral" ? t.flat(value) : direction === "up" ? t.up(value) : t.down(value)
 
     return (
       <span

package/registry/ui/updated-at.tsx

@@ -7,8 +7,9 @@
  * instant, with the absolute time and zone ("2026/10/20 16:41 JST") in both a
  * tooltip and the `title` attribute.
  *
- * `variant="relative"` (default) reads "23 分前に更新"; `"absolute-first"` reads
- * "16:41 更新（23 分前）" (the date is added when it is not today).
+ * `variant="relative"` (default) reads "Updated 23 minutes ago" (ja: "23 分前に更新"); `"absolute-first"` reads
+ * "Updated 16:41 (23 minutes ago)" (ja: "16:41 更新（23 分前）") (the date is added when it is not today).
+ * The language and date format follow the page (`<html lang>`).
  *
  * Hydration-safe: the first render (server and client) is an empty `<time>`
  * carrying only the ISO `dateTime`, because the text depends on the clock and
@@ -24,9 +25,156 @@ import { EMPTY_VALUE, formatDate } from "@squadbase/vantage/components"
 import { formatRelativeTime } from "@squadbase/vantage/components"
 import { cn } from "@squadbase/vantage/ui"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@squadbase/vantage/ui"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
 
 const REFRESH_MS = 60_000
 
+const TEXT = {
+  ja: {
+    justNow: "たった今",
+    relative: (relative: string) => `${relative}に更新`,
+    absoluteFirst: (shown: string, relative: string) => `${shown} 更新（${relative}）`,
+  },
+  en: {
+    justNow: "just now",
+    relative: (relative: string) => `Updated ${relative}`,
+    absoluteFirst: (shown: string, relative: string) => `Updated ${shown} (${relative})`,
+  },
+}
+
 export interface UpdatedAtProps {
   /** When the data was last updated. */
   at: Date | string | number
@@ -44,35 +192,41 @@ export interface UpdatedAtProps {
 const toMs = (value: Date | string | number) =>
   value instanceof Date ? value.getTime() : new Date(value).getTime()
 
-function relative(at: number, now: number): string {
-  if (now - at < REFRESH_MS && now - at > -REFRESH_MS) return "たった今"
-  return formatRelativeTime(at, { now })
+function relative(at: number, now: number, locale: string): string {
+  if (now - at < REFRESH_MS && now - at > -REFRESH_MS) return TEXT[uiLanguage(locale)].justNow
+  return formatRelativeTime(at, { now, locale })
 }
 
 /** "2026/10/20 16:41 JST" */
-function absolute(at: number, timeZone?: string): string | undefined {
+function absolute(at: number, locale: string, timeZone?: string): string | undefined {
   if (!Number.isFinite(at)) return undefined
-  const zone = new Intl.DateTimeFormat("ja-JP", { timeZone, timeZoneName: "short" })
+  const zone = new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "short" })
     .formatToParts(at)
     .find((part) => part.type === "timeZoneName")?.value
-  const text = formatDate(at, "datetime", "ja-JP", { timeZone })
+  const text = formatDate(at, "datetime", locale, { timeZone })
   return zone ? `${text} ${zone}` : text
 }
 
-function label(at: number, now: number, variant: "relative" | "absolute-first", timeZone?: string): string {
+function label(at: number, now: number, variant: "relative" | "absolute-first", locale: string, timeZone?: string): string {
   if (!Number.isFinite(at) || !Number.isFinite(now)) return EMPTY_VALUE
+  const t = TEXT[uiLanguage(locale)]
   if (variant === "relative") {
-    return now - at < REFRESH_MS && now - at > -REFRESH_MS ? "たった今" : `${relative(at, now)}に更新`
+    return now - at < REFRESH_MS && now - at > -REFRESH_MS
+      ? uiLanguage(locale) === "ja"
+        ? t.justNow
+        : t.relative(t.justNow)
+      : t.relative(relative(at, now, locale))
   }
-  const today = formatDate(at, "date", "ja-JP", { timeZone }) === formatDate(now, "date", "ja-JP", { timeZone })
-  const when = formatDate(at, "datetime", "ja-JP", { timeZone })
-  // "2026/10/20 16:41" -> time only when it is today.
+  const today = formatDate(at, "date", locale, { timeZone }) === formatDate(now, "date", locale, { timeZone })
+  const when = formatDate(at, "datetime", locale, { timeZone })
+  // "2026/10/20 16:41" -> time only when it is today (the time is always the last 5 characters: hourCycle h23).
   const shown = today ? when.slice(-5) : when
-  return `${shown} 更新（${relative(at, now)}）`
+  return t.absoluteFirst(shown, relative(at, now, locale))
 }
 
 export const UpdatedAt = forwardRef<HTMLTimeElement, UpdatedAtProps>(
   ({ at, variant = "relative", timeZone, prefix, now, className }, ref) => {
+    const locale = useLocale()
     const atMs = toMs(at)
     const [current, setCurrent] = useState<number | null>(null)
     const fixed = now === undefined ? undefined : toMs(now as Date | number)
@@ -87,9 +241,9 @@ export const UpdatedAt = forwardRef<HTMLTimeElement, UpdatedAtProps>(
     const clock = fixed ?? current
     const ready = clock !== null
     const dateTime = Number.isFinite(atMs) ? new Date(atMs).toISOString() : undefined
-    const full = ready ? absolute(atMs, timeZone) : undefined
+    const full = ready ? absolute(atMs, locale, timeZone) : undefined
     const classes = cn("text-sm text-muted-foreground tabular-nums", className)
-    const text = ready ? `${prefix ?? ""}${label(atMs, clock, variant, timeZone)}` : null
+    const text = ready ? `${prefix ?? ""}${label(atMs, clock, variant, locale, timeZone)}` : null
 
     if (!full) {
       return (