@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/__tests__/Input.test.tsx

@@ -0,0 +1,30 @@
+/* Input (native) — the `numeral` variant added for the edit-set weight/reps
+   readout (design `.strow .sv`): 20px bold display-font, centered, with the
+   unit suffix styled as a smaller dim companion instead of the default mono
+   far-right suffix. */
+import { describe, expect, test } from 'vitest';
+import { Input } from '../Input';
+import { findAll, hasDeclaration, parse, render } from './markup';
+
+describe('Input variant', () => {
+  test("variant='numeral' centers a 20px bold display-font value", () => {
+    const root = parse(render(Input, { variant: 'numeral', value: '120', unit: 'kg' }));
+    const field = findAll(root, (el) => el.tag === 'input')[0];
+    expect(field).toBeDefined();
+    expect(hasDeclaration(field, 'font-size:20px')).toBe(true);
+    expect(hasDeclaration(field, 'font-weight:700')).toBe(true);
+    expect(hasDeclaration(field, 'text-align:center')).toBe(true);
+  });
+
+  test('default variant does NOT carry the numeral font size', () => {
+    const root = parse(render(Input, { value: '120' }));
+    const field = findAll(root, (el) => el.tag === 'input')[0];
+    expect(field).toBeDefined();
+    expect(hasDeclaration(field, 'font-size:20px')).toBe(false);
+  });
+
+  test("variant='numeral' still renders the unit suffix text", () => {
+    const html = render(Input, { variant: 'numeral', value: '120', unit: 'kg' });
+    expect(html).toContain('kg');
+  });
+});

package/src/components/__tests__/LineChart.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, test } from 'vitest';
+import { LineChart } from '../LineChart';
+import { ancestors, findByText, hasDeclaration, inlineStyle, parse, render } from './markup';
+
+/* Chip-pill edge clamping: a label anchored near the right edge of the plot
+ * flips to hang INWARD (align-items:flex-end wrapper) so the pill never leaves
+ * the viewBox; a left-edge label hangs right (flex-start); an interior label
+ * stays centered on its point. Geometry: VB_W=560, PAD_X=14, 6 points →
+ * x = 14 + (i/5)*532; chip width ≈ len*5.35+12. */
+
+const DATA = [10, 20, 30, 40, 50, 60];
+
+/** the overlay wrapper View that positions a chip (has the left:% anchor) */
+function chipWrapper(html: string, text: string) {
+  const root = parse(html);
+  const label = findByText(root, text);
+  expect(label, `chip text "${text}" not rendered`).toBeTruthy();
+  const wrapper = ancestors(label!).find((a) => (a.attrs.style ?? '').includes('left:'));
+  expect(wrapper, `chip "${text}" has no positioned wrapper`).toBeTruthy();
+  return wrapper!;
+}
+
+describe('LineChart chip edge clamping', () => {
+  const html = render(LineChart, {
+    data: DATA,
+    labels: [
+      { index: 5, text: 'EDGE LABEL' }, // x=546; half-width 32.75 → crosses 560
+      { index: 2, text: 'MIDDLE' }, // x=226.8; fully interior
+      { index: 0, text: 'START LABEL' }, // x=14; half-width crosses 0
+    ],
+  });
+
+  test('label at the last point near the right edge hangs inward (stays inside the viewBox)', () => {
+    const wrapper = chipWrapper(html, 'EDGE LABEL');
+    expect(hasDeclaration(wrapper, 'align-items:flex-end')).toBe(true);
+    expect(hasDeclaration(wrapper, 'align-items:center')).toBe(false);
+    // anchored exactly on the data point — 546/560 of the plot width
+    expect(inlineStyle(wrapper).left).toBe('97.5%');
+  });
+
+  test('interior label stays centered on its point', () => {
+    const wrapper = chipWrapper(html, 'MIDDLE');
+    expect(hasDeclaration(wrapper, 'align-items:center')).toBe(true);
+    expect(hasDeclaration(wrapper, 'align-items:flex-end')).toBe(false);
+    expect(hasDeclaration(wrapper, 'align-items:flex-start')).toBe(false);
+  });
+
+  test('label at the first point near the left edge hangs right', () => {
+    const wrapper = chipWrapper(html, 'START LABEL');
+    expect(hasDeclaration(wrapper, 'align-items:flex-start')).toBe(true);
+    expect(hasDeclaration(wrapper, 'align-items:center')).toBe(false);
+  });
+
+  test('a series label defaulting to the last point also flips to hang inward', () => {
+    const seriesHtml = render(LineChart, {
+      data: DATA,
+      series: [{ data: [15, 25, 35, 45, 55, 65], label: 'COHORT MEDIAN' }],
+    });
+    const wrapper = chipWrapper(seriesHtml, 'COHORT MEDIAN');
+    expect(hasDeclaration(wrapper, 'align-items:flex-end')).toBe(true);
+  });
+});

package/src/components/__tests__/ListRow.test.tsx

@@ -0,0 +1,28 @@
+/* ListRow (native) — `activeTint` overrides the ACTIVE-state background
+   (design `.exl.on` cyan); default active keeps the accent tint. Mirrors the
+   web twin's --lk-listrow-active-bg custom property. */
+import { describe, expect, test } from 'vitest';
+import { ListRow } from '../ListRow';
+import { findAll, hasDeclaration, parse, render, type El } from './markup';
+
+/** The element paints the background, whether react-native-web serialized it
+ *  as an atomic class (registered style) or an inline style (dynamic tint). */
+function paintsBg(el: El, rgba: string): boolean {
+  return (el.attrs.style ?? '').includes(rgba) || hasDeclaration(el, `background-color:${rgba}`);
+}
+
+describe('ListRow activeTint', () => {
+  test('active + activeTint paints the override instead of the accent tint', () => {
+    const root = parse(
+      render(ListRow, { title: 'Incline DB Press', active: true, activeTint: 'rgba(34,211,238,0.09)' }),
+    );
+    expect(findAll(root, (el) => paintsBg(el, 'rgba(34,211,238,0.09')).length).toBeGreaterThan(0);
+    expect(findAll(root, (el) => paintsBg(el, 'rgba(124,92,255,0.14')).length).toBe(0);
+  });
+
+  test('active without a tint keeps the default accent fill', () => {
+    const root = parse(render(ListRow, { title: 'Row', active: true }));
+    expect(findAll(root, (el) => paintsBg(el, 'rgba(124,92,255,0.14')).length).toBeGreaterThan(0);
+    expect(findAll(root, (el) => paintsBg(el, 'rgba(34,211,238,0.09')).length).toBe(0);
+  });
+});

package/src/components/__tests__/PkChart.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'vitest';
+import { PkChart, beatPeriodMs } from '../PkChart';
+import { render } from './markup';
+
+/* Heartbeat pacing: the live (raw-`samples`) trace beats once per
+ * 60000/bpm ms; a non-positive/non-finite bpm or `still` must render NO beat
+ * elements. The sonar ring's first animation frame carries scale(0.5) inline —
+ * beat elements are detectable in static markup by that transform. */
+
+const LIVE_SAMPLES = [1, 4, 2, 8, 3];
+
+const hasBeatRing = (html: string) => /scale\(0\.5\)/.test(html);
+
+describe('beatPeriodMs (bpm → beat period)', () => {
+  test('period is 60000/bpm', () => {
+    expect(beatPeriodMs(60)).toBe(1000);
+    expect(beatPeriodMs(64)).toBe(937.5);
+    expect(beatPeriodMs(120)).toBe(500);
+  });
+
+  test('non-positive and non-finite bpm produce no beat (0)', () => {
+    expect(beatPeriodMs(0)).toBe(0);
+    expect(beatPeriodMs(-5)).toBe(0);
+    expect(beatPeriodMs(Number.NaN)).toBe(0);
+    expect(beatPeriodMs(Number.POSITIVE_INFINITY)).toBe(0);
+  });
+});
+
+describe('PkChart beat elements in markup', () => {
+  test('live samples + valid bpm render the heartbeat ring', () => {
+    expect(hasBeatRing(render(PkChart, { samples: LIVE_SAMPLES, bpm: 64 }))).toBe(true);
+  });
+
+  test('`still` renders no beat', () => {
+    expect(hasBeatRing(render(PkChart, { samples: LIVE_SAMPLES, bpm: 64, still: true }))).toBe(false);
+  });
+
+  test('bpm <= 0 / non-finite renders no beat', () => {
+    expect(hasBeatRing(render(PkChart, { samples: LIVE_SAMPLES, bpm: 0 }))).toBe(false);
+    expect(hasBeatRing(render(PkChart, { samples: LIVE_SAMPLES, bpm: -10 }))).toBe(false);
+    expect(hasBeatRing(render(PkChart, { samples: LIVE_SAMPLES, bpm: Number.NaN }))).toBe(false);
+  });
+
+  test('the doses (non-live) variant never beats, even with a valid bpm', () => {
+    expect(hasBeatRing(render(PkChart, { bpm: 64 }))).toBe(false);
+  });
+});

package/src/components/__tests__/PrBadge.test.tsx

@@ -0,0 +1,32 @@
+/* PrBadge (native) — the solid red PR flag: PR-red fill, white mono label
+   (uppercased), 4px radius, and the sm size. Mirrors the web twin. */
+import { describe, expect, test } from 'vitest';
+import { PrBadge, PR_RED } from '../PrBadge';
+import { findByText, hasDeclaration, parse, render } from './markup';
+
+describe('PrBadge', () => {
+  test('renders the default PR label on the PR-red 4px-radius tab', () => {
+    const root = parse(render(PrBadge, {}));
+    const label = findByText(root, 'PR');
+    expect(label).toBeDefined();
+    expect(PR_RED).toBe('#FF4757');
+    // the badge surface carries the red fill + the 4px radius
+    const badge = label!.parent!;
+    const carries = (decl: string) => (badge.attrs.style ?? '').includes(decl) || hasDeclaration(badge, decl);
+    expect(carries('255,71,87')).toBe(true); // PR-red fill (rgb/rgba serialization-agnostic)
+    // react-native-web expands borderRadius into per-corner longhands
+    expect(carries('border-bottom-left-radius:4px')).toBe(true);
+  });
+
+  test('uppercases custom labels (PrCard state tags)', () => {
+    const root = parse(render(PrBadge, { label: 'At Peak' }));
+    expect(findByText(root, 'AT PEAK')).toBeDefined();
+  });
+
+  test('sm renders the tighter 8.5px label', () => {
+    const root = parse(render(PrBadge, { size: 'sm' }));
+    const label = findByText(root, 'PR');
+    expect(label).toBeDefined();
+    expect(hasDeclaration(label!, 'font-size:8.5px')).toBe(true);
+  });
+});

package/src/components/__tests__/PrCard.test.tsx

@@ -0,0 +1,49 @@
+/* PrCard (native) — the red-hot treatment (new/atPeak: tinted border + red
+   PrBadge tag), the quiet amber offPeak text tag, and the content lines.
+   Mirrors the web twin. */
+import { describe, expect, test } from 'vitest';
+import { PrCard } from '../PrCard';
+import { findAll, findByText, hasDeclaration, parse, render, type El } from './markup';
+
+/** Any element whose classes or inline style carry the rgb triplet (colors
+ *  live in react-native-web's atomic-class sheet, not the HTML). */
+function anyWithColor(root: El, rgb: string): boolean {
+  return findAll(root, (el) => (el.attrs.style ?? '').includes(rgb) || hasDeclaration(el, rgb)).length > 0;
+}
+
+describe('PrCard', () => {
+  test('renders name, kind (uppercased), value, detail; no tag without state', () => {
+    const root = parse(
+      render(PrCard, { name: 'Back Squat', kind: 'Estimated 1RM', value: '130 kg', detail: 'today · +2kg' }),
+    );
+    expect(findByText(root, 'Back Squat')).toBeDefined();
+    expect(findByText(root, 'ESTIMATED 1RM')).toBeDefined();
+    expect(findByText(root, '130 kg')).toBeDefined();
+    expect(findByText(root, 'today · +2kg')).toBeDefined();
+    expect(findByText(root, 'NEW')).toBeUndefined();
+    expect(findByText(root, 'OFF PEAK')).toBeUndefined();
+  });
+
+  test('new → red border treatment + NEW badge', () => {
+    const root = parse(render(PrCard, { name: 'A', kind: '1RM', value: '130 kg', state: 'new' }));
+    expect(findByText(root, 'NEW')).toBeDefined();
+    expect(anyWithColor(root, '255,71,87')).toBe(true); // PR-red border/glow + badge fill
+  });
+
+  test('atPeak → AT PEAK badge', () => {
+    const root = parse(render(PrCard, { name: 'A', kind: '1RM', value: '130 kg', state: 'atPeak' }));
+    expect(findByText(root, 'AT PEAK')).toBeDefined();
+  });
+
+  test('offPeak → amber text tag, no red treatment', () => {
+    const root = parse(render(PrCard, { name: 'A', kind: '1RM', value: '130 kg', state: 'offPeak' }));
+    const tag = findByText(root, 'OFF PEAK');
+    expect(tag).toBeDefined();
+    expect(anyWithColor(root, '255,71,87')).toBe(false); // no PR-red anywhere
+  });
+
+  test('onPress renders a pressable card (button role)', () => {
+    const html = render(PrCard, { name: 'A', kind: '1RM', value: '130 kg', onPress: () => {} });
+    expect(html).toContain('role="button"');
+  });
+});

package/src/components/__tests__/RestTimer.test.tsx

@@ -0,0 +1,94 @@
+/* RestTimer (native) — m:ss formatting, remaining-fraction clamp, the mint
+   arc dashoffset, the paused dim, and the Skip / sublabel / trailing slots.
+   Mirrors the web twin's contract (same geometry: r=50 → C ≈ 314.16). */
+import { createElement } from 'react';
+import { Text } from 'react-native';
+import { describe, expect, test } from 'vitest';
+import { RestTimer, formatRestTime, restFraction } from '../RestTimer';
+import { findByText, hasDeclaration, parse, render } from './markup';
+
+describe('formatRestTime', () => {
+  test('formats m:ss with zero-padded seconds (clamped at 0)', () => {
+    expect(formatRestTime(95)).toBe('1:35');
+    expect(formatRestTime(60)).toBe('1:00');
+    expect(formatRestTime(9)).toBe('0:09');
+    expect(formatRestTime(-5)).toBe('0:00');
+  });
+});
+
+describe('restFraction', () => {
+  test('clamps to 0–1 and guards totalSec ≤ 0', () => {
+    expect(restFraction(45, 90)).toBe(0.5);
+    expect(restFraction(120, 90)).toBe(1);
+    expect(restFraction(-3, 90)).toBe(0);
+    expect(restFraction(30, 0)).toBe(0);
+  });
+});
+
+describe('RestTimer', () => {
+  test('renders the centered mono time + label and a half-drained arc', () => {
+    const html = render(RestTimer, { remainingSec: 45, totalSec: 90 });
+    const root = parse(html);
+    expect(findByText(root, '0:45')).toBeDefined();
+    expect(findByText(root, 'REST')).toBeDefined(); // default label, uppercased
+    // C = 2π·50 ≈ 314.16 → offset at 50% ≈ 157.08
+    expect(html).toContain('157.07'); // dashoffset (float serialization tolerant)
+  });
+
+  test('renders sublabel, Skip button, and trailing slot', () => {
+    const html = render(RestTimer, {
+      remainingSec: 30,
+      totalSec: 90,
+      sublabel: 'Next: Bench Press · set 3 of 5',
+      onSkip: () => {},
+      trailing: createElement(Text, null, '128 bpm'),
+    });
+    const root = parse(html);
+    expect(findByText(root, 'Next: Bench Press · set 3 of 5')).toBeDefined();
+    expect(findByText(root, 'Skip')).toBeDefined();
+    expect(findByText(root, '128 bpm')).toBeDefined();
+  });
+
+  test('paused announces itself and drops the glow arc', () => {
+    const paused = render(RestTimer, { remainingSec: 30, totalSec: 90, paused: true });
+    expect(paused).toContain(', paused');
+    const live = render(RestTimer, { remainingSec: 30, totalSec: 90 });
+    expect(live).not.toContain(', paused');
+    // the glow duplicate (blur filter) only renders while running
+    expect(live).toContain('lk-resttimer-blur');
+    expect(paused).not.toContain('lk-resttimer-blur');
+  });
+
+  test('compact renders the 42px ring (r 18 → C ≈ 113.10) with the mint time inside', () => {
+    const html = render(RestTimer, {
+      remainingSec: 45,
+      totalSec: 90,
+      compact: true,
+      sublabel: 'Next 1:05',
+      onSkip: () => {},
+    });
+    const root = parse(html);
+    const time = findByText(root, '0:45')!;
+    expect(time).toBeDefined();
+    // compact readout is MINT (design `.rg .num`), not the hero white
+    expect(hasDeclaration(time, '52,245,197')).toBe(true);
+    // label moved OUT of the ring into the text column, above the sublabel
+    expect(findByText(root, 'REST')).toBeDefined();
+    expect(findByText(root, 'Next 1:05')).toBeDefined();
+    expect(findByText(root, 'Skip')).toBeDefined();
+    // compact geometry: C = 2π·18 ≈ 113.10 → offset at 50% ≈ 56.55
+    expect(html).toContain('113.10');
+    expect(html).toContain('56.5');
+    expect(html).not.toContain('157.0'); // no hero arc
+    // the glow duplicate arc still renders in compact
+    expect(html).toContain('lk-resttimer-blur');
+  });
+
+  test('hero default keeps the 116/r50 geometry (no compact readout)', () => {
+    const html = render(RestTimer, { remainingSec: 45, totalSec: 90 });
+    expect(html).toContain('157.07');
+    expect(html).not.toContain('113.10');
+    const time = findByText(parse(html), '0:45')!;
+    expect(hasDeclaration(time, '52,245,197')).toBe(false); // hero time stays text-white
+  });
+});

package/src/components/__tests__/SegmentedTabs.test.tsx

@@ -0,0 +1,58 @@
+/* SegmentedTabs (native) — the set-type COLOR tones (amber/cyan/violet/
+   magenta, design `.sg`): label tinted at ALL times, NO leading dot, active
+   segment painted tone@16% fill + tone@50% border; semantic tones (ok/canary/
+   danger) keep the leading dot + active-only tint. Mirrors the web twin. */
+import { describe, expect, test } from 'vitest';
+import { SegmentedTabs, type SegmentedTabItem } from '../SegmentedTabs';
+import { ancestors, findAll, findByText, hasDeclaration, parse, render, type El } from './markup';
+
+/** The element carries the color, whether react-native-web serialized it as
+ *  an atomic class or an inline style (dynamic style objects go inline). */
+function carriesColor(el: El, rgb: string): boolean {
+  return (el.attrs.style ?? '').includes(rgb) || hasDeclaration(el, rgb);
+}
+
+/** Elements whose INLINE style paints a background in the given rgb (the
+ *  leading dot / active fill — both dynamic, so always inline). */
+function bgWith(root: El, rgb: string): El[] {
+  return findAll(root, (el) => (el.attrs.style ?? '').includes(`background-color:rgba(${rgb}`));
+}
+
+const tabs: SegmentedTabItem[] = [
+  { label: 'Warm-up', tone: 'amber' },
+  { label: 'Working', tone: 'cyan' },
+  { label: 'OK', tone: 'ok' },
+];
+
+describe('SegmentedTabs color tones', () => {
+  test('color-tone labels are tinted even when INACTIVE, and render NO dot', () => {
+    const root = parse(render(SegmentedTabs, { tabs, active: 1 }));
+    // inactive amber label still tinted warn (#FFB020)
+    expect(carriesColor(findByText(root, 'Warm-up')!, '255,176,32')).toBe(true);
+    // ... but there is no amber DOT anywhere (the 6px tone dot is skipped)
+    expect(bgWith(root, '255,176,32').length).toBe(0);
+    // semantic 'ok' keeps its mint dot even while inactive
+    expect(bgWith(root, '52,245,197').length).toBe(1);
+  });
+
+  test('the ACTIVE color-tone segment paints tone@16% fill + tone@50% border', () => {
+    const root = parse(render(SegmentedTabs, { tabs, active: 1 }));
+    const label = findByText(root, 'Working')!;
+    expect(carriesColor(label, '34,211,238')).toBe(true); // cyan label
+    const tab = ancestors(label).find((a) => (a.attrs.style ?? '').includes('rgba(34,211,238,0.16'));
+    expect(tab).toBeDefined(); // 16% fill
+    expect((tab!.attrs.style ?? '').includes('rgba(34,211,238,0.5')).toBe(true); // 50% border
+  });
+
+  test('an INACTIVE color-tone segment has no fill/border paint', () => {
+    const root = parse(render(SegmentedTabs, { tabs, active: 1 }));
+    // amber is inactive — no 16% fill in amber anywhere
+    expect(findAll(root, (el) => (el.attrs.style ?? '').includes('rgba(255,176,32,0.16')).length).toBe(0);
+  });
+
+  test('semantic tones keep the active-only label tint (inactive stays dim)', () => {
+    const root = parse(render(SegmentedTabs, { tabs, active: 1 }));
+    // 'ok' is inactive here — its label must NOT be mint-tinted
+    expect(carriesColor(findByText(root, 'OK')!, '52,245,197')).toBe(false);
+  });
+});

package/src/components/__tests__/SessionBanner.test.tsx

@@ -0,0 +1,96 @@
+/* SessionBanner (native) — live dot + live-tinted status, stats capped at 3
+   (labels uppercased), Button actions, and the header slots. Mirrors the
+   web twin. (The dot's Animated pulse never runs under static markup —
+   asserted by presence, like the other Animated components.) */
+import { createElement } from 'react';
+import { Text } from 'react-native';
+import { describe, expect, test } from 'vitest';
+import { SessionBanner } from '../SessionBanner';
+import { ancestors, findAll, findByText, hasDeclaration, parse, render, type El } from './markup';
+
+/** Any element whose classes or inline style carry the rgb triplet (colors
+ *  live in react-native-web's atomic-class sheet, not the HTML). */
+function anyWithColor(root: El, rgb: string): boolean {
+  return findAll(root, (el) => (el.attrs.style ?? '').includes(rgb) || hasDeclaration(el, rgb)).length > 0;
+}
+
+describe('SessionBanner', () => {
+  test('renders title, status, subtitle', () => {
+    const root = parse(
+      render(SessionBanner, { title: 'Push Day A', status: 'Live · 24:18', subtitle: 'Bench Press · set 2 of 5' }),
+    );
+    expect(findByText(root, 'Push Day A')).toBeDefined();
+    expect(findByText(root, 'Live · 24:18')).toBeDefined();
+    expect(findByText(root, 'Bench Press · set 2 of 5')).toBeDefined();
+  });
+
+  test('live shows the magenta dot + tints the status; off shows neither', () => {
+    const live = parse(render(SessionBanner, { title: 'A', status: 'Live · 24:18', live: true }));
+    expect(anyWithColor(live, '255,61,129')).toBe(true); // magenta dot + status tint
+    const off = parse(render(SessionBanner, { title: 'A', status: 'Paused' }));
+    expect(anyWithColor(off, '255,61,129')).toBe(false);
+  });
+
+  test('renders at most 3 stats, labels uppercased', () => {
+    const root = parse(
+      render(SessionBanner, {
+        title: 'A',
+        stats: [
+          { value: '142', label: 'bpm' },
+          { value: '12', label: 'sets' },
+          { value: '8 400', label: 'kg vol' },
+          { value: 'X', label: 'dropped' },
+        ],
+      }),
+    );
+    expect(findByText(root, '142')).toBeDefined();
+    expect(findByText(root, 'BPM')).toBeDefined();
+    expect(findByText(root, 'KG VOL')).toBeDefined();
+    expect(findByText(root, 'DROPPED')).toBeUndefined();
+    expect(findByText(root, 'X')).toBeUndefined();
+  });
+
+  test('actions render as kit Buttons; leading slot renders', () => {
+    const root = parse(
+      render(SessionBanner, {
+        title: 'A',
+        leading: createElement(Text, null, 'ICON'),
+        actions: [
+          { label: 'Resume', variant: 'primary' as const },
+          { label: 'Discard' },
+        ],
+      }),
+    );
+    expect(findByText(root, 'Resume')).toBeDefined();
+    expect(findByText(root, 'Discard')).toBeDefined();
+    expect(findByText(root, 'ICON')).toBeDefined();
+  });
+
+  test('single-row: with no subtitle/stats the actions fold INLINE into the head row', () => {
+    const root = parse(
+      render(SessionBanner, {
+        title: 'Push Day A',
+        status: 'LIVE · 24:18',
+        live: true,
+        actions: [{ label: 'Finish', variant: 'primary' as const }],
+      }),
+    );
+    const head = findByText(root, 'Push Day A')!.parent!; // the head row View
+    const finish = findByText(root, 'Finish')!;
+    expect(ancestors(finish)).toContain(head);
+  });
+
+  test('with stats present the actions keep their own row below', () => {
+    const root = parse(
+      render(SessionBanner, {
+        title: 'Push Day A',
+        stats: [{ value: '142', label: 'bpm' }],
+        actions: [{ label: 'Finish' }],
+      }),
+    );
+    const head = findByText(root, 'Push Day A')!.parent!;
+    const finish = findByText(root, 'Finish')!;
+    expect(finish).toBeDefined();
+    expect(ancestors(finish)).not.toContain(head);
+  });
+});

package/src/components/__tests__/SetTable.test.tsx

@@ -0,0 +1,105 @@
+/* SetTable (native) — set labels (W / 1,2,… / D / F), set-type colors, row
+   tints, PR badge only on done PR sets, reference tones, column selection,
+   and the + Add set row. Mirrors the web twin's contract. */
+import { describe, expect, test } from 'vitest';
+import { colors } from '@lockin90/tokens';
+import { SetTable, setLabels, type WorkoutSet } from '../SetTable';
+import { ancestors, findByText, hasDeclaration, parse, render, type El } from './markup';
+
+/** The element carries the color, whether react-native-web serialized it as
+ *  an atomic class or an inline style (dynamic style objects go inline). */
+function carriesColor(el: El, rgb: string): boolean {
+  return (el.attrs.style ?? '').includes(rgb) || hasDeclaration(el, rgb);
+}
+
+const SETS: WorkoutSet[] = [
+  { id: 'a', setType: 'warmup', weight: 40, reps: 10, unit: 'kg', reference: '42.5×10', referenceTone: 'coach', done: true },
+  { id: 'b', setType: 'working', weight: 80, reps: 5, reference: '80×5', referenceTone: 'coach', done: true, isPr: true },
+  { id: 'c', setType: 'working', weight: 80, reps: 5, reference: '82.5×5', referenceTone: 'ai', isCurrent: true },
+  { id: 'd', setType: 'drop', weight: 60, reps: 12 },
+  { id: 'e', setType: 'failure', weight: 60 },
+];
+
+describe('setLabels', () => {
+  test('numbers working sets only; warmup/drop/failure get W/D/F', () => {
+    expect(setLabels(SETS)).toEqual(['W', '1', '2', 'D', 'F']);
+  });
+});
+
+describe('SetTable', () => {
+  test('renders colored set labels, values, and the unit-derived header', () => {
+    const html = render(SetTable, { sets: SETS });
+    const root = parse(html);
+    expect(findByText(root, 'W')).toBeDefined();
+    expect(findByText(root, 'D')).toBeDefined();
+    expect(findByText(root, 'F')).toBeDefined();
+    expect(findByText(root, '60×—')).toBeDefined(); // missing reps → em dash
+    expect(findByText(root, 'KG × REPS')).toBeDefined();
+    expect(findByText(root, 'COACH REC')).toBeDefined(); // default header, uppercased
+    // set-type colors — warmup amber, failure magenta
+    expect(carriesColor(findByText(root, 'W')!, '255,176,32')).toBe(true); // zoneMid
+    expect(carriesColor(findByText(root, 'F')!, '255,61,129')).toBe(true); // magenta
+    expect(colors.zoneMid).toBe('#FFB020');
+  });
+
+  test('stamps the PR badge only on done PR sets', () => {
+    const withPr = parse(render(SetTable, { sets: SETS }));
+    expect(findByText(withPr, 'PR')).toBeDefined(); // set b (done + isPr)
+    const notDone = parse(
+      render(SetTable, { sets: [{ id: 'x', setType: 'working', weight: 80, reps: 5, isPr: true }] as WorkoutSet[] }),
+    );
+    expect(findByText(notDone, 'PR')).toBeUndefined();
+  });
+
+  test('PR badge hugs the value (content-hugging row), not the flexed column edge', () => {
+    const root = parse(render(SetTable, { sets: SETS }));
+    const value = findByText(root, '80×5')!; // set b — done + isPr
+    const pr = findByText(root, 'PR')!;
+    const valueAncestors = ancestors(value);
+    const prAncestors = ancestors(pr);
+    const shared = valueAncestors.find((a) => prAncestors.includes(a));
+    expect(shared).toBeDefined();
+    // the nearest shared ancestor is the content-hugging `valGroup` row, so
+    // the badge sits directly beside the number instead of pinning to the
+    // flex:1 column's own right edge.
+    expect(hasDeclaration(shared!, 'flex-direction:row')).toBe(true);
+  });
+
+  test('tones the reference column (coach mint / ai violet accent)', () => {
+    const root = parse(render(SetTable, { sets: SETS }));
+    expect(carriesColor(findByText(root, '42.5×10')!, '52,245,197')).toBe(true); // mint
+    expect(carriesColor(findByText(root, '82.5×5')!, '124,92,255')).toBe(true); // accent
+  });
+
+  test('renders only the requested columns', () => {
+    const root = parse(render(SetTable, { sets: SETS, columns: ['set', 'value'] }));
+    expect(findByText(root, '80×5')).toBeDefined();
+    expect(findByText(root, '42.5×10')).toBeUndefined(); // reference dropped
+  });
+
+  test('add row renders only with onAddSet (uppercased label)', () => {
+    const withAdd = parse(render(SetTable, { sets: SETS, onAddSet: () => {}, addLabel: 'Add drop set' }));
+    expect(findByText(withAdd, '+ ADD DROP SET')).toBeDefined();
+    const without = parse(render(SetTable, { sets: SETS }));
+    expect(findByText(without, '+ ADD SET')).toBeUndefined();
+  });
+
+  test('editable boxes ONLY the current set value — done/pending stay plain, done dimmed', () => {
+    const sets: WorkoutSet[] = [
+      { id: 'p', setType: 'working', weight: 60, reps: 5 }, // pending
+      { id: 'c', setType: 'working', weight: 80, reps: 5, isCurrent: true }, // current
+      { id: 'd', setType: 'working', weight: 100, reps: 5, done: true }, // done
+    ];
+    const root = parse(render(SetTable, { sets, editable: true, columns: ['set', 'value'] }));
+    // the one cyan-accented box wraps the CURRENT value only
+    const boxed = (text: string) =>
+      ancestors(findByText(root, text)!).some((a) => hasDeclaration(a, 'rgba(34,211,238,0.35)'));
+    expect(boxed('80×5')).toBe(true);
+    expect(boxed('60×5')).toBe(false);
+    expect(boxed('100×5')).toBe(false);
+    // done value de-emphasized (textDim #AAB2C6), pending/current stay bright
+    expect(carriesColor(findByText(root, '100×5')!, '170,178,198')).toBe(true);
+    expect(carriesColor(findByText(root, '60×5')!, '170,178,198')).toBe(false);
+    expect(colors.textDim).toBe('#AAB2C6');
+  });
+});