@celestia-island/hikari 0.42.2 → 0.43.1

package/package.json

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

package/src/DemoApp.tsx

@@ -150,6 +150,8 @@ export default defineComponent({
         { key: "c", label: "Archived" },
       ],
     });
+    const centerAnchor = ref<HTMLElement | null>(null);
+    const centerPanelOpen = ref(false);
     function togglePanelOpt(key: string, v: boolean) {
       panel.value.checked = v
         ? [...panel.value.checked, key]
@@ -417,6 +419,26 @@ export default defineComponent({
                 >{opt.label}</HCheckbox>
               ))}
             </HSelectPanel>
+            <span style="align-self:center;color:var(--color-muted, gray)">center placement:</span>
+            <span ref={centerAnchor} style="display:inline-flex">
+              <HButton onClick={() => (centerPanelOpen.value = !centerPanelOpen.value)}>Engine {centerPanelOpen.value ? <ChevronUp size={14} /> : <ChevronDown size={14} />}</HButton>
+            </span>
+            <HSelectPanel
+              open={centerPanelOpen.value}
+              onUpdate:open={(v: boolean) => (centerPanelOpen.value = v)}
+              anchorRef={centerAnchor.value ?? null}
+              title="Engine"
+              placement="top-center"
+              matchAnchorWidth={false}
+            >
+              {panel.value.opts.map((opt) => (
+                <HCheckbox
+                  key={opt.key}
+                  modelValue={panel.value.checked.includes(opt.key)}
+                  onUpdate:modelValue={(v: boolean) => togglePanelOpt(opt.key, v)}
+                >{opt.label}</HCheckbox>
+              ))}
+            </HSelectPanel>
           </div>
         </section>
 

package/src/components/HkSelect.scss

@@ -106,14 +106,16 @@
   position: fixed;
   min-width: 180px;
 
-  /* Pop motion family — the popout grows out of the anchor edge it sits
-   * on (data-side/data-align are set by HkSelectPanel from the RESOLVED
-   * placement, including after an auto-flip) and retracts back into it.
-   * Same tokens as HkPopover/HkTooltip so every anchored surface moves
-   * with one curve. */
+  /* Pop motion family — the popout grows out of the anchor edge (or
+   * midpoint, for the -center placements) it sits on (data-side/data-align
+   * are set by HkSelectPanel from the RESOLVED placement, including after
+   * an auto-flip) and retracts back into it. Same tokens as
+   * HkPopover/HkTooltip so every anchored surface moves with one curve. */
   &[data-side="bottom"] { transform-origin: top left; }
+  &[data-side="bottom"][data-align="center"] { transform-origin: top center; }
   &[data-side="bottom"][data-align="end"] { transform-origin: top right; }
   &[data-side="top"] { transform-origin: bottom left; }
+  &[data-side="top"][data-align="center"] { transform-origin: bottom center; }
   &[data-side="top"][data-align="end"] { transform-origin: bottom right; }
 }
 

package/src/components/HkSelectPanel.test.tsx

@@ -301,6 +301,94 @@ describe("HkSelectPanel custom invocation", () => {
     expect(flipped).toBeGreaterThan(8);
   });
 
+  it("balances a top-center popout on the anchor's horizontal midpoint", async () => {
+    // happy-dom lays nothing out, so the panel measures at the
+    // max(anchor, 180) fallback width — anchor spanning 200..360 (midpoint
+    // 280, fallback width 180) puts the balanced left edge at
+    // 280 - 180/2 = 190.
+    const { container, open } = mountPanel({ placement: "top-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 500, bottom: 520, left: 200, right: 360, width: 160, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.style.left).toBe("190px");
+    // Top-side still honored (anchor bottom 520 → panel above it), and the
+    // resolved alignment drives the pop motion's transform origin.
+    expect(Number.parseInt(host.style.top, 10)).toBeLessThan(520);
+    expect(host.dataset.align).toBe("center");
+    expect(host.dataset.side).toBe("top");
+
+    // A centered panel poking past the left edge clamps to the viewport
+    // pad instead of mirroring the overflow to both sides: anchor
+    // 0..40 → raw left (20 - 180/2) = -70 → clamped to 8.
+    anchor.getBoundingClientRect = () =>
+      ({ top: 500, bottom: 520, left: 0, right: 40, width: 40, height: 20 }) as DOMRect;
+    window.dispatchEvent(new Event("resize"));
+    await nextTick();
+    expect(host.style.left).toBe("8px");
+  });
+
+  it("reports center alignment through an auto-flip so the pop origin follows", async () => {
+    // mountPanel's rig anchor sits at the very top of the test layout, so
+    // a top-center panel cannot fit above and flips bottom-side — the
+    // flip must carry data-side/data-align with it (transform origin).
+    const { container, open } = mountPanel({ placement: "top-center" });
+    await nextTick();
+    open.value = true;
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.dataset.side).toBe("bottom");
+    expect(host.dataset.align).toBe("center");
+  });
+
+  it("opens an unflipped bottom-center popout below the anchor", async () => {
+    // The bottom-center twin: same balance math, opposite side, and no
+    // flip here (the faked anchor sits low with room below).
+    const { container, open } = mountPanel({ placement: "bottom-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 100, bottom: 120, left: 200, right: 360, width: 160, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.dataset.side).toBe("bottom");
+    expect(host.dataset.align).toBe("center");
+    // Anchor top 100 + offset 4 → the panel hangs below 104.
+    expect(Number.parseInt(host.style.top, 10)).toBeGreaterThan(120);
+    expect(host.style.left).toBe("190px");
+  });
+
+  it("clamps a centered popout at the right viewport pad near the right edge", async () => {
+    // Anchor hugging the right edge: raw balanced left 1100 + (80 - 180)/2
+    // = 1050 would poke past 1200 - 8 - 180 = 1012 → pinned at the pad.
+    // The expected left edge is viewport arithmetic, so pin the width here
+    // (happy-dom's bare default is 1024 — the afterEach reset only helps
+    // full-file runs, not -t filtering; afterEach re-asserts 1200 anyway).
+    setViewport(1200);
+    const { container, open } = mountPanel({ placement: "bottom-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 100, bottom: 120, left: 1100, right: 1180, width: 80, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.style.left).toBe("1012px");
+  });
+
   it("clamps a tall flipped popout into the viewport instead of going negative", async () => {
     // The taller viewport-relative CSS cap admits ~576px panels: anchored
     // mid-viewport (top 380 / bottom 424 on an 800px-tall viewport), a

package/src/components/HkSelectPanel.tsx

@@ -56,8 +56,10 @@ import "./HkSelect.scss";
 
 export type SelectPanelPlacement =
   | "bottom-start"
+  | "bottom-center"
   | "bottom-end"
   | "top-start"
+  | "top-center"
   | "top-end";
 
 const VIEWPORT_PAD = 8;
@@ -71,7 +73,10 @@ export default defineComponent({
     anchorRef: { type: Object as PropType<HTMLElement | null>, default: null },
     /** Sheet header on mobile / a11y name for the panel. */
     title: { type: String, default: "" },
-    /** Base placement of the popout relative to the anchor (auto-flips). */
+    /** Base placement of the popout relative to the anchor (auto-flips).
+     *  The `-center` variants center the popout on the anchor's horizontal
+     *  midpoint (footer-center triggers whose menus would otherwise read
+     *  as lopsided off a narrow pill). */
     placement: {
       type: String as PropType<SelectPanelPlacement>,
       default: "bottom-start",
@@ -474,9 +479,10 @@ export default defineComponent({
     // again after the DOM settles, when the panel's real box is known and
     // flip/clamp decisions can use actual numbers.
     /** Resolved popout orientation — drives the pop transition's
-     *  transform-origin (grow from the anchor edge, data-side/align on
-     *  the host). Updated by positionPanel on every reposition. */
-    const resolved = ref<{ side: "top" | "bottom"; align: "start" | "end" }>({
+     *  transform-origin (grow from the anchor edge or midpoint,
+     *  data-side/align on the host). Updated by positionPanel on every
+     *  reposition. */
+    const resolved = ref<{ side: "top" | "bottom"; align: "start" | "center" | "end" }>({
       side: "bottom",
       align: "start",
     });
@@ -501,10 +507,12 @@ export default defineComponent({
         side = "bottom";
         top = r.bottom + props.offset;
       }
-      resolved.value = {
-        side,
-        align: props.placement.endsWith("-end") ? "end" : "start",
-      };
+      const align = props.placement.endsWith("-center")
+        ? "center"
+        : props.placement.endsWith("-end")
+          ? "end"
+          : "start";
+      resolved.value = { side, align };
       // One flip never re-checks: taller menu panels (the viewport-relative
       // CSS cap) made this band reachable — a mid-viewport anchor flips
       // bottom→top into a negative top that was applied verbatim. Clamp so
@@ -512,7 +520,15 @@ export default defineComponent({
       // the panel's own internal scroll takes over.
       const maxTop = Math.max(VIEWPORT_PAD, window.innerHeight - VIEWPORT_PAD - ph);
       top = Math.min(Math.max(top, VIEWPORT_PAD), maxTop);
-      let left = props.placement.endsWith("-end") ? r.right - pw : r.left;
+      // -center balances the panel on the anchor's horizontal midpoint
+      // (still clamped, so a half-off-screen anchor keeps the panel
+      // readable instead of mirroring the overflow to both edges).
+      let left =
+        align === "center"
+          ? r.left + (r.width - pw) / 2
+          : props.placement.endsWith("-end")
+            ? r.right - pw
+            : r.left;
       const maxLeft = Math.max(VIEWPORT_PAD, window.innerWidth - VIEWPORT_PAD - pw);
       left = Math.min(Math.max(left, VIEWPORT_PAD), maxLeft);
       coords.value = {

package/src/i18n/locales/ar/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "الآن",
+    "common.time.minutesAgo": "قبل {n} دقيقة",
+    "common.time.hoursAgo": "قبل {n} ساعة",
+    "common.time.daysAgo": "قبل {n} يوم",
+    "common.time.weeksAgo": "قبل {n} أسبوع"
+  }
+}

package/src/i18n/locales/de/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "Gerade eben",
+    "common.time.minutesAgo": "vor {n} Min.",
+    "common.time.hoursAgo": "vor {n} Std.",
+    "common.time.daysAgo": "vor {n} Tg.",
+    "common.time.weeksAgo": "vor {n} Wo."
+  }
+}

package/src/i18n/locales/en/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "Just now",
+    "common.time.minutesAgo": "{n} min ago",
+    "common.time.hoursAgo": "{n} h ago",
+    "common.time.daysAgo": "{n} d ago",
+    "common.time.weeksAgo": "{n} w ago"
+  }
+}

package/src/i18n/locales/es/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "Ahora mismo",
+    "common.time.minutesAgo": "hace {n} min",
+    "common.time.hoursAgo": "hace {n} h",
+    "common.time.daysAgo": "hace {n} d",
+    "common.time.weeksAgo": "hace {n} sem"
+  }
+}

package/src/i18n/locales/fr/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "À l'instant",
+    "common.time.minutesAgo": "il y a {n} min",
+    "common.time.hoursAgo": "il y a {n} h",
+    "common.time.daysAgo": "il y a {n} j",
+    "common.time.weeksAgo": "il y a {n} sem."
+  }
+}

package/src/i18n/locales/ja/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "たった今",
+    "common.time.minutesAgo": "{n} 分前",
+    "common.time.hoursAgo": "{n} 時間前",
+    "common.time.daysAgo": "{n} 日前",
+    "common.time.weeksAgo": "{n} 週間前"
+  }
+}

package/src/i18n/locales/ko/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "방금 전",
+    "common.time.minutesAgo": "{n}분 전",
+    "common.time.hoursAgo": "{n}시간 전",
+    "common.time.daysAgo": "{n}일 전",
+    "common.time.weeksAgo": "{n}주 전"
+  }
+}

package/src/i18n/locales/pt/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "Agora mesmo",
+    "common.time.minutesAgo": "há {n} min",
+    "common.time.hoursAgo": "há {n} h",
+    "common.time.daysAgo": "há {n} d",
+    "common.time.weeksAgo": "há {n} sem"
+  }
+}

package/src/i18n/locales/ru/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "Только что",
+    "common.time.minutesAgo": "{n} мин. назад",
+    "common.time.hoursAgo": "{n} ч. назад",
+    "common.time.daysAgo": "{n} дн. назад",
+    "common.time.weeksAgo": "{n} нед. назад"
+  }
+}

package/src/i18n/locales/zh-Hans/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "刚刚",
+    "common.time.minutesAgo": "{n} 分钟前",
+    "common.time.hoursAgo": "{n} 小时前",
+    "common.time.daysAgo": "{n} 天前",
+    "common.time.weeksAgo": "{n} 周前"
+  }
+}

package/src/i18n/locales/zh-Hant/time.json

@@ -0,0 +1,9 @@
+{
+  "time": {
+    "common.time.justNow": "剛剛",
+    "common.time.minutesAgo": "{n} 分鐘前",
+    "common.time.hoursAgo": "{n} 小時前",
+    "common.time.daysAgo": "{n} 天前",
+    "common.time.weeksAgo": "{n} 週前"
+  }
+}

package/src/i18n/timeKeys.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+
+import { setLocale, useI18n } from "./context";
+
+/**
+ * Locale key pack for the formatRelativeTime facility
+ * (common.time.justNow/minutesAgo/hoursAgo/daysAgo/weeksAgo, served from
+ * the new locales/<lang>/time.json bundles). The JSON keys are the literal
+ * unprefixed full names because t() resolves by exact full-name match
+ * (context.ts merges string leaves under their literal key) and the
+ * facility + its host-t consumers call t("common.time.*") unprefixed —
+ * the "hikari::" prefix convention is reserved for
+ * hikari-component-owned keys. A key missing from any locale silently
+ * falls back to English there, so every locale must define all five keys
+ * with matching {n} placeholder presence (hikari review lessons
+ * #373/#374, same shape as contextKeys.test.ts).
+ */
+const modules = import.meta.glob<{ default: Record<string, Record<string, string>> }>(
+  "./locales/*/time.json",
+  { eager: true },
+);
+
+const EXPECTED_LOCALES = [
+  "ar", "de", "en", "es", "fr", "ja", "ko", "pt", "ru", "zh-Hans", "zh-Hant",
+];
+
+const REQUIRED_KEYS = [
+  "common.time.justNow",
+  "common.time.minutesAgo",
+  "common.time.hoursAgo",
+  "common.time.daysAgo",
+  "common.time.weeksAgo",
+];
+
+describe("common.time locale keys", () => {
+  const bundles = Object.entries(modules).map(([path, mod]) => ({
+    locale: path.match(/locales\/([^/]+)\/time\.json/)?.[1] ?? "",
+    flat: mod.default.time ?? {},
+  }));
+
+  it("covers all 11 time.json locale files", () => {
+    expect(bundles.map((b) => b.locale).sort()).toEqual(EXPECTED_LOCALES);
+  });
+
+  it("defines all 5 common.time.* keys in every locale, non-empty", () => {
+    for (const { locale, flat } of bundles) {
+      for (const key of REQUIRED_KEYS) {
+        expect(typeof flat[key], `${locale} must define ${key}`).toBe("string");
+        expect((flat[key] ?? "").length, `${locale} ${key} must not be empty`).toBeGreaterThan(0);
+      }
+    }
+  });
+
+  it("matches the {n} placeholder pattern of en in every locale", () => {
+    const en = bundles.find((b) => b.locale === "en");
+    expect(en, "en bundle renders").toBeTruthy();
+    for (const { locale, flat } of bundles) {
+      for (const key of REQUIRED_KEYS) {
+        const wantsN = en!.flat[key].includes("{n}");
+        expect(flat[key].includes("{n}"), `${locale} ${key} {n} parity`).toBe(wantsN);
+      }
+    }
+  });
+
+  it("resolves through useI18n at runtime, per locale", async () => {
+    await setLocale("zh-Hans");
+    const zh = useI18n();
+    expect(zh.t("common.time.justNow", "Just now")).toBe("刚刚");
+    expect(zh.t("common.time.hoursAgo", "{n} h ago").replace("{n}", "3")).toBe("3 小时前");
+
+    await setLocale("de");
+    const de = useI18n();
+    expect(de.t("common.time.daysAgo", "{n} d ago").replace("{n}", "2")).toBe("vor 2 Tg.");
+
+    await setLocale("en");
+    const en = useI18n();
+    expect(en.t("common.time.weeksAgo", "{n} w ago")).toBe("{n} w ago");
+  });
+});

package/src/utils/format.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+
+import { formatRelativeTime, type RelativeTimeT } from "./format";
+
+const MIN = 60_000;
+const HOUR = 3_600_000;
+const DAY = 86_400_000;
+
+function ago(ms: number): Date {
+  return new Date(Date.now() - ms);
+}
+
+interface CapturedCall {
+  key: string;
+  fallback: string;
+  named?: Record<string, unknown>;
+}
+
+/** Fake translator: records every lookup and renders the {n} slot so
+ *  injection can be asserted end-to-end. */
+function makeCaptureT(): { t: RelativeTimeT; calls: CapturedCall[] } {
+  const calls: CapturedCall[] = [];
+  const t: RelativeTimeT = (key, fallback, named) => {
+    calls.push({ key, fallback, named });
+    return fallback.replace("{n}", String(named?.n ?? ""));
+  };
+  return { t, calls };
+}
+
+describe("formatRelativeTime", () => {
+  it("returns an empty string for missing input", () => {
+    expect(formatRelativeTime("")).toBe("");
+    expect(formatRelativeTime(0)).toBe("");
+  });
+
+  it("returns an empty string for unparseable input", () => {
+    expect(formatRelativeTime("not-a-date")).toBe("");
+    expect(formatRelativeTime(Number.NaN)).toBe("");
+  });
+
+  it("renders the compact English fallback per tier", () => {
+    expect(formatRelativeTime(ago(59_000))).toBe("Just now");
+    expect(formatRelativeTime(ago(MIN))).toBe("1m ago");
+    expect(formatRelativeTime(ago(59 * MIN))).toBe("59m ago");
+    expect(formatRelativeTime(ago(HOUR))).toBe("1h ago");
+    expect(formatRelativeTime(ago(23 * HOUR))).toBe("23h ago");
+    expect(formatRelativeTime(ago(DAY))).toBe("1d ago");
+    expect(formatRelativeTime(ago(6 * DAY))).toBe("6d ago");
+  });
+
+  it("adds the weeks tier from 7d up to (excluding) 30d", () => {
+    expect(formatRelativeTime(ago(7 * DAY))).toBe("1w ago");
+    expect(formatRelativeTime(ago(13 * DAY))).toBe("1w ago");
+    expect(formatRelativeTime(ago(14 * DAY))).toBe("2w ago");
+    expect(formatRelativeTime(ago(29 * DAY))).toBe("4w ago");
+  });
+
+  it("falls to the absolute-date path at >= 30d", () => {
+    const d = ago(30 * DAY);
+    // Do not pin a locale-specific rendering; assert the value comes
+    // from the same Date's toLocaleDateString().
+    expect(formatRelativeTime(d)).toBe(d.toLocaleDateString());
+    expect(formatRelativeTime(d).length).toBeGreaterThan(0);
+  });
+
+  it("clamps future timestamps into the justNow tier", () => {
+    expect(formatRelativeTime(ago(-5 * MIN))).toBe("Just now");
+    expect(formatRelativeTime(ago(-2 * DAY))).toBe("Just now");
+  });
+
+  it("passes the documented keys with injected {n} to the translator", () => {
+    const { t, calls } = makeCaptureT();
+
+    expect(formatRelativeTime(ago(30_000), t)).toBe("Just now");
+    expect(calls[0]).toEqual({
+      key: "common.time.justNow",
+      fallback: "Just now",
+      named: undefined,
+    });
+
+    expect(formatRelativeTime(ago(5 * MIN), t)).toBe("5 min ago");
+    expect(calls[1]).toEqual({
+      key: "common.time.minutesAgo",
+      fallback: "{n} min ago",
+      named: { n: 5 },
+    });
+
+    expect(formatRelativeTime(ago(3 * HOUR), t)).toBe("3 h ago");
+    expect(calls[2]).toEqual({
+      key: "common.time.hoursAgo",
+      fallback: "{n} h ago",
+      named: { n: 3 },
+    });
+
+    expect(formatRelativeTime(ago(2 * DAY), t)).toBe("2 d ago");
+    expect(calls[3]).toEqual({
+      key: "common.time.daysAgo",
+      fallback: "{n} d ago",
+      named: { n: 2 },
+    });
+
+    expect(formatRelativeTime(ago(8 * DAY), t)).toBe("1 w ago");
+    expect(calls[4]).toEqual({
+      key: "common.time.weeksAgo",
+      fallback: "{n} w ago",
+      named: { n: 1 },
+    });
+  });
+
+  it("keeps absolute dates away from the translator", () => {
+    const { t, calls } = makeCaptureT();
+    const d = ago(45 * DAY);
+    expect(formatRelativeTime(d, t)).toBe(d.toLocaleDateString());
+    expect(calls).toHaveLength(0);
+  });
+});

package/src/utils/format.ts

@@ -37,7 +37,8 @@ export function formatPriceUsd(n: number, currency = "$"): string {
   return `${currency}${n.toFixed(2)}`;
 }
 
-/** Timestamp -> "Just now" / "5m ago" / "3h ago" / "2d ago" / locale date. */
+/** Timestamp -> "Just now" / "5m ago" / "3h ago" / "2d ago" / "2w ago" /
+ *  locale date. */
 export type RelativeTimeT = (
   key: string,
   fallback: string,
@@ -46,7 +47,12 @@ export type RelativeTimeT = (
 
 /** Relative-time formatting ("just now / {n} min ago / …").
  *  Pass an optional translator for localized variants; defaults to
- *  compact English text. */
+ *  compact English text. Tiers: <1min justNow, <60min minutes,
+ *  <24h hours, <7d days, <30d weeks, otherwise an absolute
+ *  locale-rendered date (browser locale, like formatDateTime).
+ *  The translator owns {n} interpolation — hikari's own useI18n().t
+ *  does NOT interpolate named params, so wrap it (the canonical key
+ *  set lives in the per-locale i18n time bundles). */
 export function formatRelativeTime(
   input: string | number | Date,
   t?: RelativeTimeT,
@@ -54,7 +60,8 @@ export function formatRelativeTime(
   if (!input) return "";
   const d = input instanceof Date ? input : new Date(input);
   if (isNaN(d.getTime())) return "";
-  const diff = Date.now() - d.getTime();
+  // Clamp future timestamps to "just now" — no negative weeks/days.
+  const diff = Math.max(0, Date.now() - d.getTime());
   const mins = Math.floor(diff / 60000);
   const hours = Math.floor(diff / 3600000);
   const days = Math.floor(diff / 86400000);
@@ -62,6 +69,12 @@ export function formatRelativeTime(
   if (mins < 60) return t?.("common.time.minutesAgo", "{n} min ago", { n: mins }) ?? `${mins}m ago`;
   if (hours < 24) return t?.("common.time.hoursAgo", "{n} h ago", { n: hours }) ?? `${hours}h ago`;
   if (days < 7) return t?.("common.time.daysAgo", "{n} d ago", { n: days }) ?? `${days}d ago`;
+  if (days < 30) {
+    const weeks = Math.floor(days / 7);
+    return (
+      t?.("common.time.weeksAgo", "{n} w ago", { n: weeks }) ?? `${weeks}w ago`
+    );
+  }
   return d.toLocaleDateString();
 }