@anchrd/intel-ui 0.23.0 → 0.28.0

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

@@ -1,6 +1,6 @@
 import type { Flow, FlowValidation } from "@anchrd/intel-contract/flow";
 import type { Node } from "@anchrd/intel-contract/node";
-import type { ResourceGrant, ResourceVerb, UnreadableNodes } from "@anchrd/intel-contract/share";
+import type { ResourceVerb, UnreadableNodes } from "@anchrd/intel-contract/share";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
@@ -11,20 +11,20 @@ import {
   FileArchive,
   FolderDown,
   FolderUp,
+  History,
   Link2,
   Pencil,
   Share2,
   ShieldCheck,
-  Trash2,
 } from "lucide-react";
 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 {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
@@ -37,8 +37,8 @@ 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";
-import { useUserName } from "@/user-name/user-name.ts";
 
 /**
  * What a resource's own actions are, at the place the resource stands (#24).
@@ -143,6 +143,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
@@ -315,35 +316,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,
@@ -357,7 +349,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
@@ -385,14 +377,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
@@ -401,17 +392,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>
@@ -498,10 +491,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 (
@@ -638,54 +691,6 @@ function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
 // flows, which is where a permission decision belongs (ADR-0004 §2). Which verbs it offers is the
 // server's answer, not this component's: `execute` never appears on a document, because a document
 // has nothing to run.
-/**
- * One row of the grant list.
- *
- * ⚠️ It is a component rather than a line inside the `map` because of `useUserName`, and that hook
- * is the point: until #431 a `user` grant printed its raw id — `2C9lEhT82upO82abPjHFAvs24a7Vdd3J`
- * beside the word "Read" — which tells the reader nothing about who they let in and puts an
- * identifier on a screen that has no reason to carry one. `user-name.ts` already had the rule
- * ("never fall back to the id, show nothing instead", #258); this row was the last place breaking it.
- *
- * ⚠️ Intel can resolve exactly ONE id today: the signed-in person's. A foreign one is not "a name we
- * could probably guess" but genuinely unanswerable — Intel has no user directory (#261) — so what
- * stands there is what is true: an account, unnamed. The day #261 lands, `useUserName` starts
- * answering and this row needs no change.
- */
-function GrantRow({ grant, onRevoke }: { grant: ResourceGrant; onRevoke(grantId: string): void }) {
-  const i18n = useI18n();
-  const userName = useUserName(grant.principal.type === "user" ? grant.principal.id : null);
-  // ⚠️ An `email` grant keeps showing the ADDRESS, even where a name is known, and that is a
-  // decision rather than an oversight (#431, review finding). The grant is bound to the address —
-  // `db-grants.ts` matches `lower(principal_id)` against whoever signs in — not to an account.
-  // Putting a name there would claim a binding that does not exist, and it would be wrong the moment
-  // somebody else verifies that address.
-  const who =
-    grant.principal.type === "email"
-      ? grant.principal.email
-      : grant.principal.type === "user"
-        ? (userName ?? i18n.t("node.someUser"))
-        : i18n.t("node.organization");
-  return (
-    <li className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm">
-      <span className="min-w-0 truncate">
-        {who}
-        <span className="ml-2 text-xs text-muted-foreground">
-          {i18n.t(`node.verb.${grant.verb}`)}
-        </span>
-      </span>
-      <button
-        type="button"
-        onClick={() => onRevoke(grant.id)}
-        aria-label={i18n.t("node.revokeShare")}
-        className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Trash2 aria-hidden="true" className="size-4" />
-      </button>
-    </li>
-  );
-}
-
 /**
  * Which of the three principals the dialog can SET (#431).
  *
@@ -753,7 +758,10 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
     // before, and the user would read a permission picture that is not the one in force. Of all the
     // things to be silently wrong about, access is the worst.
     onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] }),
+        queryClient.invalidateQueries({ queryKey: ["effective-node-grants"] }),
+      ]);
     },
   });
   const revoke = useMutation({
@@ -764,7 +772,10 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
         idempotencyKey: crypto.randomUUID(),
       }),
     onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] }),
+        queryClient.invalidateQueries({ queryKey: ["effective-node-grants"] }),
+      ]);
     },
   });
 
@@ -820,21 +831,17 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
           <p className="mt-1 text-xs text-muted-foreground">{i18n.t("node.shareUnreadableHint")}</p>
         </div>
       )}
-      <ul className="mb-5 max-h-44 space-y-2 overflow-y-auto">
-        {grants.data?.items.map((grant) => (
-          <GrantRow
-            key={grant.id}
-            grant={grant}
+      {grants.data && grants.data.items.length > 0 ? (
+        <div className="mb-5">
+          <AccessSummary
+            grants={grants.data.items}
             onRevoke={(grantId) => {
               share.reset();
               revoke.mutate(grantId);
             }}
           />
-        ))}
-        {grants.data?.items.length === 0 && (
-          <li className="text-sm text-muted-foreground">{i18n.t("node.noGrants")}</li>
-        )}
-      </ul>
+        </div>
+      ) : null}
       <form
         onSubmit={(event) => {
           event.preventDefault();
@@ -860,7 +867,7 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 name="share-principal"
                 checked={principalKind === kind}
                 onChange={() => setPrincipalKind(kind)}
-                aria-describedby={kind === "email" ? "share-email-hint" : "share-organization-hint"}
+                aria-describedby={kind === "organization" ? "share-organization-hint" : undefined}
                 className="size-4 border outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
               <span>
@@ -882,19 +889,9 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 required
                 value={email}
                 onChange={(event) => setEmail(event.target.value)}
-                aria-describedby="share-email-hint"
                 className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </label>
-            {/* ⚠️ What this says is what Intel knows, and no more (#431). It cannot check whether an
-                address belongs to anybody — Gate owns identity and offers Intel no lookup (#261) —
-                and a dialog that stayed silent about that let a typo become a grant that is valid,
-                permanent and completely without effect, with nobody on either side to notice. Naming
-                the uncertainty is the honest half of what the ticket asks for; the other half needs
-                Gate. */}
-            <p id="share-email-hint" className="mt-1 text-xs text-muted-foreground">
-              {i18n.t("node.emailHint")}
-            </p>
           </div>
         ) : (
           /* ⚠️ `aria-live` on the CONTAINER, which is already mounted whenever this branch is on

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