@anchrd/intel-ui 0.25.0 → 0.29.0

package/src/nodes/nodes.tsx

@@ -1,10 +1,9 @@
 import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { Download, History, Paperclip } from "lucide-react";
-import { lazy, Suspense, useState } from "react";
+import { Download, Paperclip } from "lucide-react";
+import { lazy, Suspense } from "react";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import { FolderContents } from "@/folder-contents/folder-contents.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
@@ -12,8 +11,7 @@ import { useI18n } from "@/i18n/i18n-context.tsx";
 import { NodeTablePanel } from "@/node-table/node-table.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
-import { useDateTime } from "@/time/time-context.tsx";
-import { TitleRow } from "@/title-row/title-row.tsx";
+import { TitleRow, TitleRowFrame } from "@/title-row/title-row.tsx";
 
 const NodeEditor = lazy(async () => ({
   default: (await import("@/node-editor/node-editor.tsx")).NodeEditor,
@@ -33,7 +31,6 @@ export function Nodes() {
     }),
   });
   const selectedId = selection.id;
-  const [versionsOpen, setVersionsOpen] = useState(false);
   const document = useQuery({
     queryKey: ["node", selectedId],
     queryFn: () => data.getNode(selectedId ?? ""),
@@ -53,7 +50,7 @@ export function Nodes() {
     enabled: graphable && selection.graph,
   });
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <TitleRowFrame className="flex h-full min-h-0 flex-col">
       <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
         {/* ⚠️ Only the root draws its graph on its own. A folder's graph hangs *under* the folder's
             title line rather than in place of it (#58): the line is the one place its menu lives,
@@ -122,9 +119,6 @@ export function Nodes() {
                 document. What the four loose icons used to do is now one menu (#24) — and since #58
                 this line is the only place that menu appears at all, for every kind including a
                 folder, whose whole screen is this line.
-                ⚠️ The order of the right-hand group is `TitleRow`'s (#53), not this screen's: the
-                version button is handed over as a child and lands before the menu whatever else
-                shows up later.
                 ⚠️ #454: the toggle now stands HERE. It used to stand in the global header, beside
                 the search — where what applies everywhere stands. But a graph view does not apply
                 everywhere, it is a view onto THIS item. It is only drawn where there is a graph: on
@@ -135,22 +129,6 @@ export function Nodes() {
               target={{ type: "node", node: selected }}
             >
               {graphable && <ViewToggle />}
-              {selected.kind !== "folder" && (
-                <TooltipProvider delayDuration={300}>
-                  <Tooltip>
-                    <TooltipTrigger
-                      type="button"
-                      onClick={() => setVersionsOpen((value) => !value)}
-                      aria-label={i18n.t("node.versions")}
-                      aria-expanded={versionsOpen}
-                      className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
-                    >
-                      <History aria-hidden="true" className="size-4" />
-                    </TooltipTrigger>
-                    <TooltipContent>{i18n.t("node.versions")}</TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
             </TitleRow>
             {graphable && selection.graph ? (
               <GraphPane
@@ -185,13 +163,10 @@ export function Nodes() {
                 />
               </Suspense>
             ) : null}
-            {versionsOpen && selected.kind !== "folder" && (
-              <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
-            )}
           </>
         )}
       </section>
-    </div>
+    </TitleRowFrame>
   );
 }
 
@@ -235,51 +210,3 @@ function AttachmentPanel({ node }: { node: Node }) {
     </div>
   );
 }
-
-function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const dateTime = useDateTime();
-  const versions = useQuery({
-    queryKey: ["node-versions", nodeId],
-    queryFn: () => data.listNodeVersions(nodeId),
-  });
-  return (
-    <aside
-      aria-label={i18n.t("node.versions")}
-      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
-    >
-      <div className="flex items-start justify-between gap-4">
-        <h3 className="font-semibold">{i18n.t("node.versions")}</h3>
-        <button
-          type="button"
-          onClick={close}
-          aria-label={i18n.t("common.close")}
-          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          ×
-        </button>
-      </div>
-      {versions.isPending ? (
-        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-      ) : null}
-      {versions.isError ? (
-        <p role="alert" className="mt-4 text-sm text-destructive">
-          {i18n.t("node.operationFailed")}
-        </p>
-      ) : null}
-      <ol className="mt-4 space-y-3">
-        {versions.data?.items.map((version) => (
-          <li key={version.id} className="rounded-md border p-3 text-sm">
-            <span className="font-medium">
-              {i18n.t("node.version", { sequence: version.sequence })}
-            </span>
-            <time className="mt-1 block text-xs text-muted-foreground" dateTime={version.createdAt}>
-              {dateTime.at(version.createdAt)}
-            </time>
-          </li>
-        ))}
-      </ol>
-    </aside>
-  );
-}

package/src/resource-menu/resource-menu.tsx

@@ -11,6 +11,7 @@ import {
   FileArchive,
   FolderDown,
   FolderUp,
+  History,
   Link2,
   Pencil,
   Share2,
@@ -19,12 +20,11 @@ import {
 import type * as React from "react";
 import { useState } from "react";
 import { AccessSummary } from "@/access-summary/access-summary.tsx";
-import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
+import { allTreeLevelsKey, moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
@@ -37,6 +37,7 @@ import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
 import { useDateTime } from "@/time/time-context.tsx";
 
 /**
@@ -79,10 +80,6 @@ function titleOf(target: ResourceTarget): string {
   return target.type === "node" ? target.node.title : target.flow.title;
 }
 
-function parentOfTarget(target: ResourceTarget): string | null {
-  return target.type === "node" ? target.node.parentId : target.flow.parentId;
-}
-
 /**
  * Which sentence explains a verb.
  *
@@ -142,6 +139,7 @@ export function ResourceMenu({
   const [renaming, setRenaming] = useState(false);
   const [sharing, setSharing] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
+  const [versionsOpen, setVersionsOpen] = useState(false);
   const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   // ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no touch worth
@@ -173,9 +171,14 @@ export function ResourceMenu({
   // reads the record, and the flat collections behind the search, the link picker and the relation
   // view all carry the title as well — a rename that only reached the tree would leave yesterday's
   // name standing on three other screens.
+  //
+  // ⚠️ Every level rather than the one this row sits in: archiving the last row of a folder takes
+  // that folder's arrow away, and the arrow is drawn from the folder's own row one level higher
+  // (`allTreeLevelsKey`, #519). Renaming needs no more than the one level — but two invalidations
+  // that differ per entry are how one of them goes missing.
   async function refresh(): Promise<void> {
     await Promise.all([
-      queryClient.invalidateQueries({ queryKey: ["tree", parentOfTarget(target)] }),
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
       queryClient.invalidateQueries({
         queryKey: target.type === "flow" ? ["flow", id] : ["node", id],
       }),
@@ -314,35 +317,26 @@ export function ResourceMenu({
           className={
             variant === "row"
               ? "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
-              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
           }
         >
           <Ellipsis aria-hidden="true" className="size-4" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-52">
+        <DropdownMenuContent align="start" className="min-w-40 whitespace-nowrap">
           <DropdownMenuItem onSelect={() => setRenaming(true)}>
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
-          {/* ⚠️ #455: the hint is the actual change of the ticket. Dragging in the tree has been
-              built and shipped since 2026-08-02 — Jack asked for it anyway, so the feature was not
-              the problem, its discoverability was. Nothing about a row says it is movable before you
-              touch it: `cursor-grab` is only visible once the pointer is already on it, and the root
-              drop target appears only while something is being carried.
-
-              A menu is where you learn what can be done with a thing — the same place an application
-              names its keyboard shortcuts. No handle and no extra icon (Jack's instruction), and
-              readable without the pointer ever touching the row.
-
-              ⚠️ The dialog behind it stays the main path, not the fallback: touch has no
-              `dragstart`, and nothing can be dragged by keyboard at all. Dragging is the shortcut
-              for the mouse — the hint says exactly that, in the place that is reachable both ways. */}
-          <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
+          {/* The dialog stays the complete keyboard and touch path. Dragging is only a mouse
+              shortcut; it does not need a second label beside this action. */}
+          {/* ⚠️ `undefined`, and that is the honest answer rather than a missing one: this menu hangs
+              on a resource's own title line, so there is no rendered tree level to name. Passing the
+              record's parent instead would claim to know a level — and for a shared row it would
+              name the sharer's folder, which is exactly the wrong one (#446). `useTreeMove` reads
+              the absence and cleans up both levels such a row can be standing in. */}
+          <DropdownMenuItem onSelect={() => move.start(entryOf(target), undefined, null)}>
             <CornerLeftUp aria-hidden="true" />
-            {i18n.t("tree.move.action")}
-            <span aria-hidden="true" className="ml-auto text-xs text-muted-foreground">
-              {i18n.t("tree.move.hint")}
-            </span>
+            {i18n.t("resource.move")}
           </DropdownMenuItem>
           {/* Every kind exports: a folder takes its subtree along, everything else is a bundle of
               one (#136). The entry sits with rename and move because it acts on the whole thing,
@@ -356,7 +350,7 @@ export function ResourceMenu({
           {isTable ? (
             <DropdownMenuItem onSelect={() => downloadCsv.mutate()}>
               <Download aria-hidden="true" />
-              {i18n.t("node.table.download")}
+              {i18n.t("resource.downloadCsv")}
             </DropdownMenuItem>
           ) : null}
           {/* The other half of the same round trip, next to it rather than in the tree's plus
@@ -384,14 +378,13 @@ export function ResourceMenu({
           {node === null ? (
             <DropdownMenuItem onSelect={() => validate.mutate()}>
               <ShieldCheck aria-hidden="true" />
-              {i18n.t("flows.validate")}
+              {i18n.t("resource.validate")}
             </DropdownMenuItem>
           ) : null}
-          {retrievable || linkable || node ? <DropdownMenuSeparator /> : null}
           {linkable ? (
             <DropdownMenuItem onSelect={() => setLinksOpen(true)}>
               <Link2 aria-hidden="true" />
-              {i18n.t("node.links")}
+              {i18n.t("resource.links")}
             </DropdownMenuItem>
           ) : null}
           {/* A flow has no share of its own: it is reached through the folder it is filed in, and a
@@ -400,17 +393,19 @@ export function ResourceMenu({
           {node ? (
             <DropdownMenuItem onSelect={() => setSharing(true)}>
               <Share2 aria-hidden="true" />
-              {i18n.t("node.share")}
+              {i18n.t("resource.share")}
             </DropdownMenuItem>
           ) : null}
+          {(node === null || node.kind !== "folder") && (
+            <DropdownMenuItem onSelect={() => setVersionsOpen(true)}>
+              <History aria-hidden="true" />
+              {i18n.t("node.versions")}
+            </DropdownMenuItem>
+          )}
           {/* A flow is archived like a document (#109). It keeps its versions and its runs; what it
               loses is reach — it leaves the tree, cannot be started, and stops resolving as another
               flow's callee. */}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onSelect={() => archive.mutate()}
-            className="text-destructive focus:text-destructive"
-          >
+          <DropdownMenuItem onSelect={() => archive.mutate()}>
             <Archive aria-hidden="true" />
             {i18n.t("resource.archive")}
           </DropdownMenuItem>
@@ -497,10 +492,70 @@ export function ResourceMenu({
       ) : null}
       {sharing && node ? <SharePanel node={node} close={() => setSharing(false)} /> : null}
       {linksOpen && node ? <NodeLinksPanel node={node} close={() => setLinksOpen(false)} /> : null}
+      {versionsOpen ? (
+        <VersionHistory target={target} close={() => setVersionsOpen(false)} />
+      ) : null}
     </>
   );
 }
 
+function VersionHistory({ target, close }: { target: ResourceTarget; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const id = idOf(target);
+  const versions = useQuery({
+    queryKey: [target.type === "flow" ? "flow-versions" : "node-versions", id],
+    queryFn: async () => {
+      const result =
+        target.type === "flow" ? await data.listFlowVersions(id) : await data.listNodeVersions(id);
+      return result.items.map((version) => ({
+        id: version.id,
+        sequence: version.sequence,
+        createdAt: version.createdAt,
+      }));
+    },
+  });
+  return (
+    <aside
+      aria-label={i18n.t("node.versions")}
+      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <h3 className="font-semibold">{i18n.t("node.versions")}</h3>
+        <button
+          type="button"
+          onClick={close}
+          aria-label={i18n.t("common.close")}
+          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ×
+        </button>
+      </div>
+      {versions.isPending ? (
+        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {versions.isError ? (
+        <p role="alert" className="mt-4 text-sm text-destructive">
+          {i18n.t(target.type === "flow" ? "flows.operationFailed" : "node.operationFailed")}
+        </p>
+      ) : null}
+      <ol className="mt-4 space-y-3">
+        {versions.data?.map((version) => (
+          <li key={version.id} className="rounded-md border p-3 text-sm">
+            <span className="font-medium">
+              {i18n.t("node.version", { sequence: version.sequence })}
+            </span>
+            <RelativeTime
+              value={version.createdAt}
+              className="mt-1 block text-xs text-muted-foreground"
+            />
+          </li>
+        ))}
+      </ol>
+    </aside>
+  );
+}
+
 // One refusal, over the screen rather than in the menu that is already gone by the time it arrives.
 function MenuFailure({ children }: { children: React.ReactNode }) {
   return (

package/src/save-button/save-button.tsx

@@ -8,61 +8,42 @@ import { Modal } from "@/modal/modal.tsx";
  * Saving, in the title line beside the name of the thing being saved (#24).
  *
  * ⚠️ Unsaved is a state that must survive colour blindness, so it is never carried by colour alone.
- * At rest the button is a quiet icon; with something to save it fills, grows a dot and spells the
- * word out. Three changes at once, of which two are readable without seeing any colour at all.
+ * The button only exists while there is work to save; it fills, grows a dot and spells the word
+ * out. Three signals at once, of which two are readable without seeing any colour at all.
  *
- * ⚠️ The accessible name names the state as well — "Saved" and "Save unsaved changes" are two
- * different pieces of information, and a screen reader gets neither the fill nor the dot. The
- * visible word stays a prefix of it, so speech input still reaches the button by what it reads.
- *
- * ⚠️ At rest there are TWO states, not one, and `stored` is what tells them apart (#432). A
- * document that has never been written has nothing to save either — and calling that "Saved" is the
- * one sentence an editor must never say untruthfully: whoever reads it closes the tab. The button
- * was already unclickable in that state, which is exactly why it went unnoticed for so long; the
- * tooltip and the accessible name kept claiming a version that does not exist. "Nothing to save"
- * says less and stays true in both readings.
+ * ⚠️ The accessible name names the state as well. A screen reader gets neither the fill nor the
+ * dot, and saving in progress must not sound like another available action. The visible word stays
+ * a prefix of the name, so speech input still reaches the button by what it reads.
  */
 export function SaveButton({
   dirty,
   saving,
-  stored,
   onSave,
 }: {
   dirty: boolean;
   saving: boolean;
-  /** Whether what is being edited has content on the server at all. */
-  stored: boolean;
   onSave(): void;
 }) {
   const i18n = useI18n();
-  const label = i18n.t(dirty ? "common.saveDirty" : stored ? "common.saved" : "common.saveNothing");
+  if (!dirty && !saving) return null;
+  const label = i18n.t(saving ? "common.saving" : "common.saveDirty");
   return (
     <TooltipProvider delayDuration={300}>
       <Tooltip>
-        {/* ⚠️ The wrapper is the trigger, not the button. At rest the button is disabled, and a
-            disabled control fires no pointer events — a tooltip hung on it would stay shut in the
-            one state where the button carries no words at all. */}
+        {/* The wrapper remains the trigger while saving, when the button is deliberately disabled. */}
         <TooltipTrigger asChild>
           <span className="inline-flex">
             <button
               type="button"
-              disabled={!dirty || saving}
+              disabled={saving}
               onClick={onSave}
               aria-label={label}
               data-dirty={dirty}
-              className={
-                dirty
-                  ? "inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-70"
-                  : "inline-flex size-8 items-center justify-center rounded-md border bg-background text-muted-foreground outline-none disabled:opacity-60"
-              }
+              className="inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-70"
             >
-              {dirty ? (
-                <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
-              ) : null}
+              <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
               <Save aria-hidden="true" className="size-4 shrink-0" />
-              {dirty ? (
-                <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
-              ) : null}
+              <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
             </button>
           </span>
         </TooltipTrigger>

package/src/time/relative-time.tsx

@@ -0,0 +1,41 @@
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useDateTime } from "./time-context.tsx";
+
+const ClockContext = createContext<number | null>(null);
+
+export function RelativeClockProvider({ children }: { children: ReactNode }) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, []);
+  return <ClockContext value={now}>{children}</ClockContext>;
+}
+
+export function RelativeTime({ value, className }: { value: string; className?: string }) {
+  const clock = useContext(ClockContext);
+  const dateTime = useDateTime();
+  const now = clock ?? Date.now();
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <time
+            dateTime={value}
+            // biome-ignore lint/a11y/noNoninteractiveTabindex: The exact timestamp tooltip must be keyboard reachable, including inside clickable rows.
+            tabIndex={0}
+            className={cn(
+              "rounded-sm text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className,
+            )}
+          >
+            {dateTime.relative(value, now)}
+          </time>
+        </TooltipTrigger>
+        <TooltipContent>{dateTime.at(value)}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/time/time-context.tsx

@@ -4,6 +4,7 @@ import {
   DeviceZone,
   formatDate,
   formatDateTime,
+  formatRelativeTime,
   readZoneChoice,
   rememberZoneChoice,
   type TimeZoneStore,
@@ -58,7 +59,11 @@ export function useTimeZone(): ZoneSelection | null {
  * AND zone itself, and the first one that forgets shows the device's zone again — which is the state
  * before #467, only harder to find.
  */
-export function useDateTime(): { at: (value: string) => string; on: (value: string) => string } {
+export function useDateTime(): {
+  at: (value: string) => string;
+  on: (value: string) => string;
+  relative: (value: string, now: number) => string;
+} {
   const i18n = useI18n();
   const zone = useContext(ZoneContext);
   const choice = zone?.current ?? DeviceZone;
@@ -66,6 +71,7 @@ export function useDateTime(): { at: (value: string) => string; on: (value: stri
     () => ({
       at: (value: string) => formatDateTime(value, i18n.locale, choice),
       on: (value: string) => formatDate(value, i18n.locale, choice),
+      relative: (value: string, now: number) => formatRelativeTime(value, i18n.locale, choice, now),
     }),
     [i18n.locale, choice],
   );

package/src/time/time.ts

@@ -115,6 +115,31 @@ export function formatDate(value: string, locale: string, choice: ZoneChoice): s
   return date.toLocaleDateString(locale, { timeZone: resolveZone(choice) });
 }
 
+const Minute = 60_000;
+const Hour = 60 * Minute;
+const Day = 24 * Hour;
+const Month = 30 * Day;
+
+/** A compact list value. Thirty days is the explicit month boundary; calendar labels stay in the tooltip. */
+export function formatRelativeTime(
+  value: string,
+  locale: string,
+  choice: ZoneChoice,
+  now: number,
+): string {
+  const date = new Date(value);
+  const target = date.getTime();
+  if (Number.isNaN(target)) return value;
+  const difference = target - now;
+  const distance = Math.abs(difference);
+  const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
+  if (distance < Minute) return relative.format(0, "second");
+  if (distance < Hour) return relative.format(Math.trunc(difference / Minute), "minute");
+  if (distance < Day) return relative.format(Math.trunc(difference / Hour), "hour");
+  if (distance < Month) return relative.format(Math.trunc(difference / Day), "day");
+  return formatDate(value, locale, choice);
+}
+
 // ⚠️ A short curated list rather than `Intl.supportedValuesOf("timeZone")` — that is over 400
 // entries, and a dropdown of 400 rows without a search is not a choice but an imposition. A zone
 // missing here is added once it has been missed three times; until then the device's zone is the