@multiplatform.one/frappe-ui 7.23.1 → 7.24.0

package/src/FrappeInsights.tsx

@@ -0,0 +1,422 @@
+import {
+  AsyncSkeleton,
+  Breadcrumbs,
+  Button,
+  EmptyState,
+  PageHeader,
+  PageSection,
+  Screen,
+  XStack,
+  YStack,
+  useTheme,
+  type ChartConfig,
+} from "@multiplatform.one/components";
+import { useDocTypeMeta, type Order } from "@multiplatform.one/frappe";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ArrowLeftIcon, SparkleIcon } from "@phosphor-icons/react";
+import { useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { connectionsFromMeta, type FrappeConnection } from "./frappeConnections";
+import { frappeRouteHref, useFrappeRouter } from "./frappeNavigation";
+import { FrappeNotConfigured } from "./FrappeNotConfigured";
+import { useFrappeConfig } from "./FrappeProvider";
+import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
+import { useDocRights } from "./formEngine/useDocRights";
+import {
+  average,
+  facetDistribution,
+  foldDistribution,
+  histogram,
+  multiValued,
+  orderRows,
+  topBy,
+} from "./insights/insightsData";
+import { InsightsFacetTags } from "./insights/InsightsFacetTags";
+import { InsightsKpiBand, type InsightsTile } from "./insights/InsightsKpiBand";
+import { InsightsLeaders } from "./insights/InsightsLeaders";
+import {
+  formatMetric,
+  type FrappeInsightsMetric,
+  type InsightsRecordView,
+} from "./insights/insightsRecord";
+import { InsightsRecords } from "./insights/InsightsRecords";
+import { InsightsTable } from "./insights/InsightsTable";
+import { facetRead, readFacet } from "./list/facetReading";
+import { favoritesKey, useFavorites } from "./list/favorites";
+import type { FrappeListFacet } from "./list/listState";
+import { recordTitle, type FrappeRecordLook } from "./list/recordLook";
+import { useFrappeConnection, useFrappeRows } from "./useFrappeRows";
+
+export type { FrappeInsightsMetric };
+
+/** Slices of the facet pie before the tail folds into "Other". */
+const pieSlices = 7;
+
+const noMetrics: readonly FrappeInsightsMetric[] = [];
+
+export interface FrappeInsightsProps<TDoc extends { name: string; doctype: string }> {
+  doctype: string;
+  /** The doctype's list route: the breadcrumb, Back, record pages and facet links hang off it. */
+  route: string;
+  /** The list's title; defaults to the doctype. */
+  listTitle?: string;
+  /** Defaults to "Insights". */
+  title?: string;
+  subtitle?: (count: number) => string;
+  /** The list's fields and ceiling, so both pages share one read. */
+  fields?: readonly (keyof TDoc & string)[];
+  limit?: number;
+  orderBy?: Array<{ field: keyof TDoc & string; order: Order }>;
+  /** Declared connections; defaults to the meta's (a Guest cannot read meta). */
+  connections?: readonly FrappeConnection[];
+  /** Its values chart as a pie, count distinct, tag the table and link to the narrowed list. */
+  facet?: FrappeListFacet;
+  /** The collective name of the facet's values ("Types"); defaults to its label. */
+  facetPlural?: string;
+  /** Numeric fields: the first charts and averages, each ranks and columns, `record` ones crown a holder. */
+  metrics?: readonly FrappeInsightsMetric[];
+  /** Count the list's favorites: true keys them by doctype, a string names the key. */
+  favorites?: boolean | string;
+  look?: FrappeRecordLook<TDoc>;
+  titleField?: string;
+  /** Rows per page of the full table. */
+  pageSize?: number;
+  /** Prefix of the sections' test ids. */
+  testID?: string;
+}
+
+/**
+ * A doctype's analytics page over the rows its list reads: the count, the
+ * favorites, the facet's spread and the first metric's average, a facet pie
+ * and a metric histogram, record holders, leaders per metric, every record
+ * in a table, and the facet's values linking back to the narrowed list.
+ * Not configured, error, loading and empty are four honest states under
+ * the same wayfinding header.
+ */
+export function FrappeInsights<TDoc extends { name: string; doctype: string }>({
+  doctype,
+  route,
+  listTitle,
+  title,
+  subtitle,
+  fields,
+  limit,
+  orderBy,
+  connections,
+  facet: facetProp,
+  facetPlural,
+  metrics: metricsProp = noMetrics,
+  favorites,
+  look,
+  titleField,
+  pageSize = 5,
+  testID,
+}: FrappeInsightsProps<TDoc>) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const theme = useTheme() as unknown as Record<string, { val?: string } | undefined>;
+  const config = useFrappeConfig();
+  const connection = useFrappeConnection();
+  const navigate = useFrappeRouter()?.navigate;
+  const { meta } = useDocTypeMeta(connection, doctype);
+  const { rights } = useDocRights(connection, meta);
+  const listName = listTitle ?? doctype;
+  const pageTitle = title ?? t("Insights");
+
+  // Declarations arrive as fresh objects every render. The sections' tables
+  // keep their page only while their data keeps its identity, so the facet
+  // and metrics settle on what they declare and the functions ride refs.
+  const latest = useRef({ facet: facetProp, metrics: metricsProp, look, navigate });
+  latest.current = { facet: facetProp, metrics: metricsProp, look, navigate };
+  const facetKey = JSON.stringify(facetProp ?? null);
+  const metricsKey = JSON.stringify(metricsProp);
+  const facet = useMemo(() => latest.current.facet, [facetKey]);
+  const metrics = useMemo(() => latest.current.metrics, [metricsKey]);
+
+  const {
+    rows: readRows,
+    isLoading,
+    error,
+  } = useFrappeRows<TDoc>(connection, doctype, { fields, limit, orderBy });
+  const orderKey = JSON.stringify(orderBy ?? null);
+  const rows = useMemo(
+    () => orderRows(readRows as never[], JSON.parse(orderKey)) as TDoc[],
+    [readRows, orderKey],
+  );
+  const read = facet
+    ? facetRead(facet, doctype, connections ?? connectionsFromMeta(meta), limit)
+    : undefined;
+  const readKey = JSON.stringify(read ?? null);
+  const facetQuery = useMemo(() => JSON.parse(readKey) as typeof read | null, [readKey]);
+  const facetOptions = useMemo(
+    () => ({ ...facetQuery?.options, enabled: Boolean(facetQuery?.ready) }),
+    [facetQuery],
+  );
+  const { rows: facetRows } = useFrappeRows<TDoc>(
+    connection,
+    facetQuery?.doctype ?? "",
+    facetOptions as never,
+  );
+  const values = useMemo(
+    () =>
+      facet && facetQuery
+        ? readFacet(facet, facetQuery.linkField, facetRows as never).values
+        : new Map<string, string[]>(),
+    [facet, facetQuery, facetRows],
+  );
+  const { count: favoritesCount } = useFavorites(
+    favorites ? (typeof favorites === "string" ? favorites : favoritesKey(doctype)) : undefined,
+  );
+
+  const nameField = titleField ?? meta?.title_field;
+  const baseURL = config?.baseURL;
+  const record = useMemo<InsightsRecordView<TDoc>>(
+    () => ({
+      title: (doc) => recordTitle(doc, latest.current.look, nameField),
+      code: (doc) => latest.current.look?.code?.(doc) || undefined,
+      images: (doc) => latest.current.look?.images?.(doc, baseURL) ?? [],
+      values: (doc) => values.get(doc.name) ?? [],
+      tints: (doc) => (values.get(doc.name) ?? []).map((value) => facet?.tint?.(value)),
+      valueLabel: (value) => facet?.optionLabel?.(value) ?? value,
+      valueTint: (value) => facet?.tint?.(value),
+      open: (doc) =>
+        latest.current.navigate?.(frappeRouteHref(route, { mode: "view", name: doc.name })),
+    }),
+    [nameField, baseURL, values, facet, route],
+  );
+
+  const distribution = useMemo(() => facetDistribution(values, rows), [values, rows]);
+  const lead = metrics[0];
+  const plural = facetPlural ?? facet?.label ?? "";
+
+  const tiles: InsightsTile[] = [];
+  if (favorites) {
+    tiles.push({
+      id: "favorites",
+      title: t("Favorites"),
+      value: favoritesCount,
+      hint: t("{{count}} of {{total}}", { count: favoritesCount, total: rows.length }),
+    });
+  }
+  if (facet) {
+    const several = multiValued(values, rows);
+    tiles.push({
+      id: "facet",
+      title: t("Distinct {{facets}}", { facets: plural }),
+      value: distribution.length,
+      hint:
+        several > 0
+          ? t("{{count}} with 2+", { count: several })
+          : distribution[0]
+            ? record.valueLabel(distribution[0].value)
+            : undefined,
+    });
+  }
+  const buckets = lead ? histogram(rows as never[], lead.field, lead.bucket) : [];
+  if (lead) {
+    tiles.push({
+      id: "average",
+      title: t("Average {{metric}}", { metric: lead.label }),
+      value: formatMetric(lead, Math.round(average(rows as never[], lead.field))),
+      spark: buckets.map((bucket) => bucket.value),
+    });
+  }
+  const charts: ChartConfig[] = [];
+  if (facet) {
+    charts.push({
+      id: "facet-distribution",
+      title: t("{{facet}} distribution", { facet: facet.label }),
+      type: "pie",
+      data: foldDistribution(distribution, pieSlices).map((entry) => ({
+        label: entry.other ? t("Other") : record.valueLabel(entry.value),
+        value: entry.count,
+        color: theme[`${(!entry.other && facet.tint?.(entry.value)) || "gray"}9`]?.val,
+      })),
+    });
+  }
+  if (lead) {
+    charts.push({
+      id: "metric-histogram",
+      title: t("{{metric}} distribution", { metric: lead.label }),
+      type: "bar",
+      data: buckets,
+    });
+  }
+  const holders = metrics
+    .filter((metric) => metric.record)
+    .flatMap((metric) => {
+      const doc = topBy(rows as never[], metric.field, 1)[0] as TDoc | undefined;
+      return doc
+        ? [
+            {
+              id: metric.field,
+              label: metric.record as string,
+              doc,
+              value: formatMetric(metric, Number(doc[metric.field as keyof TDoc]) || 0),
+            },
+          ]
+        : [];
+    });
+
+  const onAdd =
+    rights.create && navigate
+      ? () => navigate(frappeRouteHref(route, { mode: "create" }))
+      : undefined;
+  const sectionId = (name: string) => (testID ? `${testID}-${name}` : undefined);
+
+  if (!config?.baseURL && !config?.fixtures) {
+    return <FrappeNotConfigured doctype={doctype} page />;
+  }
+
+  const header = (
+    <YStack {...knobProps.gap}>
+      <Breadcrumbs
+        items={[{ label: listName, href: route }, { label: pageTitle }]}
+        onNavigate={(href) => navigate?.(href)}
+      />
+      <PageHeader
+        title={pageTitle}
+        subtitle={
+          subtitle && !isLoading && !error && rows.length > 0 ? subtitle(rows.length) : undefined
+        }
+        actions={
+          <Button
+            variant="outlined"
+            minHeight={knobProps.sizeToken}
+            onPress={() => navigate?.(route)}
+            icon={<ArrowLeftIcon size={16} />}
+            testID={sectionId("back")}
+          >
+            {t("Back to {{title}}", { title: listName })}
+          </Button>
+        }
+      />
+    </YStack>
+  );
+
+  if (error) {
+    return (
+      <Screen scroll={false}>
+        {header}
+        <EmptyState
+          intent="error"
+          title={t("Couldn't load {{title}}", { title: listName })}
+          description={t("Check the connection and try again.")}
+        />
+      </Screen>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Screen>
+        {header}
+        <YStack testID={sectionId("skeleton")}>
+          <AsyncSkeleton layout="dashboard" />
+        </YStack>
+      </Screen>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <Screen scroll={false}>
+        {header}
+        <EmptyState
+          icon={<SparkleIcon size={28} />}
+          title={t("No {{title}} to analyze", { title: listName })}
+          description={t("Add a record and the analytics will light up.")}
+          action={
+            onAdd ? (
+              <Button theme="accent" onPress={onAdd}>
+                {t("Add your first {{doctype}}", { doctype })}
+              </Button>
+            ) : undefined
+          }
+        />
+      </Screen>
+    );
+  }
+
+  return (
+    <Screen>
+      <FrappeReconnectIndicator config={connection} />
+      {header}
+
+      <InsightsKpiBand
+        hero={{ id: "total", title: t("Total {{title}}", { title: listName }), value: rows.length }}
+        tiles={tiles}
+        charts={charts}
+        testID={sectionId("dashboard")}
+      />
+
+      {holders.length > 0 || metrics.length > 0 ? (
+        <XStack flexWrap="wrap" alignItems="flex-start" {...knobProps.gapLg}>
+          {holders.length > 0 ? (
+            <PageSection
+              title={t("Record holders")}
+              divider={false}
+              flexGrow={1}
+              flexShrink={1}
+              flexBasis={280}
+              minWidth={0}
+            >
+              <InsightsRecords tiles={holders} record={record} testID={sectionId("records")} />
+            </PageSection>
+          ) : null}
+          {metrics.length > 0 ? (
+            <PageSection
+              title={t("Leaders")}
+              description={t("The top five by the field you pick; open any row.")}
+              divider={false}
+              flexGrow={2}
+              flexShrink={1}
+              flexBasis={420}
+              minWidth={0}
+            >
+              <InsightsLeaders
+                rows={rows}
+                metrics={metrics}
+                record={record}
+                testID={sectionId("leaderboard")}
+              />
+            </PageSection>
+          ) : null}
+        </XStack>
+      ) : null}
+
+      <PageSection
+        title={t("All {{title}}", { title: listName })}
+        description={t("Every record, {{count}} per page; sort any column.", { count: pageSize })}
+        divider={false}
+      >
+        <InsightsTable
+          rows={rows}
+          metrics={metrics}
+          record={record}
+          facetLabel={facet ? plural : undefined}
+          pageSize={pageSize}
+          label={t("All {{title}}", { title: listName })}
+          testID={sectionId("roster")}
+        />
+      </PageSection>
+
+      {facet ? (
+        <PageSection
+          title={t("Browse by {{facet}}", { facet: facet.label })}
+          description={t("Open the list narrowed to one value.")}
+          divider={false}
+          paddingBottom="$6"
+        >
+          <InsightsFacetTags
+            distribution={distribution}
+            label={record.valueLabel}
+            tint={facet.tint}
+            onSelect={(value) => navigate?.(`${route}?${facet.param}=${encodeURIComponent(value)}`)}
+            testID={sectionId("tag")}
+          />
+        </PageSection>
+      ) : null}
+    </Screen>
+  );
+}

package/src/FrappeKPICard.stories.tsx

@@ -4,6 +4,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 // catalog names it does not define).
 import { KPICard } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { CurrencyDollarIcon } from "@phosphor-icons/react";
 import { XStack } from "tamagui";
 import { FrappeKPICard } from "./FrappeKPICard";
@@ -81,8 +82,7 @@ function jsonResponse(body: unknown, status = 200): Response {
         return jsonResponse({ docs: [todoMetaRaw(decodeURIComponent(doctype))] });
       }
       const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch)
-        return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (metaMatch) return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
       }
@@ -201,7 +201,7 @@ export const Clickable = () => (
 
 export const LongTitle = () => (
   <KPICard
-    width={220}
+    width={sizeRecipeEscape(220, "story fixture: a card narrow enough to truncate the long title")}
     config={{
       id: "long",
       title:

package/src/FrappeKanban.stories.tsx

@@ -5,6 +5,8 @@ import { FrappeKanban, type KanbanColumn } from "./FrappeKanban";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
+
 export default {
   title: "FrappeUI/FrappeKanban",
   component: FrappeKanban,
@@ -310,10 +312,7 @@ const bugColumns: KanbanColumn[] = [
 ];
 
 export const BugTracker = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Bug: bugFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ Bug: bugFixtures })}>
     <FrappeKanban<Bug>
       doctype="Bug"
       columns={bugColumns}
@@ -360,10 +359,7 @@ export const Loading = () => (
 
 /** Zero documents, no failure — configured columns render with per-column "No items" (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ ToDo: [] })}>
     <FrappeKanban<ToDo>
       doctype="ToDo"
       columns={todoColumns}

package/src/FrappeLikedBy.tsx

@@ -18,12 +18,14 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, isWeb, styled, useTheme, type YStackProps } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { useFrappeUsers } from "./frappeUsers";
 import { toLiveLoadError } from "./liveErrors";
 
+const LikedByAvatarSlot = styled(XStack, { name: "LikedByAvatarSlot" });
+
 // ---------------------------------------------------------------------------
 // Pure helpers (unit-tested)
 // ---------------------------------------------------------------------------
@@ -316,19 +318,19 @@ function FrappeLikedByBody({
               {visibleAvatars.map((id, index) => {
                 const info = users.get(id);
                 return (
-                  <XStack key={id} marginLeft={index === 0 ? 0 : -8} zIndex={index + 1}>
+                  <LikedByAvatarSlot key={id} marginLeft={index === 0 ? 0 : -8} zIndex={index + 1}>
                     <Avatar size="$1.5" src={info?.image} name={info?.label ?? id} />
-                  </XStack>
+                  </LikedByAvatarSlot>
                 );
               })}
               {overflow > 0 ? (
-                <XStack marginLeft={-8} zIndex={visibleAvatars.length + 1}>
+                <LikedByAvatarSlot marginLeft={-8} zIndex={visibleAvatars.length + 1}>
                   <Avatar
                     size="$1.5"
                     initials={`+${overflow}`}
                     alt={t("{{count}} more users", { count: overflow })}
                   />
-                </XStack>
+                </LikedByAvatarSlot>
               ) : null}
             </XStack>
           ) : null}

package/src/FrappeListView.card.spec.tsx

@@ -0,0 +1,157 @@
+// FrappeListView's record card (MPO-411): a list whose doctype declares a
+// look draws each record as a card without a card slot of its own, the way
+// pokemon's roster drew its Pokedex card by hand.
+import fs from "node:fs";
+import path from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeNavigation } from "./frappeNavigation";
+import { FrappeListView, type FrappeListViewProps } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+import { favoritesStore } from "./list/favorites";
+
+const host = "https://listview-card.spec.test";
+const realFetch = globalThis.fetch;
+const favoritesKey = "card-spec-favorites";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  favoritesStore(favoritesKey).setState(() => ({ names: [] }));
+});
+
+const look: FrappeListViewProps<RosterPokemon>["look"] = {
+  title: (doc) => (doc.pokemon_name ?? "").toUpperCase(),
+  code: (doc) => `#${String(doc.poke_id ?? 0).padStart(3, "0")}`,
+  subtitle: (doc) => doc.species,
+  images: (doc) => [`https://art.spec.test/${doc.poke_id}.png`, doc.sprite_front ?? ""],
+};
+
+function renderList(navigate = vi.fn()) {
+  const navigation: FrappeNavigation = {
+    usePathname: () => "/pokemon",
+    useNavigate: () => navigate,
+  };
+  return renderWithProviders(
+    <FrappeProvider baseURL={host} fixtures={createRosterFixtures()} navigation={navigation}>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        route="/pokemon"
+        fields={rosterPokemonFields}
+        defaultViewMode="grid"
+        look={look}
+        favorites={favoritesKey}
+        facets={[
+          {
+            param: "type",
+            doctype: "Pokemon Poke Type",
+            field: "poke_type",
+            orderBy: "slot",
+            label: "Type",
+            options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
+            optionLabel: (value) => `type:${value}`,
+            tint: (value) => (value === "grass" ? "grass" : "purple"),
+          },
+        ]}
+      />
+    </FrappeProvider>,
+  );
+}
+
+describe("FrappeListView draws a record card from the doctype's look", () => {
+  it("offers the card grid and names each card by the doctype and the record", async () => {
+    renderList();
+    const card = await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    expect(card.textContent).toContain("BULBASAUR");
+    expect(card.textContent).toContain("#001");
+    expect(card.textContent).toContain("Seed Pokémon");
+    expect(screen.getAllByTestId(/^pokemon-card-/)).toHaveLength(6);
+  });
+
+  it("draws the look's first image and the facet's values as badges in slot order", async () => {
+    renderList();
+    const card = await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    expect(card.querySelector("img")?.getAttribute("src")).toBe("https://art.spec.test/1.png");
+    await waitFor(() => {
+      const text = card.textContent ?? "";
+      expect(text).toContain("type:grass");
+      expect(text.indexOf("type:grass")).toBeLessThan(text.indexOf("type:poison"));
+    });
+  });
+
+  it("links the card to the record under the list's route", async () => {
+    renderList();
+    const card = await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    expect(card.querySelector("a")?.getAttribute("href")).toBe("/pokemon/bulbasaur");
+  });
+
+  it("keeps the heart a button beside the link that toggles the favorite and opens nothing", async () => {
+    const navigate = vi.fn();
+    renderList(navigate);
+    const heart = await screen.findByTestId("pokemon-favorite-bulbasaur", {}, { timeout: 5000 });
+    expect(heart.tagName).toBe("BUTTON");
+    expect(heart.getAttribute("type")).toBe("button");
+    expect(heart.closest("a")).toBeNull();
+    expect(heart.getAttribute("aria-pressed")).toBe("false");
+    expect(heart.getAttribute("aria-label")).toBe("Add BULBASAUR to favorites");
+    fireEvent.click(heart);
+    await waitFor(() => expect(favoritesStore(favoritesKey).state.names).toEqual(["bulbasaur"]));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-favorite-bulbasaur").getAttribute("aria-pressed")).toBe(
+        "true",
+      ),
+    );
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});
+
+describe("RecordCard's native twin", () => {
+  const source = fs.readFileSync(path.resolve(__dirname, "list/RecordCard.native.tsx"), "utf8");
+
+  it("presses the card itself, since a native Anchor loses the tap to the Card", () => {
+    expect(source).not.toContain("<Anchor");
+    expect(source).toMatch(/onPress=\{\(\) => onPress\?\.\(\)\}/);
+  });
+
+  it("stops the heart's press from reaching the card", () => {
+    const handler = source.slice(
+      source.indexOf("const handleToggleFavorite"),
+      source.indexOf("return ("),
+    );
+    expect(handler).toContain("stopPropagation");
+  });
+});