@multiplatform.one/backoffice 6.7.0 → 7.0.0

package/src/report/report-grid.spec.tsx

@@ -0,0 +1,175 @@
+/**
+ * ReportGrid row keyboard contract (LC-49 ONE-TAB-STOP, LC-50
+ * KEY-ACTIVATION, DG-A11Y-06 names).
+ *
+ * The data row is ONE pressable unit: click anywhere activates, Enter AND
+ * Space activate from the keyboard, the data-row set exposes exactly one
+ * tab stop (roving tabindex, arrows/Home/End move it), rows are named by
+ * doc identity, presses on inner interactive content (Link cells) never
+ * reach the row handler, and there is no per-cell pressable chrome inside
+ * body cells. Group header rows are not pressable and hold no tab stop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ReportGrid, type ReportGridProps } from "./report-grid";
+import { buildGridRows, type ReportColumnDef, type ReportRow } from "./reportViewModel";
+
+const columns: ReportColumnDef[] = [
+  { fieldname: "name", label: "ID", fieldtype: "Data", kind: "text", width: 160, align: "left" },
+  {
+    fieldname: "status",
+    label: "Status",
+    fieldtype: "Select",
+    kind: "select",
+    options: "Open\nClosed",
+    width: 120,
+    align: "left",
+  },
+  {
+    fieldname: "assigned_by",
+    label: "Assigned By",
+    fieldtype: "Link",
+    kind: "link",
+    options: "User",
+    width: 160,
+    align: "left",
+  },
+];
+
+const dataRows: ReportRow[] = [
+  { name: "TD-0001", status: "Open", assigned_by: "alice@example.com" },
+  { name: "TD-0002", status: "Closed", assigned_by: "bob@example.com" },
+  { name: "TD-0003", status: "Open", assigned_by: "carol@example.com" },
+];
+
+function pressRows(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-report-row="true"]')) as HTMLElement[];
+}
+
+function renderGrid(overrides: Partial<ReportGridProps> = {}) {
+  const onOpenRow = vi.fn();
+  const onOpenLink = vi.fn();
+  const result = renderWithProviders(
+    <ReportGrid
+      columns={columns}
+      rows={buildGridRows(dataRows, 0, 20)}
+      sort={{ field: "modified", order: "desc" }}
+      onSortChange={vi.fn()}
+      columnFilters={{}}
+      onColumnFilterChange={vi.fn()}
+      onOpenRow={onOpenRow}
+      onOpenLink={onOpenLink}
+      totals={[]}
+      {...overrides}
+    />,
+  );
+  return { ...result, onOpenRow, onOpenLink };
+}
+
+describe("ReportGrid row activation (LC-50)", () => {
+  it("activates on a click anywhere in the row with the row's name", () => {
+    const { onOpenRow } = renderGrid();
+    fireEvent.click(screen.getByText("Closed"));
+    expect(onOpenRow).toHaveBeenCalledTimes(1);
+    expect(onOpenRow).toHaveBeenCalledWith("TD-0002");
+  });
+
+  it("activates on Enter AND Space, once per physical key press", () => {
+    const { container, onOpenRow } = renderGrid();
+    const rows = pressRows(container);
+    rows[0].focus();
+
+    fireEvent.keyDown(rows[0], { key: "Enter" });
+    expect(onOpenRow).toHaveBeenCalledTimes(1);
+    expect(onOpenRow).toHaveBeenLastCalledWith("TD-0001");
+
+    fireEvent.keyDown(rows[0], { key: " " });
+    expect(onOpenRow).toHaveBeenCalledTimes(2);
+
+    // Key auto-repeat never machine-guns activations.
+    fireEvent.keyDown(rows[0], { key: "Enter", repeat: true });
+    expect(onOpenRow).toHaveBeenCalledTimes(2);
+  });
+
+  it("names each pressable row by doc identity (DG-A11Y-06)", () => {
+    const { container } = renderGrid();
+    expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+      "TD-0001",
+      "TD-0002",
+      "TD-0003",
+    ]);
+  });
+});
+
+describe("ReportGrid roving tab stop (LC-49)", () => {
+  it("exposes exactly one tab stop; arrows and Home/End rove it", async () => {
+    const { container } = renderGrid();
+    const rows = pressRows(container);
+    expect(rows).toHaveLength(3);
+    expect(rows.map((row) => row.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+
+    rows[0].focus();
+    expect(document.activeElement).toBe(rows[0]);
+
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+    // The anchor follows focus: still exactly one tabindex=0.
+    await waitFor(() => {
+      const stops = pressRows(container).map((row) => row.getAttribute("tabindex"));
+      expect(stops).toEqual(["-1", "0", "-1"]);
+    });
+
+    fireEvent.keyDown(rows[1], { key: "End" });
+    expect(document.activeElement).toBe(rows[2]);
+    fireEvent.keyDown(rows[2], { key: "Home" });
+    expect(document.activeElement).toBe(rows[0]);
+    fireEvent.keyDown(rows[0], { key: "ArrowUp" });
+    // Clamped at the first row — no wrap.
+    expect(document.activeElement).toBe(rows[0]);
+  });
+
+  it("group header rows are not pressable and hold no tab stop", () => {
+    const { container } = renderGrid({
+      rows: buildGridRows(dataRows, 0, 20, "status"),
+      groupByColumn: columns[1],
+    });
+    // Three data rows stay pressable; the injected group headers are not.
+    expect(pressRows(container)).toHaveLength(3);
+    const groupHeaderCells = Array.from(container.querySelectorAll('[role="rowheader"]'));
+    expect(groupHeaderCells.length).toBeGreaterThan(0);
+    for (const cell of groupHeaderCells) {
+      const groupRow = cell.closest('[role="row"]') as HTMLElement;
+      expect(groupRow.getAttribute("data-report-row")).toBeNull();
+      expect(groupRow.getAttribute("tabindex")).toBeNull();
+    }
+  });
+});
+
+describe("ReportGrid inner interactive content wins", () => {
+  it("a Link cell press opens the linked doc, never the row", () => {
+    const { onOpenRow, onOpenLink } = renderGrid();
+    fireEvent.click(screen.getByText("alice@example.com"));
+    expect(onOpenLink).toHaveBeenCalledTimes(1);
+    expect(onOpenLink).toHaveBeenCalledWith("User", "alice@example.com");
+    expect(onOpenRow).not.toHaveBeenCalled();
+  });
+
+  it("keys on focused inner content belong to that content, not the row", () => {
+    const { onOpenRow } = renderGrid();
+    // Keydown dispatched from the link bubbles to the row, where the
+    // target !== currentTarget guard hands it back to the inner control.
+    fireEvent.keyDown(screen.getByText("alice@example.com"), { key: "Enter" });
+    expect(onOpenRow).not.toHaveBeenCalled();
+  });
+
+  it("renders no per-cell pressable chrome inside body cells", () => {
+    const { container } = renderGrid();
+    const body = container.querySelector("tbody");
+    expect(body).not.toBeNull();
+    // Link cells are the only sanctioned inner interactive content; no
+    // per-cell buttons wrap plain values.
+    expect(body!.querySelectorAll('[role="button"], button')).toHaveLength(0);
+  });
+});

package/src/report/report-grid.tsx

@@ -8,12 +8,17 @@
 // scrollport and wraps header content in Text, so it cannot host an input
 // row under its headers today — capability gap flagged to the table
 // workstream; this grid is the interim desk-parity surface.
-import { ScrollView, Text, Tooltip, View, XStack } from "@multiplatform.one/components";
+import { ScrollView, Text, Tooltip, View, XStack, isWeb } from "@multiplatform.one/components";
 import { Input } from "@multiplatform.one/forms";
 import { Table } from "@multiplatform.one/table";
-import { formatCurrency, formatNumber, formatPercent } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+} from "@multiplatform.one/theme";
 import { CaretDownIcon, CaretUpDownIcon } from "@phosphor-icons/react";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { formatDateCell } from "../list/listFormat";
@@ -28,6 +33,50 @@ import {
 
 const ROW_NUMBER_WIDTH = 56;
 
+// ── LC-49/LC-50 row keyboard contract ───────────────────────────────
+// Local mirror of the table package's `isInteractiveInnerTarget`
+// (public/table/src/utils/rowPress.ts — internal util, not on the
+// barrel): when the whole row is one pressable unit, presses and keys
+// that originate on inner interactive content (Link cells, future
+// editors) must keep working without also firing the row press.
+const INTERACTIVE_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="combobox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="option"]',
+  '[role="radio"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="switch"]',
+  '[role="textbox"]',
+  "[aria-expanded]",
+].join(", ");
+
+function isInteractiveInnerTarget(target: unknown, boundary: unknown): boolean {
+  if (typeof Element === "undefined") return false;
+  if (!(target instanceof Element)) return false;
+  const boundaryEl = boundary instanceof Element ? boundary : null;
+  let node: Element | null = target;
+  while (node && node !== boundaryEl) {
+    if (node.matches(INTERACTIVE_SELECTOR)) return true;
+    const tabIndex = node.getAttribute("tabindex");
+    // A tab stop of its own (0 or positive) marks a focusable control; the
+    // row's roving -1/0 tabindex lives on the boundary, not inside it.
+    if (tabIndex != null && Number(tabIndex) >= 0) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+
 export interface ReportGridProps {
   columns: readonly ReportColumnDef[];
   rows: readonly ReportGridRow[];
@@ -165,12 +214,116 @@ export function ReportGrid({
     [sort, onSortChange],
   );
 
+  // ── Row press + keyboard (LC-49 ONE-TAB-STOP, LC-50 KEY-ACTIVATION) ──
+  // Mirrors DataTable's getRowPressProps contract (DataTableRoot): the
+  // DATA-row set exposes exactly one tab stop (roving anchor — the focused
+  // row while focus is inside the set, else the first row); Enter AND
+  // Space each fire exactly one activation; arrows/Home/End rove focus;
+  // inner interactive content (Link cells) wins over the row press.
+  const isSSR = typeof window === "undefined";
+  const [rowAnchor, setRowAnchor] = useState(0);
+  const dataRowCount = rows.reduce((count, row) => (row.kind === "row" ? count + 1 : count), 0);
+  const effectiveRowAnchor = Math.min(rowAnchor, Math.max(dataRowCount - 1, 0));
+
+  const getRowPressProps = useCallback(
+    (row: ReportRow, pressIndex: number) => {
+      const handlePress = (
+        event:
+          | { defaultPrevented?: boolean; target?: unknown; nativeEvent?: { target?: unknown } }
+          | undefined,
+      ) => {
+        if (event?.defaultPrevented) return;
+        const targetEl = event?.target ?? event?.nativeEvent?.target;
+        if (isWeb && typeof Element !== "undefined" && targetEl instanceof Element) {
+          const boundary = targetEl.closest('[data-report-row="true"]');
+          if (isInteractiveInnerTarget(targetEl, boundary)) return;
+        }
+        onOpenRow(row.name);
+      };
+      return {
+        // Accessible row name from doc identity (DG-A11Y-06); positional
+        // fallback for the defensive empty-name case.
+        "aria-label":
+          row.name || t("report.rowLabel", { defaultValue: "Row {{row}}", row: pressIndex + 1 }),
+        onPress: handlePress,
+        cursor: "pointer" as const,
+        hoverStyle: { backgroundColor: "$color2" },
+        pressStyle: { backgroundColor: "$color4" },
+        ...(isWeb && !isSSR
+          ? {
+              tabIndex: pressIndex === effectiveRowAnchor ? 0 : -1,
+              outlineWidth: 0,
+              focusStyle: { outlineWidth: 0 },
+              focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
+              "data-report-row": "true",
+              onFocus: (event: React.FocusEvent) => {
+                // Only a focused ROW moves the anchor; focus on an inner
+                // control (own tab stop) leaves the roving state alone.
+                if (event.target === event.currentTarget) setRowAnchor(pressIndex);
+              },
+              onBlur: (event: React.FocusEvent) => {
+                const next = event.relatedTarget;
+                if (!(next instanceof Element) || !next.closest('[data-report-row="true"]')) {
+                  setRowAnchor(0);
+                }
+              },
+              onKeyDown: (event: React.KeyboardEvent) => {
+                if (event.defaultPrevented) return;
+                // Keys on focused inner controls belong to those controls.
+                if (event.target !== event.currentTarget) return;
+                const key = event.key;
+                if (key === "Enter" || key === " " || key === "Spacebar") {
+                  // preventDefault stops Space page-scroll; one physical
+                  // key press = one activation (auto-repeat guarded).
+                  event.preventDefault();
+                  event.stopPropagation();
+                  if (event.repeat) return;
+                  onOpenRow(row.name);
+                  return;
+                }
+                if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const rowEl = event.currentTarget as HTMLElement;
+                  const scope = rowEl.closest('[data-report-grid="true"]') ?? rowEl.ownerDocument;
+                  const pressRows = Array.from(
+                    scope.querySelectorAll('[data-report-row="true"]'),
+                  ) as HTMLElement[];
+                  const currentIdx = pressRows.indexOf(rowEl);
+                  if (currentIdx < 0) return;
+                  const nextIdx =
+                    key === "Home"
+                      ? 0
+                      : key === "End"
+                        ? pressRows.length - 1
+                        : Math.min(
+                            Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0),
+                            pressRows.length - 1,
+                          );
+                  pressRows[nextIdx]?.focus();
+                }
+              },
+            }
+          : {}),
+      };
+    },
+    [onOpenRow, effectiveRowAnchor, isSSR, t],
+  );
+
   const totalsByField = new Map(totals.map((total) => [total.fieldname, total]));
   const gridWidth = ROW_NUMBER_WIDTH + columns.reduce((sum, column) => sum + column.width, 0);
 
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator flexGrow={0} flexShrink={1}>
-      <Table minWidth={gridWidth} width={gridWidth} displayMode="flex" cellHeight="$3">
+      <Table
+        minWidth={gridWidth}
+        width={gridWidth}
+        displayMode="flex"
+        cellHeight="$3"
+        // Roving scope marker: arrow-key navigation queries pressable rows
+        // within this container (getRowPressProps).
+        {...({ "data-report-grid": "true" } as Record<string, unknown>)}
+      >
         <Table.Head>
           {/* Header row: label + sort affordance (aria-sort, Enter/Space). */}
           <Table.Row>
@@ -208,6 +361,9 @@ export function ReportGrid({
                       cursor="pointer"
                       role="button"
                       tabIndex={0}
+                      outlineWidth={0}
+                      focusStyle={{ outlineWidth: 0 }}
+                      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
                       aria-label={t("report.sortBy", {
                         defaultValue: "Sort by {{column}}",
                         column: column.label,
@@ -259,8 +415,9 @@ export function ReportGrid({
                   key={column.fieldname}
                   cellWidth={column.width}
                   paddingVertical="$1.5"
+                  overflow="visible"
                 >
-                  <View flex={1} minWidth={0}>
+                  <View flex={1} minWidth={0} overflow="visible">
                     <Input
                       size="$2"
                       compact
@@ -283,54 +440,60 @@ export function ReportGrid({
           </Table.Row>
         </Table.Head>
         <Table.Body>
-          {rows.map((gridRow) => {
-            if (gridRow.kind === "group") {
-              const label =
-                gridRow.value === null || gridRow.value === undefined || gridRow.value === ""
-                  ? t("report.groupEmpty", "(blank)")
-                  : String(gridRow.value);
+          {(() => {
+            // Position within the pressable DATA-row set (group headers are
+            // not pressable and hold no tab stop).
+            let pressCursor = -1;
+            return rows.map((gridRow) => {
+              if (gridRow.kind === "group") {
+                const label =
+                  gridRow.value === null || gridRow.value === undefined || gridRow.value === ""
+                    ? t("report.groupEmpty", "(blank)")
+                    : String(gridRow.value);
+                return (
+                  <Table.Row key={gridRow.key} backgroundColor="$color2">
+                    <Table.Cell cellWidth={gridWidth} paddingVertical="$1.5" role="rowheader">
+                      <Text fontSize="$2" fontWeight="700" color="$color11" numberOfLines={1}>
+                        {groupByColumn
+                          ? t("report.groupHeader", {
+                              defaultValue: "{{field}}: {{value}} · {{count}}",
+                              field: groupByColumn.label,
+                              value: label,
+                              count: gridRow.count,
+                            })
+                          : label}
+                      </Text>
+                    </Table.Cell>
+                  </Table.Row>
+                );
+              }
+              pressCursor += 1;
               return (
-                <Table.Row key={gridRow.key} backgroundColor="$color2">
-                  <Table.Cell cellWidth={gridWidth} paddingVertical="$1.5" role="rowheader">
-                    <Text fontSize="$2" fontWeight="700" color="$color11" numberOfLines={1}>
-                      {groupByColumn
-                        ? t("report.groupHeader", {
-                            defaultValue: "{{field}}: {{value}} · {{count}}",
-                            field: groupByColumn.label,
-                            value: label,
-                            count: gridRow.count,
-                          })
-                        : label}
+                // Spread LAST so the roving tabIndex/handlers stay in
+                // charge of this row's interactivity (DataTable precedent).
+                <Table.Row
+                  key={gridRow.key}
+                  {...(getRowPressProps(gridRow.row, pressCursor) as Record<string, unknown>)}
+                >
+                  <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
+                    <Text fontSize="$2" color="$color9" fontFamily="$mono">
+                      {gridRow.index}
                     </Text>
                   </Table.Cell>
+                  {columns.map((column) => (
+                    <Table.Cell
+                      key={column.fieldname}
+                      cellWidth={column.width}
+                      paddingVertical="$2"
+                      justifyContent={alignToJustify(column.align)}
+                    >
+                      <ReportCellValue column={column} row={gridRow.row} onOpenLink={onOpenLink} />
+                    </Table.Cell>
+                  ))}
                 </Table.Row>
               );
-            }
-            return (
-              <Table.Row
-                key={gridRow.key}
-                cursor="pointer"
-                hoverStyle={{ backgroundColor: "$color2" }}
-                onPress={() => onOpenRow(gridRow.row.name)}
-              >
-                <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
-                  <Text fontSize="$2" color="$color9" fontFamily="$mono">
-                    {gridRow.index}
-                  </Text>
-                </Table.Cell>
-                {columns.map((column) => (
-                  <Table.Cell
-                    key={column.fieldname}
-                    cellWidth={column.width}
-                    paddingVertical="$2"
-                    justifyContent={alignToJustify(column.align)}
-                  >
-                    <ReportCellValue column={column} row={gridRow.row} onOpenLink={onOpenLink} />
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            );
-          })}
+            });
+          })()}
         </Table.Body>
         {totals.length > 0 && (
           <Table.Foot borderTopWidth={1} borderTopColor="$color6">

package/src/report/report-toolbar.spec.tsx

@@ -0,0 +1,90 @@
+/**
+ * ReportToolbar DOM prop hygiene (LC-46 class).
+ *
+ * The Save As popover previously passed `elevate` to raw tamagui
+ * Popover.Content, which has no such variant in tamagui 2.0 — the bare
+ * boolean fell through to the DOM element and fired React's
+ * non-boolean-attribute console.error on every popover open (and painted
+ * no shadow: the "styling" was dead). The surface now rides the house
+ * PopoverContent (elevatedSurface knob recipe). Render + open → zero
+ * unknown-prop / non-boolean-attribute console errors.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor } from "@testing-library/react";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReportColumnDef } from "./reportViewModel";
+import { ReportToolbar } from "./report-toolbar";
+
+const DOM_PROP_LEAK =
+  /does not recognize the `.+` prop on a DOM element|non-boolean attribute|Invalid DOM property/i;
+
+const columns: ReportColumnDef[] = [
+  { fieldname: "name", label: "ID", fieldtype: "Data", kind: "text", width: 160, align: "left" },
+  {
+    fieldname: "status",
+    label: "Status",
+    fieldtype: "Select",
+    kind: "select",
+    options: "Open\nClosed",
+    width: 120,
+    align: "left",
+  },
+];
+
+function renderToolbar() {
+  return renderWithProviders(
+    <ReportToolbar
+      columns={columns}
+      selected={["name", "status"]}
+      onToggleColumn={vi.fn()}
+      onResetColumns={vi.fn()}
+      groupBy={null}
+      onGroupByChange={vi.fn()}
+      baseFilters={[]}
+      columnFilterCount={0}
+      onClearColumnFilters={vi.fn()}
+      savedReports={[]}
+      currentReport={null}
+      onSelectReport={vi.fn()}
+      onSaveReport={vi.fn()}
+      onDeleteReport={vi.fn()}
+      onExport={vi.fn()}
+    />,
+  );
+}
+
+let errorSpy: ReturnType<typeof vi.spyOn> | null = null;
+beforeEach(() => {
+  // Strict local spy: the shared test setup filters known leak warnings
+  // globally, but this arm must stay falsifiable — capture everything.
+  errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+});
+afterEach(() => {
+  errorSpy?.mockRestore();
+  errorSpy = null;
+});
+
+function leakMessages(): string[] {
+  return (errorSpy?.mock.calls ?? [])
+    .map((args: unknown[]) => args.map(String).join(" "))
+    .filter((message) => DOM_PROP_LEAK.test(message));
+}
+
+describe("ReportToolbar Save As popover (LC-46 DOM prop hygiene)", () => {
+  it("opens the Save As popover without leaking non-DOM props", async () => {
+    const result = renderToolbar();
+
+    const saveAs = result.findTextElement("Save As…");
+    expect(saveAs).toBeDefined();
+    fireEvent.click(saveAs as Element);
+
+    await waitFor(() => {
+      expect(document.querySelector('input[placeholder="New report name"]')).toBeTruthy();
+    });
+
+    expect(leakMessages()).toEqual([]);
+    // Belt-and-braces: no leaked attribute rendered anywhere either.
+    expect(document.querySelector("[elevate]")).toBeNull();
+  });
+});

package/src/report/report-toolbar.tsx

@@ -3,7 +3,14 @@
 // group-by, saved-report selector + save affordances. Right: filter chips
 // (?f= base filters + column-filter summary) and Export. Page size lives in
 // the footer pager (list-screen parity), not here.
-import { DropdownMenu, Popover, Text, XStack, YStack } from "@multiplatform.one/components";
+import {
+  DropdownMenu,
+  Popover,
+  PopoverContent,
+  Text,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
 import { Button, Input } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
@@ -229,14 +236,10 @@ export function ReportToolbar({
             {t("report.saveAs", "Save As…")}
           </Button>
         </Popover.Trigger>
-        <Popover.Content
-          backgroundColor="$background"
-          {...knobProps.borderRadius}
-          {...knobProps.panelPadding}
-          borderWidth={1}
-          borderColor="$borderColor"
-          elevate
-        >
+        {/* House overlay surface (elevatedSurface knob recipe) — raw
+            Popover.Content has no `elevate` variant in tamagui 2.0, so the
+            bare boolean leaked to the DOM (LC-46 class). */}
+        <PopoverContent {...knobProps.panelPadding}>
           <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
           <XStack gap="$2" alignItems="center" minWidth={280}>
             <YStack flex={1} minWidth={0}>
@@ -262,7 +265,7 @@ export function ReportToolbar({
               {t("report.save", "Save")}
             </Button>
           </XStack>
-        </Popover.Content>
+        </PopoverContent>
       </Popover>
 
       <XStack flex={1} />