@multiplatform.one/components 7.28.1 → 7.29.1

package/src/surfaces.tsx

@@ -1,11 +1,13 @@
 import { Preset, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useEffect } from "react";
 import {
   AlertDialog,
   Dialog,
+  isWeb,
   Popover,
   Sheet,
+  useDialogContext,
   View,
   type DialogContentProps as TamaguiDialogContentProps,
   type DialogOverlayProps as TamaguiDialogOverlayProps,
@@ -56,6 +58,86 @@ const overlayFrameFocusStyle = {
   outlineStyle: "none" as any,
 } as const;
 
+// ── Overlay open focus (MPO-452, MPO-466) ────────────────────────────────
+// Tamagui 2.7's FocusScope decides "focus is not inside yet", waits for
+// idle (up to 200 ms), then focuses the first tabbable that does not
+// already hold focus: a click into a field during that wait had focus
+// moved to another control, so the typing that followed went there. The
+// house handler checks and focuses in one step. With no tabbable yet,
+// tamagui's deferred path still runs. Dialog content sits in a native
+// <dialog> whose show() puts focus inside before the check in browsers,
+// so there FocusScope never calls the handler; useDialogShowFocus does
+// when show() left focus on something that is not a tab stop (MPO-470).
+
+function isTabbableWithin(node: HTMLElement, container: HTMLElement): boolean {
+  if (node.tabIndex < 0 || node.hidden || node.tagName === "A") return false;
+  if ((node as HTMLInputElement).disabled) return false;
+  if (node instanceof HTMLInputElement && node.type === "hidden") return false;
+  if (getComputedStyle(node).visibility === "hidden") return false;
+  for (let el: HTMLElement | null = node; el && el !== container; el = el.parentElement) {
+    if (getComputedStyle(el).display === "none") return false;
+  }
+  return true;
+}
+
+function focusFirstTabbableOnOpen(event: Event): void {
+  const container = event.currentTarget;
+  if (typeof HTMLElement === "undefined" || !(container instanceof HTMLElement)) return;
+  const first = Array.from(container.querySelectorAll<HTMLElement>("*")).find((node) =>
+    isTabbableWithin(node, container),
+  );
+  if (!first) return;
+  event.preventDefault();
+  first.focus({ preventScroll: true });
+  if (first instanceof HTMLInputElement) first.select();
+}
+
+type OpenAutoFocus = (event: Event) => void;
+
+/** The caller's handler runs first; its `preventDefault()` skips the house open focus. */
+function withHouseOpenFocus(onOpenAutoFocus?: OpenAutoFocus): OpenAutoFocus {
+  return (event) => {
+    onOpenAutoFocus?.(event);
+    if (!event.defaultPrevented) focusFirstTabbableOnOpen(event);
+  };
+}
+
+const DIALOG_SHOW_FOCUS_EVENT = "mp.dialogShowFocus";
+
+/**
+ * Chromium and WebKit's `<dialog>.show()` focuses the first focusable
+ * descendant, so a tabIndex -1 frame (the house Input's group frame, a
+ * tabIndex -1 panel) takes focus; Firefox and the HTML spec take the first
+ * tab stop. When focus sits on something that is not a tab stop, run
+ * `onOpenAutoFocus` against the content the way FocusScope would. The
+ * content is found by its id because FocusScope clones it with its own ref,
+ * so a ref passed to `Dialog.Content` never attaches on web. Passive effects
+ * run after the portal's layout-effect `show()`. Mirror of the forms hook.
+ */
+function useDialogShowFocus(onOpenAutoFocus: OpenAutoFocus): void {
+  const { open, contentId } = useDialogContext();
+  useEffect(() => {
+    if (!open || !contentId || !isWeb || typeof document === "undefined") return;
+    const content = document.getElementById(contentId);
+    const focused = document.activeElement;
+    if (!content || !(focused instanceof HTMLElement)) return;
+    if (!content.contains(focused) || focused.tabIndex >= 0) return;
+    content.addEventListener(DIALOG_SHOW_FOCUS_EVENT, onOpenAutoFocus, { once: true });
+    content.dispatchEvent(new CustomEvent(DIALOG_SHOW_FOCUS_EVENT, { cancelable: true }));
+  }, [open, contentId]);
+}
+
+/**
+ * The house open focus for a raw `Dialog.Content`, which `DialogContent` and
+ * `AlertDialogContent` already run: render it inside the content. When
+ * `<dialog>.show()` left focus off a tab stop, the caller's `onOpenAutoFocus`
+ * runs, then the first tabbable takes focus (MPO-470).
+ */
+export function DialogShowFocus({ onOpenAutoFocus }: { onOpenAutoFocus?: OpenAutoFocus }): null {
+  useDialogShowFocus(withHouseOpenFocus(onOpenAutoFocus));
+  return null;
+}
+
 // Card frame lives in ./Card (NestedScale only; no Tint — R12); the parts
 // live in ./CardHeader and ./CardFooter and are re-exported through ./Card.
 
@@ -105,8 +187,10 @@ export const DialogContent = forwardRef<
 const DialogContentInner = forwardRef<
   TamaguiElement,
   TamaguiDialogContentProps & { children?: ReactNode }
->(function DialogContentInner({ children, ...props }, ref) {
+>(function DialogContentInner({ children, onOpenAutoFocus, ...props }, ref) {
   const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
+  const openFocus = withHouseOpenFocus(onOpenAutoFocus);
+  useDialogShowFocus(openFocus);
   // ThemeableStack unstyled:false defaults `elevate: true`, which paints
   // getElevation(size) — `$true` is a control stop. `elevate={false}` leaves
   // the overlay ladder in `elevatedSurface` as the only shadow (MPO-99).
@@ -126,6 +210,7 @@ const DialogContentInner = forwardRef<
       {...overlayFrameFocus}
       focusStyle={overlayFrameFocusStyle}
       focusVisibleStyle={overlayFrameFocusStyle}
+      onOpenAutoFocus={openFocus}
       {...props}
     >
       <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
@@ -190,6 +275,7 @@ const AlertDialogContentInner = forwardRef<
   TamaguiDialogContentProps & { children?: ReactNode }
 >(function AlertDialogContentInner({ children, ...props }, ref) {
   const { knobProps } = useResolvedKnobs({ component: "AlertDialogContent" });
+  useDialogShowFocus(withHouseOpenFocus(props.onOpenAutoFocus));
   return (
     <AlertDialog.Content
       ref={ref}
@@ -242,8 +328,14 @@ export const AlertDialogOverlay = forwardRef<
 // containerRadius cap spread over it; children must not draw their own
 // outer border.
 
-export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
-  function PopoverContent({ children, ...props }, ref) {
+type PopoverContentProps = ViewProps & {
+  children?: ReactNode;
+  /** Runs first; `preventDefault()` skips the house open focus. */
+  onOpenAutoFocus?: OpenAutoFocus;
+};
+
+export const PopoverContent = forwardRef<TamaguiElement, PopoverContentProps>(
+  function PopoverContent({ children, onOpenAutoFocus, ...props }, ref) {
     const { knobProps } = useResolvedKnobs({ component: "PopoverContent" });
     return (
       <Popover.Content
@@ -256,6 +348,7 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
         {...overlayFrameFocus}
         focusStyle={overlayFrameFocusStyle}
         focusVisibleStyle={overlayFrameFocusStyle}
+        onOpenAutoFocus={withHouseOpenFocus(onOpenAutoFocus)}
         {...props}
       >
         <NestedScale density={knobProps.density}>{children}</NestedScale>

package/src/textWeight.houseFonts.spec.tsx

@@ -0,0 +1,127 @@
+/**
+ * MPO-446 on the HOUSE font tables, read as computed weight on the text node.
+ *
+ * The class-identity matrix (../tests/textWeightMatrix.tsx) runs on the stock
+ * test config, which registers no `$serif`, so a family swap to serif there
+ * resolves no font at all and cannot show the defect the portal did: a Band
+ * H2 at Inter 600 falling to Georgia 400 under `headingFont: serif`. Here
+ * the provider carries `createDefaultThemeConfig()`, the tables the live
+ * apps ship (Inter heading ramp 600/700/800, category fonts 400 at every
+ * step), and every assertion is a `getComputedStyle` value.
+ */
+import { cleanup, render } from "@testing-library/react";
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { H1, H2, Heading } from "./Heading";
+import { Paragraph, SizableText, Text } from "./Text";
+
+const themeConfig = createDefaultThemeConfig();
+const LABEL = "Sign in to see your clusters";
+
+afterEach(cleanup);
+
+function textNodeHost(root: HTMLElement): HTMLElement {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.textContent?.trim() === LABEL && node.parentElement) return node.parentElement;
+  }
+  throw new Error(`no text node "${LABEL}"`);
+}
+
+function measure(node: ReactElement, scheme: "light" | "dark") {
+  const { container } = render(
+    <TamaguiProvider config={themeConfig.tamagui} defaultTheme={scheme}>
+      {node}
+    </TamaguiProvider>,
+  );
+  const cs = getComputedStyle(textNodeHost(container));
+  const weight = cs.fontWeight.trim();
+  const family = cs.fontFamily.split(",")[0]?.replace(/['"]/g, "").trim() ?? "";
+  cleanup();
+  if (!weight) throw new Error("no computed font-weight on the text node");
+  if (!family) throw new Error("no computed font-family on the text node");
+  return { weight, family };
+}
+
+const schemes = ["light", "dark"] as const;
+const headingSizes = ["$1", "$4", "$6", "$9"] as const;
+const knobWeights = [
+  ["regular", "400"],
+  ["bold", "700"],
+] as const;
+
+describe("house headings keep their weight across headingFont (MPO-446, LC-11)", () => {
+  for (const scheme of schemes) {
+    for (const [name, Voice] of [
+      ["Heading", Heading],
+      ["H1", H1],
+      ["H2", H2],
+    ] as const) {
+      it(`${scheme}: ${name} weight is the knob's at every size, sans-serif and serif alike`, () => {
+        for (const [fontWeight, expected] of knobWeights) {
+          for (const size of headingSizes) {
+            const at = (headingFont: "sans-serif" | "serif") =>
+              measure(
+                <Preset overrides={{ fontWeight, headingFont }}>
+                  <Voice size={size}>{LABEL}</Voice>
+                </Preset>,
+                scheme,
+              );
+            const sans = at("sans-serif");
+            const serif = at("serif");
+            expect(sans.family).toBe("Inter");
+            expect(serif.family).toBe("Georgia");
+            expect({ size, fontWeight, sans: sans.weight, serif: serif.weight }).toEqual({
+              size,
+              fontWeight,
+              sans: expected,
+              serif: expected,
+            });
+          }
+        }
+      });
+    }
+
+    it(`${scheme}: the portal Band heading keeps its explicit 700 under serif`, () => {
+      for (const [fontWeight] of knobWeights) {
+        for (const headingFont of ["sans-serif", "serif"] as const) {
+          const { weight } = measure(
+            <Preset overrides={{ fontWeight, headingFont }}>
+              <H2 margin={0} size="$1" fontWeight="700" color="$color12">
+                {LABEL}
+              </H2>
+            </Preset>,
+            scheme,
+          );
+          expect({ fontWeight, headingFont, weight }).toEqual({
+            fontWeight,
+            headingFont,
+            weight: "700",
+          });
+        }
+      }
+    });
+  }
+});
+
+describe("sized body voices take fontWeight and bodyFont together (MPO-446)", () => {
+  for (const scheme of schemes) {
+    for (const [name, Voice] of [
+      ["Text", Text],
+      ["SizableText", SizableText],
+      ["Paragraph", Paragraph],
+    ] as const) {
+      it(`${scheme}: ${name} size $3 is 700 Georgia under bold + serif`, () => {
+        const m = measure(
+          <Preset overrides={{ fontWeight: "bold", bodyFont: "serif" }}>
+            <Voice size="$3">{LABEL}</Voice>
+          </Preset>,
+          scheme,
+        );
+        expect(m).toEqual({ weight: "700", family: "Georgia" });
+      });
+    }
+  }
+});

package/src/textWeight.native.spec.tsx

@@ -0,0 +1,27 @@
+/**
+ * MPO-446 native arm: the same matrix as ./textWeight.spec.tsx under the
+ * native platform flags. A file-scoped `vi.mock` is one module graph (see
+ * ./Heading.native.spec.tsx for why that matters); the props channel is the
+ * only channel this arm can carry the knob on, which is the one native has.
+ */
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { registerWeightMatrix } from "../tests/textWeightMatrix";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+afterEach(cleanup);
+
+describe("house typography — fontWeight x size x family (native, MPO-446)", () => {
+  it("really is running with the native platform flags", async () => {
+    const platform = await import("@multiplatform.one/platform");
+    expect(platform.isWeb).toBe(false);
+    expect(platform.isNative).toBe(true);
+  });
+
+  registerWeightMatrix();
+});

package/src/textWeight.spec.tsx

@@ -0,0 +1,15 @@
+/**
+ * MPO-446 web arm: the fontWeight knob reaches sized house text. The matrix
+ * and the reason a size prop used to block the knob live in
+ * ../tests/textWeightMatrix.tsx; ./textWeight.native.spec.tsx runs the same table
+ * with the native platform flags.
+ */
+import { afterEach, describe } from "vitest";
+import { cleanup } from "@testing-library/react";
+import { registerWeightMatrix } from "../tests/textWeightMatrix";
+
+afterEach(cleanup);
+
+describe("house typography — fontWeight x size x family (web, MPO-446)", () => {
+  registerWeightMatrix();
+});

package/src/views/Calendar.tsx

@@ -39,16 +39,8 @@ import {
 import React, { useState, useMemo, useCallback, useEffect, useId, useRef } from "react";
 import { useTranslation } from "../shared/i18n";
 import { Button, FloatingPanel, Input, zIndex } from "@multiplatform.one/forms";
-import {
-  AnimatePresence,
-  ScrollView,
-  Text,
-  XStack,
-  YStack,
-  isWeb,
-  styled,
-  type YStackProps,
-} from "tamagui";
+import { AnimatePresence, Text, XStack, YStack, isWeb, styled, type YStackProps } from "tamagui";
+import { ScrollView } from "../ScrollView";
 import { useDirection } from "../hooks/useDirection";
 
 /**
@@ -89,18 +81,6 @@ export interface CalendarEventDraft {
   end: Date;
 }
 
-/**
- * Readable chip text for an arbitrary consumer-supplied event color.
- * White text on mid-tone brand hexes (#10b981, #f59e0b) measures 2-3.7:1 —
- * pick black/white by WCAG relative luminance instead. Theme tokens fall
- * back to $accentColor, the guaranteed pair for $accentBackground.
- *
- * The dark candidate is pure black: the old #1a1a1a candidate was scored
- * against ideal black (L=0) but rendered at L=0.0103, overstating its own
- * contrast — measured 4.11:1 on #8B5CF6 while claiming 4.96 (Axiom 15:
- * foreground on fills is luminance-COMPUTED, and the computation must match
- * the rendered pixels). Black keeps every sanctioned step-9 solid ≥ 4.5:1.
- */
 /**
  * Inline-END hairline rule (P-16 RTL mirroring): grid column separators sit
  * on the logical end edge so the grid mirrors with the writing direction.
@@ -132,8 +112,26 @@ function gridCellEdges(end: boolean, bottom: boolean) {
   };
 }
 
-export function eventChipTextColor(bg?: string): string {
-  if (!bg || !bg.startsWith("#")) return "$accentColor";
+/**
+ * Readable chip text for an event's fill.
+ * White text on mid-tone brand hexes (#10b981, #f59e0b) measures 2-3.7:1 —
+ * pick black/white by WCAG relative luminance instead.
+ *
+ * An event with no color paints `$accentBackground`, and its text is
+ * `onAccent`: the fill's readable anchor, which the caller resolves with
+ * `useReadableTextOn("$accentBackground")`. `$accentColor` is accent ink for
+ * the page, not for the fill; on it the fallback chip measured 1.76:1 in light
+ * and 3.84:1 in dark (MPO-468). A token color keeps `$accentColor`.
+ *
+ * The dark candidate is pure black: the old #1a1a1a candidate was scored
+ * against ideal black (L=0) but rendered at L=0.0103, overstating its own
+ * contrast — measured 4.11:1 on #8B5CF6 while claiming 4.96 (Axiom 15:
+ * foreground on fills is luminance-COMPUTED, and the computation must match
+ * the rendered pixels). Black keeps every sanctioned step-9 solid ≥ 4.5:1.
+ */
+export function eventChipTextColor(bg?: string, onAccent?: string): string {
+  if (!bg) return onAccent ?? "$accentColor";
+  if (!bg.startsWith("#")) return "$accentColor";
   const hex = bg.slice(1);
   const full =
     hex.length === 3
@@ -652,6 +650,7 @@ function SettleGhost({
   borderRadius: Record<string, unknown>;
   onDone: () => void;
 }) {
+  const onAccent = useReadableTextOn("$accentBackground");
   const [moved, setMoved] = useState(false);
   useEffect(() => {
     // Double rAF so the ghost paints at `from` before the tween retargets it
@@ -690,7 +689,7 @@ function SettleGhost({
         },
       } as any)}
     >
-      <Text fontSize="$2" numberOfLines={1} color={eventChipTextColor(settle.color)}>
+      <Text fontSize="$2" numberOfLines={1} color={eventChipTextColor(settle.color, onAccent)}>
         {settle.title}
       </Text>
     </YStack>
@@ -1662,7 +1661,7 @@ export function Calendar({
             {...knobProps.body}
             fontSize={compact ? "$1" : "$2"}
             numberOfLines={compact ? 1 : 2}
-            color={eventChipTextColor(event.color)}
+            color={eventChipTextColor(event.color, onAccent)}
           >
             {event.title}
           </Text>
@@ -1679,6 +1678,7 @@ export function Calendar({
       getEventDragProps,
       eventA11yProps,
       draggingEventId,
+      onAccent,
     ],
   );
 
@@ -1958,12 +1958,16 @@ export function Calendar({
                 fontSize="$1"
                 fontWeight="600"
                 numberOfLines={1}
-                color={eventChipTextColor(event.color)}
+                color={eventChipTextColor(event.color, onAccent)}
               >
                 {event.title}
               </Text>
               {blockHeight >= 34 && (
-                <Text fontSize="$1" numberOfLines={1} color={eventChipTextColor(event.color)}>
+                <Text
+                  fontSize="$1"
+                  numberOfLines={1}
+                  color={eventChipTextColor(event.color, onAccent)}
+                >
                   {formatTimeRangeLabel(start, end)}
                 </Text>
               )}
@@ -2517,7 +2521,11 @@ export function Calendar({
                 }),
           } as any)}
         >
-          <Text fontSize="$2" numberOfLines={1} color={eventChipTextColor(dragGhost.event.color)}>
+          <Text
+            fontSize="$2"
+            numberOfLines={1}
+            color={eventChipTextColor(dragGhost.event.color, onAccent)}
+          >
             {dragGhost.event.title}
           </Text>
         </YStack>

package/src/views/Dashboard.tsx

@@ -15,19 +15,8 @@ import {
 } from "@multiplatform.one/theme";
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import {
-  ScrollView,
-  Text,
-  XStack,
-  YStack,
-  isWeb,
-  type YStackProps,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-} from "tamagui";
+import { Text, XStack, YStack, isWeb, type YStackProps, H2, H3, H4, H5, H6 } from "tamagui";
+import { ScrollView } from "../ScrollView";
 
 /**
  * LC-17 SECTION-HEADING-SCALE + DG-A11Y-02: card sub-titles read at the ONE

package/src/views/Gantt.scroll.spec.tsx

@@ -11,7 +11,10 @@ const resizeCallbacks = new Map<Element, () => void>();
 vi.stubGlobal(
   "ResizeObserver",
   class {
-    constructor(private callback: ResizeObserverCallback) {}
+    private callback: ResizeObserverCallback;
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+    }
     observe(target: Element) {
       const notify = () =>
         this.callback([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);

package/src/views/Gantt.tsx

@@ -22,7 +22,8 @@ import { Button } from "@multiplatform.one/forms";
 import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
 import { ScrollView as RNScrollView } from "react-native";
-import { ScrollView, Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import { ScrollView } from "../ScrollView";
 import {
   addDays,
   barGeometry,
@@ -424,6 +425,36 @@ function GanttBarLabel({ title, fill }: { title: string; fill: string }) {
   );
 }
 
+/** Open-end mark: the bar label's ink, so it reads on every fill. */
+function GanttOpenEdgeMark({
+  fill,
+  glyph,
+  side,
+  edge,
+}: {
+  fill: string;
+  glyph: string;
+  side: { left: number } | { right: number };
+  edge: "start" | "end";
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const ink = useReadableTextOn(fill);
+  return (
+    <Text
+      position="absolute"
+      {...side}
+      {...knobProps.label}
+      color={ink ?? "$color12"}
+      opacity={0.75}
+      pointerEvents="none"
+      aria-hidden
+      {...{ [`data-gantt-open-${edge}`]: "true" }}
+    >
+      {glyph}
+    </Text>
+  );
+}
+
 /** Row-identity label: selected fill gets readable on-accent ink (LC-71). */
 function GanttTaskName({
   title,
@@ -1386,32 +1417,15 @@ export function GanttView({
 
           {/* "This end is not an end" — a mark, never a cap. */}
           {geom.openStart && (
-            <Text
-              position="absolute"
-              {...openStartSide}
-              {...knobProps.label}
-              color="$color12"
-              opacity={0.75}
-              pointerEvents="none"
-              aria-hidden
-              {...{ "data-gantt-open-start": "true" }}
-            >
-              {rtl ? "»" : "«"}
-            </Text>
+            <GanttOpenEdgeMark
+              fill={fill}
+              glyph={rtl ? "»" : "«"}
+              side={openStartSide}
+              edge="start"
+            />
           )}
           {geom.openEnd && (
-            <Text
-              position="absolute"
-              {...openEndSide}
-              {...knobProps.label}
-              color="$color12"
-              opacity={0.75}
-              pointerEvents="none"
-              aria-hidden
-              {...{ "data-gantt-open-end": "true" }}
-            >
-              {rtl ? "«" : "»"}
-            </Text>
+            <GanttOpenEdgeMark fill={fill} glyph={rtl ? "«" : "»"} side={openEndSide} edge="end" />
           )}
 
           {/* Live date label while dragging (honest preview of the commit). */}
@@ -1780,6 +1794,7 @@ export function GanttView({
                 Tamagui's styled ScrollView does not deliver onScroll there, and
                 the pinned axis follower depends on it. */}
             <CanvasScroller
+              keyboardShouldPersistTaps="handled"
               ref={hScrollRef}
               horizontal
               {...(isWeb ? { flex: 1 } : null)}

package/src/views/Kanban.native.tsx

@@ -892,6 +892,7 @@ function KanbanColumnView<T>({
           !isDropTarget && <EmptyState compact title={emptyColumnMessage} opacity={0.5} flex={1} />
         ) : (
           <FlashList
+            keyboardShouldPersistTaps="handled"
             ref={(list: any) => {
               handle.list = list;
             }}

package/src/views/Kanban.tsx

@@ -20,16 +20,8 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import {
-  AnimatePresence,
-  ListItem,
-  ScrollView,
-  Text,
-  View,
-  XStack,
-  YStack,
-  type YStackProps,
-} from "tamagui";
+import { AnimatePresence, ListItem, Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { ScrollView } from "../ScrollView";
 import { componentColors } from "../componentColors";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";

package/src/views/List.tsx

@@ -451,6 +451,7 @@ export function List<T>({
         }}
       >
         <FlashList
+          keyboardShouldPersistTaps="handled"
           ref={flashListRef}
           data={items}
           extraData={{ selected: effectiveSelected, ring: showKeyboardRing }}

package/src/views/Matrix.tsx

@@ -18,7 +18,8 @@ import {
 import React, { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
 import { ScrollView as RNScrollView } from "react-native";
-import { ScrollView, Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import { ScrollView } from "../ScrollView";
 import { formatRangeLabel } from "./ganttMath";
 import {
   alignMatrixRange,
@@ -634,6 +635,7 @@ export function MatrixView({
             </YStack>
 
             <CanvasScroller
+              keyboardShouldPersistTaps="handled"
               horizontal
               {...(isWeb ? { flex: 1 } : null)}
               showsHorizontalScrollIndicator

package/src/views/ReportBuilder.tsx

@@ -30,7 +30,8 @@ import {
 import { useHotkey } from "@tanstack/react-hotkeys";
 import React, { useState, useMemo, useCallback, useId, useRef } from "react";
 import { useTranslation } from "../shared/i18n";
-import { ScrollView, Text, XStack, YStack, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, type YStackProps } from "tamagui";
+import { ScrollView } from "../ScrollView";
 
 const AGGREGATIONS = ["count", "sum", "avg", "min", "max"] as const;
 

package/src/views/TreeView.tsx

@@ -1468,6 +1468,7 @@ export function TreeView<T = unknown>({
         }}
       >
         <FlashList
+          keyboardShouldPersistTaps="handled"
           ref={attachList}
           data={flatNodes}
           drawDistance={overscan * estimateSize}
@@ -1702,7 +1703,7 @@ export function TreeView<T = unknown>({
                     marginVertical={-handleOutset}
                     hitSlop={pressTargetHitSlop(caretSize)}
                     cursor="grab"
-                    opacity={0.45}
+                    opacity={0.6}
                     transition={transition as any}
                     hoverStyle={{ opacity: 1 }}
                     onPress={(e: any) => e?.stopPropagation?.()}