@multiplatform.one/components 7.4.1 → 7.6.0

package/src/views/Kanban.tsx

@@ -1,6 +1,3 @@
-import { componentColors } from "../componentColors";
-import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
-import { EmptyState } from "../layouts/page";
 import { Spinner } from "@multiplatform.one/forms";
 import {
   hairlineWidth,
@@ -23,10 +20,8 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "../shared/i18n";
 import {
   AnimatePresence,
-  Card,
   ListItem,
   ScrollView,
   Text,
@@ -35,6 +30,11 @@ import {
   YStack,
   type YStackProps,
 } from "tamagui";
+import { componentColors } from "../componentColors";
+import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
+import { EmptyState } from "../layouts/page";
+import { Card } from "../surfaces";
+import { useTranslation } from "../shared/i18n";
 import {
   autoScrollVelocity,
   describeCancel,
@@ -229,8 +229,6 @@ interface OverlayApi {
   setPointer: (x: number, y: number) => void;
 }
 
-type ResolvedKnobProps = ReturnType<typeof useResolvedKnobs>["knobProps"];
-
 /**
  * Generic Kanban board component with column-level virtualization,
  * keyboard navigation, and Trello-class drag-and-drop motion.
@@ -1011,8 +1009,6 @@ export function Kanban<T>({
             registerApi={(api) => {
               overlayApiRef.current = api;
             }}
-            knobRadius={knobProps.borderRadius}
-            sizeToken={knobProps.sizeToken}
           >
             {renderCard(overlaySession.item)}
           </KanbanDragOverlay>
@@ -1048,8 +1044,6 @@ interface KanbanDragOverlayProps {
   settleTo?: { x: number; y: number };
   transition: any;
   registerApi: (api: OverlayApi) => void;
-  knobRadius: ResolvedKnobProps["borderRadius"];
-  sizeToken: any;
   children: React.ReactNode;
 }
 
@@ -1067,8 +1061,6 @@ function KanbanDragOverlay({
   settleTo,
   transition,
   registerApi,
-  knobRadius,
-  sizeToken,
   children,
 }: KanbanDragOverlayProps) {
   const [pointerPos, setPointerPos] = useState<{ x: number; y: number } | null>(initialPos ?? null);
@@ -1112,18 +1104,10 @@ function KanbanDragOverlay({
         scale={lifted ? 1.03 : 1}
         rotate={lifted ? "2.5deg" : "0deg"}
         {...(lifted ? LIFT_SHADOW : undefined)}
-        {...knobRadius}
-        backgroundColor="$background"
         overflow="hidden"
         height="100%"
       >
-        <Card
-          size={sizeToken}
-          padding={0}
-          borderWidth={0}
-          backgroundColor="transparent"
-          height="100%"
-        >
+        <Card height="100%" overflow="hidden">
           {children}
         </Card>
       </View>
@@ -1352,20 +1336,12 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
       backgroundColor={
-        isDropTarget || isActiveColumn
-          ? componentColors.interactive.background
-          : componentColors.surface.background
-      }
-      borderWidth={knobProps.inputSurface.borderWidth}
-      borderColor={
-        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
+        isDropTarget || isActiveColumn ? componentColors.interactive.background : "transparent"
       }
       data-kanban-column={column.id}
     >
-      {column.color ? (
-        <View height={3} width="100%" backgroundColor={column.color as any} />
-      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -1376,12 +1352,13 @@ function KanbanColumnView<T>({
               height={8}
               borderRadius={4}
               backgroundColor={column.color as any}
+              data-kanban-column-dot
             />
           ) : undefined
         }
         iconAfter={
           itemCount !== undefined || renderColumnActions ? (
-            <XStack alignItems="center" gap="$1">
+            <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
                   color={componentColors.text.muted}
@@ -1483,19 +1460,20 @@ function KanbanColumnView<T>({
                 >
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${virtualItem.index}`}
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
                     minHeight={MIN_PRESS_TARGET}
                     transition={knobProps.transition}
                     {...(isNew && {
                       enterStyle: { opacity: 0, scale: 0.97 },
                     })}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
-                    borderStyle={ghost ? ("dashed" as any) : undefined}
-                    backgroundColor={isFocused ? "$accentBackground" : "$color1"}
+                    {...(ghost
+                      ? {
+                          borderWidth: hairlineWidth,
+                          borderColor: componentColors.interactive.border,
+                          borderStyle: "dashed" as any,
+                        }
+                      : undefined)}
+                    {...(isFocused ? { backgroundColor: "$accentBackground" } : undefined)}
                     {...(isFocused && wasKeyboardFocus()
                       ? keyboardFocusRingProps
                       : { outlineWidth: 0 })}
@@ -1537,17 +1515,7 @@ function KanbanColumnView<T>({
                   transition={knobProps.transition}
                   exitStyle={{ opacity: 0, scale: 0.97 }}
                 >
-                  <Card
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor="$borderColor"
-                    backgroundColor="$color1"
-                    overflow="hidden"
-                  >
-                    {renderCard(l.item)}
-                  </Card>
+                  <Card overflow="hidden">{renderCard(l.item)}</Card>
                 </View>
               ))}
             </AnimatePresence>
@@ -1594,7 +1562,7 @@ function KanbanColumnView<T>({
       </View>
 
       {isLoading && (
-        <YStack padding="$2" alignItems="center">
+        <YStack {...knobProps.panelPadding} alignItems="center">
           <Spinner size="small" />
         </YStack>
       )}

package/src/views/List.spec.tsx

@@ -0,0 +1,93 @@
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  List,
+  ListRow,
+  ListRowMeta,
+  useListItemState,
+  type ListHotkeys,
+  type ListItemState,
+  type ListProps,
+  type ListRowProps,
+} from "./List";
+import * as ViewExports from "./index";
+
+afterEach(cleanup);
+
+function atoms(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+const documents = [
+  { id: "1", title: "Q3 Vendor Contract" },
+  { id: "2", title: "Onboarding Checklist" },
+  { id: "3", title: "Invoice 1842" },
+];
+
+describe("List named exports", () => {
+  it("exports List, ListRow, ListRowMeta, and useListItemState from the views barrel", () => {
+    expect(ViewExports).toHaveProperty("List");
+    expect(ViewExports).toHaveProperty("ListRow");
+    expect(ViewExports).toHaveProperty("ListRowMeta");
+    expect(ViewExports).toHaveProperty("useListItemState");
+  });
+
+  it("keeps the public types as named exports (not a default)", () => {
+    expect(typeof List).toBe("function");
+    expect(typeof ListRow).toBe("function");
+    expect(typeof ListRowMeta).toBe("function");
+    expect(typeof useListItemState).toBe("function");
+    void (null as unknown as ListProps<unknown>);
+    void (null as unknown as ListRowProps);
+    void (null as unknown as ListItemState);
+    void (null as unknown as ListHotkeys);
+  });
+});
+
+describe("ListRow title — weight 400 on the TEXT NODE (R7 / §6.1)", () => {
+  it("does not paint 500 or 600 on the title text node", () => {
+    renderWithProviders(<ListRow title="Q3 Vendor Contract" />);
+    const textNode = screen.getByText("Q3 Vendor Contract");
+    const weight = atoms(textNode, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/500|600|weight-5|weight-6|fow-5|fow-6/);
+  });
+});
+
+describe("ListRow icon — size recipe, not a private pixel table (LC-75)", () => {
+  it("passes the controlIcon size into the leading glyph", () => {
+    let received: number | undefined;
+    function ProbeIcon({ size }: { size?: number }) {
+      received = size;
+      return <span data-testid="probe-icon" />;
+    }
+    renderWithProviders(<ListRow icon={<ProbeIcon />} title="Architecture RFC" />);
+    const expected = resolveKnobs(defaultKnobs).knobProps.controlIcon.width;
+    expect(received).toBe(expected);
+  });
+});
+
+describe("List keyboard selection chrome (LC-71)", () => {
+  it("marks the filled row data-selected and the keyboard row data-focused", () => {
+    renderWithProviders(
+      <List
+        items={documents}
+        aria-label="Documents"
+        renderItem={(item) => <ListRow title={item.title} />}
+        height={300}
+        estimateSize={50}
+      />,
+    );
+    const container = screen.getByRole("list");
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+    const focused = container.querySelector("[data-focused]");
+    expect(focused).not.toBeNull();
+    expect(focused).toHaveAttribute("data-selected");
+    expect(focused!.textContent).toContain("Q3 Vendor Contract");
+  });
+});

package/src/views/List.stories.tsx

@@ -2,6 +2,7 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { FileCodeIcon, FilePdfIcon, FileTextIcon, ListChecksIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
+import { componentColors } from "../componentColors";
 import { List, ListRow, ListRowMeta } from "./List";
 
 interface DocumentRow {
@@ -74,9 +75,9 @@ const documents: DocumentRow[] = [
 function DocumentItem({ item }: { item: DocumentRow }) {
   const statusColor =
     item.statusTone === "success"
-      ? "$green11"
+      ? componentColors.semantic.success
       : item.statusTone === "warning"
-        ? "$orange11"
+        ? componentColors.badge.orange
         : undefined;
   return (
     <ListRow

package/src/views/List.tsx

@@ -7,6 +7,7 @@ import {
   ensureKeyboardModalityTracking,
   getGroupPosition,
   hairline,
+  hairlineWidth,
   keyboardFocusRingProps,
   stackRadiusProps,
   useReadableTextOn,
@@ -105,9 +106,7 @@ export function ListRowMeta({
   const resolved = selected && onAccent ? onAccent : (color ?? componentColors.text.muted);
   return (
     <Text
-      {...knobProps.body}
-      fontSize="$2"
-      lineHeight="$2"
+      {...knobProps.label}
       color={resolved}
       numberOfLines={1}
       minWidth={width}
@@ -124,7 +123,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
   const { selected, onAccent } = useListItemState();
   const ink = selected && onAccent ? onAccent : componentColors.text.primary;
   const muted = selected && onAccent ? onAccent : componentColors.text.muted;
-  const iconSize = knobProps.sizeToken === "$3" ? 16 : knobProps.sizeToken === "$5" ? 22 : 18;
+  const iconSize = knobProps.controlIcon.width;
   const leading = React.isValidElement(icon)
     ? React.cloneElement(icon as React.ReactElement<{ size?: number; color?: string }>, {
         size: iconSize,
@@ -133,25 +132,23 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
     : icon;
 
   return (
-    <XStack alignItems="center" gap="$3" flex={1} minWidth={0} width="100%">
+    <XStack alignItems="center" {...knobProps.gap} flex={1} minWidth={0} width="100%">
       {leading ? (
         <View
-          width={iconSize}
-          height={iconSize}
+          {...knobProps.controlIcon}
           flexShrink={0}
           alignItems="center"
           justifyContent="center"
-          color={muted}
-          {...({ "data-list-slot": "icon" } as any)}
+          {...({ "data-list-slot": "icon", color: muted } as Record<string, unknown>)}
         >
           {leading}
         </View>
       ) : null}
-      <YStack flex={1} minWidth={0} gap="$1" {...({ "data-list-slot": "title" } as any)}>
+      <YStack flex={1} minWidth={0} {...({ "data-list-slot": "title" } as Record<string, unknown>)}>
         <RowText
           {...knobProps.body}
+          {...knobProps.textWeight}
           color={ink}
-          fontWeight="500"
           numberOfLines={1}
           userSelect="none"
         >
@@ -159,9 +156,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
         </RowText>
         {subtitle != null && subtitle !== false ? (
           <RowText
-            {...knobProps.body}
-            fontSize="$2"
-            lineHeight="$2"
+            {...knobProps.label}
             color={muted}
             opacity={selected ? 0.85 : 1}
             numberOfLines={1}
@@ -174,9 +169,9 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
       {meta != null && meta !== false ? (
         <XStack
           alignItems="center"
-          gap="$4"
+          {...knobProps.gap}
           flexShrink={0}
-          {...({ "data-list-slot": "meta" } as any)}
+          {...({ "data-list-slot": "meta" } as Record<string, unknown>)}
         >
           {typeof meta === "string" || typeof meta === "number" ? (
             <ListRowMeta>{meta}</ListRowMeta>
@@ -281,8 +276,7 @@ export function List<T>({
   const { t } = useTranslation();
   const emptyMessage = emptyMessageProp ?? t("No items found");
   const { knobProps } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 48 : sz === "$5" ? 68 : 56);
+  const estimateSize = estimateSizeProp ?? Math.max(MIN_PRESS_TARGET, knobProps.control.height);
   const rowPad = knobProps.panelPadding.padding;
   const onAccent = useReadableTextOn("$accentBackground");
   const cornersRadius = knobProps.borderRadius.borderRadius;
@@ -302,7 +296,10 @@ export function List<T>({
   const [measuredContentHeight, setMeasuredContentHeight] = useState<number | null>(null);
   const height =
     heightProp ??
-    (hasMore ? scrollCap : (measuredContentHeight ?? Math.max(items.length, 1) * estimateSize + 8));
+    (hasMore
+      ? scrollCap
+      : (measuredContentHeight ??
+        Math.max(items.length, 1) * estimateSize + Math.max(items.length - 1, 0) * hairlineWidth));
   const listId = useId();
   const containerRef = useRef<HTMLDivElement>(null);
   const flashListRef = useRef<FlashListRef<T>>(null);
@@ -345,6 +342,7 @@ export function List<T>({
 
   const moveSelection = useCallback(
     (next: number) => {
+      setContainerKeyboardFocused(true);
       const clamped = Math.max(0, Math.min(next, items.length - 1));
       commitSelection(clamped);
       scrollToIndex(clamped);
@@ -479,10 +477,11 @@ export function List<T>({
                   {...({
                     "data-list-row": true,
                     ...(isSelected ? { "data-selected": true } : {}),
-                  } as any)}
+                    ...(isSelected && containerKeyboardFocused ? { "data-focused": true } : {}),
+                  } as Record<string, unknown>)}
                   minHeight={MIN_PRESS_TARGET}
                   paddingHorizontal={rowPad}
-                  paddingVertical="$2"
+                  paddingVertical={rowPad}
                   alignItems="center"
                   overflow="hidden"
                   // Rows form ONE stacked group: the hover/focus/selection
@@ -528,7 +527,7 @@ export function List<T>({
           }}
           ListFooterComponent={
             isLoading && items.length > 0 ? (
-              <YStack padding="$2" alignItems="center">
+              <YStack {...knobProps.panelPadding} alignItems="center">
                 <Spinner size="small" />
               </YStack>
             ) : null

package/src/views/ReportBuilder.tsx

@@ -64,12 +64,6 @@ export interface ReportBuilderProps extends Omit<YStackProps, "children"> {
 
 const numericFieldTypes = new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
 
-const reportTextSizeMap: Record<string, "$1" | "$2" | "$3"> = {
-  $3: "$1",
-  $4: "$2",
-  $5: "$3",
-};
-
 type SortDir = "asc" | "desc";
 type SortState = { field: string; dir: SortDir } | null;
 type FocusItem =
@@ -135,7 +129,7 @@ function SimpleBarChart({
     <YStack
       {...knobProps.surface}
       {...knobProps.containerRadius}
-      padding="$2"
+      {...knobProps.panelPadding}
       overflow="hidden"
     >
       <BarChart data={data} height={height} />
@@ -168,8 +162,9 @@ export function ReportBuilder({
 }: ReportBuilderProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const reportFontSize = reportTextSizeMap[knobProps.sizeToken] ?? "$2";
   const nestedPx = knobProps.nestedControl.px;
+  const edgePad = knobProps.panelPadding.padding;
+  const iconPx = knobProps.controlIcon.width;
   const isRTL = useDirection() === "rtl";
   const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const hasError = resolveAsyncStatus({ error }) === "error";
@@ -498,33 +493,25 @@ export function ReportBuilder({
           <XStack
             key={col.fieldname}
             role="columnheader"
-            aria-sort={
-              active ? (sort?.dir === "asc" ? "ascending" : "descending") : "none"
-            }
+            aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : "none"}
             flex={1}
             minWidth={0}
             minHeight={nestedPx}
             hitSlop={knobProps.nestedControl.hitSlop}
             alignItems="center"
             justifyContent={cellAlign(col) === "right" ? "flex-end" : "flex-start"}
-            gap="$1"
-            paddingHorizontal="$2"
+            gap={knobProps.control.gap}
+            paddingHorizontal={edgePad}
             cursor="pointer"
             tabIndex={-1}
             onPress={() => cycleSort(col.fieldname)}
             hoverStyle={{ backgroundColor: componentColors.interactive.background }}
           >
-            <Text
-              fontWeight="600"
-              fontSize={reportFontSize}
-              color="$color"
-              numberOfLines={1}
-              textAlign={cellAlign(col)}
-            >
+            <Text {...knobProps.label} color="$color" numberOfLines={1} textAlign={cellAlign(col)}>
               {col.label}
             </Text>
             <SortIcon
-              size={10}
+              size={iconPx}
               weight="bold"
               color={active ? componentColors.text.primary : componentColors.text.muted}
               opacity={active ? 1 : 0.35}
@@ -578,9 +565,10 @@ export function ReportBuilder({
             role="cell"
             flex={1}
             minWidth={0}
-            fontSize={reportFontSize}
+            {...knobProps.body}
+            {...knobProps.controlType}
             color="$color"
-            paddingHorizontal="$2"
+            paddingHorizontal={edgePad}
             numberOfLines={1}
             textAlign={cellAlign(col)}
           >
@@ -622,11 +610,11 @@ export function ReportBuilder({
           {...(isFocused ? { "data-focused": true } : {})}
           minHeight={nestedPx}
           hitSlop={knobProps.nestedControl.hitSlop}
-          paddingHorizontal="$2"
+          paddingHorizontal={edgePad}
           backgroundColor={isFocused ? "$accentBackground" : componentColors.interactive.background}
           {...(groupIndex === groupEntries.length - 1 && isCollapsed ? {} : hairline.bottom)}
           alignItems="center"
-          gap="$2"
+          {...knobProps.gap}
           cursor="pointer"
           {...rowRing(isFocused)}
           onPress={() => {
@@ -639,19 +627,18 @@ export function ReportBuilder({
           }}
         >
           {isCollapsed ? (
-            <CollapsedCaretIcon size={12} weight="bold" />
+            <CollapsedCaretIcon size={iconPx} weight="bold" />
           ) : (
-            <CaretDownIcon size={12} weight="bold" />
+            <CaretDownIcon size={iconPx} weight="bold" />
           )}
-          <Text fontWeight="600" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+          <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {groupByCol?.label ?? groupBy.field}: {groupKey}
           </Text>
-          <Text fontSize={reportFontSize} color={componentColors.text.muted}>
-            ({group.rows.length}{" "}
-            {group.rows.length === 1 ? t("record") : t("records")})
+          <Text {...knobProps.label} color={componentColors.text.muted}>
+            ({group.rows.length} {group.rows.length === 1 ? t("record") : t("records")})
           </Text>
           <XStack flex={1} />
-          <Text fontWeight="500" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+          <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {aggDisplay}
           </Text>
         </XStack>
@@ -697,6 +684,11 @@ export function ReportBuilder({
   return (
     <YStack
       testID="report-builder"
+      {...({
+        "data-testid": "report-builder",
+        "data-size": knobProps.size,
+        "data-density": knobProps.density,
+      } as Record<string, string>)}
       {...knobProps.gap}
       height={height}
       minHeight={minHeight}
@@ -729,9 +721,7 @@ export function ReportBuilder({
                   key={column.fieldname}
                   checked={checked}
                   disabled={lastEnabled}
-                  disabledReason={
-                    lastEnabled ? t("At least one column stays visible") : undefined
-                  }
+                  disabledReason={lastEnabled ? t("At least one column stays visible") : undefined}
                   onCheckedChange={() => toggleColumn(column.fieldname)}
                 >
                   {column.label}
@@ -744,9 +734,7 @@ export function ReportBuilder({
         <DropdownMenu>
           <DropdownMenu.Trigger asChild>
             <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
-              {groupByCol
-                ? t("Group by: {{field}}", { field: groupByCol.label })
-                : t("Group by")}
+              {groupByCol ? t("Group by: {{field}}", { field: groupByCol.label }) : t("Group by")}
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content maxHeight={360}>
@@ -787,9 +775,7 @@ export function ReportBuilder({
                     checked={groupBy.aggregation === aggregation}
                     closeOnSelect
                     disabled={needsNumeric}
-                    disabledReason={
-                      needsNumeric ? t("No numeric fields to aggregate") : undefined
-                    }
+                    disabledReason={needsNumeric ? t("No numeric fields to aggregate") : undefined}
                     onCheckedChange={() => selectAggregation(aggregation)}
                   >
                     {aggregationLabels[aggregation]}
@@ -869,7 +855,7 @@ export function ReportBuilder({
         minHeight={bounded ? 0 : undefined}
       >
         {isInitialLoading ? (
-          <AsyncSkeleton layout="table" padding="$2" />
+          <AsyncSkeleton layout="table" padding={knobProps.panelPadding.padding} />
         ) : (
           <YStack
             ref={gridRef as any}
@@ -910,25 +896,23 @@ export function ReportBuilder({
                 role="row"
                 minHeight={nestedPx}
                 alignItems="center"
-                paddingHorizontal="$2"
+                paddingHorizontal={edgePad}
                 {...hairline.top}
                 backgroundColor={componentColors.surface.background}
-                gap="$3"
+                {...knobProps.gapLg}
                 flexWrap="wrap"
               >
-                <Text fontSize={reportFontSize} fontWeight="600" color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={componentColors.text.muted}>
                   {t("Totals")}
                 </Text>
                 {totals.map(({ col, value }) => (
-                  <Text key={col.fieldname} fontSize={reportFontSize} color="$color">
+                  <Text key={col.fieldname} {...knobProps.label} color="$color">
                     {col.label}:{" "}
-                    <Text fontSize={reportFontSize} fontWeight="600">
-                      {formatCellValue(value, col.fieldtype)}
-                    </Text>
+                    <Text {...knobProps.label}>{formatCellValue(value, col.fieldtype)}</Text>
                   </Text>
                 ))}
                 <XStack flex={1} />
-                <Text fontSize={reportFontSize} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={componentColors.text.muted}>
                   {t("{{count}} row(s)", { count: data.length })}
                 </Text>
               </XStack>