@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/ReadMore.js

@@ -0,0 +1,232 @@
+import { jsxs as W, jsx as E } from "react/jsx-runtime";
+import { useId as tt, useRef as a, useState as P, useLayoutEffect as g } from "react";
+import { tv as et } from "tailwind-variants";
+import { cn as nt } from "../lib/cn.js";
+import { useControllable as ot } from "../lib/use-controllable.js";
+import { Button as rt } from "./Button.js";
+import { Icon as ct } from "./Icon.js";
+import { useUiStrings as it } from "../lib/i18n/provider.js";
+const st = et({
+  slots: {
+    root: "flex min-w-0 flex-col gap-1.5",
+    /* `overflow: hidden` is NOT in this list — the max-height writer below
+       sets it exactly while `max-height` is a pixel figure: clamped, and
+       every numeric frame of an expand or collapse transition. While clamped
+       it keeps the fade strip's `absolute inset-x-0 bottom-0` contained
+       inside this box; mid-transition it keeps the content still being
+       revealed from spilling over whatever sits below (DX-6416: a card's
+       description overflowed its box while Read more opened).
+       Left on at `none` it would clip a focus ring or a shadow on content
+       sitting near an EXPANDED block's own edge, so it goes with the cap. */
+    viewport: [
+      "relative min-w-0",
+      "transition-[var(--tx-colors),max-height] duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard"
+    ],
+    /* `flow-root` gives this element its own block-formatting context, so its
+       children's margins never collapse through it regardless of whether the
+       viewport around it is currently clamping — see the module comment on
+       why a shifting top edge would throw off every measured line boundary.
+       Zeroing the first/last child's own margin removes the other half of the
+       same class of drift — the author's own opening/closing margin. */
+    content: "flow-root min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+    /* The gradient runs top-to-bottom (transparent -> the fade colour), NOT
+       the reverse — a `to-b` gradient is transparent at ITS OWN top edge and
+       opaque at its own bottom edge, which is what leaves the visible line(s)
+       above it untouched and only darkens toward the boundary the toggle sits
+       under. The reverse (`to-t`) paints solid at the strip's top and fades
+       going down — right on top of the last visible line rather than below
+       it. The colour is a CSS custom property with a fallback, not a raw
+       utility, so a consumer can retint it — see `content/docs/read-more.mdx`
+       for the override. */
+    bar: "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-b from-transparent to-[var(--read-more-fade,var(--color-surface))]",
+    toggle: "self-start"
+  }
+}), b = 0.5, at = /* @__PURE__ */ new Set(["img", "svg", "video", "canvas", "iframe", "hr"]);
+function ut(i) {
+  const l = [], u = document.createTreeWalker(i, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+    acceptNode(e) {
+      return e.nodeType === Node.ELEMENT_NODE ? at.has(e.localName) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  for (let e = u.nextNode(); e; e = u.nextNode()) {
+    if (e.nodeType === Node.ELEMENT_NODE) {
+      const o = e.getBoundingClientRect();
+      l.push({ top: o.top, bottom: o.bottom, width: o.width, height: o.height });
+      continue;
+    }
+    const s = document.createRange();
+    s.selectNodeContents(e);
+    for (const o of Array.from(s.getClientRects()))
+      l.push({ top: o.top, bottom: o.bottom, width: o.width, height: o.height });
+  }
+  return l.filter((e) => !(e.height <= b));
+}
+function lt(i) {
+  const l = i.slice().sort((e, s) => e.top - s.top), u = [];
+  for (const e of l) {
+    const s = (e.top + e.bottom) / 2, o = u[u.length - 1];
+    o && s >= o.bandTop - b && s <= o.bandBottom + b ? (o.top = Math.min(o.top, e.top), o.bottom = Math.max(o.bottom, e.bottom)) : u.push({ bandTop: e.top, bandBottom: e.bottom, top: e.top, bottom: e.bottom });
+  }
+  return u.map((e) => ({ top: e.top, bottom: e.bottom }));
+}
+function dt(i, l) {
+  const u = i.getBoundingClientRect().top, e = ut(i), s = lt(e);
+  return (s.length > l + 1 ? s.slice(0, l + 1) : s).map((v) => ({ top: v.top - u, bottom: v.bottom - u }));
+}
+function $() {
+  return typeof window > "u" ? !1 : window.getComputedStyle(document.documentElement).getPropertyValue("--motion-travel").trim() === "1";
+}
+function wt({
+  lines: i,
+  children: l,
+  expanded: u,
+  defaultExpanded: e = !1,
+  onExpandedChange: s,
+  moreLabel: o,
+  lessLabel: v,
+  className: j,
+  ref: q
+}) {
+  if (!Number.isInteger(i) || i < 0)
+    throw new Error(`ReadMore: \`lines\` must be a non-negative integer, got ${i}.`);
+  const f = st(), y = it().readMore, F = tt(), [d, L] = ot(u, e, s), R = a(d);
+  R.current = d;
+  const B = a(i);
+  B.current = i;
+  const [x, V] = P(!1), [N, G] = P(null), [I, K] = P(0), A = a(x), T = a(N), p = a(null), C = a(null), O = a(null), w = a(void 0), h = a([]);
+  function S() {
+    const n = p.current;
+    if (!n) throw new Error("ReadMore: content element is not mounted.");
+    return n.getBoundingClientRect();
+  }
+  function _() {
+    return S().height;
+  }
+  const H = a(() => {
+    h.current.forEach((r) => cancelAnimationFrame(r)), h.current = [];
+    const n = C.current;
+    if (!n) return;
+    function t(r) {
+      w.current = r, n.style.maxHeight = r === void 0 ? "" : r === "none" ? "none" : `${r}px`, n.style.overflow = typeof r == "number" ? "hidden" : "";
+    }
+    if (!A.current) {
+      t(void 0);
+      return;
+    }
+    if (R.current) {
+      if (!$()) {
+        t("none");
+        return;
+      }
+      const r = _(), m = n.getBoundingClientRect().height;
+      if (!(Math.abs(m - r) > b)) {
+        t("none");
+        return;
+      }
+      t(r);
+      return;
+    }
+    if (T.current === null)
+      throw new Error("ReadMore: collapsing while overflowing but clampPx is null — measurement invariant violated.");
+    const c = T.current;
+    if ($() && w.current === "none") {
+      t(_());
+      const r = requestAnimationFrame(() => {
+        const m = requestAnimationFrame(() => t(c));
+        h.current.push(m);
+      });
+      h.current.push(r);
+      return;
+    }
+    t(c);
+  }).current;
+  g(() => {
+    const n = C.current;
+    if (!n) return;
+    function t(c) {
+      c.target !== n || c.propertyName !== "max-height" || !R.current || w.current === "none" || (w.current = "none", n.style.maxHeight = "none", n.style.overflow = "");
+    }
+    return n.addEventListener("transitionend", t), () => n.removeEventListener("transitionend", t);
+  }, []);
+  const M = a(() => {
+    const n = p.current;
+    if (!n) return;
+    const t = B.current, c = dt(n, t), r = c.length > t, m = r ? t === 0 ? 0 : Math.min(c[t - 1].bottom, c[t].top) : null, D = c[t - 1] ? c[t - 1].bottom - c[t - 1].top : 0, Q = t >= 2 && c[t - 2] ? c[t - 2].bottom : 0, Y = r ? Math.max(0, m - Q) : 0, Z = r && t > 0 ? Math.min(D * Math.min(1, (t - 1) / 2), Y) : 0;
+    A.current = r, T.current = m, V(r), G(m), K(Z), H();
+  }).current;
+  g(() => {
+    const n = p.current;
+    if (!n) return;
+    M();
+    const t = new ResizeObserver(() => M());
+    return t.observe(n), () => t.disconnect();
+  }, []);
+  const k = a(!1);
+  g(() => {
+    if (!k.current) {
+      k.current = !0;
+      return;
+    }
+    M();
+  }, [i]);
+  const z = a(!1);
+  g(() => {
+    if (!z.current) {
+      z.current = !0;
+      return;
+    }
+    !d && p.current?.contains(document.activeElement) && O.current?.focus(), H();
+  }, [d]), g(() => () => h.current.forEach((n) => cancelAnimationFrame(n)), []);
+  function U() {
+    L(!d);
+  }
+  function X(n) {
+    if (!x || d || N === null) return;
+    const t = S().top;
+    n.target.getBoundingClientRect().bottom - t > N + b && L(!0);
+  }
+  const J = x && !d;
+  return /* @__PURE__ */ W("div", { ref: q, className: nt(f.root(), j), children: [
+    /* @__PURE__ */ W("div", { ref: C, className: f.viewport(), children: [
+      /* @__PURE__ */ E(
+        "div",
+        {
+          ref: p,
+          id: F,
+          "data-slot": "read-more-content",
+          className: f.content(),
+          onFocus: X,
+          children: l
+        }
+      ),
+      J && I > 0 && /* @__PURE__ */ E(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-slot": "read-more-bar",
+          className: f.bar(),
+          style: { height: `${I}px` }
+        }
+      )
+    ] }),
+    x && /* @__PURE__ */ E(
+      rt,
+      {
+        ref: O,
+        type: "button",
+        variant: "link",
+        size: "sm",
+        "aria-expanded": d,
+        "aria-controls": F,
+        trailingIcon: /* @__PURE__ */ E(ct, { name: d ? "chevron-up" : "chevron-down", size: "xs" }),
+        onClick: U,
+        className: f.toggle(),
+        children: d ? v ?? y.less : o ?? y.more
+      }
+    )
+  ] });
+}
+export {
+  wt as ReadMore
+};
+//# sourceMappingURL=ReadMore.js.map

package/dist/components/ReadMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadMore.js","sources":["../../src/components/ReadMore.tsx"],"sourcesContent":["import { useLayoutEffect, useId, useRef, useState, type ReactNode, type Ref } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { cn } from \"../lib/cn\";\r\nimport { useUiStrings } from \"../lib/i18n\";\r\nimport { useControllable } from \"../lib/use-controllable\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\n\r\n/* ============================================================================\r\n   READ MORE — clamp block content to N *rendered lines*, behind a fade strip\r\n   and a single toggle.\r\n\r\n   THE CLAMP IS `min(bottom of line N, top of line N+1)` — MEASURED, not\r\n   computed from `line-height`. A wrapper's own `line-height` is not the\r\n   content's: Markdown sets its own leading, headings set their own size, code\r\n   blocks set their own monospace metrics. So this walks the content in DOM\r\n   order — its text nodes via a `Range` per node, and `img`/`svg`/`video`/\r\n   `canvas`/`iframe`/`hr` via their own `getBoundingClientRect()` — reads the\r\n   boxes the browser already laid out, and GROUPS them into lines. A rect\r\n   joins the CURRENT line only when its vertical midpoint falls inside that\r\n   line's FIRST rect's own `[top, bottom]` band — a FIXED band, never widened\r\n   as more rects join. Chaining overlap instead (each new rect testing against\r\n   the line's growing max) was tried and is wrong: it merges a tight-leading\r\n   heading's own line into the paragraph below it, because the growing band\r\n   eventually overlaps the next thing down. Capping the clamp at\r\n   `min(line N's bottom, line N+1's top)` rather than just line N's bottom is\r\n   the other half of the same fix — an ascender on line N+1 can sit visually\r\n   ABOVE where line N's own rect ends, and without the cap it would poke\r\n   through the clamp.\r\n\r\n   TWO BOXES, NOT ONE. `viewport` is the element the clamp is APPLIED to —\r\n   `max-height`, written imperatively (see below) — and `overflow: hidden`\r\n   only while actually clamped, so a real CSS transition has something to\r\n   animate between two concrete states. `content` (`data-slot=\r\n   \"read-more-content\"`) is the element that is MEASURED and watched by\r\n   `ResizeObserver`, and it never itself carries a height cap, so its line\r\n   boxes are always the true ones regardless of whether `viewport` is\r\n   currently clamping.\r\n\r\n   EXPANDED ENDS AT `max-height: none`, NEVER A MEASURED NUMBER — so content\r\n   that grows after expanding (streamed Markdown, an image finishing layout)\r\n   is never clipped. Getting there needs a REAL number to transition from\r\n   first: the viewport is set to the content's current measured height (a\r\n   genuine CSS transition, so `transitionend` fires), and only once that\r\n   transition completes does the viewport move to `\"none\"`. With no motion\r\n   allowed (`readMotionAllowed()` below), there is no transition to wait on,\r\n   so `\"none\"` is written immediately. Collapsing back FROM `\"none\"` cannot\r\n   itself be animated — a browser does not tween out of `none` — so it is\r\n   frozen at the current measured height first (same rendered size, so no\r\n   visible jump), then moved to the clamp on the next two animation frames,\r\n   which is what actually gives the browser something numeric to transition\r\n   between.\r\n\r\n   ONE BUTTON, ONE TREE POSITION, below the clamp in both states — never\r\n   inside the fade strip, never swapped for a second element once expanded.\r\n   Clicking it can never itself move focus, because the element under the\r\n   pointer never unmounts.\r\n\r\n   THE FADE STRIP ONLY EXISTS WHILE ACTUALLY CLAMPED (`overflowing &&\r\n   !expanded`) — once expanded there is nothing left to fade into, and\r\n   nothing here pretends otherwise. Its height is `min(h(N) x min(1,\r\n   (N-1)/2), clamp - bottom of line N-1)`: zero at `lines={1}` (nothing\r\n   renders — the toggle below is the only affordance a single-line clamp\r\n   needs), otherwise up to half a line at `lines={2}` and up to one full\r\n   line from `lines={3}` up, SECOND-capped so it can never reach up into\r\n   line N-1's own box — a tightly-leaded pair of lines can leave less room\r\n   between them than the formula's first half alone would claim, and\r\n   without the second cap the strip would paint over line N-1's own tail.\r\n\r\n   A TABBED-TO ELEMENT INSIDE THE CLAMP EXPANDS IT — but only when that\r\n   element's own rect actually extends past the clamp boundary. A focusable\r\n   element that happens to sit entirely within the visible, un-clipped part of\r\n   a collapsed block does not need to force an expand.\r\n   ========================================================================= */\r\n\r\nconst readMore = tv({\r\n  slots: {\r\n    root: \"flex min-w-0 flex-col gap-1.5\",\r\n    /* `overflow: hidden` is NOT in this list — the max-height writer below\r\n       sets it exactly while `max-height` is a pixel figure: clamped, and\r\n       every numeric frame of an expand or collapse transition. While clamped\r\n       it keeps the fade strip's `absolute inset-x-0 bottom-0` contained\r\n       inside this box; mid-transition it keeps the content still being\r\n       revealed from spilling over whatever sits below (DX-6416: a card's\r\n       description overflowed its box while Read more opened).\r\n       Left on at `none` it would clip a focus ring or a shadow on content\r\n       sitting near an EXPANDED block's own edge, so it goes with the cap. */\r\n    viewport: [\r\n      \"relative min-w-0\",\r\n      \"transition-[var(--tx-colors),max-height] duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard\",\r\n    ],\r\n    /* `flow-root` gives this element its own block-formatting context, so its\r\n       children's margins never collapse through it regardless of whether the\r\n       viewport around it is currently clamping — see the module comment on\r\n       why a shifting top edge would throw off every measured line boundary.\r\n       Zeroing the first/last child's own margin removes the other half of the\r\n       same class of drift — the author's own opening/closing margin. */\r\n    content: \"flow-root min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0\",\r\n    /* The gradient runs top-to-bottom (transparent -> the fade colour), NOT\r\n       the reverse — a `to-b` gradient is transparent at ITS OWN top edge and\r\n       opaque at its own bottom edge, which is what leaves the visible line(s)\r\n       above it untouched and only darkens toward the boundary the toggle sits\r\n       under. The reverse (`to-t`) paints solid at the strip's top and fades\r\n       going down — right on top of the last visible line rather than below\r\n       it. The colour is a CSS custom property with a fallback, not a raw\r\n       utility, so a consumer can retint it — see `content/docs/read-more.mdx`\r\n       for the override. */\r\n    bar: \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-b from-transparent to-[var(--read-more-fade,var(--color-surface))]\",\r\n    toggle: \"self-start\",\r\n  },\r\n});\r\n\r\n/** Ignore a rect degenerate enough to be a layout artefact rather than a real glyph or a real blank line. */\r\nconst RECT_EPSILON = 0.5;\r\n\r\n/** Walked as one line box each, via their own `getBoundingClientRect()` rather than a text `Range`.\r\n * Matched against `localName`, NEVER `tagName` — `tagName` uppercases for\r\n * ordinary HTML elements but NOT for SVG (a foreign, case-sensitive XML\r\n * namespace): an `<svg>` written lower-case, as every author writes it,\r\n * reports `tagName === \"svg\"`, which never matched an upper-case set and\r\n * silently walked past every SVG body unmeasured. `localName` is lower-case\r\n * for both namespaces uniformly. */\r\nconst REPLACED_TAGS = new Set([\"img\", \"svg\", \"video\", \"canvas\", \"iframe\", \"hr\"]);\r\n\r\ninterface RawRect {\r\n  top: number;\r\n  bottom: number;\r\n  width: number;\r\n  height: number;\r\n}\r\n\r\ninterface LineBox {\r\n  top: number;\r\n  bottom: number;\r\n}\r\n\r\n/** Every rect this component will consider, walked in DOM order, relative to nothing yet (viewport coordinates). */\r\nfunction collectRects(root: HTMLElement): RawRect[] {\r\n  const rects: RawRect[] = [];\r\n\r\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {\r\n    acceptNode(node) {\r\n      if (node.nodeType === Node.ELEMENT_NODE) {\r\n        return REPLACED_TAGS.has((node as Element).localName) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\r\n      }\r\n      // Every text node is accepted, INCLUDING whitespace-only ones — a run of\r\n      // whitespace between two `<br>`s is a genuine blank line, and rejecting\r\n      // it here would make it unmeasurable no matter what the rect says.\r\n      // What actually filters noise is the rect-level check below.\r\n      return NodeFilter.FILTER_ACCEPT;\r\n    },\r\n  });\r\n\r\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\r\n    if (node.nodeType === Node.ELEMENT_NODE) {\r\n      const rect = (node as Element).getBoundingClientRect();\r\n      rects.push({ top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height });\r\n      continue;\r\n    }\r\n    const range = document.createRange();\r\n    range.selectNodeContents(node);\r\n    for (const rect of Array.from(range.getClientRects())) {\r\n      rects.push({ top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height });\r\n    }\r\n  }\r\n\r\n  return rects.filter((rect) => {\r\n    // A rect with NO height contributes nothing to any line, regardless of\r\n    // width — reject it outright. A rect with real height but zero WIDTH is\r\n    // kept: that is exactly the shape a blank line's whitespace produces.\r\n    if (rect.height <= RECT_EPSILON) return false;\r\n    return true;\r\n  });\r\n}\r\n\r\n/**\r\n * Group rects into lines. A rect joins the line currently being built only\r\n * when its vertical MIDPOINT falls inside that line's FIRST rect's own\r\n * `[top, bottom]` — a band fixed at the moment the line started, never\r\n * widened by later members. See the module comment for why a growing band\r\n * (this function's previous shape) merges lines that should stay separate.\r\n */\r\nfunction groupIntoLines(rects: RawRect[]): LineBox[] {\r\n  const sorted = rects.slice().sort((a, b) => a.top - b.top);\r\n\r\n  const lines: { bandTop: number; bandBottom: number; top: number; bottom: number }[] = [];\r\n  for (const rect of sorted) {\r\n    const mid = (rect.top + rect.bottom) / 2;\r\n    const current = lines[lines.length - 1];\r\n    if (current && mid >= current.bandTop - RECT_EPSILON && mid <= current.bandBottom + RECT_EPSILON) {\r\n      current.top = Math.min(current.top, rect.top);\r\n      current.bottom = Math.max(current.bottom, rect.bottom);\r\n    } else {\r\n      lines.push({ bandTop: rect.top, bandBottom: rect.bottom, top: rect.top, bottom: rect.bottom });\r\n    }\r\n  }\r\n\r\n  return lines.map((line) => ({ top: line.top, bottom: line.bottom }));\r\n}\r\n\r\n/**\r\n * Every rendered line inside `root`, relative to `root`'s own top, TRIMMED\r\n * to at most `maxLines + 1` entries — nothing past line N+1 changes either\r\n * the overflow decision or the clamp height. This is a RESULT trim, not an\r\n * early exit: `collectRects` walks the whole subtree and `groupIntoLines`\r\n * groups every rect it found before this function ever slices the output,\r\n * so there is no bounded-cost walk or bounded-cost grouping pass anywhere\r\n * in this file — both run to completion regardless of `maxLines`. Bounding\r\n * either of those would trade correctness for a saving this component has\r\n * no evidence it needs: `groupIntoLines` sorts by top BEFORE grouping\r\n * specifically so content whose DOM order and visual top order disagree (a\r\n * node later in the tree rendered visually higher) still groups correctly,\r\n * and a walk that stopped early on DOM order could not make that guarantee.\r\n */\r\nfunction computeLineBoxes(root: HTMLElement, maxLines: number): LineBox[] {\r\n  const rootTop = root.getBoundingClientRect().top;\r\n  const rects = collectRects(root);\r\n  const lines = groupIntoLines(rects);\r\n\r\n  const bounded = lines.length > maxLines + 1 ? lines.slice(0, maxLines + 1) : lines;\r\n  return bounded.map((line) => ({ top: line.top - rootTop, bottom: line.bottom - rootTop }));\r\n}\r\n\r\n/**\r\n * The single reduced-motion answer this component acts on, read fresh every\r\n * time — `--motion-travel` is 0 under both the OS query and the in-app\r\n * override, 1 otherwise (`styles/motion.css`). Anything other than exactly\r\n * `\"1\"` — including an empty string, which is what an environment with no CSS\r\n * engine reports (this component's own tests, for instance) — is treated as\r\n * \"do not animate\": the safer default for an unreadable answer is no motion,\r\n * never assumed motion.\r\n */\r\nfunction readMotionAllowed(): boolean {\r\n  if (typeof window === \"undefined\") return false;\r\n  return (\r\n    window.getComputedStyle(document.documentElement).getPropertyValue(\"--motion-travel\").trim() === \"1\"\r\n  );\r\n}\r\n\r\nexport interface ReadMoreProps {\r\n  /** Collapsed line count — how many rendered lines show before the fade strip. Must be a non-negative integer; anything else throws. `0` hides the content entirely behind the toggle (no fade strip). */\r\n  lines: number;\r\n  /** Typically rendered Markdown — paragraphs, headings, lists, code, images. See the module comment on why the clamp is a measured line boundary rather than a computed height. */\r\n  children: ReactNode;\r\n  /** Controlled expanded state. Omit to let the component hold its own (seeded by `defaultExpanded`). */\r\n  expanded?: boolean;\r\n  /** Uncontrolled initial state. Ignored once `expanded` is supplied. @default false */\r\n  defaultExpanded?: boolean;\r\n  /** Fires on every toggle, controlled or not. */\r\n  onExpandedChange?: (expanded: boolean) => void;\r\n  /** Absent, the built-in \"Read more\" word of the active `UiLocaleProvider`. */\r\n  moreLabel?: string;\r\n  /** Absent, the built-in \"Show less\" word of the active `UiLocaleProvider`. */\r\n  lessLabel?: string;\r\n  className?: string;\r\n  ref?: Ref<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Clamp block content to `lines` rendered lines behind a fade strip and a\r\n * single \"Read more\" / \"Show less\" toggle. Renders neither the strip nor the\r\n * toggle when the content already fits — see the module comment for how that\r\n * is decided.\r\n */\r\nexport function ReadMore({\r\n  lines,\r\n  children,\r\n  expanded: expandedProp,\r\n  defaultExpanded = false,\r\n  onExpandedChange,\r\n  moreLabel,\r\n  lessLabel,\r\n  className,\r\n  ref,\r\n}: ReadMoreProps) {\r\n  if (!Number.isInteger(lines) || lines < 0) {\r\n    throw new Error(`ReadMore: \\`lines\\` must be a non-negative integer, got ${lines}.`);\r\n  }\r\n\r\n  const s = readMore();\r\n  const strings = useUiStrings().readMore;\r\n  const contentId = useId();\r\n\r\n  const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);\r\n  const expandedRef = useRef(expanded);\r\n  expandedRef.current = expanded;\r\n\r\n  const linesRef = useRef(lines);\r\n  linesRef.current = lines;\r\n\r\n  const [overflowing, setOverflowing] = useState(false);\r\n  const [clampPx, setClampPx] = useState<number | null>(null);\r\n  const [fadePx, setFadePx] = useState(0);\r\n  const overflowingRef = useRef(overflowing);\r\n  const clampPxRef = useRef(clampPx);\r\n\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const viewportRef = useRef<HTMLDivElement>(null);\r\n  const buttonRef = useRef<HTMLButtonElement>(null);\r\n  /* Mirrors the viewport's CURRENT `max-height`, so the writer below can tell\r\n     \"was this already sitting at none\" synchronously. */\r\n  const viewportMaxHeightRef = useRef<number | \"none\" | undefined>(undefined);\r\n  const rafIds = useRef<number[]>([]);\r\n\r\n  /** The content element's own rect, or a loud failure — never a silent `0`. */\r\n  function contentRectOrThrow(): DOMRect {\r\n    const el = contentRef.current;\r\n    if (!el) throw new Error(\"ReadMore: content element is not mounted.\");\r\n    return el.getBoundingClientRect();\r\n  }\r\n\r\n  function measureNaturalPx(): number {\r\n    return contentRectOrThrow().height;\r\n  }\r\n\r\n  /* -------------------------------------------------------------------------\r\n     VIEWPORT MAX-HEIGHT WRITER — a stable function (created once via the\r\n     lazy `useRef` initialiser) that reads only refs, so it is always safe to\r\n     call from inside an effect, a `ResizeObserver` callback, or the\r\n     `transitionend` listener below, whichever captured an earlier render's\r\n     closure. Written as a direct DOM mutation rather than React state: both\r\n     the expand-then-none swap and the collapse freeze-then-shrink pair have\r\n     to land in the exact frame they were computed in, and routing them\r\n     through `setState` would let React coalesce a step away before the\r\n     browser ever painted it. */\r\n  const applyViewportMaxHeight = useRef(() => {\r\n    rafIds.current.forEach((id) => cancelAnimationFrame(id));\r\n    rafIds.current = [];\r\n\r\n    const el = viewportRef.current;\r\n    if (!el) return;\r\n\r\n    function write(next: number | \"none\" | undefined) {\r\n      viewportMaxHeightRef.current = next;\r\n      el!.style.maxHeight = next === undefined ? \"\" : next === \"none\" ? \"none\" : `${next}px`;\r\n      el!.style.overflow = typeof next === \"number\" ? \"hidden\" : \"\"; // with the cap only — see the `viewport` slot\r\n    }\r\n\r\n    if (!overflowingRef.current) {\r\n      write(undefined);\r\n      return;\r\n    }\r\n\r\n    if (expandedRef.current) {\r\n      if (!readMotionAllowed()) {\r\n        write(\"none\"); // nothing will transition, so there is nothing to wait on\r\n        return;\r\n      }\r\n\r\n      /* Comparing against the viewport's OWN LIVE rendered height (not the\r\n         stale target this function last wrote) is what makes this correct\r\n         mid-transition too: content growing WHILE a 40->212 transition is\r\n         still in flight is read here at wherever the animation currently\r\n         sits, not at 40 or 212, so a second growth spurt restarts smoothly\r\n         from there rather than from a stale number. */\r\n      const naturalPx = measureNaturalPx();\r\n      const currentRenderedPx = el.getBoundingClientRect().height;\r\n      const isRealChange = Math.abs(currentRenderedPx - naturalPx) > RECT_EPSILON;\r\n      if (!isRealChange) {\r\n        /* The measured height already matches what is on screen — writing\r\n           it again is not an animatable change either (same value in, same\r\n           value out), so it would never fire `transitionend`. This is\r\n           exactly the FIRST-EVER-MEASUREMENT case (nothing painted yet, so\r\n           the viewport's natural un-clamped height already equals the\r\n           content's own height) along with any other redundant remeasure\r\n           that found no real growth — both go straight to \"none\". */\r\n        write(\"none\");\r\n        return;\r\n      }\r\n      write(naturalPx); // a real, animatable change — triggers the transition; `transitionend` below lands on \"none\"\r\n      return;\r\n    }\r\n\r\n    // Collapsing.\r\n    if (clampPxRef.current === null) {\r\n      throw new Error(\"ReadMore: collapsing while overflowing but clampPx is null — measurement invariant violated.\");\r\n    }\r\n    const target = clampPxRef.current;\r\n\r\n    if (readMotionAllowed() && viewportMaxHeightRef.current === \"none\") {\r\n      write(measureNaturalPx()); // freeze — same rendered height as \"none\", no visible change\r\n      const first = requestAnimationFrame(() => {\r\n        const second = requestAnimationFrame(() => write(target));\r\n        rafIds.current.push(second);\r\n      });\r\n      rafIds.current.push(first);\r\n      return;\r\n    }\r\n    write(target);\r\n  }).current;\r\n\r\n  /* Only `transitionend` for `max-height`, only while still expanded (a\r\n     transition that completed AFTER a fast re-toggle back to collapsed would\r\n     otherwise stomp the freeze/shrink this same writer just started), and\r\n     only when the viewport is not already at \"none\" (nothing to do). */\r\n  useLayoutEffect(() => {\r\n    const el = viewportRef.current;\r\n    if (!el) return;\r\n    function onTransitionEnd(event: TransitionEvent) {\r\n      if (event.target !== el || event.propertyName !== \"max-height\") return;\r\n      if (!expandedRef.current || viewportMaxHeightRef.current === \"none\") return;\r\n      viewportMaxHeightRef.current = \"none\";\r\n      el!.style.maxHeight = \"none\";\r\n      el!.style.overflow = \"\";\r\n    }\r\n    el.addEventListener(\"transitionend\", onTransitionEnd);\r\n    return () => el.removeEventListener(\"transitionend\", onTransitionEnd);\r\n  }, []);\r\n\r\n  /* -------------------------------------------------------------------------\r\n     MEASUREMENT — also a stable function, so both effects below can share it\r\n     without either recreating the other's closure. */\r\n  const applyMeasurement = useRef(() => {\r\n    const el = contentRef.current;\r\n    if (!el) return;\r\n    const n = linesRef.current;\r\n    const boxes = computeLineBoxes(el, n);\r\n    const nextOverflowing = boxes.length > n;\r\n    // `n === 0` clamps to nothing: the whole content sits behind the toggle.\r\n    const nextClampPx = nextOverflowing ? (n === 0 ? 0 : Math.min(boxes[n - 1]!.bottom, boxes[n]!.top)) : null;\r\n    const nthLineHeight = boxes[n - 1] ? boxes[n - 1]!.bottom - boxes[n - 1]!.top : 0;\r\n    /* Capped so the strip can never reach UP into line N-1's own box — its\r\n       formula height (h(N) x a factor up to 1 full line) is otherwise only\r\n       bounded by line N's OWN height, which says nothing about how much\r\n       room actually exists between line N-1's bottom and the clamp point.\r\n       A tightly-leaded pair of lines can leave less room than a full line's\r\n       worth between them, and without this cap the strip would paint over\r\n       the tail of line N-1's own text. */\r\n    const prevLineBottom = n >= 2 && boxes[n - 2] ? boxes[n - 2]!.bottom : 0;\r\n    const maxFadePx = nextOverflowing ? Math.max(0, nextClampPx! - prevLineBottom) : 0;\r\n    const nextFadePx = nextOverflowing && n > 0 ? Math.min(nthLineHeight * Math.min(1, (n - 1) / 2), maxFadePx) : 0;\r\n\r\n    overflowingRef.current = nextOverflowing;\r\n    clampPxRef.current = nextClampPx;\r\n    setOverflowing(nextOverflowing);\r\n    setClampPx(nextClampPx);\r\n    setFadePx(nextFadePx);\r\n    applyViewportMaxHeight();\r\n  }).current;\r\n\r\n  /* Mounted ONCE — never rebuilt on a `children` change, and measures ONCE on\r\n     mount (the sibling effects below both skip their own first run, since\r\n     this one already covers it). Content changes are still caught with no\r\n     resize event needed — `ResizeObserver` fires on its own whenever the box\r\n     it watches changes size, which is exactly what new children do to\r\n     `content`. */\r\n  useLayoutEffect(() => {\r\n    const el = contentRef.current;\r\n    if (!el) return;\r\n    applyMeasurement();\r\n    const observer = new ResizeObserver(() => applyMeasurement());\r\n    observer.observe(el);\r\n    return () => observer.disconnect();\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  const mountedLinesEffect = useRef(false);\r\n  /* `lines` changing needs a full re-measure (a different N clamps at a\r\n     different line entirely) but never needs the observer rebuilt — this\r\n     effect re-runs the SAME measurement function the observer already owns.\r\n     Skips its own first run: the mount effect above already measured once. */\r\n  useLayoutEffect(() => {\r\n    if (!mountedLinesEffect.current) {\r\n      mountedLinesEffect.current = true;\r\n      return;\r\n    }\r\n    applyMeasurement();\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [lines]);\r\n\r\n  const mountedExpandedEffect = useRef(false);\r\n  /* The toggle path: re-apply the viewport's max-height whenever `expanded`\r\n     moves, without re-measuring (nothing about the content changed). Skips\r\n     its own first run for the same reason as above.\r\n\r\n     On the EXPANDED -> COLLAPSED transition only (this effect runs once per\r\n     change, skipping mount, so `!expanded` here means \"just collapsed\" —\r\n     never \"still collapsed\" or \"just expanded\"), a focused element sitting\r\n     inside the content is about to be clipped behind `overflow: hidden` —\r\n     invisible but still focused, same class of problem `handleContentFocus`\r\n     rescues on the way IN. Moving focus to the toggle keeps it on a visible,\r\n     interactive element instead of leaving it stranded off-screen. */\r\n  useLayoutEffect(() => {\r\n    if (!mountedExpandedEffect.current) {\r\n      mountedExpandedEffect.current = true;\r\n      return;\r\n    }\r\n    if (!expanded && contentRef.current?.contains(document.activeElement)) {\r\n      buttonRef.current?.focus();\r\n    }\r\n    applyViewportMaxHeight();\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [expanded]);\r\n\r\n  /* Cancels any in-flight animation-frame chain on unmount — a re-toggle\r\n     mid-chain is already handled inside `applyViewportMaxHeight` itself\r\n     (it cancels its own previous frames before scheduling new ones). */\r\n  useLayoutEffect(() => {\r\n    return () => rafIds.current.forEach((id) => cancelAnimationFrame(id));\r\n  }, []);\r\n\r\n  function handleToggle() {\r\n    setExpanded(!expanded);\r\n  }\r\n\r\n  /* A tabbed-to element inside collapsed, clipped content is invisible and,\r\n     inside a scrolling ancestor, impossible for the browser to bring into\r\n     view correctly — so focus arriving on a descendant whose OWN rect\r\n     extends past the clamp boundary expands it immediately. An element that\r\n     sits entirely within the visible part of a collapsed block does not need\r\n     to force an expand. */\r\n  function handleContentFocus(event: React.FocusEvent<HTMLDivElement>) {\r\n    if (!overflowing || expanded || clampPx === null) return;\r\n    const contentTop = contentRectOrThrow().top;\r\n    const targetBottom = event.target.getBoundingClientRect().bottom - contentTop;\r\n    if (targetBottom > clampPx + RECT_EPSILON) setExpanded(true);\r\n  }\r\n\r\n  const clamped = overflowing && !expanded;\r\n\r\n  return (\r\n    <div ref={ref} className={cn(s.root(), className)}>\r\n      <div ref={viewportRef} className={s.viewport()}>\r\n        <div\r\n          ref={contentRef}\r\n          id={contentId}\r\n          data-slot=\"read-more-content\"\r\n          className={s.content()}\r\n          onFocus={handleContentFocus}\r\n        >\r\n          {children}\r\n        </div>\r\n        {clamped && fadePx > 0 && (\r\n          <div\r\n            aria-hidden=\"true\"\r\n            data-slot=\"read-more-bar\"\r\n            className={s.bar()}\r\n            style={{ height: `${fadePx}px` }}\r\n          />\r\n        )}\r\n      </div>\r\n\r\n      {overflowing && (\r\n        <Button\r\n          ref={buttonRef}\r\n          type=\"button\"\r\n          variant=\"link\"\r\n          size=\"sm\"\r\n          aria-expanded={expanded}\r\n          aria-controls={contentId}\r\n          trailingIcon={<Icon name={expanded ? \"chevron-up\" : \"chevron-down\"} size=\"xs\" />}\r\n          onClick={handleToggle}\r\n          className={s.toggle()}\r\n        >\r\n          {expanded ? (lessLabel ?? strings.less) : (moreLabel ?? strings.more)}\r\n        </Button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["readMore","tv","RECT_EPSILON","REPLACED_TAGS","collectRects","root","rects","walker","node","rect","range","groupIntoLines","sorted","a","b","lines","mid","current","line","computeLineBoxes","maxLines","rootTop","readMotionAllowed","ReadMore","children","expandedProp","defaultExpanded","onExpandedChange","moreLabel","lessLabel","className","ref","s","strings","useUiStrings","contentId","useId","expanded","setExpanded","useControllable","expandedRef","useRef","linesRef","overflowing","setOverflowing","useState","clampPx","setClampPx","fadePx","setFadePx","overflowingRef","clampPxRef","contentRef","viewportRef","buttonRef","viewportMaxHeightRef","rafIds","contentRectOrThrow","el","measureNaturalPx","applyViewportMaxHeight","id","write","next","naturalPx","currentRenderedPx","target","first","second","useLayoutEffect","onTransitionEnd","event","applyMeasurement","n","boxes","nextOverflowing","nextClampPx","nthLineHeight","prevLineBottom","maxFadePx","nextFadePx","observer","mountedLinesEffect","mountedExpandedEffect","handleToggle","handleContentFocus","contentTop","clamped","jsxs","cn","jsx","Button","Icon"],"mappings":"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"}

package/dist/components/RecordCard.js

@@ -0,0 +1,202 @@
+import { jsxs as u, Fragment as V, jsx as s } from "react/jsx-runtime";
+import { useRender as z } from "@base-ui/react/use-render";
+import { tv as f } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+const v = [
+  "flex min-w-0 max-w-full flex-wrap items-center gap-1.5",
+  "[&>*]:min-w-0 [&>*]:max-w-full [&>*]:overflow-hidden"
+], T = f({
+  slots: {
+    root: [
+      /* DX-4794: the tile's corner is `md` (10px); `Card`'s `radius="md"` draws the same one. */
+      "flex min-w-0 flex-col gap-2.5 rounded-md border bg-surface p-3 text-left",
+      "[--radius-outer:var(--radius-md)]",
+      "transition-[var(--tx-colors),box-shadow,translate] duration-(--dur-fast) ease-hover"
+    ],
+    top: "flex min-w-0 flex-wrap items-start gap-2",
+    identifier: "font-mono text-2xs text-tertiary",
+    title: "text-sm font-medium text-primary text-pretty",
+    subtitle: "text-2xs text-tertiary text-pretty",
+    /* Contained, for the reasons written out over `recordCard.badges` below.
+       Both rows are the same row in two arrangements, and a defect fixed in one
+       of them is a defect waiting in the other. */
+    badges: v,
+    /* Auto-fit rather than a fixed column count: three metrics on a 286px lane
+       and six on a full-width row are the same component. */
+    metrics: "grid grid-cols-[repeat(auto-fit,minmax(4.5rem,1fr))] gap-x-3 gap-y-1.5",
+    metricLabel: "text-2xs text-tertiary",
+    /* `tabular-nums` because these sit in a column and are compared down it —
+        proportional digits make equal-length numbers different widths. */
+    metricValue: "tabular-nums text-sm text-primary",
+    footer: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-t border-border-subtle pt-2 text-2xs text-tertiary"
+  },
+  variants: {
+    emphasis: {
+      none: { root: "border-border" },
+      accent: { root: "border-accent-border" },
+      warning: { root: "border-warning-border" },
+      danger: { root: "border-danger-border" }
+    },
+    interactive: {
+      true: {
+        root: [
+          "cursor-pointer",
+          "hover:border-border-interactive hover:bg-surface-hover hover:shadow-md",
+          "hover:-translate-y-px active:translate-y-0 active:shadow-sm",
+          "focus-visible:border-accent"
+        ]
+      },
+      false: {}
+    },
+    selected: { true: { root: "border-accent bg-surface-selected" }, false: {} }
+  },
+  compoundVariants: [
+    /* Same reasoning as `Card`: pointing at a chosen record must DEEPEN it, not
+       repaint it with the unselected hover fill, which reads as no longer
+       chosen. Exactly one of these applies. */
+    { interactive: !0, selected: !0, class: { root: "hover:bg-surface-selected-hover" } },
+    /* An emphasised border must survive hover. Without this the hover rule's
+       `border-border-interactive` replaces the danger hairline at equal
+       specificity, so the one card in the column that needed to stay marked
+       stops being marked at exactly the moment somebody points at it. */
+    { interactive: !0, emphasis: "accent", class: { root: "hover:border-accent" } },
+    { interactive: !0, emphasis: "warning", class: { root: "hover:border-warning" } },
+    { interactive: !0, emphasis: "danger", class: { root: "hover:border-danger" } }
+  ],
+  defaultVariants: { emphasis: "none", interactive: !1, selected: !1 }
+}), l = f({
+  slots: {
+    handle: "inline-flex shrink-0 items-center self-stretch text-tertiary",
+    eyebrow: "block truncate font-mono text-2xs tracking-wide text-tertiary uppercase",
+    title: "block text-pretty font-display font-semibold text-primary",
+    /* See BADGE_ROW. A card is a fixed-width box in a column of them, so a row
+       that can be wider than its card is not a styling nit — on a phone it puts
+       ink outside the border people are using to tell one record from the next. */
+    badges: v,
+    media: "shrink-0 overflow-hidden rounded-md bg-surface-inset",
+    meta: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-tertiary"
+  },
+  variants: {
+    /**
+     * Layout, not content. `corner` is the assignee-avatar shape (small,
+     * square, sits beside the title); `cover` is the banner-image shape (full
+     * width, wide aspect). Same slot, same DOM position — only the geometry
+     * changes, which is the whole argument for not splitting this into two
+     * props.
+     */
+    placement: {
+      corner: { media: "size-9" },
+      cover: { media: "aspect-video w-full" }
+    },
+    /**
+     * DX-3621 — `RecordCardTitle`'s own text size, independent of `as` (the
+     * heading LEVEL). Before this variant the title carried no explicit
+     * `text-*` class at all, so its rendered size was whatever the browser's
+     * UA default for the chosen heading level happened to be — a kanban board
+     * lane of `h4` titles rendering at UA default size, not a deliberate one.
+     * `md` (default) pins that same visual size explicitly rather than
+     * changing it out from under existing consumers; `sm` is for a dense
+     * listing (a kanban lane, a compact picker row) where several of these
+     * stack in view together.
+     */
+    size: {
+      sm: { title: "text-sm" },
+      md: { title: "text-base" }
+    },
+    /**
+     * DX-4031 — whether `RecordCardTitle` is held to two lines. A variant on the slot rather than a conditional
+     * class, so the default output keeps `line-clamp-2` and `clamp={false}` swaps it for `line-clamp-none`.
+     */
+    clamp: {
+      true: { title: "line-clamp-2" },
+      false: { title: "line-clamp-none" }
+    }
+  },
+  defaultVariants: { placement: "corner", size: "md", clamp: !0 }
+});
+function M({
+  identifier: e,
+  title: r,
+  subtitle: t,
+  badges: a,
+  metrics: i,
+  media: m,
+  action: c,
+  footer: p,
+  emphasis: h,
+  interactive: x,
+  selected: b,
+  render: g,
+  className: w,
+  children: y,
+  ref: N,
+  ...R
+}) {
+  const o = T({ emphasis: h, interactive: x, selected: b }), C = [m, e, r, t, c].some(
+    (d) => d != null
+  );
+  return z({
+    render: g,
+    ref: N,
+    /* Same rule as `Card`: an interactive record card is a real button, so it
+       is focusable, activates on Enter and Space, and announces as actionable.
+       A `render` prop overrides it for the link case. */
+    defaultTagName: x ? "button" : "div",
+    props: {
+      className: n(o.root(), w),
+      ...R,
+      children: /* @__PURE__ */ u(V, { children: [
+        C && /* @__PURE__ */ u("div", { className: o.top(), children: [
+          m,
+          /* @__PURE__ */ u("div", { className: n("flex flex-1 flex-col gap-0.5", c ? void 0 : "min-w-0"), children: [
+            e != null && /* @__PURE__ */ s("span", { className: o.identifier(), children: e }),
+            r != null && /* @__PURE__ */ s("span", { className: o.title(), children: r }),
+            t != null && /* @__PURE__ */ s("span", { className: o.subtitle(), children: t })
+          ] }),
+          c
+        ] }),
+        a && /* @__PURE__ */ s("div", { className: o.badges(), children: a }),
+        i && i.length > 0 && /* @__PURE__ */ s("div", { className: o.metrics(), children: i.map((d, k) => /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ s("span", { className: o.metricLabel(), children: d.label }),
+          /* @__PURE__ */ s("span", { className: o.metricValue(), children: d.value })
+        ] }, k)) }),
+        y,
+        p && /* @__PURE__ */ s("div", { className: o.footer(), children: p })
+      ] })
+    }
+  });
+}
+function A({ className: e, children: r, ref: t }) {
+  const a = l();
+  return /* @__PURE__ */ s("span", { ref: t, className: n(a.handle(), e), children: r });
+}
+function D({ className: e, children: r, ref: t }) {
+  const a = l();
+  return /* @__PURE__ */ s("span", { ref: t, className: n(a.eyebrow(), e), children: r });
+}
+function F({ as: e = "h3", size: r = "md", clamp: t = !0, className: a, children: i, ref: m }) {
+  const c = l({ size: r, clamp: t });
+  return /* @__PURE__ */ s(e, { ref: m, className: n(c.title(), a), children: i });
+}
+function G({ className: e, children: r, ref: t }) {
+  const a = l();
+  return /* @__PURE__ */ s("div", { ref: t, className: n(a.badges(), e), children: r });
+}
+function H({ placement: e, className: r, children: t, ref: a }) {
+  const i = l({ placement: e });
+  return /* @__PURE__ */ s("div", { ref: a, className: n(i.media(), r), children: t });
+}
+function O({ className: e, children: r, ref: t }) {
+  const a = l();
+  return /* @__PURE__ */ s("div", { ref: t, className: n(a.meta(), e), children: r });
+}
+export {
+  M as RecordCard,
+  G as RecordCardBadges,
+  D as RecordCardEyebrow,
+  A as RecordCardHandle,
+  H as RecordCardMedia,
+  O as RecordCardMeta,
+  F as RecordCardTitle
+};
+//# sourceMappingURL=RecordCard.js.map

package/dist/components/RecordCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCard.js","sources":["../../src/components/RecordCard.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\n/* ----------------------------------------------------------------------------\n   RECORD CARD — one row of a system of record, wherever it is shown.\n\n   A queue, a board lane, a search result and a picker all render the same four\n   things about a record: what it is called, what identifies it, what state it\n   is in, and two or three numbers worth seeing without opening it. `Card` gives\n   the box; this gives that arrangement, so the fifth surface to need it does\n   not invent a fifth spacing.\n\n   WHY THIS IS NOT `CardHeader` WITH MORE SLOTS. `CardHeader` describes a\n   SECTION — a title and a description over some content. A record card has no\n   content: it IS the summary, and its parts are in a fixed reading order\n   because the reader is scanning a column of them rather than reading one.\n   Bolting an identifier and a metric strip onto `CardHeader` would make every\n   ordinary card carry the vocabulary of a record it usually is not.\n\n   EMPHASIS IS A STATE OF THE RECORD, NOT A COLOUR CHOICE. `emphasis` exists\n   because a record in trouble has to be visible in a column of forty at a\n   glance, and the honest way to say so is the border — the fill is the\n   selection channel and the badges are already carrying the specific reason.\n   Passing `danger` because red looks urgent, on a record that is fine, spends\n   the one signal the column has.\n\n   THE BADGES ARE A SLOT, NOT AN ARRAY. Their tones, their order and whether one\n   is a button belong to the surface: the board's deadline chip opens nothing,\n   and the queue's status chip filters. A `badges: {label, tone}[]` prop would\n   have to grow every one of those, and each addition would be a library release\n   for a decision the consumer already knew how to make.\n\n   TWO WAYS TO BUILD ONE, AND THE SECOND IS NOT A CONVENIENCE. The props above\n   are the published contract and a real application ships on them, so their\n   arrangement does not move. The PARTS at the bottom of this file exist for the\n   two things props structurally cannot express:\n\n     - ORDER. The props render in one fixed reading order, deliberately, because\n       the reader is scanning a column rather than reading one card. A surface\n       that genuinely needs the handle after the title, or the media split across\n       two rows, cannot get there by adding a prop — and every such prop would be\n       a library release for a layout decision the consumer already knew how to\n       make.\n     - A REAL HEADING. `title` renders a `<span>`. `RecordCardTitle` renders an\n       `h2`–`h6` the caller picks, because the correct level is a property of\n       what sits above the card in the page outline. These cannot be collapsed\n       into one element: silently promoting the prop would add a heading to every\n       existing consumer's accessibility outline, which is the exact\n       `heading-order` defect `Card.tsx` already records having shipped once.\n\n   Composing parts is opt-in and additive. A caller passing props gets byte-for-\n   byte what they got before; a caller passing children gets them in the body\n   slot with no arrangement imposed. Mixing is legal and occasionally right —\n   props for the record's own data, a part for the board-owned handle.\n   -------------------------------------------------------------------------- */\n\n/* ----------------------------------------------------------------------------\n   THE BADGES ROW, AND WHY IT TAKES FOUR RULES TO STAY INSIDE A CARD\n\n   MEASURED, then fixed — against a real consumer Tailwind build of `dist/`, at\n   the exact DOM the consuming queue card produces, at a 375px viewport. Two\n   independent overflows, one on top of the other:\n\n     THE ROW COULD EXCEED THE CARD. It was `min-w-0 flex-wrap`, which is enough\n     only for a row that is allowed to shrink. A caller who writes\n     `className=\"shrink-0\"` — an entirely reasonable thing to write on a status\n     row that should not be squeezed by the title beside it — pins the row at\n     max-content, and a `flex-wrap` row that is never squeezed never wraps. A\n     stage badge plus the activity mark \"Extraction failed — 1 error\" put the\n     mark 20.2px past the card's content edge. `max-w-full` clamps the row\n     against its container whatever the caller says about shrinking, and because\n     the row already wraps, clamping IS the fix: the same fixture went from one\n     24px line hanging off the card to two lines inside it.\n\n     A SINGLE CHILD COULD EXCEED THE ROW. A `Badge` is `whitespace-nowrap`, so\n     its automatic minimum size is its entire label — no amount of room on the\n     row shrinks it. One badge long enough to beat the card by itself still\n     leaked 40.1px with the row clamped. `[&>*]:min-w-0` lets it shrink,\n     `[&>*]:max-w-full` caps it at the row, and `[&>*]:overflow-hidden` is what\n     stops the glyphs painting on past the badge's own border once the box is\n     capped. That last one cannot be seen in geometry — a capped box with\n     visible overflow measures identically to a clipped one, because a text\n     range's rect is a LAYOUT rect and clipping is a paint operation. It was\n     confirmed by sampling the pixel strip beside the badge's border instead:\n     flat with the clip, carrying glyphs without it.\n\n   IT CLIPS, IT DOES NOT ELLIPSIZE, and that is a limitation rather than a\n   choice. `text-overflow` applies to block containers; a `Badge` is a flex\n   container, so adding `text-ellipsis` changed nothing — measured, not assumed.\n   Getting a real ellipsis would mean wrapping every badge's children in a\n   truncating block, which changes the DOM of a component whose children are the\n   consumer's, and removes the `gap` between two of them. A clean cut at the\n   pill's own border is the cheaper honest answer, and the common case — several\n   badges, one of them long — is fixed by wrapping rather than by cutting\n   anything at all.\n\n   THE ONE COST, stated because `[&>*]` is a blunt instrument: a child's own\n   DESCENDANTS are now clipped at that child's padding edge. The child itself is\n   unaffected — an element's own outline and box-shadow are not clipped by its\n   own `overflow` — so the focus ring on a badge-shaped control still draws.\n   Inside a `Badge`, both things that reach outward were checked against the\n   geometry rather than waved at:\n\n     - the dismiss button's 2px focus halo. `pr-1` (4px) less the button's own\n       `-mr-0.5` (2px) puts its right edge 2px inside the pill's padding edge,\n       and the halo's 2px spread lands exactly ON that edge. It survives, with\n       nothing to spare.\n     - `pulse`'s ring. `dx-ping` scales a 6px dot to 2.4×, so it reaches 4.2px\n       past the dot — inside the 8px (`md`) or 6px (`sm`) padding either way,\n       and fully transparent by the time it gets there.\n\n   A future child that deliberately overhangs its own box would be clipped, and\n   that is the trade this row makes on purpose. */\nconst BADGE_ROW = [\n  \"flex min-w-0 max-w-full flex-wrap items-center gap-1.5\",\n  \"[&>*]:min-w-0 [&>*]:max-w-full [&>*]:overflow-hidden\",\n];\n\nconst record = tv({\n  slots: {\n    root: [\n      /* DX-4794: the tile's corner is `md` (10px); `Card`'s `radius=\"md\"` draws the same one. */\n      \"flex min-w-0 flex-col gap-2.5 rounded-md border bg-surface p-3 text-left\",\n      \"[--radius-outer:var(--radius-md)]\",\n      \"transition-[var(--tx-colors),box-shadow,translate] duration-(--dur-fast) ease-hover\",\n    ],\n    top: \"flex min-w-0 flex-wrap items-start gap-2\",\n    identifier: \"font-mono text-2xs text-tertiary\",\n    title: \"text-sm font-medium text-primary text-pretty\",\n    subtitle: \"text-2xs text-tertiary text-pretty\",\n    /* Contained, for the reasons written out over `recordCard.badges` below.\n       Both rows are the same row in two arrangements, and a defect fixed in one\n       of them is a defect waiting in the other. */\n    badges: BADGE_ROW,\n    /* Auto-fit rather than a fixed column count: three metrics on a 286px lane\n       and six on a full-width row are the same component. */\n    metrics: \"grid grid-cols-[repeat(auto-fit,minmax(4.5rem,1fr))] gap-x-3 gap-y-1.5\",\n    metricLabel: \"text-2xs text-tertiary\",\n    /* `tabular-nums` because these sit in a column and are compared down it —\n        proportional digits make equal-length numbers different widths. */\n    metricValue: \"tabular-nums text-sm text-primary\",\n    footer:\n      \"flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-t border-border-subtle pt-2 text-2xs text-tertiary\",\n  },\n  variants: {\n    emphasis: {\n      none: { root: \"border-border\" },\n      accent: { root: \"border-accent-border\" },\n      warning: { root: \"border-warning-border\" },\n      danger: { root: \"border-danger-border\" },\n    },\n    interactive: {\n      true: {\n        root: [\n          \"cursor-pointer\",\n          \"hover:border-border-interactive hover:bg-surface-hover hover:shadow-md\",\n          \"hover:-translate-y-px active:translate-y-0 active:shadow-sm\",\n          \"focus-visible:border-accent\",\n        ],\n      },\n      false: {},\n    },\n    selected: { true: { root: \"border-accent bg-surface-selected\" }, false: {} },\n  },\n  compoundVariants: [\n    /* Same reasoning as `Card`: pointing at a chosen record must DEEPEN it, not\n       repaint it with the unselected hover fill, which reads as no longer\n       chosen. Exactly one of these applies. */\n    { interactive: true, selected: true, class: { root: \"hover:bg-surface-selected-hover\" } },\n    /* An emphasised border must survive hover. Without this the hover rule's\n       `border-border-interactive` replaces the danger hairline at equal\n       specificity, so the one card in the column that needed to stay marked\n       stops being marked at exactly the moment somebody points at it. */\n    { interactive: true, emphasis: \"accent\", class: { root: \"hover:border-accent\" } },\n    { interactive: true, emphasis: \"warning\", class: { root: \"hover:border-warning\" } },\n    { interactive: true, emphasis: \"danger\", class: { root: \"hover:border-danger\" } },\n  ],\n  defaultVariants: { emphasis: \"none\", interactive: false, selected: false },\n});\n\n/* The parts' recipe, separate from `record` above because the two describe\n   different jobs: `record` lays out the fixed arrangement; `recordCard` gives\n   each composable part its own typography and shape and imposes no arrangement\n   at all. One shared recipe would force the parts to inherit the grid they\n   exist to escape. */\nconst recordCard = tv({\n  slots: {\n    handle: \"inline-flex shrink-0 items-center self-stretch text-tertiary\",\n    eyebrow: \"block truncate font-mono text-2xs tracking-wide text-tertiary uppercase\",\n    title: \"block text-pretty font-display font-semibold text-primary\",\n    /* See BADGE_ROW. A card is a fixed-width box in a column of them, so a row\n       that can be wider than its card is not a styling nit — on a phone it puts\n       ink outside the border people are using to tell one record from the next. */\n    badges: BADGE_ROW,\n    media: \"shrink-0 overflow-hidden rounded-md bg-surface-inset\",\n    meta: \"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-tertiary\",\n  },\n  variants: {\n    /**\n     * Layout, not content. `corner` is the assignee-avatar shape (small,\n     * square, sits beside the title); `cover` is the banner-image shape (full\n     * width, wide aspect). Same slot, same DOM position — only the geometry\n     * changes, which is the whole argument for not splitting this into two\n     * props.\n     */\n    placement: {\n      corner: { media: \"size-9\" },\n      cover: { media: \"aspect-video w-full\" },\n    },\n    /**\n     * DX-3621 — `RecordCardTitle`'s own text size, independent of `as` (the\n     * heading LEVEL). Before this variant the title carried no explicit\n     * `text-*` class at all, so its rendered size was whatever the browser's\n     * UA default for the chosen heading level happened to be — a kanban board\n     * lane of `h4` titles rendering at UA default size, not a deliberate one.\n     * `md` (default) pins that same visual size explicitly rather than\n     * changing it out from under existing consumers; `sm` is for a dense\n     * listing (a kanban lane, a compact picker row) where several of these\n     * stack in view together.\n     */\n    size: {\n      sm: { title: \"text-sm\" },\n      md: { title: \"text-base\" },\n    },\n    /**\n     * DX-4031 — whether `RecordCardTitle` is held to two lines. A variant on the slot rather than a conditional\n     * class, so the default output keeps `line-clamp-2` and `clamp={false}` swaps it for `line-clamp-none`.\n     */\n    clamp: {\n      true: { title: \"line-clamp-2\" },\n      false: { title: \"line-clamp-none\" },\n    },\n  },\n  defaultVariants: { placement: \"corner\", size: \"md\", clamp: true },\n});\n\nexport interface RecordCardMetric {\n  label: ReactNode;\n  value: ReactNode;\n}\n\nexport interface RecordCardProps extends VariantProps<typeof record> {\n  /** The record's own id — rendered mono, above the title. */\n  identifier?: ReactNode;\n  /**\n   * Optional ONLY so a caller can compose the parts instead (see the header).\n   * For prop-driven use it is effectively required — a record card with no\n   * title is not a record card — and omitting it drops the whole top row\n   * rather than rendering an empty one.\n   */\n  title?: ReactNode;\n  /** What kind of record this is, or who it belongs to. One line. */\n  subtitle?: ReactNode;\n  /** State chips. A slot, so their tones and behaviour stay the consumer's. */\n  badges?: ReactNode;\n  /** The numbers worth seeing without opening the record. */\n  metrics?: readonly RecordCardMetric[];\n  /** Leading — an icon, an avatar, or a drag handle. */\n  media?: ReactNode;\n  /** Trailing, top-aligned — a menu. */\n  action?: ReactNode;\n  /** A last line under a rule: an assignee, a timestamp, a count. */\n  footer?: ReactNode;\n  /**\n   * Render as something else — an `<a>` for a card that navigates.\n   *\n   * Prefer this over `onClick` when the card leads somewhere: a link can be\n   * opened in a new tab, copied, and read out as a link, and a button that\n   * calls `navigate` can do none of those.\n   */\n  render?: useRender.RenderProp;\n  className?: string;\n  children?: ReactNode;\n  ref?: Ref<HTMLElement>;\n  onClick?: (event: React.MouseEvent) => void;\n}\n\nexport function RecordCard({\n  identifier,\n  title,\n  subtitle,\n  badges,\n  metrics,\n  media,\n  action,\n  footer,\n  emphasis,\n  interactive,\n  selected,\n  render,\n  className,\n  children,\n  ref,\n  ...props\n}: RecordCardProps) {\n  const s = record({ emphasis, interactive, selected });\n  /* An empty top row is not free: it still contributes its own gap to the\n     column, so a parts-composed card would carry a phantom 10px band above its\n     content with nothing in it. */\n  const hasTop = [media, identifier, title, subtitle, action].some(\n    (slot) => slot !== undefined && slot !== null,\n  );\n\n  return useRender({\n    render,\n    ref,\n    /* Same rule as `Card`: an interactive record card is a real button, so it\n       is focusable, activates on Enter and Space, and announces as actionable.\n       A `render` prop overrides it for the link case. */\n    defaultTagName: interactive ? \"button\" : \"div\",\n    props: {\n      className: cn(s.root(), className),\n      ...props,\n      children: (\n        <>\n          {hasTop && (\n            <div className={s.top()}>\n              {media}\n              {/* The same pairing `CardHeader` had, and found by sweeping for the\n                  shape rather than by a second report: a shrinkable text column\n                  beside an `action` the consumer supplies and this component\n                  cannot size. `min-w-0` here let a wide action take the whole row\n                  and leave the title at zero. The row wraps and this column\n                  floors at its min-content instead. */}\n              <div className={cn(\"flex flex-1 flex-col gap-0.5\", action ? undefined : \"min-w-0\")}>\n                {identifier !== undefined && identifier !== null && (\n                  <span className={s.identifier()}>{identifier}</span>\n              )}\n              {title !== undefined && title !== null && (\n                <span className={s.title()}>{title}</span>\n              )}\n              {subtitle !== undefined && subtitle !== null && (\n                <span className={s.subtitle()}>{subtitle}</span>\n              )}\n            </div>\n            {action}\n          </div>\n          )}\n\n          {badges && <div className={s.badges()}>{badges}</div>}\n\n          {metrics && metrics.length > 0 && (\n            <div className={s.metrics()}>\n              {metrics.map((metric, index) => (\n                <div key={index} className=\"flex min-w-0 flex-col\">\n                  <span className={s.metricLabel()}>{metric.label}</span>\n                  <span className={s.metricValue()}>{metric.value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {children}\n\n          {footer && <div className={s.footer()}>{footer}</div>}\n        </>\n      ),\n    },\n  });\n}\n\nexport interface RecordCardHandleProps {\n  className?: string;\n  /** Whatever the board wants reachable here — a drag handle, a menu trigger,\n   *  a dual-purpose control combining both. This component owns none of that\n   *  behaviour; it only reserves the shape (shrink-resistant, stretches to\n   *  match a flex-row sibling) so the board's control does not have to fight\n   *  the record's own layout for space. */\n  children: ReactNode;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/** The region a board can slot a drag handle into. Absent entirely when a\n *  card is rendered outside any board — nothing here assumes one exists. */\nexport function RecordCardHandle({ className, children, ref }: RecordCardHandleProps) {\n  const s = recordCard();\n  return (\n    <span ref={ref} className={cn(s.handle(), className)}>\n      {children}\n    </span>\n  );\n}\n\nexport interface RecordCardEyebrowProps {\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/** The identifier line — an id, a code, a short kicker. Answers WHICH record\n *  this is, which is a different question from the one `Title` answers. */\nexport function RecordCardEyebrow({ className, children, ref }: RecordCardEyebrowProps) {\n  const s = recordCard();\n  return (\n    <span ref={ref} className={cn(s.eyebrow(), className)}>\n      {children}\n    </span>\n  );\n}\n\nexport interface RecordCardTitleProps {\n  /**\n   * The heading level this title renders as.\n   *\n   * See `CardHeader.titleAs` — the reasoning is identical and does not bear\n   * repeating differently: only the caller knows what sits above this card in\n   * the page outline.\n   *\n   * @default \"h3\"\n   */\n  as?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The title's own text size — independent of `as` (the heading LEVEL, an\n   * accessibility/outline concern). `sm` is for a dense listing where several\n   * record cards stack in view together (a kanban lane, a compact picker\n   * row); `md` is the ordinary size for a single card or a short list.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * DX-4031 — `true` (default) clamps the title to two lines; `false` shows it in full, for a card whose title\n   * (up to 250 characters) is the thing being read.\n   *\n   * @default true\n   */\n  clamp?: boolean;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLHeadingElement>;\n}\n\n/** Clamped to two lines by default — a collapsed record has a fixed budget of\n *  vertical space, and a title that runs on pushes the meta row an\n *  unpredictable distance down the column instead of wrapping in place. */\nexport function RecordCardTitle({ as: Title = \"h3\", size = \"md\", clamp = true, className, children, ref }: RecordCardTitleProps) {\n  const s = recordCard({ size, clamp });\n  return (\n    <Title ref={ref} className={cn(s.title(), className)}>\n      {children}\n    </Title>\n  );\n}\n\nexport interface RecordCardBadgesProps {\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A wrapping row for a SMALL set of status/priority badges — `Badge` from\n *  this same library, composed by the consumer. This component supplies only\n *  the row layout; it has no opinion on how many badges is too many.\n *\n *  IT DOES HAVE AN OPINION ON HOW WIDE. The row can never exceed its card, and\n *  a single badge can never exceed the row — the containment is the row's job\n *  because the consumer's badge cannot do it from inside. `BADGE_ROW` above\n *  carries the measurements and the one limitation (it clips; it does not\n *  ellipsize). A caller's `className` still wins over everything here, including\n *  `shrink-0`, which is exactly the class that made the reported card leak. */\nexport function RecordCardBadges({ className, children, ref }: RecordCardBadgesProps) {\n  const s = recordCard();\n  return (\n    <div ref={ref} className={cn(s.badges(), className)}>\n      {children}\n    </div>\n  );\n}\n\nexport interface RecordCardMediaProps extends VariantProps<typeof recordCard> {\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The media/cover region — an assignee avatar (`placement=\"corner\"`, the\n *  default) or a banner image (`placement=\"cover\"`). See the file header for\n *  why these are one slot rather than two. */\nexport function RecordCardMedia({ placement, className, children, ref }: RecordCardMediaProps) {\n  const s = recordCard({ placement });\n  return (\n    <div ref={ref} className={cn(s.media(), className)}>\n      {children}\n    </div>\n  );\n}\n\nexport interface RecordCardMetaProps {\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The one compact secondary-metadata row — comment count, dependency count,\n *  a due date. Full description, comment threads and history are explicitly\n *  not this component's problem; they live behind a click, on whatever detail\n *  surface the consumer opens from here. */\nexport function RecordCardMeta({ className, children, ref }: RecordCardMetaProps) {\n  const s = recordCard();\n  return (\n    <div ref={ref} className={cn(s.meta(), className)}>\n      {children}\n    </div>\n  );\n}\n"],"names":["BADGE_ROW","record","tv","recordCard","RecordCard","identifier","title","subtitle","badges","metrics","media","action","footer","emphasis","interactive","selected","render","className","children","ref","props","s","hasTop","slot","useRender","cn","jsxs","Fragment","jsx","metric","index","RecordCardHandle","RecordCardEyebrow","RecordCardTitle","Title","size","clamp","RecordCardBadges","RecordCardMedia","placement","RecordCardMeta"],"mappings":"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"}

package/dist/components/RelativeTime.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as u, useSyncExternalStore as p, useMemo as f } from "react";
+import { DateTimeText as v } from "./DateTimeText.js";
+import { toEpochMs as l } from "../lib/time/instant.js";
+import { relativeAge as d } from "../lib/time/relativeAge.js";
+import { subscribeRelativeClock as b } from "../lib/time/relativeClock.js";
+import { Tooltip as g } from "./Popover.js";
+import { useUiStrings as x, useUiLocale as N } from "../lib/i18n/provider.js";
+function T() {
+  const t = x().relativeAge, r = N();
+  return f(() => (n, e) => d(n, t, r, e), [t, r]);
+}
+function S(t, r) {
+  const n = T(), e = r ?? n, o = l(t), i = !Number.isNaN(o), s = u(
+    (c) => i ? b(o, e, c) : () => {
+    },
+    [o, i, e]
+  );
+  return p(s, () => e(o), () => e(o));
+}
+function E({ at: t, format: r, tooltip: n, className: e }) {
+  const o = S(t, r), i = l(t), s = !Number.isNaN(i), c = n === !1 ? null : n ?? (s ? /* @__PURE__ */ m(v, { at: i }) : null), a = /* @__PURE__ */ m("time", { dateTime: s ? new Date(i).toISOString() : void 0, className: e, suppressHydrationWarning: !0, children: o });
+  return c === null ? a : /* @__PURE__ */ m(g, { content: c, children: a });
+}
+export {
+  E as RelativeTime,
+  S as useRelativeText
+};
+//# sourceMappingURL=RelativeTime.js.map

package/dist/components/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sources":["../../src/components/RelativeTime.tsx"],"sourcesContent":["import { useCallback, useMemo, useSyncExternalStore, type ReactNode } from \"react\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { DateTimeText } from \"./DateTimeText\";\nimport { toEpochMs } from \"../lib/time/instant\";\nimport { relativeAge } from \"../lib/time/relativeAge\";\nimport { subscribeRelativeClock, type RelativeFormat } from \"../lib/time/relativeClock\";\nimport { Tooltip } from \"./Popover\";\n\n/* ----------------------------------------------------------------------------\n   RELATIVE TIME. DX-4797.\n\n   A moment as words (\"1 second ago\", then \"2 seconds ago\", ... \"1 minute ago\",\n   ... \"1 hour ago\") that keeps counting while it is on screen. The text is the\n   `format` function's (default: `relativeAge` in the provider's words and\n   locale); this component only decides WHEN to re-read it, on the one shared\n   timer in `lib/time/relativeClock.ts`. Nothing is fetched: the clock is the\n   browser's. Use it anywhere a relative time is RENDERED; call the format\n   function directly only for text that is not (a title string, a test).\n\n   A semantic `<time dateTime>`, with the absolute moment as its themed Tooltip\n   (never a native `title`) unless the caller supplies the content (`tooltip`)\n   or already has a tooltip around it (`false`). The tooltip is hover-only: the\n   `<time>` is not focusable, so a keyboard or touch user reads the moment from\n   the page's own detail. An unparseable `at` renders the format's own answer\n   and never arms a timer.\n   -------------------------------------------------------------------------- */\n\nexport interface RelativeTimeProps {\n  /** The moment: an ISO string, epoch millis or a `Date`. */\n  at: string | number | Date;\n  /** Words for the moment as of `now`. Default: `relativeAge` in the provider's words and locale. A pure function of `(at, now)`, and a STABLE one (memoize it; a new `format` re-reads when the text next changes). */\n  format?: RelativeFormat;\n  /** The tooltip content. Default: the absolute moment, in the provider's locale. `false` for none (the caller wraps its own). */\n  tooltip?: ReactNode | false;\n  className?: string;\n}\n\n/** `relativeAge` in the provider's words and locale, memoized: the shared clock needs a format whose identity holds. */\nfunction useProviderFormat(): RelativeFormat {\n  const strings = useUiStrings().relativeAge;\n  const locale = useUiLocale();\n  return useMemo<RelativeFormat>(() => (at, now) => relativeAge(at, strings, locale, now), [strings, locale]);\n}\n\n/**\n * The text of a moment, re-read whenever it changes: what `RelativeTime` draws, for a caller that needs the words themselves\n * (a sentence built around them, a layout key that must move when the shown age does). Same `format` rules as `RelativeTimeProps`.\n */\nexport function useRelativeText(at: string | number | Date, format?: RelativeFormat): string {\n  const providerFormat = useProviderFormat();\n  const chosen = format ?? providerFormat;\n  const atMs = toEpochMs(at);\n  const valid = !Number.isNaN(atMs);\n  const subscribe = useCallback(\n    (onChange: () => void) => (valid ? subscribeRelativeClock(atMs, chosen, onChange) : () => {}),\n    [atMs, valid, chosen],\n  );\n  /* DX-5411: the server snapshot is the same read. A server has no ticking clock, so it draws the age as of the render, and a\n     hydrating client re-reads it (`RelativeTime` marks its `<time>` so React accepts the newer words). */\n  return useSyncExternalStore(subscribe, () => chosen(atMs), () => chosen(atMs));\n}\n\nexport function RelativeTime({ at, format, tooltip, className }: RelativeTimeProps) {\n  const text = useRelativeText(at, format);\n  const atMs = toEpochMs(at);\n  const valid = !Number.isNaN(atMs);\n  const content = tooltip === false ? null : (tooltip ?? (valid ? <DateTimeText at={atMs} /> : null));\n  const element = (\n    <time dateTime={valid ? new Date(atMs).toISOString() : undefined} className={className} suppressHydrationWarning>\n      {text}\n    </time>\n  );\n  return content === null ? element : <Tooltip content={content}>{element}</Tooltip>;\n}\n"],"names":["useProviderFormat","strings","useUiStrings","locale","useUiLocale","useMemo","at","now","relativeAge","useRelativeText","format","providerFormat","chosen","atMs","toEpochMs","valid","subscribe","useCallback","onChange","subscribeRelativeClock","useSyncExternalStore","RelativeTime","tooltip","className","text","content","jsx","DateTimeText","element","Tooltip"],"mappings":";;;;;;;;AAsCA,SAASA,IAAoC;AAC3C,QAAMC,IAAUC,IAAe,aACzBC,IAASC,EAAA;AACf,SAAOC,EAAwB,MAAM,CAACC,GAAIC,MAAQC,EAAYF,GAAIL,GAASE,GAAQI,CAAG,GAAG,CAACN,GAASE,CAAM,CAAC;AAC5G;AAMO,SAASM,EAAgBH,GAA4BI,GAAiC;AAC3F,QAAMC,IAAiBX,EAAA,GACjBY,IAASF,KAAUC,GACnBE,IAAOC,EAAUR,CAAE,GACnBS,IAAQ,CAAC,OAAO,MAAMF,CAAI,GAC1BG,IAAYC;AAAA,IAChB,CAACC,MAA0BH,IAAQI,EAAuBN,GAAMD,GAAQM,CAAQ,IAAI,MAAM;AAAA,IAAC;AAAA,IAC3F,CAACL,GAAME,GAAOH,CAAM;AAAA,EAAA;AAItB,SAAOQ,EAAqBJ,GAAW,MAAMJ,EAAOC,CAAI,GAAG,MAAMD,EAAOC,CAAI,CAAC;AAC/E;AAEO,SAASQ,EAAa,EAAE,IAAAf,GAAI,QAAAI,GAAQ,SAAAY,GAAS,WAAAC,KAAgC;AAClF,QAAMC,IAAOf,EAAgBH,GAAII,CAAM,GACjCG,IAAOC,EAAUR,CAAE,GACnBS,IAAQ,CAAC,OAAO,MAAMF,CAAI,GAC1BY,IAAUH,MAAY,KAAQ,OAAQA,MAAYP,IAAQ,gBAAAW,EAACC,GAAA,EAAa,IAAId,EAAA,CAAM,IAAK,OACvFe,IACJ,gBAAAF,EAAC,QAAA,EAAK,UAAUX,IAAQ,IAAI,KAAKF,CAAI,EAAE,gBAAgB,QAAW,WAAAU,GAAsB,0BAAwB,IAC7G,UAAAC,GACH;AAEF,SAAOC,MAAY,OAAOG,IAAU,gBAAAF,EAACG,GAAA,EAAQ,SAAAJ,GAAmB,UAAAG,GAAQ;AAC1E;"}