@lockin90/ui-native 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,82 @@
+/* SourceChip (native) — brand-colored provenance chip: correct ground + ink
+   + Icon per source, manual/lockin90/null/unknown render nothing. Mirrors
+   the web twin's coverage. */
+import { describe, expect, test } from 'vitest';
+import { SourceChip } from '../SourceChip';
+import { findAll, hasDeclaration, parse, render, type El } from './markup';
+
+/** The chip's root paints its ground, whether react-native-web serialized it
+ *  as an atomic class (registered style) or an inline style (dynamic ground). */
+function paintsBg(el: El, needle: string): boolean {
+  return (el.attrs.style ?? '').includes(needle) || hasDeclaration(el, `background-color:${needle}`);
+}
+
+/** The `bordered` variant is a static (StyleSheet.create-registered) style,
+ *  so react-native-web always serializes it as an atomic class — expanded
+ *  into per-side longhands (`border-bottom-color`, not `border-color`). */
+function hasHairlineBorder(el: El): boolean {
+  return hasDeclaration(el, 'border-bottom-color:rgba(0,0,0,0.12)');
+}
+
+describe('SourceChip — synced sources render the right ground + ink + wordmark', () => {
+  test('whoop — black ground (11,11,11), white ink, the whoop wordmark band, no border', () => {
+    const html = render(SourceChip, { source: 'whoop' });
+    const root = parse(html).children[0]!;
+    expect(paintsBg(root, '11,11,11') || paintsBg(root, '#0B0B0B')).toBe(true);
+    expect(html).toContain('fill="#FFFFFF"');
+    expect(html).toContain('viewBox="0 9.4 24 5.2"'); // whoop WORDMARK_BAND
+    expect(hasHairlineBorder(root)).toBe(false);
+  });
+
+  test('garmin — white ground, Garmin blue ink, a hairline border', () => {
+    const html = render(SourceChip, { source: 'garmin' });
+    const root = parse(html).children[0]!;
+    expect(paintsBg(root, '255,255,255') || paintsBg(root, '#FFFFFF')).toBe(true);
+    expect(html).toContain('fill="#007CC3"');
+    expect(html).toContain('viewBox="0 8.1 24 7.7"'); // garmin WORDMARK_BAND
+    expect(hasHairlineBorder(root)).toBe(true);
+  });
+
+  test('polar — white ground, Polar red ink, a hairline border', () => {
+    const html = render(SourceChip, { source: 'polar' });
+    const root = parse(html).children[0]!;
+    expect(html).toContain('fill="#D10027"');
+    expect(html).toContain('viewBox="0 9.3 24 5.4"'); // polar WORDMARK_BAND
+    expect(hasHairlineBorder(root)).toBe(true);
+  });
+
+  test('oura — dark ground (21,18,14), off-white ink, no border', () => {
+    const html = render(SourceChip, { source: 'oura' });
+    const root = parse(html).children[0]!;
+    expect(paintsBg(root, '21,18,14') || paintsBg(root, '#15120E')).toBe(true);
+    expect(html).toContain('fill="#F0EADF"');
+    expect(html).toContain('viewBox="0 7.7 24 8.7"'); // oura WORDMARK_BAND
+    expect(hasHairlineBorder(root)).toBe(false);
+  });
+
+  test('apple_health — white ground, the heart glyph in #FF2D55, a hairline border', () => {
+    const html = render(SourceChip, { source: 'apple_health' });
+    const root = parse(html).children[0]!;
+    expect(html).toContain('fill="#FF2D55"');
+    expect(html).toContain('viewBox="0 0 24 24"'); // no WORDMARK_BAND — square heart
+    expect(html).toContain('M12 20.9'); // apple-health heart path
+    expect(hasHairlineBorder(root)).toBe(true);
+  });
+
+  test('size="md" renders a taller icon than the default sm', () => {
+    const sm = render(SourceChip, { source: 'whoop' });
+    const md = render(SourceChip, { source: 'whoop', size: 'md' });
+    expect(sm).toContain('height="12"');
+    expect(md).toContain('height="18"');
+  });
+});
+
+describe('SourceChip — hand-logged / unknown sources render nothing', () => {
+  test.each([['manual'], ['lockin90'], [null], [undefined], ['some-future-vendor']])(
+    'source=%s renders null',
+    (source) => {
+      const root = findAll(parse(render(SourceChip, { source: source as string | null | undefined })), () => true);
+      expect(root.length).toBe(0);
+    },
+  );
+});

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

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'vitest';
+import { SupplementChart } from '../SupplementChart';
+import { findAll, parse, render } from './markup';
+
+/* `stack-levels` (SP-07) pill collision: each series gets an end-of-line chip
+ * pill at its final level's y; overlapping pills are pushed apart top-down by
+ * ≥ pill height (13) + 2 = 15 viewBox units and kept inside the plot
+ * (PAD.t=16 … H−PAD.b=136, pill half-height 6.5 → centers in [22.5, 129.5]).
+ * The zone band labels move to the LEFT edge because the right edge belongs
+ * to the pills. Pill text y = pill center y + 2.8. */
+
+const PILL_MIN_GAP = 15; // pillH 13 + 2
+const Y_MIN = 16 + 13 / 2; // PAD.t + pillH/2 = 22.5
+const Y_MAX = 150 - 14 - 13 / 2; // H − PAD.b − pillH/2 = 129.5
+
+/** pill-center y for each named series pill, read from the rendered <text>. */
+function pillCenters(html: string, names: string[]): number[] {
+  const root = parse(html);
+  return names.map((name) => {
+    const el = findAll(root, (e) => e.tag === 'text' && e.text.trim() === name)[0];
+    expect(el, `pill "${name}" not rendered`).toBeTruthy();
+    return Number(el!.attrs.y) - 2.8;
+  });
+}
+
+describe('SupplementChart stack-levels pill collision', () => {
+  test('three series ending at the SAME level get pills pushed ≥15 units apart, inside the plot', () => {
+    const html = render(SupplementChart, {
+      variant: 'stack-levels' as const,
+      series: [
+        { name: 'AAA', levels: [0.5, 0.5, 0.5] },
+        { name: 'BBB', levels: [0.5, 0.5, 0.5] },
+        { name: 'CCC', levels: [0.5, 0.5, 0.5] },
+      ],
+    });
+    const ys = pillCenters(html, ['AAA', 'BBB', 'CCC']).sort((a, b) => a - b);
+    expect(ys[1] - ys[0]).toBeGreaterThanOrEqual(PILL_MIN_GAP);
+    expect(ys[2] - ys[1]).toBeGreaterThanOrEqual(PILL_MIN_GAP);
+    for (const y of ys) {
+      expect(y).toBeGreaterThanOrEqual(Y_MIN);
+      expect(y).toBeLessThanOrEqual(Y_MAX);
+    }
+  });
+
+  test('pills colliding at the plot BOTTOM shift back up as a chain instead of running out', () => {
+    const html = render(SupplementChart, {
+      variant: 'stack-levels' as const,
+      series: [
+        { name: 'AAA', levels: [0.02, 0.02] },
+        { name: 'BBB', levels: [0.02, 0.02] },
+        { name: 'CCC', levels: [0.02, 0.02] },
+      ],
+    });
+    const ys = pillCenters(html, ['AAA', 'BBB', 'CCC']).sort((a, b) => a - b);
+    expect(ys[1] - ys[0]).toBeGreaterThanOrEqual(PILL_MIN_GAP);
+    expect(ys[2] - ys[1]).toBeGreaterThanOrEqual(PILL_MIN_GAP);
+    expect(ys[2]).toBeLessThanOrEqual(Y_MAX);
+    expect(ys[0]).toBeGreaterThanOrEqual(Y_MIN);
+  });
+
+  test('zone band labels anchor LEFT (the right edge belongs to the pills)', () => {
+    const html = render(SupplementChart, { variant: 'stack-levels' as const });
+    const root = parse(html);
+    for (const label of ['SATURATED', 'LOW']) {
+      const el = findAll(root, (e) => e.tag === 'text' && e.text.trim() === label)[0];
+      expect(el, `band label "${label}" not rendered`).toBeTruthy();
+      expect(el!.attrs['text-anchor']).toBe('start');
+      expect(Number(el!.attrs.x)).toBe(12); // PAD.l + 2
+    }
+  });
+});

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

@@ -0,0 +1,81 @@
+import { createElement } from 'react';
+import { describe, expect, test } from 'vitest';
+import { Text } from 'react-native';
+import { Table, toggleExpandKey } from '../Table';
+import { findAll, findByText, parse, render } from './markup';
+
+/* Expansion bookkeeping. Press events can't be dispatched without a DOM
+ * environment (no jsdom in this workspace), so the toggle math is covered at
+ * helper level (`toggleExpandKey` — the exact function the chevron press runs)
+ * and the controlled/uncontrolled render paths are covered via markup. */
+
+describe('toggleExpandKey (uncontrolled + controlled toggle math)', () => {
+  test('adds an absent key', () => {
+    expect(toggleExpandKey([], '0')).toEqual(['0']);
+    expect(toggleExpandKey(['0'], '2')).toEqual(['0', '2']);
+  });
+
+  test('removes a present key, preserving the order of the others', () => {
+    expect(toggleExpandKey(['0', '1', '2'], '1')).toEqual(['0', '2']);
+    expect(toggleExpandKey(['0'], '0')).toEqual([]);
+  });
+
+  test('does not mutate its input (controlled callers keep their array)', () => {
+    const input: (string | number)[] = ['0', '1'];
+    const out = toggleExpandKey(input, '1');
+    expect(input).toEqual(['0', '1']);
+    expect(out).not.toBe(input);
+  });
+
+  test('mixed string/number keys toggle independently', () => {
+    expect(toggleExpandKey([0, '0'], 0)).toEqual(['0']);
+  });
+});
+
+const detail = (row: Record<string, unknown>) =>
+  createElement(Text, null, `DETAIL:${String(row.name)}`);
+
+describe('Table expansion rendering', () => {
+  test('uncontrolled: nothing expanded initially — chevrons collapsed, no detail panel', () => {
+    const html = render(createElement(Table, { expandable: true, renderDetail: detail }));
+    expect(html).not.toContain('DETAIL:');
+    const root = parse(html);
+    // every chevron reads "Expand row" (none open); NB react-native-web emits no
+    // aria-expanded for accessibilityState.expanded, so labels carry the state
+    const chevrons = findAll(root, (e) => e.attrs['aria-label'] === 'Expand row');
+    expect(chevrons.length).toBe(4); // one per default row
+    expect(findAll(root, (e) => e.attrs['aria-label'] === 'Collapse row').length).toBe(0);
+  });
+
+  test('controlled: expandedKeys drives which rows are open (own state ignored)', () => {
+    const html = render(
+      createElement(Table, { expandable: true, renderDetail: detail, expandedKeys: ['1'] }),
+    );
+    const root = parse(html);
+    // exactly one open row: the detail panel for row index 1
+    expect(findByText(root, 'DETAIL:Liam Carter')).toBeTruthy();
+    expect(html).not.toContain('DETAIL:Ava Mitchell');
+    expect(findAll(root, (e) => e.attrs['aria-label'] === 'Collapse row').length).toBe(1);
+    expect(findAll(root, (e) => e.attrs['aria-label'] === 'Expand row').length).toBe(3);
+  });
+
+  test('controlled empty list renders everything collapsed even with a renderDetail', () => {
+    const html = render(
+      createElement(Table, { expandable: true, renderDetail: detail, expandedKeys: [] }),
+    );
+    expect(html).not.toContain('DETAIL:');
+  });
+
+  test('custom rowKey is honored by expandedKeys', () => {
+    const html = render(
+      createElement(Table, {
+        expandable: true,
+        renderDetail: detail,
+        rowKey: (row: Record<string, unknown>) => String(row.name),
+        expandedKeys: ['Emma Reyes'],
+      }),
+    );
+    expect(html).toContain('DETAIL:Emma Reyes');
+    expect(html).not.toContain('DETAIL:Ava Mitchell');
+  });
+});

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

@@ -0,0 +1,85 @@
+/* TemplateCard (native) — source pills (coach mint / ai violet / manual
+   none), the tinted edge bar, and the content lines. Mirrors the web twin. */
+import { createElement } from 'react';
+import { Text } from 'react-native';
+import { describe, expect, test } from 'vitest';
+import { TemplateCard } from '../TemplateCard';
+import { 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('TemplateCard', () => {
+  test('renders name, meta, and lastUsed', () => {
+    const root = parse(
+      render(TemplateCard, {
+        name: 'Push Day A',
+        meta: 'Chest · Arms · 5 ex · ~48m',
+        lastUsed: 'Last used 2d ago',
+      }),
+    );
+    expect(findByText(root, 'Push Day A')).toBeDefined();
+    expect(findByText(root, 'Chest · Arms · 5 ex · ~48m')).toBeDefined();
+    expect(findByText(root, 'Last used 2d ago')).toBeDefined();
+  });
+
+  test('coach → mint COACH pill · ai → violet AI pill · manual → none', () => {
+    const coach = parse(render(TemplateCard, { name: 'A', source: 'coach' }));
+    const coachPill = findByText(coach, 'COACH');
+    expect(coachPill).toBeDefined();
+    expect(carriesColor(coachPill!, '52,245,197')).toBe(true); // mint
+    const ai = parse(render(TemplateCard, { name: 'B', source: 'ai' }));
+    const aiPill = findByText(ai, 'AI');
+    expect(aiPill).toBeDefined();
+    expect(carriesColor(aiPill!, '124,92,255')).toBe(true); // accent
+    const manual = parse(render(TemplateCard, { name: 'C', source: 'manual' }));
+    expect(findByText(manual, 'COACH')).toBeUndefined();
+    expect(findByText(manual, 'AI')).toBeUndefined();
+  });
+
+  test('tint paints the left edge bar; trailing slot renders', () => {
+    const html = render(TemplateCard, {
+      name: 'A',
+      tint: '#22D3EE',
+      trailing: createElement(Text, null, '~48m'),
+    });
+    expect(html).toContain('34,211,238'); // the tinted bar
+    expect(findByText(parse(html), '~48m')).toBeDefined();
+  });
+
+  test('leading renders the tinted icon tile instead of the edge bar', () => {
+    const withLeading = render(TemplateCard, {
+      name: 'A',
+      tint: '#22D3EE',
+      leading: createElement(Text, null, 'icon'),
+    });
+    expect(findByText(parse(withLeading), 'icon')).toBeDefined();
+    // RN's color processing resolves the 8-digit hex-alpha tint suffixes
+    // (1F ≈ 12%, 52 ≈ 32%) to rgba() — this is the app's existing tile
+    // convention (`${tint}1F` / `${tint}52`), e.g. catalog.tsx's type tiles.
+    expect(withLeading).toContain('rgba(34,211,238,0.12)'); // tile fill
+    expect(withLeading).toContain('rgba(34,211,238,0.32)'); // tile border
+    const noLeading = render(TemplateCard, { name: 'A', tint: '#22D3EE' });
+    expect(noLeading).not.toContain('rgba(34,211,238,0.12)');
+  });
+
+  test('metaCount bolds the count fragment after the meta line', () => {
+    const html = render(TemplateCard, { name: 'A', meta: 'Chest · Arms', metaCount: '5 ex' });
+    expect(html).toContain('Chest · Arms');
+    const root = parse(html);
+    const count = findByText(root, '5 ex');
+    expect(count).toBeDefined();
+    expect(hasDeclaration(count!, 'font-weight:700')).toBe(true);
+    // count-only (no meta) still renders
+    const countOnly = render(TemplateCard, { name: 'A', metaCount: '5 ex' });
+    expect(findByText(parse(countOnly), '5 ex')).toBeDefined();
+  });
+
+  test('onPress renders a pressable card (button role)', () => {
+    const html = render(TemplateCard, { name: 'A', onPress: () => {} });
+    expect(html).toContain('role="button"');
+    const still = render(TemplateCard, { name: 'A' });
+    expect(still).not.toContain('role="button"');
+  });
+});

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

@@ -0,0 +1,49 @@
+import { describe, expect, test } from 'vitest';
+import { Toggle } from '../Toggle';
+import { findAll, inlineStyle, parse, render } from './markup';
+
+/* Knob inset math: the track is border-box (1px border) and the knob is
+ * absolutely positioned INSIDE the border with a `pad` inset, so the "on"
+ * travel must subtract BOTH borders and BOTH pads:
+ *   knobOffset = track − 2·border − knob − 2·pad
+ * (md: 42−2−18−4 = 18 · sm: 36−2−15−4 = 15 — the design `.switch` /
+ * `.switch.sm` translateX values exactly). Anything else either overshoots
+ * into the border or leaves the knob short of the right pad. */
+
+const SIZES = {
+  md: { track: 42, knob: 18, pad: 2 },
+  sm: { track: 36, knob: 15, pad: 2 },
+} as const;
+const BORDER = 1;
+
+/** the knob element — the only element with an inline translateX transform */
+function knobOf(html: string) {
+  const root = parse(html);
+  const knobs = findAll(root, (e) => (e.attrs.style ?? '').includes('translateX('));
+  expect(knobs.length).toBe(1);
+  return knobs[0];
+}
+
+describe('Toggle knob inset math', () => {
+  for (const size of ['md', 'sm'] as const) {
+    const { track, knob, pad } = SIZES[size];
+    const expected = track - 2 * BORDER - knob - 2 * pad;
+
+    test(`${size} checked: knob travels track − 2·border − knob − 2·pad = ${expected}px`, () => {
+      const el = knobOf(render(Toggle, { checked: true, size }));
+      const style = inlineStyle(el);
+      expect(style.transform).toBe(`translateX(${expected}px)`);
+      expect(style.left).toBe(`${pad}px`);
+      expect(style.width).toBe(`${knob}px`);
+      // end position is exactly the mirrored inset: border + pad off the right edge
+      expect(BORDER + pad + expected + knob).toBe(track - BORDER - pad);
+    });
+
+    test(`${size} unchecked: knob rests at the left pad`, () => {
+      const el = knobOf(render(Toggle, { checked: false, size }));
+      const style = inlineStyle(el);
+      expect(style.transform).toBe('translateX(0px)');
+      expect(style.left).toBe(`${pad}px`);
+    });
+  }
+});

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

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'vitest';
+import { UnitChart } from '../UnitChart';
+import { findAll, parse, render } from './markup';
+
+/* `waffle-share` (UN-02) regression: the 10×10 grid used to be shifted +20
+ * right of center, running its last columns UNDER the dot legend at x=226.
+ * The grid must end clear of the legend: every cell's right edge < the
+ * legend dots' left edge. */
+
+describe('UnitChart waffle-share grid vs legend', () => {
+  test('grid cell max-x stays left of the legend dot x', () => {
+    const html = render(UnitChart, { variant: 'waffle-share' as const });
+    const root = parse(html);
+
+    const cells = findAll(root, (e) => e.tag === 'rect');
+    expect(cells.length).toBe(100); // the full 10×10 grid
+    const maxRight = Math.max(...cells.map((c) => Number(c.attrs.x) + Number(c.attrs.width)));
+
+    const dots = findAll(root, (e) => e.tag === 'circle' && Number(e.attrs.r) === 4);
+    expect(dots.length).toBe(3); // one legend dot per default segment
+    const dotLeft = Math.min(...dots.map((d) => Number(d.attrs.cx) - Number(d.attrs.r)));
+
+    expect(maxRight).toBeLessThan(dotLeft);
+    // regression guard: keep real clearance, not a 1px squeak (was overlapping by ~18)
+    expect(dotLeft - maxRight).toBeGreaterThanOrEqual(30);
+  });
+
+  test('custom segments keep the same grid geometry (partition only recolors cells)', () => {
+    const html = render(UnitChart, {
+      variant: 'waffle-share' as const,
+      segments: [
+        { label: 'DEEP', value: 70 },
+        { label: 'LIGHT', value: 30 },
+      ],
+    });
+    const root = parse(html);
+    const cells = findAll(root, (e) => e.tag === 'rect');
+    expect(cells.length).toBe(100);
+    const maxRight = Math.max(...cells.map((c) => Number(c.attrs.x) + Number(c.attrs.width)));
+    const dots = findAll(root, (e) => e.tag === 'circle' && Number(e.attrs.r) === 4);
+    expect(dots.length).toBe(2);
+    expect(maxRight).toBeLessThan(Math.min(...dots.map((d) => Number(d.attrs.cx) - 4)));
+  });
+});

package/src/components/__tests__/markup.ts

@@ -0,0 +1,142 @@
+/**
+ * Test-only helpers for asserting on react-native-web SSR output in a plain
+ * `node` vitest environment (no jsdom in this workspace): render a component
+ * to static markup, parse it with a minimal well-formed-HTML parser (React's
+ * `renderToStaticMarkup` output only), and map react-native-web's atomic CSS
+ * classes back to declarations via `StyleSheet.getSheet()`.
+ */
+import { createElement, type ComponentType, type ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { StyleSheet } from 'react-native';
+
+/** Render an element (or component + props) to static HTML. */
+export function render(el: ReactElement): string;
+export function render<P extends object>(comp: ComponentType<P>, props: P): string;
+export function render(elOrComp: unknown, props?: object): string {
+  const el =
+    props === undefined && typeof elOrComp === 'object'
+      ? (elOrComp as ReactElement)
+      : createElement(elOrComp as ComponentType, props);
+  return renderToStaticMarkup(el);
+}
+
+/* ------------------------------------------------------------------ */
+/* Minimal HTML tree                                                   */
+/* ------------------------------------------------------------------ */
+
+export interface El {
+  tag: string;
+  attrs: Record<string, string>;
+  children: El[];
+  /** direct text content (concatenated text nodes) */
+  text: string;
+  parent: El | null;
+}
+
+const VOID_TAGS = new Set(['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr']);
+
+/** Parse React static markup into a tree. Handles `<tag a="v">`, `</tag>`,
+ *  self-closed `<tag/>` and HTML void tags; no comments/doctype/script needed. */
+export function parse(html: string): El {
+  const root: El = { tag: '#root', attrs: {}, children: [], text: '', parent: null };
+  let cur = root;
+  const tagRe = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:="[^"]*")?)*)\s*(\/?)>/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = tagRe.exec(html)) !== null) {
+    const textChunk = html.slice(last, m.index);
+    if (textChunk) cur.text += decode(textChunk);
+    last = tagRe.lastIndex;
+    const [, closing, rawTag, rawAttrs, selfClose] = m;
+    const tag = rawTag.toLowerCase();
+    if (closing) {
+      // walk up to the matching open tag (defensive — output is well formed)
+      let up: El | null = cur;
+      while (up && up.tag !== tag) up = up.parent;
+      cur = up?.parent ?? root;
+      continue;
+    }
+    const el: El = { tag, attrs: parseAttrs(rawAttrs), children: [], text: '', parent: cur };
+    cur.children.push(el);
+    if (!selfClose && !VOID_TAGS.has(tag)) cur = el;
+  }
+  const tail = html.slice(last);
+  if (tail) cur.text += decode(tail);
+  return root;
+}
+
+function parseAttrs(raw: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  const re = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:="([^"]*)")?/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(raw)) !== null) {
+    if (m[1]) attrs[m[1]] = m[2] !== undefined ? decode(m[2]) : '';
+  }
+  return attrs;
+}
+
+function decode(s: string): string {
+  return s
+    .replace(/&quot;/g, '"')
+    .replace(/&#x27;/g, "'")
+    .replace(/&gt;/g, '>')
+    .replace(/&lt;/g, '<')
+    .replace(/&amp;/g, '&');
+}
+
+/** Depth-first collect of every element matching `pred`. */
+export function findAll(node: El, pred: (el: El) => boolean): El[] {
+  const out: El[] = [];
+  const walk = (el: El) => {
+    if (el.tag !== '#root' && pred(el)) out.push(el);
+    el.children.forEach(walk);
+  };
+  walk(node);
+  return out;
+}
+
+/** First element whose DIRECT text equals `text` (trimmed). */
+export function findByText(node: El, text: string): El | undefined {
+  return findAll(node, (el) => el.text.trim() === text)[0];
+}
+
+/** Ancestors of `el`, nearest first (excluding the #root sentinel). */
+export function ancestors(el: El): El[] {
+  const out: El[] = [];
+  for (let p = el.parent; p && p.tag !== '#root'; p = p.parent) out.push(p);
+  return out;
+}
+
+/** Parse `style="a:b;c:d"` into a record. */
+export function inlineStyle(el: El): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const decl of (el.attrs.style ?? '').split(';')) {
+    const i = decl.indexOf(':');
+    if (i > 0) out[decl.slice(0, i).trim()] = decl.slice(i + 1).trim();
+  }
+  return out;
+}
+
+/* ------------------------------------------------------------------ */
+/* react-native-web atomic-class lookup                                */
+/* ------------------------------------------------------------------ */
+
+/** Class names whose rule contains `declaration` (e.g. `align-items:flex-end`)
+ *  in react-native-web's accumulated style sheet. Must be called AFTER the
+ *  styles in question have been rendered at least once. */
+export function classesFor(declaration: string): string[] {
+  const sheet = (StyleSheet as unknown as { getSheet(): { textContent: string } }).getSheet();
+  const out: string[] = [];
+  const re = /\.([A-Za-z0-9_-]+)\{([^}]*)\}/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(sheet.textContent)) !== null) {
+    if (m[2].includes(declaration)) out.push(m[1]);
+  }
+  return out;
+}
+
+/** Does `el` carry any class matching `declaration` (via `classesFor`)? */
+export function hasDeclaration(el: El, declaration: string): boolean {
+  const classes = new Set((el.attrs.class ?? '').split(/\s+/));
+  return classesFor(declaration).some((c) => classes.has(c));
+}

package/src/components/__tests__/react-dom-server.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Test-only ambient types for `react-dom/server`: this package intentionally
+ * ships without `@types/react-dom` (react-dom is a devDep used only by the
+ * Storybook/catalog/test tooling; the published library never imports it).
+ * Lives in __tests__ so react-native-builder-bob excludes it from `lib/`.
+ */
+declare module 'react-dom/server' {
+  import type { ReactNode } from 'react';
+  export function renderToStaticMarkup(node: ReactNode): string;
+  export function renderToString(node: ReactNode): string;
+}