@nadicodeai/ui 12.1.146 → 12.1.148

package/AGENTS.md

@@ -45,7 +45,9 @@ and `lint` checks. A component change a person can see goes through
   an operating system, a messaging channel or a sign-in provider is its icon in
   Iconify's `logos` set (`platform-mark.tsx`).
 - **Charts** are stock shadcn registry items; the deliberate deviations are held
-  by `tests/guards/chart-kit.test.ts`. A chart the kit lacks is pulled from
+  by `tests/guards/chart-kit.test.ts`, and what only a browser lays out, such as
+  a category axis's labels, by the browser suite in `tests/visual/`, which
+  post-merge's `test (website, packages)` job runs. A chart the kit lacks is pulled from
   `https://ui.shadcn.com/r/styles/new-york-v4/<name>.json`.
 - **Releases.** No change names a version; the publish picks it after merge:
   `../../docs/agents/publish.md`.

package/dist/components/chart-bar-horizontal.d.ts

@@ -11,7 +11,7 @@ declare function signedAxis(data: readonly Record<string, number | string>[], va
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.
  */
 declare function ChartBarHorizontal({ title, period, controls, link, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap" | "otherLabel"> & {
     valueKey: string;

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAoCjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAoCjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -1,7 +1,7 @@
 // Pulled from the shadcn registry item `chart-bar-horizontal`.
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, ReferenceLine, Text, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, ReferenceLine, Text, XAxis, YAxis, } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
 import { niceAxisMax, niceAxisTicks, niceStep } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, defaultValueFormatter, } from "./chart-card.js";
@@ -9,18 +9,20 @@ const POSITIVE_KEY = "__positive";
 const NEGATIVE_KEY = "__negative";
 const POSITIVE_BAR_COLOR = "var(--success)";
 const NEGATIVE_BAR_COLOR = "var(--destructive)";
+const TWO_LINE_ROW_HEIGHT = 28;
 /**
  * Recharts keeps only SVG attributes from a `tick` object, so `maxLines` reaches
- * its `Text` only through a tick it renders: up to two lines, then an ellipsis.
+ * its `Text` only through a tick it renders.
  */
 function CategoryTick({ payload, ...props }) {
-    return (_jsx(Text, { ...props, maxLines: 2, children: payload.value }));
+    const rowHeight = Number(props.height) / props.visibleTicksCount;
+    return (_jsx(Text, { ...props, maxLines: rowHeight >= TWO_LINE_ROW_HEIGHT ? 2 : 1, children: payload.value }));
 }
-/** About one 12 px character, and the bounds that keep a name whole on two lines without starving the bars. */
+/** About one 12 px character, and the bounds that keep a long name readable without starving the bars. */
 const CATEGORY_CHAR_WIDTH = 6.6;
 const CATEGORY_AXIS_MIN = 64;
 const CATEGORY_AXIS_MAX = 128;
-/** The category axis as wide as its longest name up to the bound; a longer name wraps to a second line. */
+/** The category axis as wide as its longest name up to the bound; a longer name wraps or is cut, as `CategoryTick` decides. */
 function categoryAxisWidth(data, xKey) {
     const longest = data.reduce((most, datum) => Math.max(most, String(datum[xKey] ?? "").length), 0);
     return Math.min(CATEGORY_AXIS_MAX, Math.max(CATEGORY_AXIS_MIN, Math.ceil(longest * CATEGORY_CHAR_WIDTH) + 16));
@@ -62,7 +64,7 @@ function signedAxis(data, valueKey) {
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.
  */
 function ChartBarHorizontal({ title, period, controls, link, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
     const axis = signedAxis(data, valueKey);

package/dist/components/record-time.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 import { HoverCardContent } from "./hover-card.js";
 export type RecordTimeProps = {
     /** When it happened; null or a time that names no moment draws `children`, or nothing. */
@@ -17,7 +17,7 @@ export type RecordTimeProps = {
      * UTC on the server and while the page hydrates, so the server's HTML never shows its own zone as the viewer's.
      */
     timeZone?: string;
-    /** The current time, for a reading that must not drift while it renders. */
+    /** The current time, for a reading that must not drift while it renders; left out, the clock `RecordTimeRenderedAt` describes. */
     now?: number;
 } & ({
     mode?: "relative";
@@ -33,6 +33,16 @@ export type RecordTimeProps = {
 });
 /** "3 hours ago" within a week, then "12 Sep", with the year when it is not this year. */
 export declare function formatRecordTime(at: Date, locale?: string, now?: number, timeZone?: string): string;
+/**
+ * The moment the server drew the page, for every `RecordTime` below: the server writes each relative
+ * time against it and the hydrating page reads the same one, so the two agree whatever the clock did
+ * in between, and the live page then reads the browser's clock. A server layout passes it unawaited,
+ * as a promise that settles once a request arrives, so the static shell never waits for it.
+ */
+export declare function RecordTimeRenderedAt({ moment, children, }: {
+    moment: Promise<number>;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** The moment `at` names, or null when it names none, such as an empty or malformed time. */
 export declare function recordDate(at: Date | number | string | null | undefined): Date | null;
 /**
@@ -45,7 +55,7 @@ export declare function recordDate(at: Date | number | string | null | undefined
  * @instead "For a static date in body prose past 7 days, render `Mar 14, 2026` directly." (https://vercel.com/geist/relative-time-card)
  * Ours: a date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product (*Took 4 min*).
  * @behaviour "The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row." (https://vercel.com/geist/relative-time-card)
- * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.
+ * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A relative time counts from the moment the server drew the page, which a `RecordTimeRenderedAt` above gives the server and the hydrating page alike, so a minute that turns before the page is live changes nothing, and the live page then counts from the browser's clock; a server with no such moment writes the day with its year (*Signed up Oct 14, 2026*), and the live page rewrites it. The product supplies any refresh after that. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.
  * @words "Pass `date` as a number (Unix ms or epoch)." "Don’t pre-format the value, and don’t replace `children` with a formatted string." "The component’s short formatter is the canonical form (`2m`, `5h`, `Yesterday`)." "Don’t append `ago` after the component." "The formatter already produces `2m ago` / `5h ago`, so `<RelativeTimeCard /> ago` reads as `2m ago ago`." "Use `children` only for non-time labels (`Just now`, `Pending`, `Queued`) where the formatter can’t describe the state." "Pair with a leading label when the row is ambiguous on its own: `Last deploy <RelativeTimeCard date={ts} />`." (https://vercel.com/geist/relative-time-card)
  * Ours: `at` takes a Date, epoch milliseconds or an ISO string, never a display string such as *3 hours ago*. The reading is the locale's long form (*3 hours ago*, *12 Sep*), not `2m`. The product writes the sentence through `phrase` (*Updated {when}*, *Ran {when}*), so *ago* is never added after it; the clock needs no words. The package formats every date with the person's `locale`.
  * @access Ours: a `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.

package/dist/components/record-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAa,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAYxF,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAcR;AAeD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAyEhD"}
+{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAa,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAYxF,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kIAAkI;IAClI,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAWR;AAeD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAgDD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCA+EhD"}

package/dist/components/record-time.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
 import { useHydrated } from "../hooks/use-hydrated.js";
 const DAY = 86_400_000;
@@ -21,12 +22,41 @@ export function formatRecordTime(at, locale, now = Date.now(), timeZone) {
         return relative.format(0, "minute");
     }
     const yearOf = new Intl.DateTimeFormat("en", { timeZone, year: "numeric" });
-    const sameYear = yearOf.format(at) === yearOf.format(now);
+    return recordDay(at, locale, timeZone, yearOf.format(at) !== yearOf.format(now));
+}
+function recordDay(at, locale, timeZone, withYear) {
     const shown = { timeZone, day: "numeric", month: "short" };
-    if (!sameYear)
+    if (withYear)
         shown.year = "numeric";
     return new Intl.DateTimeFormat(locale, shown).format(at);
 }
+const RenderedAt = createContext(null);
+/**
+ * The moment the server drew the page, for every `RecordTime` below: the server writes each relative
+ * time against it and the hydrating page reads the same one, so the two agree whatever the clock did
+ * in between, and the live page then reads the browser's clock. A server layout passes it unawaited,
+ * as a promise that settles once a request arrives, so the static shell never waits for it.
+ */
+export function RecordTimeRenderedAt({ moment, children, }) {
+    return _jsx(RenderedAt, { value: moment, children: children });
+}
+function useReadingTime(now, counted) {
+    const hydrated = useHydrated();
+    if (now !== undefined || !counted)
+        return now;
+    if (hydrated)
+        return Date.now();
+    const renderedAt = use(RenderedAt);
+    return renderedAt ? use(renderedAt) : undefined;
+}
+function relativeWhen(at, locale, reading, timeZone) {
+    return reading === undefined
+        ? recordDay(at, locale, timeZone, true)
+        : formatRecordTime(at, locale, reading, timeZone);
+}
+function OpenedReading({ at, locale, now, timeZone, }) {
+    return relativeWhen(at, locale, useReadingTime(now, true), timeZone);
+}
 function offsetLabel(at, locale, timeZone) {
     return new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" })
         .formatToParts(at)
@@ -55,7 +85,7 @@ export function recordDate(at) {
  * @instead "For a static date in body prose past 7 days, render `Mar 14, 2026` directly." (https://vercel.com/geist/relative-time-card)
  * Ours: a date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product (*Took 4 min*).
  * @behaviour "The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row." (https://vercel.com/geist/relative-time-card)
- * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.
+ * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A relative time counts from the moment the server drew the page, which a `RecordTimeRenderedAt` above gives the server and the hydrating page alike, so a minute that turns before the page is live changes nothing, and the live page then counts from the browser's clock; a server with no such moment writes the day with its year (*Signed up Oct 14, 2026*), and the live page rewrites it. The product supplies any refresh after that. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.
  * @words "Pass `date` as a number (Unix ms or epoch)." "Don’t pre-format the value, and don’t replace `children` with a formatted string." "The component’s short formatter is the canonical form (`2m`, `5h`, `Yesterday`)." "Don’t append `ago` after the component." "The formatter already produces `2m ago` / `5h ago`, so `<RelativeTimeCard /> ago` reads as `2m ago ago`." "Use `children` only for non-time labels (`Just now`, `Pending`, `Queued`) where the formatter can’t describe the state." "Pair with a leading label when the row is ambiguous on its own: `Last deploy <RelativeTimeCard date={ts} />`." (https://vercel.com/geist/relative-time-card)
  * Ours: `at` takes a Date, epoch milliseconds or an ISO string, never a display string such as *3 hours ago*. The reading is the locale's long form (*3 hours ago*, *12 Sep*), not `2m`. The product writes the sentence through `phrase` (*Updated {when}*, *Ran {when}*), so *ago* is never added after it; the clock needs no words. The package formats every date with the person's `locale`.
  * @access Ours: a `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
@@ -65,6 +95,8 @@ export function RecordTime(props) {
     const hydrated = useHydrated();
     const timeZone = props.timeZone ?? (hydrated ? undefined : "UTC");
     const date = recordDate(at);
+    const clock = props.mode === "clock";
+    const reading = useReadingTime(now, date !== null && !clock);
     if (!date) {
         return props.children ? (_jsx("span", { className: "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", children: props.children })) : null;
     }
@@ -81,12 +113,12 @@ export function RecordTime(props) {
             ...exactMoment(date, locale, timeZone),
         },
     ];
-    const clock = props.mode === "clock";
+    const when = relativeWhen(date, locale, reading, timeZone);
     const shown = props.children ??
         (clock
             ? new Intl.DateTimeFormat(locale, { timeStyle: "short", timeZone }).format(date)
-            : props.phrase(formatRecordTime(date, locale, now, timeZone)));
+            : props.phrase(when));
     return (_jsxs(HoverCard, { children: [_jsxs(HoverCardTrigger, { render: _jsx("time", { className: clock
                         ? "whitespace-nowrap tabular-nums text-muted-foreground"
-                        : "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [shown, _jsxs("span", { className: "sr-only", children: [", ", local] })] }), _jsx(HoverCardContent, { side: props.side, sideOffset: 13, children: _jsxs("div", { className: "grid min-w-75 gap-3 text-body-compact", "data-slot": "record-time-exact", children: [_jsx("p", { className: "text-muted-foreground tabular-nums", children: formatRecordTime(date, locale, now, timeZone) }), _jsx("dl", { className: "grid gap-2", children: exactRows.map((row) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("dt", { className: "inline-flex h-4 items-center rounded-xs bg-recessed px-1.5 font-label-mono text-label-mono text-muted-foreground", children: row.zone }), _jsxs("dd", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [_jsx("span", { children: row.date }), _jsx("span", { className: "font-label-mono text-label-mono text-muted-foreground tabular-nums", children: row.time })] })] }, row.id))) })] }) })] }));
+                        : "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [shown, _jsxs("span", { className: "sr-only", children: [", ", local] })] }), _jsx(HoverCardContent, { side: props.side, sideOffset: 13, children: _jsxs("div", { className: "grid min-w-75 gap-3 text-body-compact", "data-slot": "record-time-exact", children: [_jsx("p", { className: "text-muted-foreground tabular-nums", children: clock ? (_jsx(OpenedReading, { at: date, locale: locale, now: now, timeZone: timeZone })) : (when) }), _jsx("dl", { className: "grid gap-2", children: exactRows.map((row) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("dt", { className: "inline-flex h-4 items-center rounded-xs bg-recessed px-1.5 font-label-mono text-label-mono text-muted-foreground", children: row.zone }), _jsxs("dd", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [_jsx("span", { children: row.date }), _jsx("span", { className: "font-label-mono text-label-mono text-muted-foreground tabular-nums", children: row.time })] })] }, row.id))) })] }) })] }));
 }

package/dist/showcase/usage.generated.js

@@ -1154,7 +1154,7 @@ export const USAGE = [
         summary: "When something happened to a record: a relative time in the sentence that says what, or the time of day in a feed's time column.",
         when: '"Use `<RelativeTimeCard>` anywhere a recent timestamp appears in scannable surfaces: `Table` cells, `Entity` rows, deploy lists, activity feeds." (https://vercel.com/geist/relative-time-card) Ours: `RelativeTimeCard` is `RecordTime`: the moment a record was made, changed or last ran, in its row or its facts, and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).',
         instead: '"For a static date in body prose past 7 days, render `Mar 14, 2026` directly." (https://vercel.com/geist/relative-time-card) Ours: a date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run\'s duration is a fact written by the product (*Took 4 min*).',
-        behaviour: "\"The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row.\" (https://vercel.com/geist/relative-time-card) Ours: relative within a week, then the day and month, with the year only when it is another year; `mode=\"clock\"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.",
+        behaviour: "\"The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row.\" (https://vercel.com/geist/relative-time-card) Ours: relative within a week, then the day and month, with the year only when it is another year; `mode=\"clock\"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A relative time counts from the moment the server drew the page, which a `RecordTimeRenderedAt` above gives the server and the hydrating page alike, so a minute that turns before the page is live changes nothing, and the live page then counts from the browser's clock; a server with no such moment writes the day with its year (*Signed up Oct 14, 2026*), and the live page rewrites it. The product supplies any refresh after that. A time that names no moment draws `children`, a state such as *Pending*, or nothing. While `at` does name a moment, `children` (*Queued*) replaces the sentence and the card stays.",
         words: '"Pass `date` as a number (Unix ms or epoch)." "Don’t pre-format the value, and don’t replace `children` with a formatted string." "The component’s short formatter is the canonical form (`2m`, `5h`, `Yesterday`)." "Don’t append `ago` after the component." "The formatter already produces `2m ago` / `5h ago`, so `<RelativeTimeCard /> ago` reads as `2m ago ago`." "Use `children` only for non-time labels (`Just now`, `Pending`, `Queued`) where the formatter can’t describe the state." "Pair with a leading label when the row is ambiguous on its own: `Last deploy <RelativeTimeCard date={ts} />`." (https://vercel.com/geist/relative-time-card) Ours: `at` takes a Date, epoch milliseconds or an ISO string, never a display string such as *3 hours ago*. The reading is the locale\'s long form (*3 hours ago*, *12 Sep*), not `2m`. The product writes the sentence through `phrase` (*Updated {when}*, *Ran {when}*), so *ago* is never added after it; the clock needs no words. The package formats every date with the person\'s `locale`.',
         access: "Ours: a `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.",
     },
@@ -1574,7 +1574,7 @@ export const USAGE = [
         instead: "Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.",
         behaviour: "Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.",
         words: "The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.",
-        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.",
+        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.",
     },
     {
         name: "ChartBarMultiple",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.146",
+  "version": "12.1.148",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -74,6 +74,7 @@
     "check:static": "npm run check",
     "pretest": "npm run build",
     "test": "node ../../tools/workspace/heavy-slots.mjs --skip-if-filtered -- vitest run",
+    "test:visual": "node ../../tools/workspace/heavy-slots.mjs -- playwright test --config playwright.visual.config.ts",
     "check:export-targets": "node ../../tools/release/check-export-targets.mjs",
     "test:distribution": "node ../../tools/release/package-smoke-test.mjs"
   },
@@ -83,7 +84,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.146",
+    "@nadicodeai/design-system": "12.1.148",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",
@@ -118,7 +119,9 @@
     "@nadicodeai/eslint-config": "*",
     "@nadicodeai/eslint-plugin": "*",
     "@nadicodeai/oxlint-config": "*",
+    "@nadicodeai/static-design-server": "*",
     "@nadicodeai/test-support": "*",
+    "@playwright/test": "^1.64.1",
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@tailwindcss/postcss": "^4.3.3",