fix(63-12): WR-02 — emit numeric-attr bindings raw when nullability is unprovable (TS2869 guard)

WR-02/IN-01 (review): isProvablyNonNullishNumeric only recognized numeric
literals, arithmetic, and unary +/-, so a numeric-attr binding whose expression
is a bald number-returning CallExpression/MemberExpression or a ||-fallback fell
through to '{name={(expr) ?? undefined}}'. When the left operand is statically
'number' (never nullish) that right operand is unreachable -> TS2869. Real in
the shipped leaf: aria-rowcount={(totalRowCount()) ?? undefined} only survived
by 'any'-inference.

Broaden the recognizer to also treat CallExpression/MemberExpression and a
LogicalExpression (||/&&/?? with a non-nullish RHS) as non-nullish, so the
numeric binding emits RAW (React's 'number | undefined' slot accepts a bare
'number'; a runtime null/undefined is still dropped by React). The genuinely-
nullish ConditionalExpression form (x ? n : null -> normalized : undefined) is
NOT recognized, so it still gets the reachable '?? undefined' drop. IN-01: the
non-virtual aria-rowcount={totalRowCount()} now emits raw, matching the virtual
aria-rowcount={rows.length} path.

Solid needs no symmetric change: it keeps numeric ARIA on the rozieAttr path
(loosely typed), and its BOOLEAN_NULLISH_ARIA_ATTRS path is already
hasNullishBranch-gated (no TS2869 gap).

Re-emitted x6. Cross-family churn is the expected clean raw-flip on numeric
tabIndex call bindings (date-picker/pagination/switch) — runtime-identical.
Gate: build x6, typecheck 278/278, dist-parity 1001/1001 (no drift, AttrNullishDrop
intact), target suites 112/113 (sole failure = pre-existing command-palette/listbox
surface-hash drift, unrelated).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KSYH6VBAJwa7nYy4AksuNH

Author: serpentblade

packages/targets/react/src/emit/emitTemplateAttribute.ts

@@ -208,17 +208,42 @@ function hasNullishBranch(expr: t.Expression): boolean {
 }
 
 /**
- * A numeric-attribute binding that is SYNTACTICALLY provably non-nullish — a numeric literal,
- * an arithmetic BinaryExpression (`a + 1`, `i * 2`), or a unary `+`/`-`. These already type as
- * `number`, so the numeric-attr emit must NOT append `?? undefined` (the right operand would be
- * unreachable → TS2869). Nullish-capable forms (a `x ? n : null` ternary normalized to
- * `undefined`, a `number | null`-returning call) fall through to the `?? undefined` drop.
+ * A numeric-attribute binding the emitter should emit RAW (`name={expr}`) rather than wrapping in
+ * the `?? undefined` nullish-drop. The `?? undefined` rescue exists ONLY to keep a PROVABLY-nullish
+ * numeric binding (a `x ? n : null` ternary, normalized to `x ? n : undefined`) typed
+ * `number | undefined` while dropping the attribute on the nullish branch. For every OTHER shape we
+ * prefer RAW: appending `?? undefined` to an operand that is statically `number` (never nullish)
+ * makes the right operand unreachable → TS2869 (WR-02 — the shipped
+ * `aria-rowcount={(totalRowCount()) ?? undefined}` only dodged it by `any`-inference; a strictly-
+ * typed `number`-returning helper, or a strict re-typecheck of the leaf, would break).
+ *
+ * Recognized as non-nullish (→ raw), mirroring the `.length` member that already emits raw via
+ * `wrapForDisplay=false`:
+ *   - a numeric literal, an arithmetic BinaryExpression (`a + 1`, `i * 2`), a unary `+`/`-`;
+ *   - a CallExpression / MemberExpression (`totalRowCount()`, `rows.length`) — the IR cannot prove
+ *     these nullable from the AST; React's `number | undefined` slot accepts a bare `number`, and
+ *     a runtime `null`/`undefined` is still dropped by React (IN-01 — the non-virtual
+ *     `aria-rowcount={totalRowCount()}` now matches the virtual `aria-rowcount={rows.length}`);
+ *   - a LogicalExpression `a || n` / `a ?? n` / `a && n` whose RHS is itself non-nullish
+ *     (`span || 1`) — the `||`/`??` fallback (and a non-nullish `&&` RHS) yields a non-nullish result.
+ * The genuinely-nullish ConditionalExpression form (`x ? n : null`) is deliberately NOT recognized
+ * here, so it still falls through to the `?? undefined` drop (its `: undefined` branch makes the
+ * right operand reachable → no TS2869).
  */
 const ARITHMETIC_BINARY_OPS: ReadonlySet<string> = new Set(['+', '-', '*', '/', '%', '**']);
+const NON_NULLISH_LOGICAL_OPS: ReadonlySet<string> = new Set(['||', '&&', '??']);
 function isProvablyNonNullishNumeric(expr: t.Expression): boolean {
   if (t.isNumericLiteral(expr)) return true;
   if (t.isBinaryExpression(expr)) return ARITHMETIC_BINARY_OPS.has(expr.operator);
   if (t.isUnaryExpression(expr)) return expr.operator === '+' || expr.operator === '-';
+  // A bald call / member access — nullability is unprovable from the AST; prefer RAW over an
+  // unconditional `?? undefined` that is TS2869 when the value is statically `number`.
+  if (t.isCallExpression(expr) || t.isOptionalCallExpression(expr)) return true;
+  if (t.isMemberExpression(expr) || t.isOptionalMemberExpression(expr)) return true;
+  // `a || 1` / `a ?? 1` / `a && 1` — a non-nullish RHS fallback yields a non-nullish result.
+  if (t.isLogicalExpression(expr) && NON_NULLISH_LOGICAL_OPS.has(expr.operator)) {
+    return isProvablyNonNullishNumeric(expr.right);
+  }
   return false;
 }
 
@@ -1064,12 +1089,12 @@ function emitNonClassAttribute(
       // JSX omits the attribute), matching the `rozieAttr` drop semantics for
       // the numeric case without the string widening.
       if (NUMERIC_HTML_ATTRS.has(attr.name.toLowerCase())) {
-        // A provably non-nullish numeric expression (`wr.vi.index + 1`, a numeric literal,
-        // a unary `+`/`-`) is already `number` — appending `?? undefined` makes the right
-        // operand unreachable (TS2869). Emit it RAW (still `number`, typechecks against the
-        // `number | undefined` ARIA/HTML slot). Only nullish-capable forms (a `x ? n : null`
-        // ternary normalized to `undefined`, a `number | null`-returning call like
-        // `cellTabindex()`) need the `?? undefined` nullish-drop.
+        // WR-02: emit RAW whenever nullability is NOT provable from the AST — a numeric literal,
+        // arithmetic, unary `+`/`-`, a bald call/member (`totalRowCount()`, `rows.length`), or a
+        // `|| n`/`?? n` fallback. These are `number`(-ish); appending `?? undefined` to a static
+        // `number` makes the right operand unreachable (TS2869). Only the genuinely-nullish
+        // ConditionalExpression form (`x ? n : null` → normalized `: undefined`) falls through to
+        // the `?? undefined` drop below (reachable → no TS2869), preserving the attribute-drop.
         if (isProvablyNonNullishNumeric(normalizedAttrExpr)) {
           return { jsx: `${jsxName}={${exprCode}}`, diagnostics };
         }

packages/ui/data-table/packages/react/src/DataTable.tsx

@@ -3833,7 +3833,7 @@ const DataTable = forwardRef<DataTableHandle, DataTableProps>(function DataTable
     <table className={clsx("rozie-data-table", { "rdt-sticky": props.stickyHeader })} role={rozieAttr(tableRole())} aria-rowcount={rows.length} onKeyDown={($event) => { onGridKeyDown($event); }} onFocus={($event) => { syncActiveFromEvent($event); }} onBlur={($event) => { onGridFocusOut($event); }} onMouseDown={($event) => { onGridMouseDown($event); }} data-rozie-s-d5dcab4c="">
       <thead className={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         {headerGroups.map((hg, hgLevel) => <tr key={hg.id} className={"rdt-tr"} role="row" data-rozie-s-d5dcab4c="">
-          {hg.headers.map((header) => <th key={header.id} className={clsx("rdt-th", { "rdt-select-th": isSelectColumn(header.column.id), "rdt-th-resizing": columnIsResizing(header.column.id) })} role="columnheader" data-col={rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel)} colSpan={(header.colSpan > 1 ? header.colSpan : undefined) ?? undefined} data-col-index={rozieAttr(headerColIndexOf(hg, header))} tabIndex={(cellTabindex('__header', headerColIndexOf(hg, header), hgLevel)) ?? undefined} aria-sort={rozieAttr(ariaSortFor(header.column.id))} style={parseInlineStyle(thStyle(header.column.id))} data-rozie-s-d5dcab4c="">
+          {hg.headers.map((header) => <th key={header.id} className={clsx("rdt-th", { "rdt-select-th": isSelectColumn(header.column.id), "rdt-th-resizing": columnIsResizing(header.column.id) })} role="columnheader" data-col={rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel)} colSpan={(header.colSpan > 1 ? header.colSpan : undefined) ?? undefined} data-col-index={rozieAttr(headerColIndexOf(hg, header))} tabIndex={cellTabindex('__header', headerColIndexOf(hg, header), hgLevel)} aria-sort={rozieAttr(ariaSortFor(header.column.id))} style={parseInlineStyle(thStyle(header.column.id))} data-rozie-s-d5dcab4c="">
             {(isSelectColumn(header.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(props.renderSelectAll ?? props.slots?.['selectAll']) ? ((props.renderSelectAll ?? props.slots?.['selectAll']) as Function)({ checked: isAllRowsSelected(), indeterminate: isSomeRowsSelected(), toggle: onToggleAllRows }) : (props.selectionMode === 'multiple') && <input className={"rdt-select-all"} type="checkbox" aria-label="Select all rows" checked={isAllRowsSelected()} onChange={($event) => { onToggleAllRows($event); }} data-rozie-s-d5dcab4c="" />}
             </span> : <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -3861,12 +3861,12 @@ const DataTable = forwardRef<DataTableHandle, DataTableProps>(function DataTable
       <tbody className={"rdt-tbody"} role="rowgroup" data-rozie-s-d5dcab4c="">
 
         <tr className={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={(visibleColCount()) ?? undefined} style={parseInlineStyle('height:' + padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
+          <td colSpan={visibleColCount()} style={parseInlineStyle('height:' + padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
         </tr>
 
         {windowedRows().map((wr) => <Fragment key={wr.row.id}>
         <tr key={wr.row.id} className={clsx("rdt-tr", { "rdt-group-header": rowIsGrouped(wr.row), "rdt-row-pinned": wr.pinned })} role="row" data-row={rozieAttr(wr.vi.index)} aria-rowindex={wr.vi.index + 1} data-index={rozieAttr(wr.vi.index)} data-pinned={rozieAttr(wr.pinned ? 'true' : undefined)} data-depth={rozieAttr(wr.row.depth)} data-group-header={rozieAttr(rowIsGrouped(wr.row) ? wr.row.id : undefined)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr.row) ? wr.row.id : undefined)} aria-expanded={(rowIsGrouped(wr.row) ? !!rowIsExpanded(wr.row) : undefined) ?? undefined} aria-level={(groupingActive() ? wr.row.depth + 1 : undefined) ?? undefined} data-rozie-s-d5dcab4c="">
-          {visibleCellsFor(wr.row).map((cellCtx) => <td key={cellCtx.id} className={clsx("rdt-td", { "rdt-select-td": isSelectColumn(cellCtx.column.id), "rdt-in-range": inRange(wr.vi.index, colIndexOf(wr.row, cellCtx)) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cellCtx.column.id)} data-grid-cell="" data-row={rozieAttr(wr.vi.index)} data-col-index={rozieAttr(colIndexOf(wr.row, cellCtx))} tabIndex={(cellTabindex(String(wr.vi.index), colIndexOf(wr.row, cellCtx))) ?? undefined} style={parseInlineStyle(bodyCellStyle(wr.row, cellCtx.column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr.vi.index, colIndexOf(wr.row, cellCtx)))} data-in-range={rozieAttr(inRange(wr.vi.index, colIndexOf(wr.row, cellCtx)) ? 'true' : undefined)} data-agg-cell={rozieAttr(cellIsAggregated(cellCtx) ? cellCtx.column.id : undefined)} data-rozie-s-d5dcab4c="">
+          {visibleCellsFor(wr.row).map((cellCtx) => <td key={cellCtx.id} className={clsx("rdt-td", { "rdt-select-td": isSelectColumn(cellCtx.column.id), "rdt-in-range": inRange(wr.vi.index, colIndexOf(wr.row, cellCtx)) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cellCtx.column.id)} data-grid-cell="" data-row={rozieAttr(wr.vi.index)} data-col-index={rozieAttr(colIndexOf(wr.row, cellCtx))} tabIndex={cellTabindex(String(wr.vi.index), colIndexOf(wr.row, cellCtx))} style={parseInlineStyle(bodyCellStyle(wr.row, cellCtx.column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr.vi.index, colIndexOf(wr.row, cellCtx)))} data-in-range={rozieAttr(inRange(wr.vi.index, colIndexOf(wr.row, cellCtx)) ? 'true' : undefined)} data-agg-cell={rozieAttr(cellIsAggregated(cellCtx) ? cellCtx.column.id : undefined)} data-rozie-s-d5dcab4c="">
 
             {(isExpanderColumn(cellCtx.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(rowCanExpand(wr.row)) && <button type="button" className={"rdt-expander"} data-expander="" aria-expanded={!!rowIsExpanded(wr.row)} aria-label={rozieAttr(rowIsExpanded(wr.row) ? 'Collapse row' : 'Expand row')} onClick={($event) => { onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr.row) ? '▾' : '▸')}</button>}</span> : (isSelectColumn(cellCtx.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -3888,20 +3888,20 @@ const DataTable = forwardRef<DataTableHandle, DataTableProps>(function DataTable
         </tr>
 
         {(rowShowsDetail(wr.row)) && <tr key={wr.row.id} className={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(wr.row.id)} data-rozie-s-d5dcab4c="">
-          <td className={"rdt-detail-cell"} colSpan={(visibleColCount()) ?? undefined} data-rozie-s-d5dcab4c="">
+          <td className={"rdt-detail-cell"} colSpan={visibleColCount()} data-rozie-s-d5dcab4c="">
             {(props.renderDetail ?? props.slots?.['detail'])?.({ row: wr.row.original })}
           </td>
         </tr>}</Fragment>)}
 
         <tr className={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={(visibleColCount()) ?? undefined} style={parseInlineStyle('height:' + padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
+          <td colSpan={visibleColCount()} style={parseInlineStyle('height:' + padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
         </tr>
       </tbody>
     </table>
-    </div> : <table className={clsx("rozie-data-table", { "rdt-sticky": props.stickyHeader })} role={rozieAttr(tableRole())} aria-rowcount={(totalRowCount()) ?? undefined} onKeyDown={($event) => { onGridKeyDown($event); }} onFocus={($event) => { syncActiveFromEvent($event); }} onBlur={($event) => { onGridFocusOut($event); }} onMouseDown={($event) => { onGridMouseDown($event); }} data-rozie-s-d5dcab4c="">
+    </div> : <table className={clsx("rozie-data-table", { "rdt-sticky": props.stickyHeader })} role={rozieAttr(tableRole())} aria-rowcount={totalRowCount()} onKeyDown={($event) => { onGridKeyDown($event); }} onFocus={($event) => { syncActiveFromEvent($event); }} onBlur={($event) => { onGridFocusOut($event); }} onMouseDown={($event) => { onGridMouseDown($event); }} data-rozie-s-d5dcab4c="">
       <thead className={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         {headerGroups.map((hg, hgLevel) => <tr key={hg.id} className={"rdt-tr"} role="row" data-rozie-s-d5dcab4c="">
-          {hg.headers.map((header) => <th key={header.id} className={clsx("rdt-th", { "rdt-select-th": isSelectColumn(header.column.id), "rdt-th-resizing": columnIsResizing(header.column.id) })} role="columnheader" data-col={rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel)} colSpan={(header.colSpan > 1 ? header.colSpan : undefined) ?? undefined} data-col-index={rozieAttr(headerColIndexOf(hg, header))} tabIndex={(cellTabindex('__header', headerColIndexOf(hg, header), hgLevel)) ?? undefined} aria-sort={rozieAttr(ariaSortFor(header.column.id))} style={parseInlineStyle(thStyle(header.column.id))} data-rozie-s-d5dcab4c="">
+          {hg.headers.map((header) => <th key={header.id} className={clsx("rdt-th", { "rdt-select-th": isSelectColumn(header.column.id), "rdt-th-resizing": columnIsResizing(header.column.id) })} role="columnheader" data-col={rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel)} colSpan={(header.colSpan > 1 ? header.colSpan : undefined) ?? undefined} data-col-index={rozieAttr(headerColIndexOf(hg, header))} tabIndex={cellTabindex('__header', headerColIndexOf(hg, header), hgLevel)} aria-sort={rozieAttr(ariaSortFor(header.column.id))} style={parseInlineStyle(thStyle(header.column.id))} data-rozie-s-d5dcab4c="">
 
 
             {(isSelectColumn(header.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -3935,7 +3935,7 @@ const DataTable = forwardRef<DataTableHandle, DataTableProps>(function DataTable
 
         {rows.map((row) => <Fragment key={row.id}>
         <tr key={row.id} className={clsx("rdt-tr", { "rdt-group-header": rowIsGrouped(row) })} role="row" data-depth={rozieAttr(row.depth)} aria-rowindex={(isGrid() ? absRowIndexOf(row) + 1 : undefined) ?? undefined} data-group-header={rozieAttr(rowIsGrouped(row) ? row.id : undefined)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(row) ? row.id : undefined)} aria-expanded={(rowIsGrouped(row) ? !!rowIsExpanded(row) : undefined) ?? undefined} aria-level={(groupingActive() ? row.depth + 1 : undefined) ?? undefined} data-rozie-s-d5dcab4c="">
-          {visibleCellsFor(row).map((cellCtx) => <td key={cellCtx.id} className={clsx("rdt-td", { "rdt-select-td": isSelectColumn(cellCtx.column.id), "rdt-in-range": inRange(rowIndexOf(row), colIndexOf(row, cellCtx)) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cellCtx.column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row))} data-col-index={rozieAttr(colIndexOf(row, cellCtx))} tabIndex={(cellTabindex(String(rowIndexOf(row)), colIndexOf(row, cellCtx))) ?? undefined} style={parseInlineStyle(bodyCellStyle(row, cellCtx.column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row), colIndexOf(row, cellCtx)))} data-in-range={rozieAttr(inRange(rowIndexOf(row), colIndexOf(row, cellCtx)) ? 'true' : undefined)} data-agg-cell={rozieAttr(cellIsAggregated(cellCtx) ? cellCtx.column.id : undefined)} data-rozie-s-d5dcab4c="">
+          {visibleCellsFor(row).map((cellCtx) => <td key={cellCtx.id} className={clsx("rdt-td", { "rdt-select-td": isSelectColumn(cellCtx.column.id), "rdt-in-range": inRange(rowIndexOf(row), colIndexOf(row, cellCtx)) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cellCtx.column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row))} data-col-index={rozieAttr(colIndexOf(row, cellCtx))} tabIndex={cellTabindex(String(rowIndexOf(row)), colIndexOf(row, cellCtx))} style={parseInlineStyle(bodyCellStyle(row, cellCtx.column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row), colIndexOf(row, cellCtx)))} data-in-range={rozieAttr(inRange(rowIndexOf(row), colIndexOf(row, cellCtx)) ? 'true' : undefined)} data-agg-cell={rozieAttr(cellIsAggregated(cellCtx) ? cellCtx.column.id : undefined)} data-rozie-s-d5dcab4c="">
 
             {(isExpanderColumn(cellCtx.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(rowCanExpand(row)) && <button type="button" className={"rdt-expander"} data-expander="" aria-expanded={!!rowIsExpanded(row)} aria-label={rozieAttr(rowIsExpanded(row) ? 'Collapse row' : 'Expand row')} onClick={($event) => { onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row) ? '▾' : '▸')}</button>}</span> : (isSelectColumn(cellCtx.column.id)) ? <span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -3957,7 +3957,7 @@ const DataTable = forwardRef<DataTableHandle, DataTableProps>(function DataTable
         </tr>
 
         {(rowShowsDetail(row)) && <tr key={row.id} className={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(row.id)} data-rozie-s-d5dcab4c="">
-          <td className={"rdt-detail-cell"} colSpan={(visibleColCount()) ?? undefined} data-rozie-s-d5dcab4c="">
+          <td className={"rdt-detail-cell"} colSpan={visibleColCount()} data-rozie-s-d5dcab4c="">
             {(props.renderDetail ?? props.slots?.['detail'])?.({ row: row.original })}
           </td>
         </tr>}</Fragment>)}