@runwisp/ui 1.5.0 → 1.7.0

package/src/lib/theme-tokens.css

@@ -1,7 +1,7 @@
 /* SPDX-FileCopyrightText: PoppyCake, s.r.o. */
 /* SPDX-License-Identifier: Apache-2.0 */
 
-/* RunWisp Design Tokens — plain CSS, no Tailwind directives.
+/* RunWisp Design Tokens, plain CSS, no Tailwind directives.
  *
  * Single source of truth for the OKLch palette and the semantic `--rw-*`
  * tokens that drive all apps:
@@ -19,7 +19,7 @@
  *   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
+ * 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.
  */
 
@@ -30,13 +30,13 @@
 @import "@fontsource-variable/geist-mono/index.css";
 
 :root {
-    /* Typography — body sans for prose, mono for all chrome and identifiers.
+    /* 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;
 
-    /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
+    /* Primary, Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
      * and less cyan than Aurora (running/info) so the two stay distinct. */
     --rw-color-wisp-50: oklch(0.97 0.02 205);
     --rw-color-wisp-100: oklch(0.95 0.035 205);
@@ -50,7 +50,7 @@
     --rw-color-wisp-900: oklch(0.3 0.048 208);
     --rw-color-wisp-950: oklch(0.2 0.034 210);
 
-    /* Accent — Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
+    /* Accent, Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
     --rw-color-aurora-50: oklch(0.97 0.02 192);
     --rw-color-aurora-100: oklch(0.94 0.045 192);
     --rw-color-aurora-200: oklch(0.88 0.075 190);
@@ -62,7 +62,7 @@
     --rw-color-aurora-800: oklch(0.35 0.07 192);
     --rw-color-aurora-900: oklch(0.28 0.055 192);
 
-    /* Mist — teal-gray neutrals (the runbook's #F3F6F6 / #E0E7E7 /
+    /* 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. */
@@ -78,7 +78,7 @@
     --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) */
+    /* Success, Field Green (success status = #1F9D57, a true grass green) */
     --rw-color-success-50: oklch(0.97 0.02 150);
     --rw-color-success-100: oklch(0.94 0.04 150);
     --rw-color-success-200: oklch(0.88 0.07 150);
@@ -88,7 +88,7 @@
     --rw-color-success-600: oklch(0.5 0.13 150);
     --rw-color-success-700: oklch(0.42 0.11 150);
 
-    /* Danger — Signal Red (failed status = #D6453D, a warm tomato red) */
+    /* Danger, Signal Red (failed status = #D6453D, a warm tomato red) */
     --rw-color-danger-50: oklch(0.97 0.016 27);
     --rw-color-danger-100: oklch(0.94 0.03 27);
     --rw-color-danger-200: oklch(0.88 0.06 27);
@@ -98,7 +98,7 @@
     --rw-color-danger-600: oklch(0.5 0.17 27);
     --rw-color-danger-700: oklch(0.42 0.145 27);
 
-    /* Warning — Ember Amber (stopped status = #D98324, a warm orange-amber) */
+    /* Warning, Ember Amber (stopped status = #D98324, a warm orange-amber) */
     --rw-color-warning-50: oklch(0.97 0.03 78);
     --rw-color-warning-100: oklch(0.94 0.07 74);
     --rw-color-warning-200: oklch(0.9 0.11 72);
@@ -108,7 +108,7 @@
     --rw-color-warning-600: oklch(0.6 0.14 62);
     --rw-color-warning-700: oklch(0.52 0.12 60);
 
-    /* ANSI console palette — 16-color map for the log console, tuned for
+    /* ANSI console palette, 16-color map for the log console, tuned for
      * its always-dark surface (no .dark override needed). Hues follow the
      * semantic scales: red→danger, green→success, yellow→warning,
      * blue→wisp, cyan→aurora, grays→mist. */
@@ -129,11 +129,11 @@
     --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
     --rw-ansi-bright-white: var(--rw-color-mist-50);
 
-    /* Fixed-dark sibling palettes — the `--rw-con-*` log console (a "black box"
+    /* 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.
+    /* 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 */
@@ -141,7 +141,7 @@
     --rw-con-dim: #6c7d8c; /* footer + muted readouts */
     --rw-con-gutter: #3c4a58; /* line numbers + sentinel rule */
 
-    /* Terminal surface — always dark in both themes (website --term-* set) */
+    /* Terminal surface, always dark in both themes (website --term-* set) */
     --rw-term: #0a1116;
     --rw-term-2: #0d151b;
     --rw-term-line: #1d2932;
@@ -161,7 +161,7 @@
     --rw-syn-punc: #9aa7b0;
     --rw-syn-fn: #2fd4dd;
 
-    /* Elevation — light-mode drop shadows; flipped to `none` in dark so the
+    /* 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);
@@ -169,7 +169,7 @@
     --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).
+    /* 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
@@ -223,7 +223,7 @@
     --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 */
+    /* Info, matches primary teal */
     --rw-info: #15a0a8;
     --rw-info-hover: #0e7c86;
     --rw-on-info: #ffffff;
@@ -235,7 +235,7 @@
     --rw-glass-blur: blur(12px);
 }
 
-/* Dark-mode semantic tokens — `.dark` class for Svelte apps, `[data-theme="dark"]`
+/* Dark-mode semantic tokens, `.dark` class for Svelte apps, `[data-theme="dark"]`
  * attribute for Starlight. Both selectors apply the same token set. */
 :root.dark,
 :root[data-theme="dark"] {
@@ -254,7 +254,7 @@
     --rw-outline-faint: #1d2932;
     --rw-ring: #2fd4dd;
     --rw-backdrop: rgba(4, 10, 12, 0.7);
-    /* Primary — bright teal in dark, matches info */
+    /* Primary, bright teal in dark, matches info */
     --rw-primary: #2fd4dd;
     --rw-primary-hover: #5fe3ea;
     --rw-primary-active: #5fe3ea;
@@ -284,7 +284,7 @@
     --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 */
+    /* Info, bright teal in dark */
     --rw-info: #2fd4dd;
     --rw-info-hover: #5fe3ea;
     --rw-on-info: #04181a;
@@ -293,7 +293,7 @@
     --rw-info-soft-border: rgba(47, 212, 221, 0.28);
     /* Glass */
     --rw-glass: rgba(8, 15, 17, 0.9);
-    /* Elevation — borders-only in dark, no drop shadow */
+    /* Elevation, borders-only in dark, no drop shadow */
     --rw-shadow-xs: none;
     --rw-shadow-sm: none;
     --rw-shadow-md: none;
@@ -301,7 +301,7 @@
     --rw-shadow-xl: none;
 }
 
-/* Platform polish — focus ring, text selection, scrollbar. Lifted from
+/* Platform polish, focus ring, text selection, scrollbar. Lifted from
  * theme.css so apps/docs (no Tailwind) gets the same treatment as the
  * Svelte apps. */
 

package/src/lib/theme.css

@@ -1,6 +1,6 @@
 /* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
 
-/* RunWisp Design System — Tailwind v4 entrypoint.
+/* RunWisp Design System, Tailwind v4 entrypoint.
  *
  * Raw OKLch palette + semantic tokens live in ./theme-tokens.css (plain CSS),
  * so apps/docs (Starlight, no Tailwind pipeline) can consume the same source.
@@ -23,7 +23,7 @@
      * side for good; below it the operator can fold the first two away. */
     --breakpoint-3xl: 100rem;
 
-    /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
+    /* Palette aliases, Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
     --color-wisp-50: var(--rw-color-wisp-50);
     --color-wisp-100: var(--rw-color-wisp-100);
@@ -87,7 +87,7 @@
     --color-warning-600: var(--rw-color-warning-600);
     --color-warning-700: var(--rw-color-warning-700);
 
-    /* Typography — stacks and @font-face live in theme-tokens.css so the
+    /* 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);
@@ -126,18 +126,18 @@
     --spacing-20: 5rem;
     --spacing-24: 6rem;
 
-    /* Border radius — runbook scale (small radii are signature). lg/xl/2xl/3xl
+    /* 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.1875rem; /* 3px — controls */
-    --radius-md: 0.25rem; /* 4px — panels / cards */
+    --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 — mapped to the flip tokens in theme-tokens.css so every
+    /* 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);
@@ -146,7 +146,7 @@
     --shadow-xl: var(--rw-shadow-xl);
 }
 
-/* Semantic Design Tokens — Tailwind utility aliases.
+/* Semantic Design Tokens, Tailwind utility aliases.
  * Components use `bg-surface`, `text-primary`, etc.; the values live in
  * theme-tokens.css under the --rw-* namespace and flip on light/dark. */
 
@@ -206,7 +206,7 @@
     --color-warning-soft-border: var(--rw-warning-soft-border);
     --color-info-soft-border: var(--rw-info-soft-border);
 
-    /* Terminal surface — fixed dark in both themes */
+    /* 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);
@@ -228,8 +228,8 @@
 
     /* 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. */
+     * 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);
 }
 
@@ -255,7 +255,7 @@ body {
     color: var(--rw-on-surface);
 }
 
-/* Headings are mono chrome — the runbook voice. Unlayered, so it beats the
+/* Headings are mono chrome, the runbook voice. Unlayered, so it beats the
    weight/leading/tracking utilities on a raw <h1>-<h3>: every heading reads the
    same. The Heading component opts out (data-rw-heading) and carries this look
    in its own classes, so its props are the source of truth. :is()/:where()
@@ -295,7 +295,7 @@ body {
     backdrop-filter: var(--rw-glass-blur);
 }
 
-/* Legacy aliases — prefer .rw-bg-glass which adapts to light/dark */
+/* Legacy aliases, prefer .rw-bg-glass which adapts to light/dark */
 .rw-bg-glass-dark {
     background: var(--rw-glass);
     backdrop-filter: var(--rw-glass-blur);

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

@@ -8,6 +8,9 @@ import {
     formatClockTime,
     formatDayMonth,
     formatDuration,
+    formatDurationExact,
+    parseDuration,
+    formatRelativeCompact,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
     formatTimeHM,
@@ -86,7 +89,7 @@ describe("formatRelativeTimeWithAbsolute", () => {
     it("uses time-only format (HH:MM) for dates within the same day", () => {
         const recent = new Date(Date.now() - 30 * 60_000).toISOString();
         const r = formatRelativeTimeWithAbsolute(recent);
-        // Same-day branch produces `relative (HH:MM)` — assert on the colon
+        // Same-day branch produces `relative (HH:MM)`, assert on the colon
         // that only appears inside the time format.
         expect(r).toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
@@ -122,22 +125,95 @@ describe("formatRelativeTimeWithAbsolute", () => {
 });
 
 describe("formatRelativeTime", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const at = (seconds: number): Date => new Date(now.getTime() + seconds * 1000);
+
     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("2 hours ago");
         expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe("3 hours ago");
     });
+
+    it("always shows a number by default", () => {
+        expect(formatRelativeTime(at(0), now)).toBe("in 0 seconds");
+        expect(formatRelativeTime(at(-86_400), now)).toBe("1 day ago");
+        expect(formatRelativeTime(at(86_400), now)).toBe("in 1 day");
+    });
+
+    it.each([
+        [0, "now"],
+        [-16, "16 seconds ago"],
+        [16, "in 16 seconds"],
+        [-60, "1 minute ago"],
+        [-5 * 60, "5 minutes ago"],
+        [-3600, "1 hour ago"],
+        [2 * 3600, "in 2 hours"],
+        [-86_400, "yesterday"],
+        [86_400, "tomorrow"],
+        [-3 * 86_400, "3 days ago"],
+    ])("numeric auto: %is from now reads %s", (seconds, expected) => {
+        expect(formatRelativeTime(at(seconds), now, { numeric: "auto" })).toBe(expected);
+    });
+
+    it("accepts a timestamp, an ISO string or a Date", () => {
+        const date = at(-120);
+        expect(formatRelativeTime(date.getTime(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date.toISOString(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date, now)).toBe("2 minutes ago");
+    });
+
+    it("throws on an invalid date", () => {
+        expect(() => formatRelativeTime("not a date", now)).toThrow(RangeError);
+        expect(() => formatRelativeTime("not a date", now, { numeric: "auto" })).toThrow(
+            RangeError,
+        );
+    });
+});
+
+describe("formatRelativeCompact", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const ago = (seconds: number): number => now.getTime() - seconds * 1000;
+
+    it.each([
+        [0, "0s"],
+        [16.9, "16s"],
+        [59, "59s"],
+        [60, "1m"],
+        [3 * 60 + 59, "3m"],
+        [59 * 60, "59m"],
+        [3600, "1h"],
+        [23 * 3600 + 3599, "23h"],
+        [86_400, "1d"],
+        [45 * 86_400, "45d"],
+        [400 * 86_400, "400d"],
+    ])("%is ago reads %s", (seconds, expected) => {
+        expect(formatRelativeCompact(ago(seconds), now)).toBe(expected);
+    });
+
+    it("clamps a future date to 0s", () => {
+        expect(formatRelativeCompact(ago(-90), now)).toBe("0s");
+    });
+
+    it("accepts an ISO string or a Date", () => {
+        expect(formatRelativeCompact(new Date(ago(180)).toISOString(), now)).toBe("3m");
+        expect(formatRelativeCompact(new Date(ago(180)), now)).toBe("3m");
+    });
+
+    it("does not guard an invalid date", () => {
+        // Same as the station helper it replaces; callers pass server timestamps.
+        expect(formatRelativeCompact("not a date", now)).toBe("NaNd");
+    });
 });
 
 describe("formatClockTime", () => {
     it("renders three numeric groups (hours, minutes, seconds)", () => {
-        // 24-hour h:m:s — the seconds component is what sets it apart from formatTimeHM.
+        // 24-hour h:m:s, the seconds component is what sets it apart from formatTimeHM.
         expect(numericGroups(formatClockTime("2026-06-22T17:15:02Z"))).toBe(3);
     });
 });
 
 describe("formatTimeHM", () => {
-    it("renders two numeric groups (hours, minutes) — no seconds", () => {
+    it("renders two numeric groups (hours, minutes), no seconds", () => {
         expect(numericGroups(formatTimeHM("2026-06-22T17:15:02Z"))).toBe(2);
     });
 });
@@ -156,3 +232,49 @@ describe("formatDayMonth", () => {
         expect(r).not.toContain("2026");
     });
 });
+
+describe("parseDuration", () => {
+    it("reads the placeholder's own format", () => {
+        expect(parseDuration("5m 30s")).toBe(330_000);
+    });
+
+    it("reads compact, fractional and sub-second forms", () => {
+        expect(parseDuration("1h30m")).toBe(5_400_000);
+        expect(parseDuration("1.5h")).toBe(5_400_000);
+        expect(parseDuration("250ms")).toBe(250);
+        expect(parseDuration("2d")).toBe(172_800_000);
+    });
+
+    it("reads what the ms package did", () => {
+        expect(parseDuration("500")).toBe(500);
+        expect(parseDuration("1w")).toBe(604_800_000);
+        expect(parseDuration("1y")).toBe(31_557_600_000);
+        expect(parseDuration("2 hours")).toBe(7_200_000);
+        expect(parseDuration("30 sec")).toBe(30_000);
+        expect(parseDuration("5 minutes")).toBe(300_000);
+        expect(parseDuration("5M")).toBe(300_000);
+        expect(parseDuration(".5h")).toBe(1_800_000);
+        expect(parseDuration(" 1 Hour 30 mins ")).toBe(5_400_000);
+    });
+
+    it("rejects text that isn't number+unit throughout", () => {
+        expect(parseDuration("")).toBeNull();
+        expect(parseDuration("5x")).toBeNull();
+        expect(parseDuration("5m abc")).toBeNull();
+        expect(parseDuration("5 30s")).toBeNull();
+        expect(parseDuration("1.5.5")).toBeNull();
+        expect(parseDuration("9".repeat(101))).toBeNull();
+    });
+});
+
+describe("formatDurationExact", () => {
+    it("keeps every non-zero unit instead of rounding", () => {
+        expect(formatDurationExact(330_000)).toBe("5m 30s");
+        expect(formatDurationExact(3_930_000)).toBe("1h 5m 30s");
+        expect(formatDurationExact(0)).toBe("0ms");
+    });
+
+    it("round-trips through parseDuration", () => {
+        expect(parseDuration(formatDurationExact(90_061_001))).toBe(90_061_001);
+    });
+});

package/src/lib/utils/format.ts

@@ -13,18 +13,48 @@ const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][]
     [Number.POSITIVE_INFINITY, "years"],
 ];
 
-const relativeTime = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+const relativeTime = {
+    always: new Intl.RelativeTimeFormat(undefined, { numeric: "always" }),
+    auto: new Intl.RelativeTimeFormat(undefined, { numeric: "auto" }),
+};
+
+export interface RelativeTimeOptions {
+    /** `"auto"` words the near units: "now", "yesterday", "tomorrow", "last week". Default `"always"`. */
+    numeric?: Intl.RelativeTimeFormatNumeric;
+}
 
 /** "N units ago" / "in N units" for `date` relative to `now`. */
-export function formatRelativeTime(date: string | Date, now: Date = new Date()): string {
+export function formatRelativeTime(
+    date: string | number | Date,
+    now: Date = new Date(),
+    { numeric = "always" }: RelativeTimeOptions = {},
+): string {
+    const format = relativeTime[numeric];
     let delta = (new Date(date).getTime() - now.getTime()) / 1000;
     for (const [amount, unit] of RELATIVE_DIVISIONS) {
         if (Math.abs(delta) < amount) {
-            return relativeTime.format(Math.round(delta), unit);
+            return format.format(Math.round(delta), unit);
         }
         delta /= amount;
     }
-    return relativeTime.format(Math.round(delta), "years");
+    return format.format(Math.round(delta), "years");
+}
+
+/**
+ * Compact age of a past `date` for dense rows and live labels: "45s", "5m",
+ * "3h", "2d". Each unit floors; a future date reads "0s".
+ */
+export function formatRelativeCompact(
+    date: string | number | Date,
+    now: Date = new Date(),
+): string {
+    const seconds = Math.max(0, Math.floor((now.getTime() - new Date(date).getTime()) / 1000));
+    if (seconds < 60) return `${String(seconds)}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${String(minutes)}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${String(hours)}h`;
+    return `${String(Math.floor(hours / 24))}d`;
 }
 
 /** A locale date/time formatter for one fixed option set, built once. */
@@ -41,7 +71,7 @@ export const formatDateTime = dateFormatter({
     minute: "2-digit",
 });
 
-/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+/** Wall-clock time of day, seconds included, 24-hour, e.g. "17:15:02". */
 export const formatClockTime = dateFormatter({
     hour: "2-digit",
     minute: "2-digit",
@@ -49,17 +79,17 @@ export const formatClockTime = dateFormatter({
     hour12: false,
 });
 
-/** Calendar date without the time — e.g. "22 Jun 2026". */
+/** Calendar date without the time, e.g. "22 Jun 2026". */
 export const formatCalendarDate = dateFormatter({
     year: "numeric",
     month: "short",
     day: "numeric",
 });
 
-/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+/** Time of day, no seconds, 24-hour, e.g. "17:15". */
 export const formatTimeHM = dateFormatter({ hour: "2-digit", minute: "2-digit", hour12: false });
 
-/** Day and month, no year — e.g. "22 Jun". */
+/** Day and month, no year, e.g. "22 Jun". */
 export const formatDayMonth = dateFormatter({ month: "short", day: "numeric" });
 
 export const formatFullDateTime = dateFormatter({
@@ -108,3 +138,66 @@ export function formatDuration(ms: number): string {
     const remM = m % 60;
     return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
 }
+
+// Largest first, so formatDurationExact can peel units off greedily.
+const DURATION_UNITS: [unit: string, ms: number][] = [
+    ["d", 86_400_000],
+    ["h", 3_600_000],
+    ["m", 60_000],
+    ["s", 1000],
+    ["ms", 1],
+];
+
+// Every unit name parseDuration takes, in ms. The `ms` package's set.
+const UNIT_ALIASES: [ms: number, names: string[]][] = [
+    [1, ["ms", "msec", "msecs", "millisecond", "milliseconds"]],
+    [1000, ["s", "sec", "secs", "second", "seconds"]],
+    [60_000, ["m", "min", "mins", "minute", "minutes"]],
+    [3_600_000, ["h", "hr", "hrs", "hour", "hours"]],
+    [86_400_000, ["d", "day", "days"]],
+    [604_800_000, ["w", "week", "weeks"]],
+    [31_557_600_000, ["y", "yr", "yrs", "year", "years"]],
+];
+const UNIT_MS = new Map(UNIT_ALIASES.flatMap(([size, names]) => names.map((n) => [n, size])));
+
+/**
+ * parseDuration reads a duration into milliseconds. It takes what the `ms`
+ * package does ("500" as milliseconds, ".5h", "2 hours", "30 sec", "1w", "1y",
+ * any case) plus compound forms: "5m 30s", "1h30m". Returns null when any part
+ * isn't a number with a unit (only a lone number may go without one).
+ */
+export function parseDuration(text: string): number | null {
+    const s = text.trim().toLowerCase();
+    // Bounded like `ms`, which also keeps the number pattern's backtracking cheap.
+    if (!s || s.length > 100) return null;
+    const segment = /(-?\d*\.?\d+)\s*([a-z]*)\s*/y;
+    let total = 0;
+    let segments = 0;
+    let bare = false;
+    while (segment.lastIndex < s.length) {
+        const match = segment.exec(s);
+        if (!match) return null;
+        const [, amount = "", unit = ""] = match;
+        const size = unit ? UNIT_MS.get(unit) : 1;
+        if (size === undefined) return null;
+        bare ||= !unit;
+        total += Number(amount) * size;
+        segments++;
+    }
+    if (bare && segments > 1) return null;
+    return Math.round(total);
+}
+
+/** formatDurationExact renders milliseconds as "1h 5m 30s", keeping every non-zero unit. */
+export function formatDurationExact(ms: number): string {
+    const parts: string[] = [];
+    let rest = Math.round(ms);
+    for (const [unit, size] of DURATION_UNITS) {
+        const amount = Math.floor(rest / size);
+        if (amount > 0) {
+            parts.push(String(amount) + unit);
+            rest -= amount * size;
+        }
+    }
+    return parts.length > 0 ? parts.join(" ") : "0ms";
+}

package/src/lib/utils/toast.svelte.ts

@@ -1,8 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import { generateUlid } from "@runwisp/common";
-
 type ToastType = "success" | "error" | "warning" | "info";
 
 interface ToastAction {
@@ -28,6 +26,7 @@ const DEFAULT_DURATION = 5000;
 class ToastStore {
     items = $state<Toast[]>([]);
     private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();
+    private nextId = 0;
 
     add(type: ToastType, message: string, opts: ToastOptions = {}): string {
         const duration = opts.duration ?? DEFAULT_DURATION;
@@ -37,7 +36,7 @@ class ToastStore {
             return existing.id;
         }
 
-        const id = generateUlid();
+        const id = `toast-${String(++this.nextId)}`;
         const next: Toast = { id, type, message, duration };
         if (opts.action) next.action = opts.action;
         this.items = [...this.items, next];

package/src/lib/utils/typing-target.ts

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+/** True when a keyboard event came from a field the user is typing into. */
+export function isTypingTarget(target: EventTarget | null): boolean {
+    return (
+        target instanceof HTMLElement &&
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+    );
+}