@multiplatform.one/table 7.4.1 → 7.5.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -60,6 +60,7 @@ import { DataTableCardControls } from "./DataTableCardControls";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTableDocumentList } from "./DataTableDocumentList";
 import { DataTableVirtualized } from "./DataTableVirtualized";
+import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { mapFieldToFilterType } from "../../utils/filterFields";
@@ -67,8 +68,6 @@ import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
 import { isInteractiveInnerTarget } from "../../utils/rowPress";
 import { bidiIsolate, withInterp } from "../../utils/withInterp";
 
-const SELECTION_COL_WIDTH = 40;
-
 /** Returns the field type for a column, defaulting to "input" */
 function getColumnField(column: DataTableColumn): DataTableField {
   return column.field ?? "input";
@@ -88,8 +87,6 @@ function resolveColumnAlign(column: DataTableColumn) {
 // mapFieldToFilterType moved to utils/filterFields (shared with the filter
 // model — LC-16, one mapping).
 
-const rowHeightPx = 40;
-
 export interface DataTableRootProps<
   TData extends Record<string, any> = Record<string, any>,
 > extends DataTableProps<TData> {
@@ -99,6 +96,11 @@ export interface DataTableRootProps<
   compact?: boolean;
   /** Structural modifier: disabled state */
   disabled?: boolean;
+  /** Structural intent — joins the resolver path (audit 16). */
+  accent?: boolean;
+  error?: boolean;
+  warning?: boolean;
+  success?: boolean;
 }
 
 export function DataTableRoot<TData extends Record<string, any> = Record<string, any>>({
@@ -165,6 +167,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   size,
   compact = false,
   disabled = false,
+  accent,
+  error,
+  warning,
+  success,
   children,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -176,11 +182,15 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   // pinned via the `layout` prop. Same table state drives both layouts.
   const showList = layout === "list";
   const showCards = !showList && (layout === "cards" || (layout === "auto" && sm === false));
+  const intent = resolveDataTableIntent({ accent, error, warning, success });
   const { knobProps, disabledState } = useResolvedKnobs({
-    intent: undefined,
+    intent,
     component: "DataTable",
     compact,
   });
+  const chrome = dataTableChrome(String(knobProps.sizeToken));
+  const rowHeightPx = chrome.rowPx;
+  const selectionColWidth = chrome.selectionCol;
   // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
   // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
   // still points down.
@@ -815,9 +825,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           const col = table.getColumn(leftPinned[i]);
           if (col) leftOffset += col.getSize();
         }
-        if (enableRowSelection) leftOffset += SELECTION_COL_WIDTH;
-        if (enableRowExpansion) leftOffset += 32;
-        if (showRowNumbers) leftOffset += 50;
+        if (enableRowSelection) leftOffset += selectionColWidth;
+        if (enableRowExpansion) leftOffset += chrome.expandCol;
+        if (showRowNumbers) leftOffset += chrome.rowNumberCol;
         // Logical inset (RTL backlog #2): TanStack's "left" bucket is the
         // reading-start side, so the sticky offset must flip with direction.
         return {
@@ -834,7 +844,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           const col = table.getColumn(rightPinned[i]);
           if (col) rightOffset += col.getSize();
         }
-        if (showDeleteRow && !readOnly) rightOffset += 60;
+        if (showDeleteRow && !readOnly) rightOffset += chrome.deleteCol;
         return {
           position: "sticky" as const,
           insetInlineEnd: rightOffset,
@@ -881,7 +891,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             <Table.Cell
               {...cellRenderProps}
               {...cellNavProps()}
-              cellWidth={SELECTION_COL_WIDTH}
+              cellWidth={selectionColWidth}
               cellHeight={cellHeight as any}
               cellLocation="first"
               justifyContent="center"
@@ -908,7 +918,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             <Table.Cell
               {...cellRenderProps}
               {...cellNavProps()}
-              cellWidth={50}
+              cellWidth={chrome.rowNumberCol}
               cellHeight={cellHeight as any}
               cellLocation={enableRowSelection ? "middle" : "first"}
             >
@@ -922,7 +932,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             <Table.Cell
               {...cellRenderProps}
               {...cellNavProps()}
-              cellWidth={32 + row.depth * 20}
+              cellWidth={chrome.expandCol + row.depth * chrome.indent}
               cellHeight={cellHeight as any}
               cellLocation={enableRowSelection || showRowNumbers ? "middle" : "first"}
               paddingLeft={0}
@@ -934,12 +944,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     flexDirection="row"
                     alignItems="center"
                     height="100%"
-                    width={row.depth * 20}
+                    width={row.depth * chrome.indent}
                   >
                     {Array.from({ length: row.depth }).map((_, i) => (
                       <View
                         key={i}
-                        width={20}
+                        width={chrome.indent}
                         height="100%"
                         alignItems="center"
                         justifyContent="center"
@@ -949,15 +959,15 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                           width={1}
                           height="100%"
                           backgroundColor="$color6"
-                          left={10}
+                          left={chrome.indent / 2}
                         />
                         {i === row.depth - 1 && (
                           <View
                             position="absolute"
                             height={1}
-                            width={10}
+                            width={chrome.indent / 2}
                             backgroundColor="$color6"
-                            left={10}
+                            left={chrome.indent / 2}
                           />
                         )}
                       </View>
@@ -987,15 +997,14 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     borderRadius="$2"
                   >
                     <ExpandCaretIcon
-                      size={14}
+                      size={chrome.iconPx}
                       style={{
                         transform: row.getIsExpanded() ? expandedCaretRotation : "none",
-                        transition: "transform 0.15s ease",
                       }}
                     />
                   </View>
                 ) : (
-                  <View width={22} />
+                  <View width={chrome.expandCol} />
                 )}
               </View>
             </Table.Cell>
@@ -1049,7 +1058,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             <Table.Cell
               {...cellRenderProps}
               {...cellNavProps()}
-              cellWidth={60}
+              cellWidth={chrome.deleteCol}
               cellHeight={cellHeight as any}
               cellLocation="last"
               justifyContent="center"
@@ -1409,10 +1418,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   alignCells={{ x: "start", y: "center" }}
                   alignHeaderCells={{ x: "start", y: "center" }}
                   cellHeight={cellHeight}
-                  borderTopLeftRadius={hasToolbar ? 0 : knobProps.borderRadius.borderRadius}
-                  borderTopRightRadius={hasToolbar ? 0 : knobProps.borderRadius.borderRadius}
-                  borderBottomLeftRadius={knobProps.borderRadius.borderRadius}
-                  borderBottomRightRadius={knobProps.borderRadius.borderRadius}
+                  borderTopLeftRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
+                  borderTopRightRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
+                  borderBottomLeftRadius={knobProps.borderRadiusOuter.borderRadius}
+                  borderBottomRightRadius={knobProps.borderRadiusOuter.borderRadius}
                   marginBottom={0}
                   aria-label={resolvedAriaLabel}
                   aria-rowcount={computed.totalPages * state.pagination.pageSize}
@@ -1447,10 +1456,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                   : "middle",
                             borderTopRightRadius: hasToolbar
                               ? "$0"
-                              : knobProps.borderRadius.borderRadius,
+                              : knobProps.borderRadiusOuter.borderRadius,
                             borderTopLeftRadius: hasToolbar
                               ? "$0"
-                              : knobProps.borderRadius.borderRadius,
+                              : knobProps.borderRadiusOuter.borderRadius,
                             borderBottomLeftRadius: "$0",
                             borderBottomRightRadius: "$0",
                             "aria-rowindex": rowCounter.current,
@@ -1458,7 +1467,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                         >
                           {enableRowSelection && (
                             <Table.HeaderCell
-                              cellWidth={SELECTION_COL_WIDTH}
+                              cellWidth={selectionColWidth}
                               cellHeight={cellHeight as any}
                               cellLocation="first"
                               justifyContent="center"
@@ -1490,11 +1499,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
                           {showRowNumbers && (
                             <Table.HeaderCell
-                              cellWidth={50}
+                              cellWidth={chrome.rowNumberCol}
                               cellHeight={cellHeight as any}
                               cellLocation={enableRowSelection ? "middle" : "first"}
                             >
-                              <Text fontSize="$4" fontWeight="600">
+                              <Text fontSize={knobProps.sizeToken} fontWeight="600">
                                 #
                               </Text>
                             </Table.HeaderCell>
@@ -1502,7 +1511,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
                           {enableRowExpansion && (
                             <Table.HeaderCell
-                              cellWidth={32}
+                              cellWidth={chrome.expandCol}
                               cellHeight={cellHeight as any}
                               cellLocation={
                                 enableRowSelection || showRowNumbers ? "middle" : "first"
@@ -1639,7 +1648,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     flex={isRightAligned ? undefined : 1}
                                     justifyContent={isRightAligned ? "flex-end" : undefined}
                                   >
-                                    <Text fontSize="$4" userSelect="none">
+                                    <Text fontSize={knobProps.sizeToken} userSelect="none">
                                       {header.isPlaceholder
                                         ? null
                                         : flexRender(
@@ -1660,7 +1669,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                         <View aria-hidden={true} role="presentation">
                                           {sortDirection === "asc" && (
                                             <CaretDownIcon
-                                              size={14}
+                                              size={chrome.iconPx}
                                               color={
                                                 sortDirection ? "var(--color10)" : "var(--color8)"
                                               }
@@ -1668,7 +1677,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                           )}
                                           {sortDirection === "desc" && (
                                             <CaretDownIcon
-                                              size={14}
+                                              size={chrome.iconPx}
                                               color={
                                                 sortDirection ? "var(--color10)" : "var(--color8)"
                                               }
@@ -1676,7 +1685,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                             />
                                           )}
                                           {sortDirection === false && (
-                                            <CaretUpDownIcon size={14} color="var(--color8)" />
+                                            <CaretUpDownIcon size={chrome.iconPx} color="$color8" />
                                           )}
                                         </View>
                                       </Tooltip>
@@ -1746,7 +1755,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
                           {showDeleteRow && !readOnly && (
                             <Table.HeaderCell
-                              cellWidth={60}
+                              cellWidth={chrome.deleteCol}
                               cellHeight={cellHeight as any}
                               cellLocation="last"
                             />
@@ -1839,6 +1848,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             extraColumnsAfter={extraColumnsAfter}
                             table={table}
                             hasInfiniteTail={hasInfiniteTail}
+                            rowHeightPx={rowHeightPx}
                             {...(rowPressActive ? { getRowPressProps } : {})}
                           />
                         </Table.Cell>
@@ -1856,7 +1866,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                               table.getVisibleLeafColumns().length +
                               extraColumnsBefore +
                               extraColumnsAfter;
-                            const indent = (row.depth ?? 0) * 16;
+                            const indent = (row.depth ?? 0) * chrome.indent;
                             return (
                               <Table.Row
                                 key={row.id}
@@ -1930,6 +1940,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                   : "off",
                               } as any)}
                               {...(getRowPressProps(row, index) as any)}
+                              {...(rowIntentProps(row.original) as any)}
                             >
                               {renderRowContent(row, index, isLastRow)}
                             </Table.Row>
@@ -1975,7 +1986,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                           >
                             {enableRowSelection && (
                               <Table.Cell
-                                cellWidth={SELECTION_COL_WIDTH}
+                                cellWidth={selectionColWidth}
                                 cellLocation="first"
                                 padding={0}
                                 minHeight={0}
@@ -1983,7 +1994,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             )}
                             {showRowNumbers && (
                               <Table.Cell
-                                cellWidth={50}
+                                cellWidth={chrome.rowNumberCol}
                                 cellLocation={enableRowSelection ? "middle" : "first"}
                                 padding={0}
                                 minHeight={0}
@@ -1991,7 +2002,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             )}
                             {enableRowExpansion && (
                               <Table.Cell
-                                cellWidth={32}
+                                cellWidth={chrome.expandCol}
                                 cellLocation={
                                   enableRowSelection || showRowNumbers ? "middle" : "first"
                                 }
@@ -2026,7 +2037,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             })}
                             {showDeleteRow && !readOnly && (
                               <Table.Cell
-                                cellWidth={60}
+                                cellWidth={chrome.deleteCol}
                                 cellLocation="last"
                                 padding={0}
                                 minHeight={0}

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -7,12 +7,11 @@
  * column border extension.
  */
 
+import { dataTableChrome, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { Skeleton } from "@multiplatform.one/components";
 import { Text, View } from "tamagui";
 
-const rowHeightPx = 40;
-
 export interface DataTableVirtualizedProps {
   virtualItems: any[];
   totalSize: number;
@@ -48,6 +47,8 @@ export interface DataTableVirtualizedProps {
    * the same activation + roving-focus contract as grid rows).
    */
   getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
+  /** LC-65 row estimate — caller passes size-recipe height. */
+  rowHeightPx?: number;
 }
 
 export function DataTableVirtualized({
@@ -67,7 +68,9 @@ export function DataTableVirtualized({
   renderRowContent,
   hasInfiniteTail = false,
   getRowPressProps,
+  rowHeightPx: rowHeightPxProp,
 }: DataTableVirtualizedProps) {
+  const rowHeightPx = rowHeightPxProp ?? dataTableChrome("$4").rowPx;
   return (
     <div
       style={{
@@ -193,6 +196,7 @@ export function DataTableVirtualized({
               role="row"
               aria-rowindex={virtualRow.index + 1}
               {...(getRowPressProps ? (getRowPressProps(row, virtualRow.index) as any) : {})}
+              {...(rowIntentProps(row.original) as any)}
             >
               {/* div cells (role="cell" via the primitive): a real <td> is
                   not a valid child of the absolutely-positioned div rows */}

package/src/components/DataTable/FieldsInCells.stories.tsx

@@ -189,6 +189,7 @@ const meta: Meta<typeof DataTable> = {
     readOnly: { control: "boolean" },
     compact: { control: "boolean" },
     disabled: { control: "boolean" },
+    // compact is not pinned — density rides the Preset / Storybook control.
   },
   decorators: [
     (Story) => (
@@ -251,7 +252,7 @@ export const ReadOnly: Story = {
   render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
-        <H3>Read-only — every cell routes through FieldDisplay</H3>
+        <H3 fontWeight="400">Read-only — every cell routes through FieldDisplay</H3>
         <Text color="$placeholderColor">
           Lightweight view-only render per field type. No edit UI mounted.
         </Text>
@@ -273,7 +274,7 @@ export const Editable: Story = {
   render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
-        <H3>Editable — cells mount the full Edit field component</H3>
+        <H3 fontWeight="400">Editable — cells mount the full Edit field component</H3>
         <Text color="$placeholderColor">
           Same column set, edit mode, wired: onDataChange commits edits to story state. Use this
           view to compare field heights and spot popover-clipping issues against the read-only
@@ -389,7 +390,9 @@ export const EditableExtended: Story = {
   render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
-        <H3>Extended field types — textarea, slider, radio, toggle, time, ranges, otp</H3>
+        <H3 fontWeight="400">
+          Extended field types — textarea, slider, radio, toggle, time, ranges, otp
+        </H3>
         <Text color="$placeholderColor">
           The field types the core harness omits: textarea, slider, radiogroup, togglegroup,
           timepicker, daterangepicker, multidatepicker, duration, phoneinput, otp. All wired through
@@ -410,7 +413,7 @@ export const ReadOnlyExtended: Story = {
   render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
-        <H3>Extended field types — read-only</H3>
+        <H3 fontWeight="400">Extended field types — read-only</H3>
       </YStack>
       <YStack flex={1} minHeight={0}>
         <DataTable<ExtendedRow>
@@ -493,7 +496,9 @@ export const EditableHeavy: Story = {
   render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
-        <H3>Heavy editors — mention, barcode, file, image, signature, geo, rich text, code</H3>
+        <H3 fontWeight="400">
+          Heavy editors — mention, barcode, file, image, signature, geo, rich text, code
+        </H3>
         <Text color="$placeholderColor">
           Edits too big for the cell: the cell shows a compact FieldDisplay summary and clicking
           opens the modal editor (CellModalEditor). All wired through onDataChange.

package/src/components/DataTable/dataTableChrome.ts

@@ -0,0 +1,48 @@
+/**
+ * DataTable chrome geometry and intent helpers.
+ *
+ * Size numbers come from LC-65 `sizeRecipeForToken` (no handwritten 14/40).
+ * Row `_intent` rides Tamagui boolean theme props on the real row host —
+ * never a Theme wrapper inside <table> (invalid HTML).
+ */
+
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+
+export type DataTableIntentName = "accent" | "error" | "warning" | "success";
+
+export function resolveDataTableIntent(flags: {
+  accent?: boolean;
+  error?: boolean;
+  warning?: boolean;
+  success?: boolean;
+}): DataTableIntentName | undefined {
+  if (flags.accent) return "accent";
+  if (flags.error) return "error";
+  if (flags.warning) return "warning";
+  if (flags.success) return "success";
+  return undefined;
+}
+
+export function rowIntentProps(rowData: Record<string, unknown> | undefined): Record<string, true> {
+  const intent = rowData?._intent;
+  if (intent === "accent" || intent === "error" || intent === "warning" || intent === "success") {
+    return { [intent]: true };
+  }
+  return {};
+}
+
+export function dataTableChrome(sizeToken: string) {
+  const recipe = sizeRecipeForToken(sizeToken);
+  return {
+    recipe,
+    iconPx: recipe.iconSize,
+    rowPx: recipe.height,
+    selectionCol: recipe.height,
+    expandCol: recipe.iconSize * 2,
+    rowNumberCol: Math.round(recipe.height * 1.25),
+    deleteCol: Math.round(recipe.height * 1.5),
+    indent: recipe.gap,
+  };
+}
+
+export type DataTableChrome = ReturnType<typeof dataTableChrome>;

package/src/components/DataTable/designLaw.spec.tsx

@@ -0,0 +1,114 @@
+/**
+ * MPO-60 / living rulebook: DataTable design-law 100%.
+ *
+ * Pins the Part 3 DataTable contract that was still open on origin/main:
+ * intent joins the resolver path (not `intent: undefined`), row `_intent`
+ * rides the same `tr.t_*` theme class SimpleTable already uses (no Theme
+ * wrapper inside <table>), chrome glyphs follow LC-65 size recipes, and
+ * the frame spreads R-OUTER instead of cherry-picking R-SCALE.
+ *
+ * Rulings: /tmp/cursor-mpo-lanes/RULINGS-2026-08-28.md (campaign file).
+ */
+
+import { createColumnHelper } from "@tanstack/react-table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  status: string;
+  _intent?: "accent" | "error" | "warning" | "success";
+};
+
+const columnHelper = createColumnHelper<Person>();
+const columns: DataTableColumn<Person>[] = [
+  columnHelper.accessor("firstName", { header: "First Name" }) as DataTableColumn<Person>,
+  columnHelper.accessor("status", { header: "Status" }) as DataTableColumn<Person>,
+];
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+function source(name: string): string {
+  return readFileSync(join(here, name), "utf8");
+}
+
+describe("DataTable design-law (intent + recipes)", () => {
+  it("paints row _intent on the real tr (SimpleTable dialect, no Theme wrapper)", () => {
+    const data: Person[] = [
+      { id: 1, firstName: "Ok", status: "Active" },
+      { id: 2, firstName: "Bad", status: "Failed", _intent: "error" },
+      { id: 3, firstName: "Warn", status: "Degraded", _intent: "warning" },
+      { id: 4, firstName: "Good", status: "Complete", _intent: "success" },
+    ];
+    const { container } = renderWithProviders(
+      <DataTable data={data} columns={columns} layout="table" onStateChange={vi.fn()} />,
+    );
+    expect(container.textContent).toContain("Bad");
+    expect(container.querySelector("tr.t_error")).not.toBeNull();
+    expect(container.querySelector("tr.t_warning")).not.toBeNull();
+    expect(container.querySelector("tr.t_success")).not.toBeNull();
+    for (const row of container.querySelectorAll("tr")) {
+      expect(row.parentElement?.tagName).toMatch(/THEAD|TBODY|TFOOT/);
+    }
+  });
+
+  it("expand-caret glyphs use the size recipe icon channel, not a handwritten 14", () => {
+    const data: Person[] = [
+      {
+        id: 1,
+        firstName: "John",
+        status: "Active",
+        subRows: [{ id: 11, firstName: "Kid", status: "Active" }],
+      } as Person,
+    ];
+    const { getAllByLabelText } = renderWithProviders(
+      <DataTable
+        data={data}
+        columns={columns}
+        enableRowExpansion
+        layout="table"
+        onStateChange={vi.fn()}
+      />,
+    );
+    const expand = getAllByLabelText(/^Expand row \d+$/)[0];
+    const svg = expand.querySelector("svg");
+    expect(svg).not.toBeNull();
+    const expected = sizeRecipeForToken("$4").iconSize;
+    expect(Number(svg?.getAttribute("width"))).toBe(expected);
+    expect(Number(svg?.getAttribute("width"))).not.toBe(14);
+  });
+
+  it("does not force intent: undefined — resolver is opt-in by component key", () => {
+    expect(source("DataTableRoot.tsx")).not.toMatch(/intent:\s*undefined/);
+    expect(source("index.native.tsx")).not.toMatch(/intent:\s*undefined/);
+  });
+
+  it("does not cherry-pick R-SCALE radius onto the R-OUTER frame", () => {
+    expect(source("DataTableRoot.tsx")).not.toMatch(/knobProps\.borderRadius\.borderRadius/);
+    expect(source("DataTableDocumentList.tsx")).not.toMatch(
+      /knobProps\.borderRadius\.borderRadius/,
+    );
+  });
+
+  it("does not hardcode caret size 14 or a raw 0.15s transform transition", () => {
+    const files = [
+      "DataTableRoot.tsx",
+      "index.native.tsx",
+      "DataTableCardControls.tsx",
+      "DataTableVirtualized.tsx",
+    ];
+    for (const file of files) {
+      const src = source(file);
+      expect(src, file).not.toMatch(/size=\{14\}/);
+      expect(src, file).not.toMatch(/transform 0\.15s ease/);
+      expect(src, file).not.toMatch(/const rowHeightPx = 40/);
+    }
+  });
+});