@lovett/ui 0.0.10 → 0.0.11

package/src/stat-row.tsx

@@ -19,12 +19,26 @@
  * applied here). Inner panels carry a fixed `min-height` so a tile never
  * resizes as its value's length changes (ADR-076 D5 zero-layout-shift).
  *
+ * Responsive (ADR-145 amendment, 2026-09-04): below the `sm` breakpoint the
+ * row becomes a two-column grid and the compounding arrows hide — four
+ * tiles abreast on a phone crushed the figures to nothing. Order is
+ * preserved, so the chain still reads left-to-right, top-to-bottom.
+ *
+ * `copyable` (ADR-145 amendment, 2026-09-04): every inner panel becomes a
+ * button that copies its figure (the `copyValue` override when a step sets
+ * one, else the displayed `value`) and toasts "Copied <label>". Same
+ * affordance as ValueChip: a hover lift on the panel and the focus ring.
+ * Without it the panel stays inert, so a read-only row never advertises an
+ * interaction it doesn't have.
+ *
  * Promoted to @lovett/ui under ADR-076 D2 — the catalog of calculator
  * consumers clears ADR-008 D3's 2+ consumer gate.
  */
 
 import { ArrowRight } from 'lucide-react'
-import { Fragment, type ReactNode } from 'react'
+import { Fragment, type CSSProperties, type ReactNode } from 'react'
+import { copyText } from './lib/clipboard'
+import { cn } from './lib/utils'
 
 export interface StatRowStep {
   /** Lucide glyph (~16px). Inherits the dark-frame label colour. */
@@ -36,97 +50,121 @@ export interface StatRowStep {
   /** The single pivotal tile — rendered in `--accent` instead of
    *  `--brand-ink`. At most one step should set this. */
   pivotal?: boolean
+  /** What a copyable tile writes to the clipboard. Defaults to `value`;
+   *  set it when the display is rounded (e.g. "833.3K") and the exact
+   *  figure is what the user wants. */
+  copyValue?: string
 }
 
 export interface StatRowProps {
   steps: StatRowStep[]
+  /** Make every tile's figure a copy-to-clipboard button. */
+  copyable?: boolean
   className?: string
 }
 
-export function StatRow({ steps, className }: StatRowProps) {
+export function StatRow({ steps, copyable = false, className }: StatRowProps) {
   return (
-    <div className={className} style={{ display: 'flex', alignItems: 'stretch', gap: 0 }}>
-      {steps.map((s, i) => (
-        <Fragment key={i}>
-          {i > 0 && (
-            <div
-              className="flex items-center shrink-0"
-              style={{ padding: '0 2px', color: 'rgb(var(--text-muted))' }}
-              aria-hidden="true"
-            >
-              <ArrowRight size={14} strokeWidth={2.2} />
-            </div>
-          )}
-          <div
-            data-pivotal={s.pivotal ? 'true' : undefined}
+    <div
+      className={cn('grid grid-cols-2 gap-2 sm:flex sm:items-stretch sm:gap-0', className)}
+    >
+      {steps.map((s, i) => {
+        const panelStyle: CSSProperties = {
+          background: 'rgb(var(--bg-card))',
+          borderRadius: 10,
+          padding: '12px 10px',
+          minHeight: 46,
+        }
+        const figure = (
+          <span
+            className="font-extrabold tabular-nums"
             style={{
-              flex: 1,
-              minWidth: 0,
-              borderRadius: 'var(--radius-lg)',
-              padding: 5,
-              background: s.pivotal
+              fontSize: 22,
+              letterSpacing: '-0.025em',
+              lineHeight: 1,
+              color: s.pivotal
                 ? 'rgb(var(--accent))'
-                : 'rgb(var(--brand-ink))',
+                : 'rgb(var(--foreground))',
             }}
           >
-            {/* label row sits on the dark frame */}
+            {s.value}
+          </span>
+        )
+        return (
+          <Fragment key={i}>
+            {i > 0 && (
+              <div
+                className="hidden sm:flex items-center shrink-0"
+                style={{ padding: '0 2px', color: 'rgb(var(--text-muted))' }}
+                aria-hidden="true"
+              >
+                <ArrowRight size={14} strokeWidth={2.2} />
+              </div>
+            )}
             <div
-              className="flex items-center"
+              data-pivotal={s.pivotal ? 'true' : undefined}
               style={{
-                gap: 5,
-                padding: '4px 7px 6px',
-                color: 'rgb(255 255 255 / 0.7)',
+                flex: 1,
                 minWidth: 0,
+                borderRadius: 'var(--radius-lg)',
+                padding: 5,
+                background: s.pivotal
+                  ? 'rgb(var(--accent))'
+                  : 'rgb(var(--brand-ink))',
               }}
             >
-              <span className="inline-flex shrink-0">{s.icon}</span>
-              {/* Single-line cap: long labels truncate with an ellipsis
-                  (full text on hover via title) instead of wrapping to a
-                  second line and unbalancing the tile row. Keep labels short. */}
-              <span
-                className="font-bold uppercase"
-                title={s.label}
+              {/* label row sits on the dark frame */}
+              <div
+                className="flex items-center"
                 style={{
-                  fontSize: '9.5px',
-                  letterSpacing: '0.05em',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
+                  gap: 5,
+                  padding: '4px 7px 6px',
+                  color: 'rgb(255 255 255 / 0.7)',
                   minWidth: 0,
-                  flex: 1,
-                }}
-              >
-                {s.label}
-              </span>
-            </div>
-            {/* recessed white inner panel — fixed min-height so the tile
-                never resizes as the value's length changes */}
-            <div
-              className="grid place-items-center text-center"
-              style={{
-                background: 'rgb(var(--bg-card))',
-                borderRadius: 10,
-                padding: '12px 10px',
-                minHeight: 46,
-              }}
-            >
-              <span
-                className="font-extrabold tabular-nums"
-                style={{
-                  fontSize: 22,
-                  letterSpacing: '-0.025em',
-                  lineHeight: 1,
-                  color: s.pivotal
-                    ? 'rgb(var(--accent))'
-                    : 'rgb(var(--foreground))',
                 }}
               >
-                {s.value}
-              </span>
+                <span className="inline-flex shrink-0">{s.icon}</span>
+                {/* Single-line cap: long labels truncate with an ellipsis
+                    (full text on hover via title) instead of wrapping to a
+                    second line and unbalancing the tile row. Keep labels short. */}
+                <span
+                  className="font-bold uppercase"
+                  title={s.label}
+                  style={{
+                    fontSize: '9.5px',
+                    letterSpacing: '0.05em',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    minWidth: 0,
+                    flex: 1,
+                  }}
+                >
+                  {s.label}
+                </span>
+              </div>
+              {/* recessed white inner panel — fixed min-height so the tile
+                  never resizes as the value's length changes */}
+              {copyable ? (
+                <button
+                  type="button"
+                  onClick={() => void copyText(s.copyValue ?? s.value, s.label)}
+                  title={`Copy ${s.label}`}
+                  aria-label={`Copy ${s.label}: ${s.value}`}
+                  className="grid w-full place-items-center text-center cursor-pointer transition-[box-shadow,transform] hover:-translate-y-px hover:[box-shadow:var(--shadow-sm)] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+                  style={{ ...panelStyle, border: 'none' }}
+                >
+                  {figure}
+                </button>
+              ) : (
+                <div className="grid place-items-center text-center" style={panelStyle}>
+                  {figure}
+                </div>
+              )}
             </div>
-          </div>
-        </Fragment>
-      ))}
+          </Fragment>
+        )
+      })}
     </div>
   )
 }

package/src/styles.css

@@ -31,10 +31,24 @@
  *
  * Out of scope for Phase 1: .empty, .skel, .field*, .pg-header, .search-bar,
  * .breadcrumbs, .topbar, .checkbox, .radio, .switch, .reasoning-pulse,
- * .chat-md-list, .selection-reply-btn, ::selection. Those land when their
- * consumers (Field, EmptyState, PageHeader, etc.) arrive in later phases.
+ * .chat-md-list, .selection-reply-btn. Those land when their consumers
+ * (Field, EmptyState, PageHeader, etc.) arrive in later phases.
+ * `::selection` landed 2026-09-04 (ADR-145 amendment) — see TEXT SELECTION.
  */
 
+/* ---- TEXT SELECTION ---- */
+/**
+ * Explicit, token-backed highlight. Without this, the only `::selection`
+ * rule in the bundle came from `@lovett/shell` (`background:
+ * var(--selection-bg)`), whose variable is scoped to `.cs-frame` — so at
+ * the root it resolved to nothing and highlighted text was invisible.
+ * `--selection-bg` is now a public token in tokens.css (light + dark).
+ */
+::selection {
+  background: var(--selection-bg);
+  color: inherit;
+}
+
 /* ---- PANE MASK ---- */
 /**
  * Opaque fill matching the MainLayout content pane, for a sticky element that

package/src/tokens.css

@@ -95,6 +95,14 @@
   --accent-muted: 207 14 15 / 0.12;
   --accent-subtle: 207 14 15 / 0.06;
   --accent-glow: 207 14 15 / 0.25;
+  /* Text-selection highlight. PUBLIC, and a full colour (not a triple) so
+     `::selection { background: var(--selection-bg) }` is valid at :root.
+     `@lovett/shell` ships that exact global rule while defining the
+     variable only inside `.cs-frame`; unset at the root, `background`
+     computed to transparent and every selection in the app was invisible
+     (ADR-145 amendment, 2026-09-04). Neutral blue like a native selection,
+     not the accent — the accent earns impact from scarcity. */
+  --selection-bg: rgb(var(--info) / 0.34);
   /* Ink ON an accent fill. PUBLIC, and theme-independent because --accent is:
      the brand red does not change between light and dark, so its foreground
      must not either. Measures 5.64:1 on --accent.
@@ -460,6 +468,7 @@
 [data-theme="light"], [data-theme="combo"] {
   /* Brand accent — base stays, hover darkens, glow softens */
   --accent-hover: 178 8 9;
+  --selection-bg: rgb(var(--info) / 0.24);
   /* Brand red passes on a light card (5.64:1) — see the :root note. */
   --accent-ink: var(--accent);
   /* Solved against the DARKEST tint these inks land on, not the lightest.

package/src/tooltip.tsx

@@ -0,0 +1,297 @@
+/**
+ * Tooltip — a short, non-interactive label that appears on hover or focus.
+ *
+ * Wraps ONE trigger element (always "asChild": the child is cloned with the
+ * ref, the hover / focus handlers and `aria-describedby`; no wrapper node is
+ * added). The tip is `role="tooltip"`, portals to `document.body`, positions
+ * through `useAnchoredPosition` (default: above, centred; flips below when
+ * there is no room), enters with `.ds-enter-pop` once positioned, and is
+ * `pointer-events: none` so it never blocks the thing under it.
+ *
+ * Timing: hover opens after `openDelay` (300 ms) and closes after
+ * `closeDelay` (0 ms) — the delay is what keeps a mouse sweeping across a
+ * toolbar from flashing every label. Keyboard focus opens IMMEDIATELY (a
+ * keyboard user has already committed to the control); a focus that arrives
+ * by pointer (clicking a button) does not open it, and pressing the trigger
+ * dismisses it. Escape dismisses through the shared layer stack, so it never
+ * steals the keypress from a Modal underneath — a tooltip is pushed above
+ * the modal only while it is showing.
+ *
+ * Never traps or moves focus: the tip is not focusable and the trigger keeps
+ * whatever focus it had. Only non-interactive content belongs in it — the
+ * trigger should still have its own accessible name (`aria-label`) when it
+ * is icon-only; the tooltip DESCRIBES, it does not name.
+ *
+ * Promoted per ADR-0030 Decision G (meta-ads-audit-dashboard task manager:
+ * truncated cells, icon-only row actions, relative timestamps). Second
+ * consumer is the workspace app, which hand-rolls two today —
+ * `tools/_shared/calc/info-tip.tsx` and
+ * `components/ui/sidebar/rail-tooltip.tsx` — and leans on 900+ `title`
+ * attributes elsewhere.
+ *
+ * Token discipline: token-only inline surface like Kbd — INTERNAL
+ * `--popover` / `--popover-foreground` (allowed inside packages/ui) with
+ * public `--border`, `--shadow-md`, `--radius-sm`, `--space-*`. The same
+ * chrome family as Popover / DropdownMenu, so a tip and a menu read as one
+ * system. Geometry from the hook; motion from `.ds-enter-pop`, which
+ * honours prefers-reduced-motion in styles.css.
+ *
+ * Usage:
+ *
+ *   <Tooltip content="Archive task">
+ *     <Button variant="secondary" aria-label="Archive task"><Archive /></Button>
+ *   </Tooltip>
+ *
+ *   <Tooltip content={fullTitle} side="bottom" align="start">
+ *     <span className="truncate">{fullTitle}</span>
+ *   </Tooltip>
+ */
+
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type FocusEvent as ReactFocusEvent,
+  type HTMLAttributes,
+  type PointerEvent as ReactPointerEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from './lib/utils'
+import { composeRefs } from './lib/refs'
+import { useLayer } from './lib/layer-stack'
+import { useAnchoredPosition, type AnchorAlign, type AnchorSide } from './lib/anchor'
+
+export interface TooltipProps {
+  /** The tip's content. Nothing renders (children pass through untouched) when null. */
+  content: ReactNode
+  /** Exactly one element — it becomes the trigger. */
+  children: ReactElement<TooltipTriggerProps>
+  /** Default `top`. Flips when it cannot fit. */
+  side?: AnchorSide
+  /** Default `center`. */
+  align?: AnchorAlign
+  /** Gap from the trigger, px. Default 6. */
+  offset?: number
+  /** Hover-open delay, ms. Default 300. Focus opens immediately. */
+  openDelay?: number
+  /** Close delay, ms. Default 0. */
+  closeDelay?: number
+  /** Controlled open state. Omit for internal state. */
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Extra classes on the tip surface. */
+  className?: string
+}
+
+/** What the cloned trigger element must accept. */
+export type TooltipTriggerProps = HTMLAttributes<HTMLElement> & {
+  ref?: Ref<HTMLElement>
+}
+
+const TOOLTIP_SURFACE_STYLE: CSSProperties = {
+  background: 'rgb(var(--popover))',
+  color: 'rgb(var(--popover-foreground))',
+  border: '1px solid rgb(var(--border))',
+  boxShadow: 'var(--shadow-md)',
+  borderRadius: 'var(--radius-sm)',
+  padding: 'var(--space-1) var(--space-2)',
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  offset = 6,
+  openDelay = 300,
+  closeDelay = 0,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  className,
+}: TooltipProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen))
+  const isControlled = openProp !== undefined
+  const open = isControlled ? Boolean(openProp) : uncontrolledOpen
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next)
+      onOpenChange?.(next)
+    },
+    [isControlled, onOpenChange],
+  )
+
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const tipRef = useRef<HTMLDivElement | null>(null)
+  const timerRef = useRef<number | null>(null)
+  // Set on pointerdown, cleared on the next pointerup / pointercancel
+  // anywhere: a focus that arrives during that window came from the pointer,
+  // not the keyboard. The document listener is held in a ref so an
+  // interrupted press (unmount mid-press, a second pointerdown) removes it
+  // rather than leaving a stale closure on document.
+  const pointerDownRef = useRef(false)
+  const pressEndListenerRef = useRef<(() => void) | null>(null)
+  const clearPressEndListener = useCallback(() => {
+    const listener = pressEndListenerRef.current
+    if (listener === null) return
+    pressEndListenerRef.current = null
+    document.removeEventListener('pointerup', listener)
+    document.removeEventListener('pointercancel', listener)
+  }, [])
+  useEffect(() => clearPressEndListener, [clearPressEndListener])
+
+  const tipId = `tooltip-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+  useEffect(() => clearTimer, [clearTimer])
+
+  const scheduleOpen = useCallback(
+    (delay: number) => {
+      clearTimer()
+      if (delay <= 0) {
+        setOpen(true)
+        return
+      }
+      timerRef.current = window.setTimeout(() => {
+        timerRef.current = null
+        setOpen(true)
+      }, delay)
+    },
+    [clearTimer, setOpen],
+  )
+  const scheduleClose = useCallback(
+    (delay: number) => {
+      clearTimer()
+      if (delay <= 0) {
+        setOpen(false)
+        return
+      }
+      timerRef.current = window.setTimeout(() => {
+        timerRef.current = null
+        setOpen(false)
+      }, delay)
+    },
+    [clearTimer, setOpen],
+  )
+
+  const {
+    ref: positionRef,
+    style: positionStyle,
+    placement,
+    positioned,
+  } = useAnchoredPosition<HTMLDivElement>({
+    anchorRef: triggerRef,
+    side,
+    align,
+    offset,
+    enabled: open,
+  })
+
+  useLayer({
+    enabled: open,
+    kind: 'popover',
+    elementRef: tipRef,
+    onEscape: () => {
+      clearTimer()
+      setOpen(false)
+    },
+  })
+
+  const tipRefs = useMemo(
+    () => composeRefs<HTMLDivElement>(tipRef, positionRef),
+    [positionRef],
+  )
+
+  if (!isValidElement<TooltipTriggerProps>(children)) {
+    throw new Error('Tooltip expects exactly one element child to use as its trigger.')
+  }
+  if (content === null || content === undefined || content === false) return children
+
+  const childProps = children.props
+  const describedBy = open
+    ? [childProps['aria-describedby'], tipId].filter(Boolean).join(' ')
+    : childProps['aria-describedby']
+
+  const trigger = cloneElement(children, {
+    ref: composeRefs<HTMLElement>(childProps.ref, triggerRef),
+    'aria-describedby': describedBy,
+    onPointerEnter: (event: ReactPointerEvent<HTMLElement>) => {
+      childProps.onPointerEnter?.(event)
+      // Touch has no hover; a long-press tooltip is a different pattern.
+      if (event.pointerType === 'touch') return
+      scheduleOpen(openDelay)
+    },
+    onPointerLeave: (event: ReactPointerEvent<HTMLElement>) => {
+      childProps.onPointerLeave?.(event)
+      scheduleClose(closeDelay)
+    },
+    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => {
+      childProps.onPointerDown?.(event)
+      pointerDownRef.current = true
+      clearPressEndListener()
+      const onPressEnd = () => {
+        pointerDownRef.current = false
+        clearPressEndListener()
+      }
+      pressEndListenerRef.current = onPressEnd
+      document.addEventListener('pointerup', onPressEnd)
+      document.addEventListener('pointercancel', onPressEnd)
+      // Pressing the trigger is the user acting on it; the label is in the way.
+      clearTimer()
+      setOpen(false)
+    },
+    onFocus: (event: ReactFocusEvent<HTMLElement>) => {
+      childProps.onFocus?.(event)
+      if (pointerDownRef.current) return
+      scheduleOpen(0)
+    },
+    onBlur: (event: ReactFocusEvent<HTMLElement>) => {
+      childProps.onBlur?.(event)
+      scheduleClose(0)
+    },
+  })
+
+  return (
+    <>
+      {trigger}
+      {open && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={tipRefs}
+              id={tipId}
+              role="tooltip"
+              data-slot="tooltip"
+              data-state="open"
+              data-side={placement?.side}
+              data-align={placement?.align}
+              data-positioned={positioned ? 'true' : 'false'}
+              className={cn(
+                'pointer-events-none fixed z-[110] max-w-xs text-xs font-medium leading-snug',
+                positioned && 'ds-enter-pop',
+                className,
+              )}
+              style={{ ...positionStyle, ...TOOLTIP_SURFACE_STYLE }}
+            >
+              {content}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  )
+}