@lovett/ui 0.0.9 → 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
@@ -131,6 +145,34 @@
   box-shadow: var(--ring-focus);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+ * BASELINE FOCUS INDICATOR
+ *
+ * Until this existed, only elements that opted in — primitives via .btn /
+ * .input-shell, and hand-written `focus-visible:` classes — showed OUR focus
+ * ring. Everything else fell through to the browser's `outline: auto`, which
+ * on macOS paints in the USER'S SYSTEM ACCENT COLOUR. So a keyboard user with
+ * an amber system accent saw an amber ring on most controls and our red ring
+ * on a few, in the same tab sequence. Measured in the Generate lens: 115
+ * buttons, 35 with a ring.
+ *
+ * `:where()` gives this ZERO specificity, so it is a floor, not an override —
+ * .btn, .input-shell, and any component or utility class still win.
+ * ───────────────────────────────────────────────────────────────────────── */
+@layer base {
+  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex^='-'])):focus-visible {
+    /* OUTLINE, not box-shadow, deliberately. Tailwind's shadow/ring utilities
+       compose onto `box-shadow`, so a zero-specificity box-shadow baseline loses
+       to any element carrying one (e.g. a `ring-1` selected state) and silently
+       renders nothing. `outline` is untouched by that chain, follows
+       border-radius in every modern browser, and matches --ring-focus's geometry.
+       Elements with their own ring set `outline: none` alongside it, so they
+       override this cleanly rather than double-drawing. */
+    outline: 2px solid rgb(var(--accent));
+    outline-offset: 0;
+  }
+}
+
 .btn-primary {
   background: rgb(var(--accent));
   color: white;

package/src/theme-v2.css

@@ -1,46 +1,7 @@
 /*
  * @lovett/ui — v2 theme, SCOPED.
  *
- * ─────────────────────────────────────────────────────────────────────
- * SUPERSEDED FOR NEW WORK by `src/v2/theme.css`.
- *
- * That file is the OKLCH design layer: a namespaced `--lv-*` token set,
- * an explicit surface ladder, elevation as shadow + inner highlight, and
- * both appearances driven by `prefers-color-scheme` AND `data-theme`.
- * New surfaces should import it and use `@lovett/ui/v2`.
- *
- * ── THAT DIRECTIVE IS NO LONGER TRUE (2026-08-20) ─────────────────────────
- * `@lovett/ui/v2` is NOT EXPORTED any more. The `./v2`, `./v2/theme.css` and
- * `./v2/__demo__/showcase` entries were removed from `package.json` under
- * ADR-CE-0027 D6 step 5, on the owner's decision, after a search that reaches
- * gitignored trees confirmed **zero consumers family-wide**. It cleared four
- * name collisions (`EmptyState`, `EmptyStateProps`, `Panel`, `Toolbar`).
- *
- * NO SOURCE WAS DELETED. `src/v2/` is intact and the removal is three lines of
- * `exports` to restore, which is why it was done this way rather than by
- * deleting components.
- *
- * THIS FILE STAYS AND IS STILL LIVE — two ignite worktrees import it as
- * `@lovett/ui/theme-v2.css` in their `index.css`. Do not confuse it with
- * `src/v2/theme.css`, which is a different, larger file and is the one that
- * went unexported.
- *
- * Consequence to know about: the v2 BRIDGE below (section 3) maps `--lv-*` so
- * v2 primitives render in a `data-ds="v2"` subtree. With no public `./v2`
- * entry, nothing can import those primitives, so the bridge is inert. It is
- * left in place because it is harmless, because removing it is the source
- * surgery this change deliberately avoided, and because it becomes live again
- * the moment the exports are restored.
- *
- * This file stays because live consumers depend on it. Everything ABOVE
- * the "APPENDED" marker near the bottom is untouched and still generated
- * — every existing declaration resolves to exactly the value it always
- * did. The appended region is hand-authored and additive: it bridges
- * this scope onto the v2 token names and adds the automatic-dark support
- * this file never had. If you re-run the generator, re-apply that region.
- * ─────────────────────────────────────────────────────────────────────
- *
- * GENERATED (region above the marker). Regenerate with:
+ * GENERATED. Regenerate with:
  *   python3 scripts/figma/emit-theme.py <corpus> --out packages/ui/src/theme-v2.css
  *
  * Opt in by putting `data-ds="v2"` on any element. Everything inside it
@@ -193,8 +154,11 @@
   --card-shadow-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 6px 14px -2px oklch(0 0 0 / 0.08), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
   --inset-highlight: 255 255 255 / 0.9;
   --modal-overlay: 0 0 0 / 0.32;
-  --ring-focus: 0 0 0 3px rgb(221 40 34 / 0.22);
-  --ring-error: 0 0 0 3px rgb(151 93 1 / 0.22);
+  /* Solid, matching the base theme — a 3px translucent halo measures ~1.4:1
+     against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
+     indicator. See the note on --ring-focus in tokens.css. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
 }
 
 /*
@@ -260,207 +224,5 @@
   --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
   --inset-highlight: 255 255 255 / 0.05;
   --modal-overlay: 0 0 0 / 0.7;
-  --ring-focus: 0 0 0 3px rgb(228 70 58 / 0.3);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   ═══════════════════════════ APPENDED ═══════════════════════════════
-   Hand-authored, additive. Nothing above this line was changed.
-   Three things this region adds:
-
-     1. AUTOMATIC DARK. The generated file only goes dark on an explicit
-        `data-theme="dark"`. A surface that wants to follow the OS opts
-        in with `data-theme="auto"`; the block below is a verbatim copy
-        of the explicit-dark map, because a media query and an attribute
-        selector cannot share a rule. Keep the two in sync.
-
-     2. THE SURFACE LADDER, as first-class names. The generated file
-        encodes the ladder implicitly across a dozen aliases
-        (--page-bg / --bg-surface / --bg-card / --tray-bg ...). These
-        five names say what the tier IS, which is what a component
-        should be reading.
-
-     3. A BRIDGE to the v2 `--lv-*` tokens, so `@lovett/ui/v2`
-        primitives render correctly inside an existing `data-ds="v2"`
-        subtree without also loading `src/v2/theme.css`. Migration can
-        then happen one component at a time.
-   ══════════════════════════════════════════════════════════════════════ */
-
-/* ── 1. Automatic dark (opt-in via data-theme="auto") ─────────────── */
-
-@media (prefers-color-scheme: dark) {
-  [data-ds='v2'][data-theme='auto'] {
-    color-scheme: dark;
-
-    --page-bg: 11 16 28;
-    --background: 11 16 28;
-    --main-content-bg: 11 16 28;
-    --bg-surface: 27 35 51;
-    --surface-frame: 27 35 51;
-    --card-frame-bg: 27 35 51;
-    --bg-card: 48 58 80;
-    --card: 48 58 80;
-    --tray-bg: 48 58 80;
-    --bg-elevated: 70 82 109;
-    --surface-raised: 70 82 109;
-    --popover: 70 82 109;
-    --bg-input: 27 35 51;
-    --bg-card-hover: 70 82 109;
-    --bg-input-hover: 48 58 80;
-    --muted: 48 58 80;
-    --canvas-placement-bg: 27 35 51;
-    --foreground: 250 251 252;
-    --card-foreground: 250 251 252;
-    --popover-foreground: 250 251 252;
-    --text-secondary: 192 193 195;
-    --muted-foreground: 192 193 195;
-    --text-tertiary: 162 163 165;
-    --text-muted: 133 134 136;
-    --secondary: 48 58 80;
-    --secondary-foreground: 250 251 252;
-    --border: 255 255 255 / 0.08;
-    --border-strong: 255 255 255 / 0.14;
-    --border-card: 255 255 255 / 0.08;
-    --border-input: 255 255 255 / 0.14;
-    --main-content-border: 255 255 255 / 0.08;
-    --accent: 228 70 58;
-    --accent-bright: 251 114 99;
-    --accent-hover: 251 114 99;
-    --primary: 228 70 58;
-    --primary-hover: 251 114 99;
-    --success: 80 188 126;
-    --warning: 190 160 64;
-    --destructive: 218 145 55;
-    --info: 181 134 254;
-    --success-bg: 6 160 93 / 0.16;
-    --warning-bg: 161 131 18 / 0.16;
-    --destructive-bg: 187 116 2 / 0.16;
-    --info-bg: 155 97 235 / 0.16;
-    --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.08);
-    --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.4);
-    --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.5);
-    --shadow-xl: 0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px oklch(0 0 0 / 0.55);
-    --shadow-2xl: 0 0 0 1px oklch(1 0 0 / 0.1), 0 24px 60px oklch(0 0 0 / 0.6);
-    --card-shadow-rest: 0 0 0 1px oklch(1 0 0 / 0.08);
-    --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
-    --inset-highlight: 255 255 255 / 0.05;
-    --modal-overlay: 0 0 0 / 0.7;
-    --ring-focus: 0 0 0 3px rgb(228 70 58 / 0.3);
-  }
-}
-
-/* `data-theme` must win in BOTH directions: forced light under a dark OS
-   is as much a requirement as forced dark under a light one. The two
-   explicit values are already unconditional rules, so they beat the
-   media query above by source order; this only declares the native
-   `color-scheme` so form controls and scrollbars agree. */
-[data-ds='v2'][data-theme='light'] {
-  color-scheme: light;
-}
-[data-ds='v2'][data-theme='dark'] {
-  color-scheme: dark;
-}
-
-/* ── 2. The surface ladder, named ─────────────────────────────────── */
-/* page → shell → section → card, each one notch brighter; `inset` goes
-   the other way, because a recessed panel inside a card is the system's
-   strongest single move and it only reads as recessed if it is darker.
-   Aliases, not new values — these resolve to what the tiers already are. */
-
-[data-ds='v2'] {
-  --surface-page: rgb(var(--page-bg));
-  --surface-shell: rgb(var(--bg-surface));
-  --surface-section: rgb(var(--muted));
-  --surface-card: rgb(var(--bg-card));
-  --surface-inset: rgb(var(--canvas-placement-bg));
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-ds='v2'][data-theme='auto'] {
-    --surface-section: rgb(27 35 51);
-    --surface-inset: rgb(27 35 51);
-  }
-}
-
-[data-ds='v2'][data-theme='dark'] {
-  --surface-section: rgb(27 35 51);
-  --surface-inset: rgb(27 35 51);
-}
-
-/* ── 3. Bridge to the v2 `--lv-*` tokens ──────────────────────────── */
-/* Lets `@lovett/ui/v2` primitives render inside this scope. Only the
-   tokens v2 components actually read are mapped; the scales (space,
-   radius, type, motion) are appearance-independent and are defined
-   unconditionally in `src/v2/theme.css`, which must still be imported
-   for those. This block covers colour and depth only — the parts that
-   have to agree with whichever theme the subtree is on. */
-
-[data-ds='v2'] {
-  --lv-surface-page: var(--surface-page);
-  --lv-surface-shell: var(--surface-shell);
-  --lv-surface-section: var(--surface-section);
-  --lv-surface-card: var(--surface-card);
-  --lv-surface-inset: var(--surface-inset);
-  --lv-surface-raised: rgb(var(--surface-raised));
-  --lv-surface-overlay: rgb(var(--modal-overlay));
-  --lv-surface-hover: rgb(var(--bg-card-hover));
-  --lv-surface-active: rgb(var(--border-strong));
-  --lv-surface-selected: rgb(var(--accent-muted));
-
-  --lv-text-primary: rgb(var(--foreground));
-  --lv-text-secondary: rgb(var(--text-secondary));
-  --lv-text-tertiary: rgb(var(--text-tertiary));
-  --lv-text-faint: rgb(var(--text-muted));
-  --lv-text-disabled: rgb(var(--text-muted));
-  --lv-text-on-accent: rgb(var(--primary-foreground));
-
-  --lv-hairline: rgb(var(--border));
-  --lv-hairline-strong: rgb(var(--border-strong));
-  --lv-border-field: rgb(var(--border-input));
-
-  --lv-accent: rgb(var(--accent));
-  --lv-accent-hover: rgb(var(--accent-hover));
-  --lv-accent-active: rgb(var(--accent-hover));
-  --lv-accent-text: rgb(var(--accent));
-  --lv-accent-mark: rgb(var(--accent-bright));
-  --lv-accent-soft: rgb(var(--accent-muted));
-  --lv-accent-rule: rgb(var(--accent-glow));
-  --lv-focus: rgb(var(--ring));
-
-  /* The generated palette's semantic reassignment carries straight over:
-     success green, warning gold, destructive amber, info violet. v2's
-     own danger hue (48°) was chosen for the same reason this file moved
-     destructive off red — the brand is red, and two reds on one page
-     cannot be told apart. */
-  --lv-success-text: rgb(var(--success));
-  --lv-success-mark: rgb(var(--success));
-  --lv-success-soft: rgb(var(--success-bg));
-  --lv-success-rule: rgb(var(--success));
-
-  --lv-warning-text: rgb(var(--warning));
-  --lv-warning-mark: rgb(var(--warning));
-  --lv-warning-soft: rgb(var(--warning-bg));
-  --lv-warning-rule: rgb(var(--warning));
-
-  --lv-danger-text: rgb(var(--destructive));
-  --lv-danger-mark: rgb(var(--destructive));
-  --lv-danger-soft: rgb(var(--destructive-bg));
-  --lv-danger-rule: rgb(var(--destructive));
-
-  --lv-info-text: rgb(var(--info));
-  --lv-info-mark: rgb(var(--info));
-  --lv-info-soft: rgb(var(--info-bg));
-  --lv-info-rule: rgb(var(--info));
-
-  --lv-highlight: inset 0 1px 0 0 rgb(var(--inset-highlight));
-  --lv-elev-0: none;
-  --lv-elev-1: var(--shadow-sm);
-  --lv-elev-2: var(--shadow-md);
-  --lv-elev-3: var(--shadow-lg);
-  --lv-elev-4: var(--shadow-xl);
-  --lv-elev-inset: inset 0 1px 2px 0 oklch(0 0 0 / 0.07),
-    inset 0 0 0 1px rgb(var(--border));
-
-  --lv-skeleton-base: rgb(var(--border-strong));
-  --lv-skeleton-sheen: rgb(var(--border));
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
 }