@dorsk/tsumikit 0.15.0 → 0.16.0

package/dist/components/molecules/Timestamp.svelte

@@ -32,6 +32,7 @@
 		value,
 		mode = 'datetime',
 		utc = false,
+		precision = false,
 		details = true,
 		selectable = false,
 		mono = false,
@@ -49,6 +50,9 @@
 		 *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
 		 *  value would otherwise show the wrong day. */
 		utc?: boolean;
+		/** Relative mode only: render two units ("1d 15h", "1h 55m") instead of a
+		 *  single rounded unit. Default false. */
+		precision?: boolean;
 		/** Click to open the details popover (UTC / local / relative / zone /
 		 *  epoch). Default true. When false, renders as a bare inline <time>. */
 		details?: boolean;
@@ -83,7 +87,7 @@
 	});
 
 	const date = $derived(toDate(value));
-	const label = $derived(formatTimestamp(value, current, now, utc));
+	const label = $derived(formatTimestamp(value, current, now, utc, precision));
 	// datetime= wants a valid ISO string; omit it entirely on bad input.
 	const machine = $derived(date ? toISO(date) : undefined);
 	const showPopover = $derived(details || selectable);
@@ -105,7 +109,7 @@
 			? [
 					{ k: 'UTC', v: toISO(date) },
 					{ k: 'Local', v: toLocale(date, 'datetime') },
-					{ k: 'Relative', v: relativeTime(date, now) },
+					{ k: 'Relative', v: relativeTime(date, now, true) },
 					{ k: 'Time zone', v: localTimeZone() },
 					{ k: 'Unix', v: String(toEpochSeconds(date)) }
 				]

package/dist/components/molecules/Timestamp.svelte.d.ts

@@ -12,6 +12,9 @@ type $$ComponentProps = {
      *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
      *  value would otherwise show the wrong day. */
     utc?: boolean;
+    /** Relative mode only: render two units ("1d 15h", "1h 55m") instead of a
+     *  single rounded unit. Default false. */
+    precision?: boolean;
     /** Click to open the details popover (UTC / local / relative / zone /
      *  epoch). Default true. When false, renders as a bare inline <time>. */
     details?: boolean;

package/dist/timestamp.d.ts

@@ -28,11 +28,17 @@ export declare function localTimeZone(): string;
  * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
  * falling back to a locale date once past ~30 days. Future instants read
  * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ *
+ * The single-unit form **rounds to the nearest** unit (not truncating), so an
+ * instant 1d 15h away reads "in 2d" rather than the misleading "in 1d", and the
+ * rounding carries across boundaries (23h40m → "1d"). Pass `precision` for the
+ * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
+ * shows the remainder instead of rounding it away.
  */
-export declare function relativeTime(value: TimeInput | null | undefined, now?: number): string;
+export declare function relativeTime(value: TimeInput | null | undefined, now?: number, precision?: boolean): string;
 /**
  * Render a date in the chosen inline mode. `utc` selects UTC over the viewer's
  * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
  * `relative`, zoneless). Returns '' for unparseable input.
  */
-export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean): string;
+export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean, precision?: boolean): string;

package/dist/timestamp.js

@@ -49,12 +49,21 @@ export function toEpochSeconds(d) {
 export function localTimeZone() {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
+const MIN = 60;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
 /**
  * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
  * falling back to a locale date once past ~30 days. Future instants read
  * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ *
+ * The single-unit form **rounds to the nearest** unit (not truncating), so an
+ * instant 1d 15h away reads "in 2d" rather than the misleading "in 1d", and the
+ * rounding carries across boundaries (23h40m → "1d"). Pass `precision` for the
+ * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
+ * shows the remainder instead of rounding it away.
  */
-export function relativeTime(value, now = Date.now()) {
+export function relativeTime(value, now = Date.now(), precision = false) {
     const d = toDate(value);
     if (!d)
         return '';
@@ -62,15 +71,32 @@ export function relativeTime(value, now = Date.now()) {
     const future = deltaMs < 0;
     const secs = Math.floor(Math.abs(deltaMs) / 1000);
     const suffix = (s) => (future ? `in ${s}` : `${s} ago`);
-    if (secs < 60)
+    if (secs < MIN)
         return suffix(`${secs}s`);
-    const mins = Math.floor(secs / 60);
+    if (secs >= 30 * DAY)
+        return d.toLocaleDateString();
+    if (precision) {
+        if (secs < HOUR) {
+            const m = Math.floor(secs / MIN);
+            const s = secs % MIN;
+            return suffix(s ? `${m}m ${s}s` : `${m}m`);
+        }
+        if (secs < DAY) {
+            const h = Math.floor(secs / HOUR);
+            const m = Math.floor((secs % HOUR) / MIN);
+            return suffix(m ? `${h}h ${m}m` : `${h}h`);
+        }
+        const days = Math.floor(secs / DAY);
+        const h = Math.floor((secs % DAY) / HOUR);
+        return suffix(h ? `${days}d ${h}h` : `${days}d`);
+    }
+    const mins = Math.round(secs / MIN);
     if (mins < 60)
         return suffix(`${mins}m`);
-    const hrs = Math.floor(mins / 60);
+    const hrs = Math.round(secs / HOUR);
     if (hrs < 24)
         return suffix(`${hrs}h`);
-    const days = Math.floor(hrs / 24);
+    const days = Math.round(secs / DAY);
     if (days < 30)
         return suffix(`${days}d`);
     return d.toLocaleDateString();
@@ -80,7 +106,7 @@ export function relativeTime(value, now = Date.now()) {
  * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
  * `relative`, zoneless). Returns '' for unparseable input.
  */
-export function formatTimestamp(value, mode, now, utc = false) {
+export function formatTimestamp(value, mode, now, utc = false, precision = false) {
     const d = toDate(value);
     if (!d)
         return '';
@@ -92,6 +118,6 @@ export function formatTimestamp(value, mode, now, utc = false) {
         case 'datetime':
             return toLocale(d, mode, utc);
         case 'relative':
-            return relativeTime(d, now);
+            return relativeTime(d, now, precision);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",