@squadbase/vantage 0.6.2 → 0.7.0-stg.18ca87d

package/registry/ui/trend-indicator.tsx

@@ -0,0 +1,217 @@
+// Copied by `vantage add ui trend-indicator`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/trend-indicator.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * TrendIndicator — an arrow plus percentage change. Colour tracks *sentiment*,
+ * not direction: set `positiveIsGood={false}` for metrics where going up is bad
+ * (churn, error rate) and a rise renders as negative.
+ *
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+import { forwardRef } from "react"
+import { ArrowDown, ArrowUp, Minus } from "lucide-react"
+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: {
+    sentiment: {
+      positive: "text-positive",
+      negative: "text-negative",
+      neutral: "text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    sentiment: "neutral",
+  },
+})
+
+/**
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+export interface TrendIndicatorProps {
+  value: number
+  direction: TrendDirection
+  positiveIsGood?: boolean
+  className?: string
+}
+
+/**
+ * Arrow plus percentage change.
+ *
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+export const TrendIndicator = forwardRef<HTMLSpanElement, TrendIndicatorProps>(
+  ({ value, direction, positiveIsGood = true, className }, ref) => {
+    const isGood = direction === "neutral" ? null : (direction === "up") === positiveIsGood
+    const sentiment = isGood === null ? "neutral" : isGood ? "positive" : "negative"
+
+    const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus
+
+    const t = TEXT[uiLanguage(useLocale())]
+    const ariaLabel = direction === "neutral" ? t.flat(value) : direction === "up" ? t.up(value) : t.down(value)
+
+    return (
+      <span
+        ref={ref}
+        data-slot="trend-indicator"
+        className={cn(trendIndicatorVariants({ sentiment }), className)}
+        aria-label={ariaLabel}
+      >
+        <Icon className="size-3.5" aria-hidden="true" />
+        <span>{value}%</span>
+      </span>
+    )
+  },
+)
+TrendIndicator.displayName = "TrendIndicator"

package/registry/ui/updated-at.tsx

@@ -0,0 +1,276 @@
+// Copied by `vantage add ui updated-at`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/updated-at.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * UpdatedAt — freshness label. Renders a `<time>` whose `dateTime` is the ISO
+ * 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 "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
+ * time zone of whoever renders. After mount it shows the label and refreshes
+ * every 60 seconds; the interval is cleared on unmount. `now` pins the clock
+ * (tests, fixtures) and skips the timer; `timeZone` pins the zone. The `<time>`
+ * sets `suppressHydrationWarning` so sample data built from `Date.now()` at
+ * module load (which differs between server and client) does not warn.
+ */
+import { forwardRef, useEffect, useState } from "react"
+
+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
+  /** `"relative"` (default): "23 分前に更新". `"absolute-first"`: "16:41 更新（23 分前）" — for pages where "now" matters. */
+  variant?: "relative" | "absolute-first"
+  /** IANA time zone (e.g. `"Asia/Tokyo"`) for the absolute time. Defaults to the runtime's zone. */
+  timeZone?: string
+  /** Text placed before the label, e.g. `"売上データ: "`. */
+  prefix?: string
+  /** Fixed "current time" for tests and fixtures. Disables the 60 s refresh. */
+  now?: Date | number
+  className?: string
+}
+
+const toMs = (value: Date | string | number) =>
+  value instanceof Date ? value.getTime() : new Date(value).getTime()
+
+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, locale: string, timeZone?: string): string | undefined {
+  if (!Number.isFinite(at)) return undefined
+  const zone = new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "short" })
+    .formatToParts(at)
+    .find((part) => part.type === "timeZoneName")?.value
+  const text = formatDate(at, "datetime", locale, { timeZone })
+  return zone ? `${text} ${zone}` : text
+}
+
+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
+      ? uiLanguage(locale) === "ja"
+        ? t.justNow
+        : t.relative(t.justNow)
+      : t.relative(relative(at, now, locale))
+  }
+  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 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)
+
+    useEffect(() => {
+      if (fixed !== undefined) return
+      setCurrent(Date.now())
+      const id = setInterval(() => setCurrent(Date.now()), REFRESH_MS)
+      return () => clearInterval(id)
+    }, [fixed])
+
+    const clock = fixed ?? current
+    const ready = clock !== null
+    const dateTime = Number.isFinite(atMs) ? new Date(atMs).toISOString() : 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, locale, timeZone)}` : null
+
+    if (!full) {
+      return (
+        <time ref={ref} data-slot="updated-at" dateTime={dateTime} className={classes} suppressHydrationWarning>
+          {text}
+        </time>
+      )
+    }
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <time
+              ref={ref}
+              data-slot="updated-at"
+              dateTime={dateTime}
+              title={full}
+              className={classes}
+              suppressHydrationWarning
+            />
+          }
+        >
+          {text}
+        </TooltipTrigger>
+        <TooltipContent className="tabular-nums">{full}</TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+UpdatedAt.displayName = "UpdatedAt"