@runwisp/ui 0.13.0 → 0.15.0

package/src/lib/theme-tokens.css

@@ -17,8 +17,26 @@
  *   - apps/ui toggles the `.dark` class on <html>.
  *   - Starlight (apps/docs) writes data-theme="dark" on the documentElement.
  *   The union selector covers both. Light mode is the default.
+ *
+ * Webfonts are @imported here (not in theme.css) so every consumer that reads
+ * these tokens also gets the faces they name — apps/docs imports this file
+ * alone. Both families ship in the binary; nothing is fetched from a CDN.
  */
 
+@import "@fontsource/tasa-orbiter/400.css";
+@import "@fontsource/tasa-orbiter/500.css";
+@import "@fontsource/tasa-orbiter/600.css";
+@import "@fontsource/tasa-orbiter/700.css";
+@import "@fontsource-variable/geist-mono/index.css";
+
+:root {
+    /* Typography — body sans for prose, mono for all chrome and identifiers.
+     * Geist Mono is variable (100–900), so heading weight 800 is a real cut. */
+    --rw-font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
+    --rw-font-mono:
+        "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 :root {
     /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
      * and less cyan than Aurora (running/info) so the two stay distinct. */
@@ -46,20 +64,21 @@
     --rw-color-aurora-800: oklch(0.35 0.07 192);
     --rw-color-aurora-900: oklch(0.28 0.055 192);
 
-    /* Mist — cool slate-blue neutrals (the artifact's #EDF1F4 / #E0E6EC /
-     * #18212E family). No purple tint; hue ~248, low chroma rising into the
-     * mids the way the design's slate does. */
-    --rw-color-mist-50: oklch(0.985 0.004 240);
-    --rw-color-mist-100: oklch(0.956 0.006 240); /* ≈ ground #EDF1F4 */
-    --rw-color-mist-200: oklch(0.922 0.01 248); /* ≈ line #E0E6EC */
-    --rw-color-mist-300: oklch(0.83 0.016 248);
-    --rw-color-mist-400: oklch(0.676 0.026 248); /* ≈ faint #8B99A7 */
-    --rw-color-mist-500: oklch(0.6 0.03 248);
-    --rw-color-mist-600: oklch(0.531 0.032 248); /* ≈ muted #5E6E7E */
-    --rw-color-mist-700: oklch(0.4 0.031 252);
-    --rw-color-mist-800: oklch(0.31 0.029 255);
-    --rw-color-mist-900: oklch(0.245 0.028 258); /* ≈ ink #18212E */
-    --rw-color-mist-950: oklch(0.17 0.022 258);
+    /* Mist — teal-gray neutrals (the runbook's #F3F6F6 / #E0E7E7 /
+     * #14262A / #0C1719 family). No purple tint; hue ~195-205, low chroma,
+     * so bg-mist-* utilities agree with the new teal-black surfaces. The light
+     * end stays near-neutral to match the desaturated canvas. */
+    --rw-color-mist-50: oklch(0.972 0.003 200); /* ≈ #F3F6F6 */
+    --rw-color-mist-100: oklch(0.945 0.004 200); /* ≈ #E9EEEE */
+    --rw-color-mist-200: oklch(0.925 0.005 200); /* ≈ #E0E7E7 */
+    --rw-color-mist-300: oklch(0.83 0.016 198);
+    --rw-color-mist-400: oklch(0.676 0.02 200);
+    --rw-color-mist-500: oklch(0.6 0.022 200);
+    --rw-color-mist-600: oklch(0.531 0.024 202);
+    --rw-color-mist-700: oklch(0.42 0.024 203);
+    --rw-color-mist-800: oklch(0.32 0.024 204);
+    --rw-color-mist-900: oklch(0.266 0.025 204); /* ≈ #16292B */
+    --rw-color-mist-950: oklch(0.195 0.016 208); /* ≈ #0C1719 */
 
     /* Success — Field Green (success status = #1F9D57, a true grass green) */
     --rw-color-success-50: oklch(0.97 0.02 150);
@@ -112,8 +131,11 @@
     --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
     --rw-ansi-bright-white: var(--rw-color-mist-50);
 
-    /* Console device surface — the log console is a "black box" instrument
-     * with its own fixed palette that never follows the light/dark UI theme.
+    /* Fixed-dark sibling palettes — the `--rw-con-*` log console (a "black box"
+     * device) and the `--rw-term-*`/`--rw-syn-*` website terminal surfaces both
+     * keep their own dark palette in BOTH themes; they never flip light/dark. */
+
+    /* Console device surface — the log console instrument.
      * Exact values from the approved execution-detail design. */
     --rw-con-bg: #0e141b; /* body / gutter backing */
     --rw-con-panel: #11181f; /* toolbar + footer chrome */
@@ -121,62 +143,97 @@
     --rw-con-dim: #6c7d8c; /* footer + muted readouts */
     --rw-con-gutter: #3c4a58; /* line numbers + sentinel rule */
 
-    /* Light-mode semantic tokens (default) */
+    /* Terminal surface — always dark in both themes (website --term-* set) */
+    --rw-term: #0a1116;
+    --rw-term-2: #0d151b;
+    --rw-term-line: #1d2932;
+    --rw-term-line-2: #2a3a45;
+    --rw-term-text: #dbe6ec;
+    --rw-term-muted: #7d919c;
+    --rw-term-faint: #566873;
+    --rw-term-teal: #2fd4dd;
+    --rw-term-ok: #3fc26b;
+    --rw-term-warn: #e0a52e;
+    --rw-term-bad: #f15a4d;
+    /* Syntax highlighting */
+    --rw-syn-comment: #5b6b75;
+    --rw-syn-kw: #79c7ff;
+    --rw-syn-str: #7fd6a0;
+    --rw-syn-num: #e0a52e;
+    --rw-syn-punc: #9aa7b0;
+    --rw-syn-fn: #2fd4dd;
+
+    /* Elevation — light-mode drop shadows; flipped to `none` in dark so the
+     * UI reads as borders-only there. */
+    --rw-shadow-xs: 0 1px 2px rgba(16, 41, 43, 0.04);
+    --rw-shadow-sm: 0 1px 2px rgba(16, 41, 43, 0.04), 0 12px 28px -20px rgba(16, 41, 43, 0.22);
+    --rw-shadow-md: 0 1px 2px rgba(16, 41, 43, 0.06), 0 22px 44px -26px rgba(16, 41, 43, 0.4);
+    --rw-shadow-lg: 0 1px 2px rgba(16, 41, 43, 0.06), 0 30px 60px -28px rgba(16, 41, 43, 0.45);
+    --rw-shadow-xl: 0 1px 2px rgba(16, 41, 43, 0.06), 0 40px 80px -30px rgba(16, 41, 43, 0.5);
+
+    /* Light-mode semantic tokens (default) — runbook palette (exact hex).
+     *
+     * The canvas carries only a whisper of the brand teal. The website can
+     * afford a minty `--ground` because dark panes and terminals cover most
+     * of it; in a dashboard the canvas is most of the pixels, and a saturated
+     * mint under white panels reads washed-out. Structure comes from the
+     * hairline outlines, not from tinting the page. */
     /* Surfaces */
-    --rw-surface: var(--rw-color-mist-50);
-    --rw-surface-raised: white;
-    --rw-surface-overlay: white;
-    --rw-surface-sunken: var(--rw-color-mist-100);
+    --rw-surface: #f3f6f6;
+    --rw-surface-raised: #ffffff;
+    --rw-surface-sunken: #e9eeee;
+    --rw-surface-overlay: #ffffff;
     /* On-surface text */
-    --rw-on-surface: var(--rw-color-mist-900);
-    --rw-on-surface-muted: var(--rw-color-mist-600);
-    --rw-on-surface-faint: var(--rw-color-mist-400);
+    --rw-on-surface: #14262a;
+    --rw-on-surface-muted: #5a6d70;
+    --rw-on-surface-faint: #869798;
     /* Borders / outlines */
-    --rw-outline: var(--rw-color-mist-200);
-    --rw-outline-hover: var(--rw-color-mist-300);
-    --rw-outline-faint: var(--rw-color-mist-100);
-    --rw-ring: var(--rw-color-wisp-500);
-    --rw-backdrop: oklch(0.12 0.012 280 / 0.5);
+    --rw-outline: #e0e7e7;
+    --rw-outline-hover: #c8d2d2;
+    --rw-outline-faint: #edf1f1;
+    --rw-ring: #15a0a8;
+    --rw-backdrop: rgba(243, 246, 246, 0.78);
     /* Primary */
-    --rw-primary: var(--rw-color-wisp-600);
-    --rw-primary-hover: var(--rw-color-wisp-700);
-    --rw-primary-active: var(--rw-color-wisp-800);
-    --rw-on-primary: white;
-    --rw-primary-soft: var(--rw-color-wisp-100);
-    --rw-primary-soft-text: var(--rw-color-wisp-700);
-    /* Danger */
-    --rw-danger: var(--rw-color-danger-600);
-    --rw-danger-hover: var(--rw-color-danger-700);
-    --rw-danger-active: var(--rw-color-danger-800);
-    --rw-on-danger: white;
-    --rw-danger-soft: var(--rw-color-danger-50);
-    --rw-danger-soft-text: var(--rw-color-danger-700);
+    --rw-primary: #15a0a8;
+    --rw-primary-hover: #0e7c86;
+    --rw-primary-active: #0a6068;
+    --rw-on-primary: #ffffff;
+    --rw-primary-soft: rgba(21, 160, 168, 0.1);
+    --rw-primary-soft-text: #15a0a8;
+    --rw-primary-soft-border: rgba(21, 160, 168, 0.25);
     /* Success */
-    --rw-success: var(--rw-color-success-600);
-    --rw-success-hover: var(--rw-color-success-700);
-    --rw-on-success: white;
-    --rw-success-soft: var(--rw-color-success-50);
-    --rw-success-soft-text: var(--rw-color-success-700);
+    --rw-success: #1e8a4a;
+    --rw-success-hover: #1a753e;
+    --rw-success-active: #156033;
+    --rw-on-success: #ffffff;
+    --rw-success-soft: rgba(30, 138, 74, 0.1);
+    --rw-success-soft-text: #1e8a4a;
+    --rw-success-soft-border: rgba(30, 138, 74, 0.25);
+    /* Danger */
+    --rw-danger: #d6453d;
+    --rw-danger-hover: #b8352b;
+    --rw-danger-active: #9a2a22;
+    --rw-on-danger: #ffffff;
+    --rw-danger-soft: rgba(214, 69, 61, 0.1);
+    --rw-danger-soft-text: #d6453d;
+    --rw-danger-soft-border: rgba(214, 69, 61, 0.25);
     /* Warning */
-    --rw-warning: var(--rw-color-warning-500);
-    --rw-warning-hover: var(--rw-color-warning-600);
-    --rw-on-warning: white;
-    --rw-warning-soft: var(--rw-color-warning-50);
-    --rw-warning-soft-text: var(--rw-color-warning-700);
-    /* Info */
-    --rw-info: var(--rw-color-aurora-600);
-    --rw-info-hover: var(--rw-color-aurora-700);
-    --rw-on-info: white;
-    --rw-info-soft: var(--rw-color-aurora-50);
-    --rw-info-soft-text: var(--rw-color-aurora-700);
-    /* Soft callout borders — sit on the matching *-soft surface */
-    --rw-primary-soft-border: var(--rw-color-wisp-200);
-    --rw-danger-soft-border: var(--rw-color-danger-200);
-    --rw-success-soft-border: var(--rw-color-success-200);
-    --rw-warning-soft-border: var(--rw-color-warning-200);
-    --rw-info-soft-border: var(--rw-color-aurora-200);
+    --rw-warning: #c4781a;
+    --rw-warning-hover: #a36414;
+    --rw-warning-active: #82500f;
+    --rw-on-warning: #ffffff;
+    --rw-warning-soft: rgba(196, 120, 26, 0.1);
+    --rw-warning-soft-text: #c4781a;
+    --rw-warning-soft-border: rgba(196, 120, 26, 0.25);
+    /* Info — matches primary teal */
+    --rw-info: #15a0a8;
+    --rw-info-hover: #0e7c86;
+    --rw-on-info: #ffffff;
+    --rw-info-soft: rgba(21, 160, 168, 0.1);
+    --rw-info-soft-text: #15a0a8;
+    --rw-info-soft-border: rgba(21, 160, 168, 0.25);
     /* Glass */
-    --rw-glass: oklch(1 0 0 / 0.8);
+    --rw-glass: rgba(255, 255, 255, 0.78);
     --rw-glass-blur: blur(12px);
 }
 
@@ -184,58 +241,66 @@
  * attribute for Starlight. Both selectors apply the same token set. */
 :root.dark,
 :root[data-theme="dark"] {
-    --rw-surface: var(--rw-color-mist-950);
-    --rw-surface-raised: var(--rw-color-mist-900);
-    --rw-surface-overlay: var(--rw-color-mist-900);
-    --rw-surface-sunken: oklch(0.08 0.012 280);
-    --rw-on-surface: var(--rw-color-mist-100);
-    --rw-on-surface-muted: var(--rw-color-mist-400);
-    --rw-on-surface-faint: var(--rw-color-mist-600);
-    --rw-outline: var(--rw-color-mist-800);
-    --rw-outline-hover: var(--rw-color-mist-700);
-    --rw-outline-faint: var(--rw-color-mist-800);
-    --rw-ring: var(--rw-color-wisp-400);
-    --rw-backdrop: oklch(0 0 0 / 0.7);
-    /* Primary */
-    --rw-primary: var(--rw-color-wisp-500);
-    --rw-primary-hover: var(--rw-color-wisp-400);
-    --rw-primary-active: var(--rw-color-wisp-300);
-    --rw-on-primary: white;
-    --rw-primary-soft: oklch(0.22 0.06 270);
-    --rw-primary-soft-text: var(--rw-color-wisp-300);
-    /* Danger */
-    --rw-danger: var(--rw-color-danger-500);
-    --rw-danger-hover: var(--rw-color-danger-400);
-    --rw-danger-active: var(--rw-color-danger-300);
-    --rw-on-danger: white;
-    --rw-danger-soft: oklch(0.2 0.04 355);
-    --rw-danger-soft-text: var(--rw-color-danger-300);
+    /* Surfaces */
+    --rw-surface: #0c1719;
+    --rw-surface-raised: #122226;
+    --rw-surface-sunken: #080f11;
+    --rw-surface-overlay: rgba(8, 15, 17, 0.86);
+    /* On-surface text */
+    --rw-on-surface: #e8eff4;
+    --rw-on-surface-muted: #94a6b1;
+    --rw-on-surface-faint: #5f7079;
+    /* Borders / outlines */
+    --rw-outline: #1d2932;
+    --rw-outline-hover: #2a3a45;
+    --rw-outline-faint: #1d2932;
+    --rw-ring: #2fd4dd;
+    --rw-backdrop: rgba(4, 10, 12, 0.7);
+    /* Primary — bright teal in dark, matches info */
+    --rw-primary: #2fd4dd;
+    --rw-primary-hover: #5fe3ea;
+    --rw-primary-active: #5fe3ea;
+    --rw-on-primary: #04181a;
+    --rw-primary-soft: rgba(21, 160, 168, 0.14);
+    --rw-primary-soft-text: #2fd4dd;
+    --rw-primary-soft-border: rgba(47, 212, 221, 0.28);
     /* Success */
-    --rw-success: var(--rw-color-success-500);
-    --rw-success-hover: var(--rw-color-success-400);
-    --rw-on-success: white;
-    --rw-success-soft: oklch(0.2 0.04 165);
-    --rw-success-soft-text: var(--rw-color-success-300);
+    --rw-success: #3fc26b;
+    --rw-success-hover: #5fd487;
+    --rw-on-success: #04181a;
+    --rw-success-soft: rgba(63, 194, 107, 0.14);
+    --rw-success-soft-text: #3fc26b;
+    --rw-success-soft-border: rgba(63, 194, 107, 0.28);
+    /* Danger */
+    --rw-danger: #f15a4d;
+    --rw-danger-hover: #ff7568;
+    --rw-danger-active: #ff8a7e;
+    --rw-on-danger: #04181a;
+    --rw-danger-soft: rgba(241, 90, 77, 0.14);
+    --rw-danger-soft-text: #f15a4d;
+    --rw-danger-soft-border: rgba(241, 90, 77, 0.28);
     /* Warning */
-    --rw-warning: var(--rw-color-warning-400);
-    --rw-warning-hover: var(--rw-color-warning-300);
-    --rw-on-warning: var(--rw-color-mist-950);
-    --rw-warning-soft: oklch(0.2 0.04 85);
-    --rw-warning-soft-text: var(--rw-color-warning-300);
-    /* Info */
-    --rw-info: var(--rw-color-aurora-500);
-    --rw-info-hover: var(--rw-color-aurora-400);
-    --rw-on-info: white;
-    --rw-info-soft: oklch(0.2 0.04 180);
-    --rw-info-soft-text: var(--rw-color-aurora-300);
-    /* Soft callout borders */
-    --rw-primary-soft-border: oklch(0.32 0.06 270);
-    --rw-danger-soft-border: oklch(0.32 0.06 355);
-    --rw-success-soft-border: oklch(0.32 0.06 165);
-    --rw-warning-soft-border: oklch(0.32 0.06 85);
-    --rw-info-soft-border: oklch(0.32 0.06 180);
+    --rw-warning: #e0a52e;
+    --rw-warning-hover: #ecb845;
+    --rw-on-warning: #04181a;
+    --rw-warning-soft: rgba(224, 165, 46, 0.14);
+    --rw-warning-soft-text: #e0a52e;
+    --rw-warning-soft-border: rgba(224, 165, 46, 0.28);
+    /* Info — bright teal in dark */
+    --rw-info: #2fd4dd;
+    --rw-info-hover: #5fe3ea;
+    --rw-on-info: #04181a;
+    --rw-info-soft: rgba(47, 212, 221, 0.14);
+    --rw-info-soft-text: #2fd4dd;
+    --rw-info-soft-border: rgba(47, 212, 221, 0.28);
     /* Glass */
-    --rw-glass: oklch(0.12 0.012 280 / 0.9);
+    --rw-glass: rgba(8, 15, 17, 0.9);
+    /* Elevation — borders-only in dark, no drop shadow */
+    --rw-shadow-xs: none;
+    --rw-shadow-sm: none;
+    --rw-shadow-md: none;
+    --rw-shadow-lg: none;
+    --rw-shadow-xl: none;
 }
 
 /* Platform polish — focus ring, text selection, scrollbar. Lifted from

package/src/lib/theme.css

@@ -14,10 +14,6 @@
 
 @import "tailwindcss";
 @import "./theme-tokens.css";
-@import "@fontsource/tasa-orbiter/400.css";
-@import "@fontsource/tasa-orbiter/500.css";
-@import "@fontsource/tasa-orbiter/600.css";
-@import "@fontsource/tasa-orbiter/700.css";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
@@ -87,9 +83,10 @@
     --color-warning-600: var(--rw-color-warning-600);
     --color-warning-700: var(--rw-color-warning-700);
 
-    /* Typography */
-    --font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
-    --font-mono: "JetBrains Mono", "Fira Code", monospace;
+    /* Typography — stacks and @font-face live in theme-tokens.css so the
+     * non-Tailwind consumers (apps/docs) share one definition. */
+    --font-sans: var(--rw-font-sans);
+    --font-mono: var(--rw-font-mono);
 
     /* Font sizes */
     --text-2xs: 0.625rem;
@@ -125,31 +122,24 @@
     --spacing-20: 5rem;
     --spacing-24: 6rem;
 
-    /* Border radius */
+    /* Border radius — runbook scale (small radii are signature). lg/xl/2xl/3xl
+     * remain for legacy call sites but should not be used going forward. */
     --radius-none: 0;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
+    --radius-sm: 0.1875rem; /* 3px — controls */
+    --radius-md: 0.25rem; /* 4px — panels / cards */
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
-    /* Shadows — soft, ethereal */
-    --shadow-xs: 0 1px 2px 0 oklch(0.18 0.02 280 / 0.05);
-    --shadow-sm:
-        0 1px 3px 0 oklch(0.18 0.02 280 / 0.08), 0 1px 2px -1px oklch(0.18 0.02 280 / 0.08);
-    --shadow-md:
-        0 4px 6px -1px oklch(0.18 0.02 280 / 0.08), 0 2px 4px -2px oklch(0.18 0.02 280 / 0.08);
-    --shadow-lg:
-        0 10px 15px -3px oklch(0.18 0.02 280 / 0.08), 0 4px 6px -4px oklch(0.18 0.02 280 / 0.08);
-    --shadow-xl:
-        0 20px 25px -5px oklch(0.18 0.02 280 / 0.1), 0 8px 10px -6px oklch(0.18 0.02 280 / 0.1);
-
-    /* Glow effects for wisp theme */
-    --shadow-glow-sm: 0 0 10px oklch(0.58 0.18 270 / 0.15);
-    --shadow-glow-md: 0 0 20px oklch(0.58 0.18 270 / 0.2);
-    --shadow-glow-lg: 0 0 30px oklch(0.58 0.18 270 / 0.25);
+    /* Shadows — mapped to the flip tokens in theme-tokens.css so every
+     * shadow-* utility resolves to `none` in dark (borders-only look). */
+    --shadow-xs: var(--rw-shadow-xs);
+    --shadow-sm: var(--rw-shadow-sm);
+    --shadow-md: var(--rw-shadow-md);
+    --shadow-lg: var(--rw-shadow-lg);
+    --shadow-xl: var(--rw-shadow-xl);
 }
 
 /* Semantic Design Tokens — Tailwind utility aliases.
@@ -212,14 +202,30 @@
     --color-warning-soft-border: var(--rw-warning-soft-border);
     --color-info-soft-border: var(--rw-info-soft-border);
 
-    /* Transition durations */
-    --duration-fast: 100ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
+    /* Terminal surface — fixed dark in both themes */
+    --color-term: var(--rw-term);
+    --color-term-2: var(--rw-term-2);
+    --color-term-line: var(--rw-term-line);
+    --color-term-line-2: var(--rw-term-line-2);
+    --color-term-text: var(--rw-term-text);
+    --color-term-muted: var(--rw-term-muted);
+    --color-term-faint: var(--rw-term-faint);
+    --color-term-teal: var(--rw-term-teal);
+    --color-term-ok: var(--rw-term-ok);
+    --color-term-warn: var(--rw-term-warn);
+    --color-term-bad: var(--rw-term-bad);
+    /* Syntax highlighting */
+    --color-syn-comment: var(--rw-syn-comment);
+    --color-syn-kw: var(--rw-syn-kw);
+    --color-syn-str: var(--rw-syn-str);
+    --color-syn-num: var(--rw-syn-num);
+    --color-syn-punc: var(--rw-syn-punc);
+    --color-syn-fn: var(--rw-syn-fn);
 
-    /* Easings */
-    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    /* Motion. Deliberately minimal: hover, focus and state changes are
+     * instant, so there is no scale of durations to pick from. The few things
+     * that still move — a drawer sliding, a toggle knob, an accordion's
+     * height, a progress bar's width — set their own timing inline. */
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ -245,6 +251,17 @@ body {
     color: var(--rw-on-surface);
 }
 
+/* Headings are mono chrome — the runbook voice. Components should not fight this. */
+h1,
+h2,
+h3 {
+    font-family: var(--font-mono);
+    font-weight: 800;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+}
+
 /* Utility classes for the design system */
 .rw-text-gradient {
     background: linear-gradient(135deg, var(--rw-color-wisp-600), var(--rw-color-aurora-500));
@@ -278,9 +295,6 @@ body {
     }
 }
 
-.btn-scale {
-    transition: all 0.15s ease-in-out;
-}
 .btn-scale:active {
     transform: scale(0.97);
 }

package/src/lib/utils/error.ts

@@ -1,9 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-/**
- * Extracts a human-readable message from an unknown caught value.
- */
 export function extractErrorMessage(
     err: unknown,
     fallback = "An unexpected error occurred",

package/src/lib/utils/format.test.ts

@@ -124,12 +124,8 @@ describe("formatRelativeTimeWithAbsolute", () => {
 describe("formatRelativeTime", () => {
     it("advances as the supplied now advances", () => {
         const date = new Date("2024-01-01T12:00:00Z");
-        expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe(
-            "about 2 hours ago",
-        );
-        expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe(
-            "about 3 hours ago",
-        );
+        expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe("2 hours ago");
+        expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe("3 hours ago");
     });
 });
 

package/src/lib/utils/format.ts

@@ -1,7 +1,32 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatDistance } from "date-fns";
+// Signed magnitude thresholds for Intl.RelativeTimeFormat, largest-first
+// division. Mirrors the buckets date-fns' formatDistance used to pick.
+const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][] = [
+    [60, "seconds"],
+    [60, "minutes"],
+    [24, "hours"],
+    [7, "days"],
+    [4.34524, "weeks"],
+    [12, "months"],
+    [Number.POSITIVE_INFINITY, "years"],
+];
+
+// formatDistance renders a signed date delta as "N units ago" / "in N units"
+// using the platform Intl formatter. Negative delta (date before base) reads as
+// past, positive as future.
+function formatDistance(date: Date, base: Date): string {
+    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+    let delta = (date.getTime() - base.getTime()) / 1000;
+    for (const [amount, unit] of RELATIVE_DIVISIONS) {
+        if (Math.abs(delta) < amount) {
+            return rtf.format(Math.round(delta), unit);
+        }
+        delta /= amount;
+    }
+    return rtf.format(Math.round(delta), "years");
+}
 
 export function formatBytes(bytes: number): string {
     const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -17,7 +42,7 @@ export function formatBytes(bytes: number): string {
 }
 
 export function formatRelativeTime(dateStr: string | Date, now: Date = new Date()): string {
-    return formatDistance(new Date(dateStr), now, { addSuffix: true });
+    return formatDistance(new Date(dateStr), now);
 }
 
 export function formatRelativeTimeWithAbsolute(
@@ -25,7 +50,7 @@ export function formatRelativeTimeWithAbsolute(
     now: Date = new Date(),
 ): string {
     const date = new Date(dateStr);
-    const relative = formatDistance(date, now, { addSuffix: true }).replace("about ", "");
+    const relative = formatDistance(date, now);
     const diffMs = Math.abs(now.getTime() - date.getTime());
     const diffDays = diffMs / (1000 * 60 * 60 * 24);