@astryxdesign/core 0.2.0 → 0.3.0-canary.060cc9d

package/dist/Thumbnail/Thumbnail.js

@@ -22,8 +22,9 @@
  * - /packages/core/src/Thumbnail/Thumbnail.test.tsx
  * - /packages/core/src/Thumbnail/index.ts
  * - /apps/storybook/stories/Thumbnail.stories.tsx
- * - /packages/cli/templates/blocks/components/Thumbnail/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Thumbnail/ (showcase blocks)
  */
+import { useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -33,11 +34,10 @@ import { Skeleton } from "../Skeleton/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { useContainerReveal } from "../hooks/useContainerReveal.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
-import "./thumbnail.markers.stylex.js";
-import { thumbnailScope } from "./thumbnail.markers.stylex.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -53,38 +53,6 @@ const styles = {
     kHBbk8: "xc8icb0",
     $$css: true
   },
-  imageContainer: {
-    kVAEAm: "x1n2onr6",
-    kzqmXN: "xh8yej3",
-    kOBAk4: "x1plog1",
-    kaIpWk: "xh6dtrn",
-    kVQacm: "xb3r6kr",
-    kWkggS: "x17x4s8c",
-    $$css: true
-  },
-  interactive: {
-    kkrTdU: "x1ypdohk",
-    kI3sdo: "x1irc7jg",
-    kInvED: "x1wfwxd8 xdjuwb3",
-    $$css: true
-  },
-  overlay: {
-    k5JduY: "x1s928wv",
-    kwXMNM: "x1j6awrg",
-    kv0HGH: "xarstr8",
-    kUfP38: "x1k48kgn",
-    kloYau: "x2q1x1w",
-    kRicXK: "x1ywzrc5",
-    kPNhGg: "x97pup0",
-    kA8PQs: "x1dlmc9c",
-    ks3ayO: "xyhc2n1",
-    kAcZsS: "x1k7wiig",
-    $$css: true
-  },
-  hoverOnPointer: {
-    kJs8I2: "xi14tyy",
-    $$css: true
-  },
   removeButtonOverrides: {
     "--_button-radius": "xh8ntw8",
     kZKoxP: "x1qx5ct2",
@@ -157,14 +125,25 @@ export function Thumbnail({
   ...props
 }) {
   const t = useTranslator();
+
+  // Track the exact src that failed (rather than a boolean) so a changed src
+  // gets a fresh load attempt instead of the stale error.
+  const [erroredSrc, setErroredSrc] = useState(undefined);
   const hasSrc = src != null;
+  const hasError = hasSrc && erroredSrc === src;
   const showSkeleton = isLoading && !hasSrc;
-  const showImage = hasSrc && !showSkeleton;
+  const showImage = hasSrc && !showSkeleton && !hasError;
   const showUploadOverlay = isLoading && hasSrc;
-  const showPlaceholder = !isLoading && !hasSrc;
+  const showPlaceholder = !isLoading && !hasSrc || hasError;
   const isInteractive = onClick != null && !isDisabled && !isLoading;
   const hasRemove = onRemove != null && !isDisabled;
   const isHoverReveal = hasRemove && showRemoveOn === 'hover';
+  const {
+    getContainerProps,
+    getContentRevealProps
+  } = useContainerReveal({
+    isEnabled: isHoverReveal
+  });
   const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? t('@astryx.thumbnail.fallbackName');
 
   // Without `alt`, the image is explicitly decorative rather than silently
@@ -184,6 +163,7 @@ export function Thumbnail({
       alt: alt ?? '',
       role: isImageDecorative ? 'presentation' : undefined,
       "aria-hidden": isImageDecorative || undefined,
+      onError: () => setErroredSrc(src),
       ...{
         className: "xh8yej3 x5yr21d xl1xv1r x1lliihq"
       }
@@ -197,14 +177,15 @@ export function Thumbnail({
     })]
   });
   const removeButtonEl = hasRemove ? /*#__PURE__*/_jsx("div", {
-    ...{
-      0: {
-        className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
-      },
-      1: {
-        className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556 xg01cxk xb7nc9r x1cyvi8a xhva3ql x19991ni xuedmi6 x12w9bfk xlr8y92"
-      }
-    }[!!isHoverReveal << 0],
+    ...mergeProps({
+      className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
+    },
+    // The remove button is absolutely positioned in the corner, so it is
+    // already out of flow — an opacity-only reveal (layout preserved)
+    // matches its overlay placement instead of the clip recipe.
+    isHoverReveal ? getContentRevealProps({
+      isLayoutPreserved: true
+    }) : {}),
     children: /*#__PURE__*/_jsx(Button, {
       icon: /*#__PURE__*/_jsx(Icon, {
         icon: "close",
@@ -231,7 +212,32 @@ export function Thumbnail({
     ...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
-      ...stylex.props(styles.imageContainer, isHoverReveal && thumbnailScope, isInteractive && styles.interactive, isInteractive && styles.overlay, isInteractive && styles.hoverOnPointer),
+      ...mergeProps({
+        0: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
+        },
+        4: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3"
+        },
+        2: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
+        },
+        6: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
+        },
+        1: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c xi14tyy"
+        },
+        5: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 xi14tyy"
+        },
+        3: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
+        },
+        7: {
+          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
+        }
+      }[!!isInteractive << 2 | !!isInteractive << 1 | !!isInteractive << 0], isHoverReveal ? getContainerProps() : {}),
       children: [isInteractive ? /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: onClick,

package/dist/TimeInput/TimeInput.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/TimeInput/TimeInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/TimeInput/index.ts (exports if types change)
  * - /apps/storybook/stories/TimeInput.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/TimeInput/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TimeInput/ (showcase blocks)
  */
 import { useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Timestamp/Timestamp.d.ts

@@ -1,7 +1,7 @@
 import type { TextType, TextSize, TextColor, TextWeight } from '../theme/types';
 import type { BaseProps } from '../BaseProps';
 import type { TimestampTooltipEntry } from './tooltipEntries';
-export type TimestampFormat = 'relative' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time';
+export type TimestampFormat = 'relative' | 'relative_short' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time' | 'unix_seconds';
 export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     /** Ref forwarded to the root `<time>` element. */
     ref?: React.Ref<HTMLTimeElement>;
@@ -10,6 +10,9 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     /**
      * Display format.
      * - `'relative'`: "2 hours ago", "yesterday", "now"
+     * - `'relative_short'`: "2h ago", "1d ago", "now" — the same tiers as
+     *   `'relative'` with abbreviated units (s/m/h/d/mo/y), for compact,
+     *   space-constrained surfaces
      * - `'auto'`: Relative for recent times, `date_time` for older
      * - `'date'`: "Mar 21, 2025"
      * - `'date_long'`: "March 21, 2025"
@@ -19,6 +22,8 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
      * - `'system_date'`: "2025-03-21"
      * - `'system_date_time'`: "2025-03-21 14:51:53"
      * - `'system_time'`: "14:51:53"
+     * - `'unix_seconds'`: "1742565113" — Unix time in whole seconds since the
+     *   epoch. Absolute (zone-independent), so it ignores any tooltip time zone.
      * @default 'auto'
      */
     format?: TimestampFormat;
@@ -28,21 +33,29 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
      */
     autoThreshold?: number;
     /**
-     * Whether to show a tooltip with the full date/time on hover.
+     * Whether to show a hover card with the full date/time on hover. The card
+     * is copyable — its default single row carries the full absolute time — and
+     * `tooltipEntries` customizes its rows.
      * @default true
      */
     hasTooltip?: boolean;
     /**
-     * Lines to show in the hover tooltip, so one instant can be read in several
-     * time zones and/or formats at once. Each entry is one line, rendered in the
-     * order given, with an optional label.
+     * Lines to show on hover, so one instant can be read — and optionally
+     * copied — in several time zones and/or formats at once. Each entry is one
+     * line, rendered in the order given, with an optional label.
      *
-     * Configuring entries also attaches the tooltip to absolute formats, which
-     * otherwise have no tooltip at all. `hasTooltip={false}` still suppresses it,
-     * and an empty array is treated as no configuration.
+     * Rows are read-only unless they set `isCopyable` (default `false`). A
+     * copyable row shows a copy button in a dedicated trailing action column so
+     * the buttons align across rows; that column is only present when some row
+     * is copyable. With no entries the card shows a single default row with the
+     * full absolute time in the viewer's own zone, which is copyable.
      *
-     * @default undefined — a single line with the full absolute time in the
-     *   viewer's own time zone
+     * Configuring entries also attaches the surface to absolute formats, which
+     * otherwise have no hover card at all. `hasTooltip={false}` still suppresses
+     * it, and an empty array is treated as no configuration.
+     *
+     * @default undefined — a single default row with the full absolute time in
+     *   the viewer's own time zone
      * @example
      * ```
      * <Timestamp
@@ -50,6 +63,7 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
      *   tooltipEntries={[
      *     {label: 'Your time'},
      *     {timezoneID: 'UTC', label: 'UTC'},
+     *     {timezoneID: 'UTC', format: 'system_date_time', label: 'ISO', isCopyable: true},
      *   ]}
      * />
      * ```
@@ -96,8 +110,8 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
  *
  * Renders a semantic `<time>` element with an ISO 8601 `datetime` attribute,
  * styled via Text. Supports relative ("2 hours ago"), multiple absolute
- * formats, and auto formatting. Optionally shows a tooltip with the full
- * absolute time and can update live.
+ * formats, and auto formatting. Optionally shows a hover card with the full
+ * absolute time (copyable) and can update live.
  *
  * @example
  * ```

package/dist/Timestamp/Timestamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAU5D,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2LD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA4IhB;yBA7Je,SAAS"}
+{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAI9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAW1B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCAgJhB;yBAjKe,SAAS"}

package/dist/Timestamp/Timestamp.js

@@ -13,22 +13,22 @@
  * - /packages/core/src/Timestamp/Timestamp.test.tsx
  * - /packages/core/src/Timestamp/index.ts
  * - /apps/storybook/stories/Timestamp.stories.tsx
- * - /packages/cli/templates/blocks/components/Timestamp/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Timestamp/ (showcase blocks)
  */
-import { useEffect, useRef, useState, lazy, Suspense, Fragment } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Text } from "../Text/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { useTranslator } from "../i18n/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { formatInstant } from "./formatInstant.js";
 import { formatTooltipLines } from "./tooltipEntries.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
-  default: mod.Tooltip
-})));
+import { jsx as _jsx } from "react/jsx-runtime";
+// Load the overlay lazily so a card-less Timestamp — the default — never
+// bundles HoverCard or the copy affordance's Icon/IconButton. Mirrors the code
+// split the read-only Tooltip path used before it.
+const LazyTimestampHoverCard = /*#__PURE__*/lazy(async () => import("./TimestampHoverCard.js"));
 
 // =============================================================================
 // Types
@@ -139,6 +139,67 @@ function getRelativeTimeString(date, now) {
   return `${years} ${years === 1 ? 'year' : 'years'} ago`;
 }
 
+/**
+ * The compact sibling of `getRelativeTimeString`: the same tier boundaries and
+ * present/future-skew handling, rendered with abbreviated units for
+ * space-constrained surfaces (chat metadata, dense tables, chips).
+ *
+ * Units follow the common compact convention (and the Microsoft Style Guide):
+ * `s` seconds, `m` minutes, `h` hours, `d` days, `mo` months, `y` years.
+ * Months use `mo` — not `m` — because `m` already means minutes; a bare `m`
+ * for months would be ambiguous. The value is always numeric (no "yesterday"
+ * idiom, which belongs to the long form) so the short form stays predictable
+ * and easy to scan. The `ago` / `in` affixes are kept so direction stays
+ * unambiguous at a glance.
+ */
+function getRelativeTimeShortString(date, now) {
+  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Present clamp — identical to the long form (see getRelativeTimeString).
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
+  if (diffSeconds < 0) {
+    // Future dates.
+    const absDiff = Math.abs(diffSeconds);
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
+    if (absDiff < MINUTE) {
+      return `in ${absDiff}s`;
+    }
+    if (absDiff < HOUR) {
+      return `in ${Math.floor(absDiff / MINUTE)}m`;
+    }
+    if (absDiff < DAY) {
+      return `in ${Math.floor(absDiff / HOUR)}h`;
+    }
+    if (absDiff < MONTH) {
+      return `in ${Math.floor(absDiff / DAY)}d`;
+    }
+    if (absDiff < YEAR) {
+      return `in ${Math.floor(absDiff / MONTH)}mo`;
+    }
+    return `in ${Math.floor(absDiff / YEAR)}y`;
+  }
+  if (diffSeconds < MINUTE) {
+    return `${diffSeconds}s ago`;
+  }
+  if (diffSeconds < HOUR) {
+    return `${Math.floor(diffSeconds / MINUTE)}m ago`;
+  }
+  if (diffSeconds < DAY) {
+    return `${Math.floor(diffSeconds / HOUR)}h ago`;
+  }
+  if (diffSeconds < MONTH) {
+    return `${Math.floor(diffSeconds / DAY)}d ago`;
+  }
+  if (diffSeconds < YEAR) {
+    return `${Math.floor(diffSeconds / MONTH)}mo ago`;
+  }
+  return `${Math.floor(diffSeconds / YEAR)}y ago`;
+}
+
 /** Returns the interval (in ms) at which a relative timestamp should update. */
 function getLiveInterval(diffSeconds) {
   const absDiff = Math.abs(diffSeconds);
@@ -156,7 +217,17 @@ function getLiveInterval(diffSeconds) {
 
 /** Whether a format is non-relative (i.e. shows a fixed date/time). */
 function isAbsoluteFormat(format) {
-  return format !== 'relative' && format !== 'auto';
+  return format !== 'relative' && format !== 'relative_short' && format !== 'auto';
+}
+
+/**
+ * Whether a format renders a relative phrase ("2 hours ago" / "2h ago") rather
+ * than a fixed instant. Both the long and short relative forms share the same
+ * treatment: they get the accessible full-date name, the hover tooltip, and
+ * live updates.
+ */
+function isRelativeFormat(format) {
+  return format === 'relative' || format === 'relative_short';
 }
 
 // =============================================================================
@@ -168,8 +239,8 @@ function isAbsoluteFormat(format) {
  *
  * Renders a semantic `<time>` element with an ISO 8601 `datetime` attribute,
  * styled via Text. Supports relative ("2 hours ago"), multiple absolute
- * formats, and auto formatting. Optionally shows a tooltip with the full
- * absolute time and can update live.
+ * formats, and auto formatting. Optionally shows a hover card with the full
+ * absolute time (copyable) and can update live.
  *
  * @example
  * ```
@@ -197,6 +268,7 @@ export function Timestamp({
   ref,
   'data-testid': testId
 }) {
+  const t = useTranslator();
   const timeRef = useRef(null);
   const [now, setNow] = useState(() => new Date());
   const date = parseValue(value);
@@ -213,7 +285,7 @@ export function Timestamp({
 
   // Format the display text. No time zone is passed: the visible text always
   // reads in the viewer's own zone, and only the tooltip names others.
-  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? getRelativeTimeString(date, now) : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, {
+  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? getRelativeTimeString(date, now) : effectiveFormat === 'relative_short' ? getRelativeTimeShortString(date, now) : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, {
     isTimezoneShown
   }) : '';
 
@@ -222,7 +294,7 @@ export function Timestamp({
 
   // Live updates
   useEffect(() => {
-    if (!isLive || !isValidDate || effectiveFormat !== 'relative') {
+    if (!isLive || !isValidDate || !isRelativeFormat(effectiveFormat)) {
       return;
     }
     const interval = getLiveInterval(diffSeconds);
@@ -242,11 +314,20 @@ export function Timestamp({
   // only on/off axis — so normalize it away before anything reads it.
   const entries = tooltipEntries !== undefined && tooltipEntries.length > 0 ? tooltipEntries : undefined;
 
-  // Absolute formats have never carried a tooltip. Leaving that gate closed
-  // when a consumer has explicitly configured tooltip lines would let `format`
-  // silently suppress another prop's output, so entry presence opens it too.
-  // With no entries this reduces to the original condition exactly.
-  const showTooltip = hasTooltip && (effectiveFormat === 'relative' || entries !== undefined);
+  // Absolute formats have never carried a hover surface. Leaving that gate
+  // closed when a consumer has explicitly configured tooltip lines would let
+  // `format` silently suppress another prop's output, so entry presence opens
+  // it too. With no entries this reduces to the original condition exactly.
+  const showTooltip = hasTooltip && (isRelativeFormat(effectiveFormat) || entries !== undefined);
+
+  // The rows the hover card renders: the configured entries, or the single
+  // default absolute line shown when none are set. Either way the surface is
+  // the same copyable card — the default line is a one-row card carrying the
+  // full absolute time, itself copyable, just like a configured entry.
+  const lines = entries === undefined ? [{
+    value: fullAbsoluteText,
+    isCopyable: true
+  }] : formatTooltipLines(date, entries);
   const timestampProps = mergeProps(themeProps('timestamp', {
     format: effectiveFormat
   }), {
@@ -263,61 +344,43 @@ export function Timestamp({
     children: /*#__PURE__*/_jsx("time", {
       ref: mergeRefs(ref, timeRef),
       dateTime: isoString,
-      "aria-label": effectiveFormat === 'relative' ? fullAbsoluteText : undefined
-      // The absolute-time tooltip is anchored here with the default 'auto'
-      // focus trigger, which only activates on focusable anchors. A bare
-      // <time> is not focusable, so without a tab stop sighted keyboard
-      // users could never reveal the tooltip (WCAG 1.4.13 / 2.1.1). Only
-      // add the tab stop while a tooltip is actually attached — no
-      // gratuitous tab stops otherwise.
+      "aria-label": isRelativeFormat(effectiveFormat) ? fullAbsoluteText : undefined
+      // The hover card is anchored here with focusTrigger="always", which
+      // attaches focus listeners but does not itself make the anchor
+      // focusable. A bare <time> is not focusable, so without a tab stop
+      // sighted keyboard users could never reveal the card (WCAG 1.4.13 /
+      // 2.1.1). Add the tab stop only while a card is actually attached — no
+      // gratuitous tab stops otherwise. The card carries its own
+      // dashed-underline hover indication as the affordance, so the anchor
+      // needs no separate focus outline.
       ,
       tabIndex: showTooltip ? 0 : undefined,
       "data-testid": testId,
       ...{
-        0: {
-          className: "xt0psk2 xjb2p0i x1j61x8r x1qlqyl8 x15bjb6t x1heor9g x1pd3egz"
-        },
-        1: {
-          className: "xt0psk2 xjb2p0i x1j61x8r x1qlqyl8 x15bjb6t x1heor9g x1pd3egz x17nn4n9 x1wfwxd8 x7s97pk"
-        }
-      }[!!showTooltip << 0],
+        className: "xt0psk2 xjb2p0i x1j61x8r x1qlqyl8 x15bjb6t x1heor9g x1pd3egz"
+      },
       children: displayText
     })
   });
   if (showTooltip) {
-    // Built inside the branch so a timestamp without a tooltip allocates none
-    // of it. With no entries the content stays the bare string it has always
-    // been — no wrapper element is introduced around the default line.
-    const tooltipContent = entries === undefined ? fullAbsoluteText : /*#__PURE__*/_jsx("dl", {
-      ...{
-        className: "xrvj5dj x1pmbctz x1tw44j4 x10im51j xrxpjvj"
-      },
-      children: formatTooltipLines(date, entries).map((line, index) =>
-      /*#__PURE__*/
-      // eslint-disable-next-line @eslint-react/no-array-index-key -- tooltip lines are fixed positional slots and two entries may legitimately be identical
-      _jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx("dt", {
-          ...{
-            className: "x10im51j xrxpjvj xyri2b xepvkrk"
-          },
-          children: line.label ?? ''
-        }), /*#__PURE__*/_jsx("dd", {
-          ...{
-            className: "x10im51j xrxpjvj"
-          },
-          children: line.value
-        })]
-      }, index))
-    });
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [timeElement, /*#__PURE__*/_jsx(Suspense, {
-        fallback: null,
-        children: /*#__PURE__*/_jsx(LazyXDSTooltip, {
-          anchorRef: timeRef,
-          content: tooltipContent,
-          placement: "above"
-        })
-      })]
+    // One surface for every timestamp that shows one: the copyable hover card,
+    // loaded lazily so the default card-less path never bundles it. Each line
+    // becomes a labelled row with its own copy button. With no configured
+    // entries this is a single row carrying the full absolute time, itself
+    // copyable — so hovering a relative timestamp reveals the full time and
+    // lets the reader copy it. Opens on hover and on keyboard focus (the
+    // <time> tab stop above), with the dashed-underline affordance signalling
+    // it is interactive.
+    //
+    // While the chunk loads the bare <time> stays visible (the Suspense
+    // fallback), so nothing disappears — the card simply attaches once ready.
+    return /*#__PURE__*/_jsx(Suspense, {
+      fallback: timeElement,
+      children: /*#__PURE__*/_jsx(LazyTimestampHoverCard, {
+        lines: lines,
+        label: t('@astryx.timestamp.detailsLabel'),
+        children: timeElement
+      })
     });
   }
   return timeElement;

package/dist/Timestamp/TimestampHoverCard.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @file TimestampHoverCard.tsx
+ * @input Uses React, HoverCard, IconButton, Icon, formatted lines
+ * @output Default-exports the lazily-loaded copyable hover card for Timestamp
+ * @position Split out of Timestamp so the overlay (HoverCard) and the copy
+ *   affordance's Icon/IconButton load only when a card is actually shown — the
+ *   default, card-less Timestamp never bundles this chunk.
+ *
+ * Layout: a semantic `<dl>` laid out as a grid. Labelled cards use three
+ *   columns — label, value, and a trailing action column for copy buttons —
+ *   so the buttons align down a single column no matter how wide each value
+ *   is. The action column is only added when at least one row is copyable, so
+ *   a fully read-only card carries no dangling gutter. Label-less cards drop
+ *   the label column and stack to whatever columns remain.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Timestamp/Timestamp.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/Timestamp/Timestamp.doc.mjs (theming.targets)
+ * - /packages/core/src/Timestamp/Timestamp.test.tsx
+ */
+import type { ReactNode } from 'react';
+import type { TimestampTooltipLine } from './tooltipEntries';
+export interface TimestampHoverCardProps {
+    /** The rows to render, each a labelled instant, optionally copyable. */
+    lines: ReadonlyArray<TimestampTooltipLine>;
+    /** Accessible name for the card. */
+    label: string;
+    /** The anchor the card is attached to (the `<time>` element). */
+    children: ReactNode;
+}
+/**
+ * The copyable hover card for Timestamp. Renders a semantic `<dl>` as a grid:
+ * an optional label column, the value, and — when any row is copyable — a
+ * trailing action column carrying that row's copy button, so buttons align
+ * down one column. With a single default line this is a one-row card carrying
+ * the full absolute time, copyable. Opens on hover and on keyboard focus (the
+ * anchor's tab stop), with a dashed-underline affordance signalling it is
+ * interactive.
+ */
+declare function TimestampHoverCard({ lines, label, children, }: TimestampHoverCardProps): ReactNode;
+declare namespace TimestampHoverCard {
+    var displayName: string;
+}
+export default TimestampHoverCard;
+//# sourceMappingURL=TimestampHoverCard.d.ts.map

package/dist/Timestamp/TimestampHoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimestampHoverCard.d.ts","sourceRoot":"","sources":["../../src/Timestamp/TimestampHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAerC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAoK3D,MAAM,WAAW,uBAAuB;IACtC,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkBD;;;;;;;;GAQG;AACH,iBAAwB,kBAAkB,CAAC,EACzC,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,uBAAuB,GAAG,SAAS,CAsCrC;kBA1CuB,kBAAkB;;;eAAlB,kBAAkB"}