@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/ZonePyramid.tsx

@@ -0,0 +1,405 @@
+import { useId } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Defs, FeGaussianBlur, Filter, G, Line, Rect, Text as SvgText } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/* ZonePyramid — the shared catalog pyramid family (PY-01…PY-03,
+   lockin90-design/charts/pyramid-charts.html): time-in-zone as a training
+   pyramid — base easy, tip hard — drawn in a fixed 320×150 viewBox with mono
+   catalog labels. Native twin of `@lockin90/ui` ZonePyramid — same prop API;
+   shine is a real Gaussian-blurred duplicate bar (Fabric-native SVG filters
+   in react-native-svg 15). */
+
+export type ZonePyramidVariant =
+  | 'zone-pyramid' /* PY-01 — 5 centered bars Z5→Z1 · % left, h:mm right, zone letter inside */
+  | 'target-pyramid' /* PY-02 — PY-01 + dashed white target outline per zone + amber OVER pill */
+  | 'mirror-pyramid'; /* PY-03 — population-pyramid: this week right (solid) vs last week left (32%) */
+
+/** One pyramid row, top row first (Z5 → Z1). */
+export interface PyramidZone {
+  /** Zone letter/name — inside the bar when it's wide enough ('Z2'). */
+  label: string;
+  /** Time in zone (minutes) — bar width normalizes to the longest zone. */
+  minutes: number;
+  /** Target minutes (`target-pyramid` dashed outline; same scale as `minutes`). */
+  target?: number;
+  /** Previous-period minutes (`mirror-pyramid` left bar; same scale). */
+  prev?: number;
+  /** Left label override; derived as the share of total ('17%'). */
+  pct?: string;
+  /** Right label override; derived as h:mm from `minutes` ('1:58'). */
+  time?: string;
+  /** Bar color. Defaults cycle zone-low / zone-mid / lime / mint / cyan (Z5→Z1). */
+  color?: string;
+}
+
+export interface ZonePyramidProps {
+  /** Catalog variant (PY-01 / PY-02 / PY-03). */
+  variant?: ZonePyramidVariant;
+  /** The rows, top first (Z5 → Z1). */
+  zones?: PyramidZone[];
+  /** Top-left mono caption ('TIME IN ZONE · WEEK'). */
+  title?: string;
+  /** Bottom faint line. `zone-pyramid` derives '11H 11M TOTAL'; '' hides. */
+  caption?: string;
+  /** The pill: `target-pyramid` biggest overage ('Z3 +40M OVER' — derived),
+   *  `mirror-pyramid` biggest change ('Z2 +29 MIN' — derived); '' hides. */
+  note?: string;
+  /** `mirror-pyramid` column headings. */
+  periodLabels?: [string, string];
+  /** Soft glow underlay behind each solid bar (the catalog glow modifier). */
+  shine?: boolean;
+  /** Accessible description of the chart. */
+  ariaLabel?: string;
+  /** Optional container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/* ---- catalog geometry (viewBox units — charts/pyramid-charts.html) ---- */
+const W = 320;
+const H = 150;
+const PAD = { l: 10, r: 12, t: 16, b: 14 };
+/** widest bar box + row metrics (the page's MAXW / RH / GAP) */
+const MAXW = 168;
+const RH = 16;
+const GAP = 5;
+const CX = 160;
+const TOP = 28;
+/** the longest zone's bar spans 95% of the bar box (catalog headroom) */
+const HEAD = 0.95;
+/** mirror layout: half-width bar boxes either side of a 14px spine gap */
+const MIRROR_TOP = 30;
+const MIRROR_MAXW = 108;
+const SPINE = 14;
+/** zone letters render inside bars wider than this; above the bar otherwise */
+const LABEL_MIN_W = 34;
+
+/** Round for compact attribute values. */
+const rd = (n: number) => Math.round(n * 100) / 100;
+
+/* Z5 → Z1 hue ladder (the catalog rows) */
+const ZONE_COLORS = [colors.zoneLow, colors.zoneMid, colors.lime, colors.mint, colors.cyan];
+
+/* the catalog demo data (pyramid-charts.html ZONES + derived target/prev
+   minutes) — stories reproduce the cards */
+const DEFAULT_ZONES: PyramidZone[] = [
+  { label: 'Z5', minutes: 36, target: 26, prev: 22, pct: '3%', time: '0:36' },
+  { label: 'Z4', minutes: 72, target: 53, prev: 94, pct: '8%', time: '1:12' },
+  { label: 'Z3', minutes: 118, target: 78, prev: 130, pct: '17%', time: '1:58' },
+  { label: 'Z2', minutes: 195, target: 224, prev: 166, pct: '29%', time: '3:15' },
+  { label: 'Z1', minutes: 250, target: 263, prev: 238, pct: '43%', time: '4:10' },
+];
+
+/** minutes → 'h:mm' ('118' → '1:58'). */
+function hmm(minutes: number): string {
+  const m = Math.max(0, Math.round(minutes));
+  return `${Math.floor(m / 60)}:${String(m % 60).padStart(2, '0')}`;
+}
+
+/** Mono catalog label (8.5px JetBrains Mono, ~.06em tracking). */
+function Label({
+  x,
+  y,
+  fill,
+  anchor = 'middle',
+  children,
+}: {
+  x: number;
+  y: number;
+  fill: string;
+  anchor?: 'start' | 'middle' | 'end';
+  children: string;
+}) {
+  return (
+    <SvgText
+      x={rd(x)}
+      y={rd(y)}
+      fill={fill}
+      textAnchor={anchor}
+      fontSize={8.5}
+      fontFamily={fonts.mono}
+      letterSpacing={0.5}
+    >
+      {children}
+    </SvgText>
+  );
+}
+
+/** Chip-pill annotation (dark rounded rect + tinted hairline + mono text). */
+function Tag({
+  x,
+  y,
+  color,
+  anchor = 'middle',
+  children,
+}: {
+  x: number;
+  y: number;
+  color: string;
+  anchor?: 'start' | 'middle' | 'end';
+  children: string;
+}) {
+  const w = children.length * 5.35 + 12;
+  let xa = anchor === 'end' ? x - w : anchor === 'start' ? x : x - w / 2;
+  xa = Math.max(PAD.l - 4, Math.min(xa, W - PAD.r - w + 4));
+  return (
+    <G>
+      <Rect
+        x={rd(xa)}
+        y={rd(y - 6.5)}
+        width={rd(w)}
+        height={13}
+        rx={6.5}
+        fill={colors.bg0}
+        fillOpacity={0.78}
+        stroke={color}
+        strokeOpacity={0.35}
+        strokeWidth={0.8}
+      />
+      <SvgText
+        x={rd(xa + w / 2)}
+        y={rd(y + 2.8)}
+        fill={color}
+        textAnchor="middle"
+        fontSize={8}
+        fontFamily={fonts.mono}
+        letterSpacing={0.4}
+      >
+        {children}
+      </SvgText>
+    </G>
+  );
+}
+
+/**
+ * ZonePyramid — time-in-zone intensity pyramid for product surfaces (catalog
+ * family PY-01…PY-03). `zone-pyramid` is THE weekly intensity-distribution
+ * card: centered bars Z5→Z1, width = time, % left / h:mm right, zone letter
+ * inside wide bars — a base-heavy shape reads as healthy. `target-pyramid`
+ * overlays a dashed target outline per zone plus an amber OVER pill where you
+ * exceed; `mirror-pyramid` mirrors this week (solid, right) against last week
+ * (32%, left) around a spine with the zone letters on it.
+ */
+export function ZonePyramid({
+  variant = 'zone-pyramid',
+  zones = DEFAULT_ZONES,
+  title,
+  caption,
+  note,
+  periodLabels = ['THIS WEEK', 'LAST WEEK'],
+  shine = false,
+  ariaLabel = 'Zone pyramid',
+  style,
+}: ZonePyramidProps) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-pyr-blur-${uid}`;
+  const maxMin = Math.max(...zones.map((z) => z.minutes), 0);
+  const totalMin = zones.reduce((a, z) => a + Math.max(0, z.minutes), 0);
+  const frac = (m: number) => (maxMin > 0 ? (Math.max(0, m) / maxMin) * HEAD : 0);
+  const colorOf = (i: number) => zones[i].color ?? ZONE_COLORS[i % ZONE_COLORS.length];
+  const pctOf = (z: PyramidZone) =>
+    z.pct ?? (totalMin > 0 ? `${Math.round((Math.max(0, z.minutes) / totalMin) * 100)}%` : '0%');
+
+  let body = null;
+  if (variant === 'mirror-pyramid') {
+    /* ---- PY-03 · this week vs last week around a spine ---- */
+    const spineBottom = MIRROR_TOP + zones.length * (RH + GAP) - GAP + 2;
+    /* derived delta pill: the zone with the biggest week-over-week change */
+    let deltaIdx = 0;
+    zones.forEach((z, i) => {
+      const d = z.minutes - (z.prev ?? 0);
+      const best = zones[deltaIdx].minutes - (zones[deltaIdx].prev ?? 0);
+      if (Math.abs(d) > Math.abs(best)) deltaIdx = i;
+    });
+    const delta = zones.length ? zones[deltaIdx].minutes - (zones[deltaIdx].prev ?? 0) : 0;
+    const resolvedNote =
+      note ??
+      (zones.length
+        ? `${zones[deltaIdx].label} ${delta >= 0 ? '+' : ''}${Math.round(delta)} MIN`
+        : undefined);
+    body = (
+      <>
+        {zones.map((z, i) => {
+          const y = MIRROR_TOP + i * (RH + GAP);
+          const wNow = frac(z.minutes) * MIRROR_MAXW;
+          const wPrev = frac(z.prev ?? 0) * MIRROR_MAXW;
+          const col = colorOf(i);
+          return (
+            <G key={i}>
+              {/* shine — a Gaussian-blurred duplicate bar behind the solid one
+                  (the web `.lk-pyr-shine` blur(4px) underlay) */}
+              {shine ? (
+                <Rect
+                  x={CX + SPINE}
+                  y={y}
+                  width={rd(wNow)}
+                  height={RH}
+                  rx={RH / 2}
+                  fill={col}
+                  opacity={0.55}
+                  filter={`url(#${blurId})`}
+                />
+              ) : null}
+              <Rect x={CX + SPINE} y={y} width={rd(wNow)} height={RH} rx={RH / 2} fill={col} opacity={0.88} />
+              <Rect
+                x={rd(CX - SPINE - wPrev)}
+                y={y}
+                width={rd(wPrev)}
+                height={RH}
+                rx={RH / 2}
+                fill={col}
+                opacity={0.32}
+              />
+              <Label x={CX} y={y + RH / 2 + 3} fill={colors.textDim}>
+                {z.label}
+              </Label>
+            </G>
+          );
+        })}
+        <Label x={CX + SPINE + 50} y={24} fill={colors.text}>
+          {periodLabels[0]}
+        </Label>
+        <Label x={CX - SPINE - 50} y={24} fill={colors.textFaint}>
+          {periodLabels[1]}
+        </Label>
+        <Line x1={CX} x2={CX} y1={MIRROR_TOP - 2} y2={rd(spineBottom)} stroke={colors.border} strokeWidth={1} />
+        {resolvedNote ? (
+          <Tag x={CX + 80} y={140} color={zones.length ? colorOf(deltaIdx) : colors.mint}>
+            {resolvedNote}
+          </Tag>
+        ) : null}
+      </>
+    );
+  } else {
+    /* ---- PY-01 / PY-02 · the centered pyramid (+ dashed targets) ---- */
+    const targets = variant === 'target-pyramid';
+    /* derived OVER pill: the zone with the biggest positive overage */
+    let overIdx = -1;
+    if (targets) {
+      zones.forEach((z, i) => {
+        if (z.target == null) return;
+        const over = z.minutes - z.target;
+        if (over > 0 && (overIdx < 0 || over > zones[overIdx].minutes - (zones[overIdx].target ?? 0))) overIdx = i;
+      });
+    }
+    const resolvedNote =
+      note ??
+      (targets && overIdx >= 0
+        ? `${zones[overIdx].label} +${Math.round(zones[overIdx].minutes - (zones[overIdx].target ?? 0))}M OVER`
+        : undefined);
+    const resolvedCaption =
+      caption ??
+      (variant === 'zone-pyramid'
+        ? `${Math.floor(Math.round(totalMin) / 60)}H ${String(Math.round(totalMin) % 60).padStart(2, '0')}M TOTAL`
+        : undefined);
+    body = (
+      <>
+        {zones.map((z, i) => {
+          const y = TOP + i * (RH + GAP);
+          const w = frac(z.minutes) * MAXW;
+          const x = CX - w / 2;
+          const col = colorOf(i);
+          return (
+            <G key={i}>
+              {/* shine — a Gaussian-blurred duplicate bar behind the solid one
+                  (the web `.lk-pyr-shine` blur(4px) underlay) */}
+              {shine ? (
+                <Rect
+                  x={rd(x)}
+                  y={y}
+                  width={rd(w)}
+                  height={RH}
+                  rx={RH / 2}
+                  fill={col}
+                  opacity={0.55}
+                  filter={`url(#${blurId})`}
+                />
+              ) : null}
+              <Rect x={rd(x)} y={y} width={rd(w)} height={RH} rx={RH / 2} fill={col} opacity={0.88} />
+              {targets && z.target != null ? (
+                <Rect
+                  x={rd(CX - (frac(z.target) * MAXW) / 2)}
+                  y={y - 1.5}
+                  width={rd(frac(z.target) * MAXW)}
+                  height={RH + 3}
+                  rx={(RH + 3) / 2}
+                  fill="none"
+                  stroke={colors.text}
+                  strokeOpacity={0.55}
+                  strokeWidth={1}
+                  strokeDasharray="3 3"
+                />
+              ) : null}
+              {w > LABEL_MIN_W ? (
+                <SvgText
+                  x={CX}
+                  y={rd(y + RH / 2 + 3)}
+                  fill={colors.bg0}
+                  fillOpacity={0.85}
+                  textAnchor="middle"
+                  fontSize={8.5}
+                  fontFamily={fonts.mono}
+                  fontWeight="700"
+                >
+                  {z.label}
+                </SvgText>
+              ) : (
+                <Label x={CX} y={y - 3} fill={col}>
+                  {z.label}
+                </Label>
+              )}
+              <Label x={CX - MAXW / 2 - 10} y={y + RH / 2 + 3} fill={colors.textFaint} anchor="end">
+                {pctOf(z)}
+              </Label>
+              <Label x={CX + MAXW / 2 + 10} y={y + RH / 2 + 3} fill={colors.textDim} anchor="start">
+                {z.time ?? hmm(z.minutes)}
+              </Label>
+            </G>
+          );
+        })}
+        {resolvedNote && overIdx >= 0 ? (
+          <Tag x={CX + MAXW / 2 + 24} y={TOP + overIdx * (RH + GAP)} color={colors.zoneMid} anchor="end">
+            {resolvedNote}
+          </Tag>
+        ) : resolvedNote ? (
+          <Tag x={CX + MAXW / 2 + 24} y={TOP} color={colors.zoneMid} anchor="end">
+            {resolvedNote}
+          </Tag>
+        ) : null}
+        {resolvedCaption ? (
+          <Label x={CX} y={144} fill={colors.textFaint}>
+            {resolvedCaption}
+          </Label>
+        ) : null}
+      </>
+    );
+  }
+
+  return (
+    <View accessibilityRole="image" accessibilityLabel={ariaLabel} style={[styles.root, style]}>
+      <Svg width="100%" height="100%" viewBox={`0 0 ${W} ${H}`}>
+        {shine ? (
+          /* real Gaussian blur for the shine (Fabric-native in react-native-svg
+             15) — the native twin of the web `.lk-pyr-shine` blur(4px). Region in
+             user space over the full canvas so flat bars never clip the blur. */
+          <Defs>
+            <Filter id={blurId} filterUnits="userSpaceOnUse" x={-10} y={-10} width={W + 20} height={H + 20}>
+              <FeGaussianBlur stdDeviation={2} />
+            </Filter>
+          </Defs>
+        ) : null}
+        {title ? (
+          <Label x={PAD.l + 2} y={11} fill={colors.textFaint} anchor="start">
+            {title}
+          </Label>
+        ) : null}
+        {body}
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* fixed catalog aspect (320×150); the Svg scales the viewBox to fit */
+  root: { width: '100%', aspectRatio: W / H },
+});

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

@@ -0,0 +1,33 @@
+/* Chip (native) — tone coloring, with focus on the `pr` tone added for the
+   Finished-recap PR pills: it must use the dedicated off-spectrum PR red
+   (#FF4757 border / #FF6B78 text), NOT `low`'s zoneLow (#FF4D6D) — a PR is a
+   deliberate break from the spectrum, not a "low" status reading. */
+import { describe, expect, test } from 'vitest';
+import { Chip } from '../Chip';
+import { ancestors, findByText, hasDeclaration, parse, render, type El } from './markup';
+
+function carriesColor(el: El, rgb: string): boolean {
+  return (el.attrs.style ?? '').includes(rgb) || hasDeclaration(el, rgb);
+}
+
+describe('Chip tone', () => {
+  test("tone='pr' uses the dedicated PR red text (#FF6B78), not zoneLow", () => {
+    const root = parse(render(Chip, { tone: 'pr', label: '1RM Bench 130kg' }));
+    const label = findByText(root, '1RM Bench 130kg')!;
+    expect(label).toBeDefined();
+    expect(carriesColor(label, '255,107,120')).toBe(true); // #FF6B78
+    expect(carriesColor(label, '255,77,109')).toBe(false); // NOT zoneLow ('low' tone)
+    // the pill chrome (ancestor) carries the PR-red border/bg family, not zoneLow
+    expect(ancestors(label).some((a) => carriesColor(a, '255,71,87'))).toBe(true);
+  });
+
+  test("tone='low' still uses zoneLow (unaffected by the new pr tone)", () => {
+    const root = parse(render(Chip, { tone: 'low', label: 'Low' }));
+    expect(carriesColor(findByText(root, 'Low')!, '255,77,109')).toBe(true);
+  });
+
+  test("size='sm' tone='pr' still carries the PR red text", () => {
+    const root = parse(render(Chip, { tone: 'pr', size: 'sm', label: 'PR' }));
+    expect(carriesColor(findByText(root, 'PR')!, '255,107,120')).toBe(true);
+  });
+});

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

@@ -0,0 +1,62 @@
+import { describe, expect, test } from 'vitest';
+import { CodeInput, spreadCodeAcrossBoxes } from '../TagInput';
+import { findAll, parse, render } from './markup';
+
+/* Multi-char paste / iOS SMS autofill lands the whole code in ONE box; the
+ * component spreads it across the remaining boxes and moves focus after the
+ * last written char. The spread math lives in the pure helper
+ * `spreadCodeAcrossBoxes` (extracted from `onBoxChange` — press/typing events
+ * can't be dispatched without a DOM environment). */
+
+describe('spreadCodeAcrossBoxes (paste spread math)', () => {
+  test('a full-length paste into box 0 fills every box and focuses the last', () => {
+    expect(spreadCodeAcrossBoxes(['', '', '', '', '', ''], 0, '123456', 6)).toEqual({
+      code: '123456',
+      focusIndex: 5,
+    });
+  });
+
+  test('a mid-code paste fills from that box on and keeps earlier digits', () => {
+    expect(spreadCodeAcrossBoxes(['1', '2', '', '', '', ''], 2, '345', 6)).toEqual({
+      code: '12345',
+      focusIndex: 5,
+    });
+  });
+
+  test('overflow past the last box is dropped and focus clamps to the last box', () => {
+    expect(spreadCodeAcrossBoxes(['1', '2', '3', '4', '', ''], 4, '789XYZ', 6)).toEqual({
+      code: '123478',
+      focusIndex: 5,
+    });
+  });
+
+  test('pasting over existing digits overwrites them', () => {
+    expect(spreadCodeAcrossBoxes(['9', '9', '9', '9', '9', '9'], 1, '00', 6)).toEqual({
+      code: '900999',
+      focusIndex: 3,
+    });
+  });
+
+  test('does not mutate the incoming chars', () => {
+    const chars = ['1', '', ''];
+    spreadCodeAcrossBoxes(chars, 0, '456', 3);
+    expect(chars).toEqual(['1', '', '']);
+  });
+});
+
+describe('CodeInput rendering', () => {
+  test('a controlled value spreads across the boxes, clamped to length', () => {
+    const html = render(CodeInput, { length: 6, value: '1234567' });
+    const inputs = findAll(parse(html), (e) => e.tag === 'input');
+    expect(inputs.length).toBe(6);
+    expect(inputs.map((i) => i.attrs.value ?? '')).toEqual(['1', '2', '3', '4', '5', '6']);
+  });
+
+  test('box 0 accepts the whole code (paste target); the rest stay single-char', () => {
+    const html = render(CodeInput, { length: 6 });
+    const inputs = findAll(parse(html), (e) => e.tag === 'input');
+    // react-native-web forwards the prop verbatim (camelCase attr in SSR output)
+    expect(inputs[0].attrs.maxLength).toBe('6');
+    for (const box of inputs.slice(1)) expect(box.attrs.maxLength).toBe('1');
+  });
+});

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

@@ -0,0 +1,41 @@
+/* DeltaPill (native) — sign inference, including the TRUE MINUS sign U+2212
+   ('−4', the design's negative glyph): it must read as negative (energy tone
+   → AMBER cost treatment), not lose its sign and paint the mint gain. */
+import { describe, expect, test } from 'vitest';
+import { DeltaPill } from '../DeltaPill';
+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);
+}
+
+describe('DeltaPill sign inference', () => {
+  test("true minus U+2212 '−4' infers down — energy tone paints AMBER, not mint", () => {
+    const root = parse(render(DeltaPill, { value: '−4', tone: 'energy' }));
+    const val = findByText(root, '−4')!;
+    expect(val).toBeDefined();
+    expect(carriesColor(val, '255,176,32')).toBe(true); // zoneMid amber
+    expect(carriesColor(val, '52,245,197')).toBe(false); // NOT the mint gain
+  });
+
+  test("'+2' still infers up (mint gain)", () => {
+    const root = parse(render(DeltaPill, { value: '+2', tone: 'energy' }));
+    expect(carriesColor(findByText(root, '+2')!, '52,245,197')).toBe(true);
+  });
+
+  test("ASCII '-3' stays down (default tone → coral)", () => {
+    const root = parse(render(DeltaPill, { value: '-3' }));
+    expect(carriesColor(findByText(root, '-3')!, '255,77,109')).toBe(true); // zoneLow
+  });
+
+  test('a zero value renders the neutral tone at the border-2/glass-2 tier (not the washed-out base chrome)', () => {
+    const root = parse(render(DeltaPill, { value: '0' }));
+    const val = findByText(root, '0')!;
+    expect(val).toBeDefined();
+    // ancestors carry the pill's background — glass-2 rgba(255,255,255,0.075),
+    // rendered by RN's color processing as '0.07' (2-decimal rounding).
+    expect([val, ...ancestors(val)].some((el) => carriesColor(el, '255,255,255,0.07'))).toBe(true);
+  });
+});

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

@@ -0,0 +1,69 @@
+import { describe, expect, test } from 'vitest';
+import { gradients } from '@lockin90/tokens';
+import { GradientText, gradientTextStops } from '../GradientText';
+import { render } from './markup';
+
+/* Mirrored-spectrum stops: the animated fill scrolls a 2×-width gradient by
+ * one width per loop, so its stop sequence must MIRROR back through the same
+ * hues (…lime→…→magenta→…→lime…) — a plain tiled spectrum would jump
+ * last-stop→first-stop (flux: magenta→lime) once per loop.
+ *
+ * NOTE on markup coverage: GradientText renders a hidden measurer <Text> first
+ * and only draws the SVG after onLayout reports a size — onLayout never fires
+ * under renderToStaticMarkup (and this workspace has no jsdom), so the <Stop>
+ * elements are unreachable in static markup. The stop selection was therefore
+ * extracted as the pure `gradientTextStops(stops, still)` helper (behavior
+ * identical) and is asserted here at helper level. */
+
+const FLUX: readonly string[] = gradients.flux.stops; // lime → mint → cyan → violet → magenta
+
+describe('GradientText mirrored-spectrum stops', () => {
+  test('still=true keeps the plain spectrum', () => {
+    expect(gradientTextStops(FLUX, true)).toEqual([...FLUX]);
+  });
+
+  test('still=false mirrors the spectrum back (…→last→…→first)', () => {
+    const stops = gradientTextStops(FLUX, false);
+    const n = FLUX.length;
+    expect(stops.length).toBe(2 * n - 1);
+    // front half is the spectrum, back half retraces it
+    expect(stops.slice(0, n)).toEqual([...FLUX]);
+    for (let i = 0; i < n; i++) {
+      expect(stops[n - 1 + i]).toBe(FLUX[n - 1 - i]);
+    }
+  });
+
+  test('no hue jump anywhere in the loop (every step moves ≤1 stop; the seam repeats the first hue)', () => {
+    const stops = gradientTextStops(FLUX, false);
+    // tile it once, as the scrolling loop does, and check every adjacent pair
+    const tiled = [...stops, ...stops];
+    for (let i = 0; i < tiled.length - 1; i++) {
+      const a = FLUX.indexOf(tiled[i]);
+      const b = FLUX.indexOf(tiled[i + 1]);
+      expect(a, `unknown stop ${tiled[i]}`).toBeGreaterThanOrEqual(0);
+      expect(
+        Math.abs(a - b),
+        `hue jump ${tiled[i]} → ${tiled[i + 1]} at position ${i}`,
+      ).toBeLessThanOrEqual(1);
+    }
+    // in particular the lime→magenta jump of a plain tile never occurs
+    const last = FLUX[FLUX.length - 1];
+    const first = FLUX[0];
+    for (let i = 0; i < tiled.length - 1; i++) {
+      expect([tiled[i], tiled[i + 1]]).not.toEqual([last, first]);
+    }
+  });
+
+  test('two-stop gradients mirror to a 3-stop palindrome', () => {
+    expect(gradientTextStops(gradients.cta.stops, false)).toEqual([
+      gradients.cta.stops[0],
+      gradients.cta.stops[1],
+      gradients.cta.stops[0],
+    ]);
+  });
+
+  test('SSR renders the measuring pass with the text content (pre-layout)', () => {
+    const html = render(GradientText, { children: 'Energy', still: true });
+    expect(html).toContain('Energy');
+  });
+});

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

@@ -0,0 +1,61 @@
+/* Icon (native) — training-set additions: kit-reused Lucide glyphs
+   (dumbbell, footprints, bike, waves, zap, ball) and the 8 custom Aurora
+   activity glyphs, stroke 1.85, 24-box viewBox. Mirrors the web twin's
+   coverage. */
+import { describe, expect, test } from 'vitest';
+import { Icon, type IconName } from '../Icon';
+import { render } from './markup';
+
+const KIT_REUSED: IconName[] = ['dumbbell', 'footprints', 'bike', 'waves', 'zap', 'ball'];
+
+describe('Icon — kit-reused activity glyphs', () => {
+  test('renders an svg for every kit-reused name, each visually distinct', () => {
+    const markups = KIT_REUSED.map((name) => render(Icon, { name }));
+    markups.forEach((html) => expect(html).toContain('<svg'));
+    expect(new Set(markups).size).toBe(KIT_REUSED.length);
+  });
+
+  test('skill reuses the existing target glyph — no duplicate name was added', () => {
+    const html = render(Icon, { name: 'target' });
+    expect(html).toContain('<svg');
+  });
+});
+
+describe('Icon — custom Aurora activity glyphs', () => {
+  const CASES: Array<[IconName, string]> = [
+    ['activity-mobility', 'M12 8v5M6 21l3-5 3-3 3 3 3 5M8.5 12.5h7'],
+    ['activity-rowing', 'M4.5 5l11 11M14 5l-2.2.6.7 2.4M15.5 16.5 20 12'],
+    ['activity-yoga', 'M12 8v4M12 12c-3.5 0-6.5 1.5-6.5 4M12 12c3.5 0 6.5 1.5 6.5 4M8 15.5h8'],
+    ['activity-pilates', 'M8 9l4 2 4-2M12 11v4M9 20l3-5 3 5'],
+    ['activity-stretching', 'M7 7v4l5 2M12 13l6-1M18 12l-1.5-2M18 12l.5-2.4'],
+    ['activity-sauna', 'M4 20h16'],
+    ['activity-cold-plunge', 'M12 3v18'],
+  ];
+
+  test.each(CASES)('%s renders the exact board path on a 1.85 stroke, 24-box viewBox', (name, pathFragment) => {
+    const html = render(Icon, { name, color: '#EEF1F8' });
+    expect(html).toContain('viewBox="0 0 24 24"');
+    expect(html).toContain(pathFragment);
+    expect(html).toContain('stroke-width="1.85"');
+  });
+
+  test('activity-rowing is no longer a duplicate of the swimming (waves) glyph', () => {
+    const rowing = render(Icon, { name: 'activity-rowing', color: '#EEF1F8' });
+    const waves = render(Icon, { name: 'waves', color: '#EEF1F8' });
+    expect(rowing).not.toBe(waves);
+    expect(rowing).not.toContain('M4 17c1.6 0 1.6 1.2 3.2 1.2');
+  });
+
+  test('activity-stretching is a dedicated glyph, distinct from activity-mobility', () => {
+    const stretching = render(Icon, { name: 'activity-stretching', color: '#EEF1F8' });
+    const mobility = render(Icon, { name: 'activity-mobility', color: '#EEF1F8' });
+    expect(stretching).not.toBe(mobility);
+  });
+
+  test('activity-foam-roll renders the roller rect + 3 ribs', () => {
+    const html = render(Icon, { name: 'activity-foam-roll', color: '#EEF1F8' });
+    expect(html).toContain('<rect');
+    expect(html).toContain('M8 9v6M12 9v6M16 9v6');
+    expect(html).toContain('stroke-width="1.85"');
+  });
+});