@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/FloatingPanel/index.tsx

@@ -1,5 +1,12 @@
 import type { ReactNode, RefObject, UIEvent } from "react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import {
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
@@ -7,7 +14,7 @@ import {
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
 } from "@multiplatform.one/theme";
-import { isWeb, Sheet, useMedia, View, YStack } from "tamagui";
+import { isWeb, Sheet, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
@@ -16,6 +23,9 @@ import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFl
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
+import { PanelPortal } from "./PanelPortal";
+
+type PointerOpenEvent = PanelActionEvent & { button?: number; target?: unknown };
 
 export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
@@ -98,6 +108,12 @@ export interface FloatingPanelProps {
    * that handle their own internal spacing.
    */
   contentPadding?: "none" | "default";
+  /**
+   * The content sits one density step below the page (LC-73), as the
+   * calendar does. The web panel's radius caps at that step's padding
+   * (CONTAINER-CAP), since a `contentPadding="none"` widget pads itself there.
+   */
+  compact?: boolean;
   /**
    * Tamagui transition token for sheet/overlay animations.
    */
@@ -185,6 +201,33 @@ function useKeyboardFocusIntoPanel(
   }, [open, frameRef, keyboardOpenRef]);
 }
 
+/**
+ * Viewport y of the box a `position: fixed` panel is laid out against. The
+ * top math above is in viewport coordinates, which is only right while that
+ * box is the viewport. An ancestor with a transform, filter, perspective,
+ * paint containment or container query becomes the containing block instead.
+ * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
+ * transformed dialog still lays out against that dialog. A `display: contents`
+ * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
+ */
+function fixedContainingBlockTop(element: HTMLElement): number {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const cs = getComputedStyle(node);
+    if (cs.display === "contents") continue;
+    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
+    const captures =
+      set(cs.transform, "none") ||
+      set(cs.perspective, "none") ||
+      set(cs.filter, "none") ||
+      set(cs.backdropFilter, "none") ||
+      set(cs.containerType, "normal") ||
+      /transform|perspective|filter/.test(cs.willChange) ||
+      /paint|layout|strict|content/.test(cs.contain);
+    if (captures) return node.getBoundingClientRect().top + node.clientTop - node.scrollTop;
+  }
+  return 0;
+}
+
 function panelTransformOrigin(placement: string): string {
   const rtl =
     isWeb &&
@@ -208,31 +251,30 @@ const overlayFloatBreakpoint = OVERLAY_BREAKPOINT;
  * re-render on resize). Name kept for API compatibility; "gtSm" reads as
  * "wide enough to float" (≥ OVERLAY_BREAKPOINT), not the dead v4 media key.
  */
+function subscribeViewport(listener: () => void) {
+  if (!isWeb || typeof window === "undefined") return () => {};
+  window.addEventListener("resize", listener);
+  return () => window.removeEventListener("resize", listener);
+}
+
+function viewportSnapshot() {
+  return isWeb && typeof window !== "undefined" && window.innerWidth > overlayFloatBreakpoint;
+}
+
+const serverViewportSnapshot = () => false;
+
 export function useViewportGtSm() {
-  const [wideEnoughToFloat, setWideEnoughToFloat] = useState(() =>
-    isWeb && typeof window !== "undefined" ? window.innerWidth > overlayFloatBreakpoint : false,
-  );
-  useEffect(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    const handler = () => setWideEnoughToFloat(window.innerWidth > overlayFloatBreakpoint);
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
-  }, []);
-  return wideEnoughToFloat;
+  return useSyncExternalStore(subscribeViewport, viewportSnapshot, serverViewportSnapshot);
 }
 
 export function FloatingPanel(props: FloatingPanelProps) {
   // LC-71: install modality tracking during render so the Enter that opens
   // the panel is already classified as keyboard-origin when focus moves in.
   if (isWeb) ensureKeyboardModalityTracking();
-  const media = useMedia();
   const viewportGtSm = useViewportGtSm();
-  // When sheet is undefined: sheet on native and below medium (viewport
-  // < 640). Floating from `$sm` up. Use viewport on client so we update on
-  // resize; `media.sm` (v5 minWidth 640 — `gtSm` died with the v5 media
-  // map, MPO-13 C4) for SSR when window is unavailable.
-  const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : media.sm === true;
-  const shouldUseSheet = props.sheet ?? (!isWeb || !effectiveGtSm);
+  // SSR and the hydration render use the same sheet structure. The viewport
+  // snapshot switches to floating after hydration when the browser is wide.
+  const shouldUseSheet = props.sheet ?? (!isWeb || !viewportGtSm);
 
   if (shouldUseSheet) return <FloatingPanelSheet {...props} />;
   return <FloatingPanelWeb {...props} />;
@@ -240,6 +282,26 @@ export function FloatingPanel(props: FloatingPanelProps) {
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
 
+/**
+ * A closed tamagui Sheet keeps its children mounted and parks the frame
+ * below the viewport, so state inside survives a reopen. Parked, the frame
+ * must leave the accessibility tree and the Tab order (MPO-359).
+ */
+function useParkedFrameInert(open: boolean, frameRef: RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    if (!isWeb) return;
+    const frame = frameRef.current;
+    if (!frame || typeof frame.setAttribute !== "function") return;
+    if (open) {
+      frame.removeAttribute("inert");
+      frame.removeAttribute("aria-hidden");
+    } else {
+      frame.setAttribute("inert", "");
+      frame.setAttribute("aria-hidden", "true");
+    }
+  }, [open, frameRef]);
+}
+
 function FloatingPanelSheet({
   open,
   onOpenChange,
@@ -274,6 +336,7 @@ function FloatingPanelSheet({
   // DG-A11Y-04 / Axiom 7: Sheet has no focus scope — move focus into the
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
+  useParkedFrameInert(open, sheetFrameRef);
   useSheetModalFocus(open, sheetFrameRef, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open, sheetFrameRef);
 
@@ -389,6 +452,7 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
+  compact,
   contentPadding = "default",
   openOn = "press",
 }: FloatingPanelProps) {
@@ -413,6 +477,7 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? undefined : grownRef,
     widthMode,
     fitContent,
+    compact,
     onBeforeOpen: () => {
       overlayStyleRef.current = null;
       pinnedTopRef.current = 0;
@@ -472,13 +537,14 @@ function FloatingPanelWeb({
       let height = Math.min(totalContentHeight, Math.max(0, available));
       height = Math.max(Math.min(120, Math.max(0, available)), height);
       const top = isDropup ? aboveBottom - height : belowTop;
+      const cssTop = top - fixedContainingBlockTop(dropdownElement);
 
       const cached = overlayStyleRef.current;
-      if (!cached || cached.top !== top || cached.maxHeight !== height) {
-        dropdownElement.style.top = `${top}px`;
+      if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+        dropdownElement.style.top = `${cssTop}px`;
         dropdownElement.style.maxHeight = `${height}px`;
         dropdownElement.style.height = "";
-        overlayStyleRef.current = { top, maxHeight: height };
+        overlayStyleRef.current = { top: cssTop, maxHeight: height };
         void dropdownElement.offsetHeight;
       }
 
@@ -545,12 +611,13 @@ function FloatingPanelWeb({
       }
     }
 
+    const cssTop = top - fixedContainingBlockTop(dropdownElement);
     const cached = overlayStyleRef.current;
-    if (!cached || cached.top !== top || cached.maxHeight !== height) {
-      dropdownElement.style.top = `${top}px`;
+    if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+      dropdownElement.style.top = `${cssTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyleRef.current = { top, maxHeight: height };
+      overlayStyleRef.current = { top: cssTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
@@ -698,6 +765,24 @@ function FloatingPanelWeb({
     [disabled, onOpenChange],
   );
 
+  // useClick's mousedown opener calls preventDefault, so a pointer open never
+  // focuses the trigger the way a pressed button is focused. The render that
+  // opens the panel then captures whatever held focus before, often <body> or
+  // another trigger, and Escape returns there (LC-48). Focus the pressed
+  // control first so the capture is the trigger, as for a keyboard open.
+  const focusTriggerOnPointerOpen = (event: PointerOpenEvent) => {
+    if (open || disabled || isContextMenu || event.button !== 0 || !isWeb) return;
+    const reference = panel.triggerRef.current;
+    if (!reference) return;
+    const target = event.target instanceof Element ? event.target : null;
+    const pressed = target?.closest<HTMLElement>(PANEL_FOCUSABLE);
+    const focusable =
+      pressed && reference.contains(pressed)
+        ? pressed
+        : reference.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+    focusable?.focus({ preventScroll: true, focusVisible: false } as FocusOptions);
+  };
+
   const referenceProps = getReferenceProps({
     ref: panel.setReferenceRef,
     onClickCapture: openFromSynthesizedClick,
@@ -709,7 +794,9 @@ function FloatingPanelWeb({
     const handler = referenceProps[name];
     if (typeof handler === "function") {
       referenceProps[name] = (event: PanelActionEvent) => {
-        if (!isNestedPanelAction(event)) handler(event);
+        if (isNestedPanelAction(event)) return;
+        if (name === "onMouseDown") focusTriggerOnPointerOpen(event as PointerOpenEvent);
+        handler(event);
       };
     }
   }
@@ -732,67 +819,74 @@ function FloatingPanelWeb({
       </View>
 
       {panel.mounted && (
-        <YStack
-          {...getFloatingProps({
-            ref: panel.refs.setFloating,
-            style: {
-              ...elevatedSurfaceStyle,
-              position: panel.strategy,
-              top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-              left: panel.x ?? 0,
-              scrollbarWidth: "none" as any,
-              zIndex: zIndex.dropdown,
-              overflow: "auto",
-              ...panel.floatingStyleRef.current,
-              ...(overlayStyleRef.current ? { maxHeight: overlayStyleRef.current.maxHeight } : {}),
-              opacity: panel.visible ? 1 : 0,
-              transform: panel.visible ? "scale(1)" : "scale(0.96)",
-              transition: webTransition,
-              transformOrigin: panelTransformOrigin(panel.placement),
-            },
-            onScroll: handleScroll,
-            onTransitionEnd: (event) => {
-              if (
-                event.target === event.currentTarget &&
-                (event.propertyName === "height" || event.propertyName === "max-height")
-              ) {
-                panel.updateArrows(event.currentTarget);
-              }
-            },
-          })}
-          data-testid="floating-panel-viewport"
-          data-fp-panel=""
-          {...panelChromeFocus}
-          pointerEvents={panel.visible ? "auto" : "none"}
-          {...elevatedSurfaceProps}
-          // Complete elevatedSurface fragment above is the ONLY surface source
-          // (SF-OVERLAY "including border and elevation", Round 2 docket).
-          // The one layered exception is anatomy, not surface: the dropdown
-          // radius clamp (same shape as Card's containerRadius over
-          // elevatedSurface) keeps list rows unclipped at large radius knobs.
-          borderRadius={panel.dropdownRadius}
-          paddingVertical={0}
-        >
-          <ScrollArrow
-            direction="up"
-            scrollRef={panel.refs.floating}
-            visible={panel.arrowUp}
-            arrowScrollDirRef={panel.arrowScrollDirRef}
-          />
-          <View
-            ref={contentRef as any}
-            {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
-            {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+        <PanelPortal anchor={panel.triggerRef.current}>
+          <YStack
+            {...getFloatingProps({
+              ref: panel.refs.setFloating,
+              style: {
+                ...elevatedSurfaceStyle,
+                position: panel.strategy,
+                top: overlayStyleRef.current?.top ?? panel.y ?? 0,
+                left: panel.x ?? 0,
+                scrollbarWidth: "none" as any,
+                zIndex: zIndex.dropdown,
+                overflow: "auto",
+                ...panel.floatingStyleRef.current,
+                ...(overlayStyleRef.current
+                  ? { maxHeight: overlayStyleRef.current.maxHeight }
+                  : {}),
+                opacity: panel.visible ? 1 : 0,
+                // `none`, not scale(1): any transform makes this panel the
+                // containing block of a nested panel's `position: fixed`, which
+                // then positions against this box and is clipped by its scroll.
+                transform: panel.visible ? "none" : "scale(0.96)",
+                transition: webTransition,
+                transformOrigin: panelTransformOrigin(panel.placement),
+              },
+              onScroll: handleScroll,
+              onTransitionEnd: (event) => {
+                if (
+                  event.target === event.currentTarget &&
+                  (event.propertyName === "height" || event.propertyName === "max-height")
+                ) {
+                  panel.updateArrows(event.currentTarget);
+                }
+              },
+            })}
+            data-testid="floating-panel-viewport"
+            data-fp-panel=""
+            {...panelChromeFocus}
+            pointerEvents={panel.visible ? "auto" : "none"}
+            {...elevatedSurfaceProps}
+            // Complete elevatedSurface fragment above is the ONLY surface source
+            // (SF-OVERLAY "including border and elevation", Round 2 docket).
+            // The one layered exception is anatomy, not surface: the dropdown
+            // radius clamp (same shape as Card's containerRadius over
+            // elevatedSurface) keeps list rows unclipped at large radius knobs.
+            borderRadius={panel.dropdownRadius}
+            paddingVertical={0}
           >
-            {children}
-          </View>
-          <ScrollArrow
-            direction="down"
-            scrollRef={panel.refs.floating}
-            visible={panel.arrowDown}
-            arrowScrollDirRef={panel.arrowScrollDirRef}
-          />
-        </YStack>
+            <ScrollArrow
+              direction="up"
+              scrollRef={panel.refs.floating}
+              visible={panel.arrowUp}
+              arrowScrollDirRef={panel.arrowScrollDirRef}
+            />
+            <View
+              ref={contentRef as any}
+              {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
+              {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+            >
+              {children}
+            </View>
+            <ScrollArrow
+              direction="down"
+              scrollRef={panel.refs.floating}
+              visible={panel.arrowDown}
+              arrowScrollDirRef={panel.arrowScrollDirRef}
+            />
+          </YStack>
+        </PanelPortal>
       )}
     </>
   );

package/src/FloatingPanel/panelPortal.spec.tsx

@@ -0,0 +1,142 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState } from "react";
+import { ScrollView, Text, Theme } from "tamagui";
+import { Button } from "../Button";
+import { Select } from "../fields/Select";
+import { containsAcrossPanels, panelPortalAnchor } from "../shared/panelPortal";
+import { FloatingPanel } from "./index";
+import { panelPortalHost } from "./PanelPortal";
+
+/**
+ * MPO-335. react-native-web's ScrollView sets `transform: translateZ(0)` on
+ * its scroll node, which makes it the containing block of any
+ * `position: fixed` descendant, so a web panel left in the scroller's DOM is
+ * clipped by it. Every web panel now portals out of the scroller.
+ */
+
+const options = ["Apple", "Banana", "Cherry"].map((label) => ({
+  label,
+  value: label.toLowerCase(),
+}));
+
+const pointerPress = (el: Element) => {
+  fireEvent.pointerDown(el);
+  fireEvent.mouseDown(el, { detail: 1 });
+  fireEvent.mouseUp(el, { detail: 1 });
+  fireEvent.click(el, { detail: 1 });
+};
+
+function PanelHarness() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel open={open} onOpenChange={setOpen} trigger={<Button>Open</Button>}>
+      <Text>panel body</Text>
+    </FloatingPanel>
+  );
+}
+
+let innerWidth = 0;
+beforeEach(() => {
+  innerWidth = window.innerWidth;
+  Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 1200 });
+});
+afterEach(() => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: innerWidth,
+  });
+});
+
+describe("web panels escape a react-native-web ScrollView (MPO-335)", () => {
+  it("a Select's listbox is not a descendant of the scroll node", async () => {
+    const result = renderWithProviders(
+      <ScrollView testID="scroller" height={120}>
+        <Select options={options} placeholder="Pick" />
+      </ScrollView>,
+    );
+    const scroller = result.getByTestId("scroller");
+    const trigger = result.getByTestId("select-trigger");
+    expect(scroller.contains(trigger)).toBe(true);
+    pointerPress(trigger);
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="select-dropdown"]')).not.toBeNull();
+    });
+    const dropdown = document.querySelector('[data-testid="select-dropdown"]') as HTMLElement;
+    expect(scroller.contains(dropdown)).toBe(false);
+    expect(dropdown.closest("[data-fp-portal]")).not.toBeNull();
+    const anchor = panelPortalAnchor(dropdown);
+    expect(anchor && scroller.contains(anchor)).toBe(true);
+    expect(containsAcrossPanels(scroller, dropdown)).toBe(true);
+  });
+
+  it("a FloatingPanel's viewport is not a descendant of the scroll node", async () => {
+    const result = renderWithProviders(
+      <ScrollView testID="scroller" height={120}>
+        <PanelHarness />
+      </ScrollView>,
+    );
+    const scroller = result.getByTestId("scroller");
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).not.toBeNull();
+    });
+    const viewport = document.querySelector(
+      '[data-testid="floating-panel-viewport"]',
+    ) as HTMLElement;
+    expect(scroller.contains(viewport)).toBe(false);
+    expect(viewport.style.position).toBe("fixed");
+    expect(containsAcrossPanels(scroller, viewport)).toBe(true);
+  });
+
+  it("carries the trigger's theme across the portal", async () => {
+    const result = renderWithProviders(
+      <Theme name="dark">
+        <ScrollView testID="scroller" height={120}>
+          <PanelHarness />
+        </ScrollView>
+      </Theme>,
+    );
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).not.toBeNull();
+    });
+    const viewport = document.querySelector(
+      '[data-testid="floating-panel-viewport"]',
+    ) as HTMLElement;
+    const portal = viewport.closest("[data-fp-portal]") as HTMLElement;
+    const themed = Array.from(portal.querySelectorAll<HTMLElement>(".is_Theme")).filter((el) =>
+      el.contains(viewport),
+    );
+    expect(themed.some((el) => /\bt_dark\b/.test(el.className))).toBe(true);
+  });
+});
+
+describe("panelPortalHost", () => {
+  it("mounts inside the nearest modal layer so its focus trap keeps the panel", () => {
+    const dialog = document.createElement("div");
+    dialog.setAttribute("role", "dialog");
+    const scroller = document.createElement("div");
+    const trigger = document.createElement("button");
+    scroller.append(trigger);
+    dialog.append(scroller);
+    document.body.append(dialog);
+    try {
+      expect(panelPortalHost(trigger)).toBe(dialog);
+    } finally {
+      dialog.remove();
+    }
+  });
+
+  it("falls back to the body", () => {
+    const trigger = document.createElement("button");
+    document.body.append(trigger);
+    try {
+      expect(panelPortalHost(trigger)).toBe(document.body);
+    } finally {
+      trigger.remove();
+    }
+  });
+});

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -10,6 +10,8 @@
  * Calendar grids take fit-content (MPO-262): a full-width field wrapper is
  * unrelated to seven day columns and must not create a mostly empty popup.
  * Text listboxes retain at-least-trigger; icon/button launchers may also hug.
+ * The Icon glyph grid pins to its field exactly (match-trigger): fixed 64px
+ * cells wrap into more columns on a wider field instead of stretching.
  */
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
@@ -19,7 +21,10 @@ import { describe, expect, it } from "vitest";
 const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields");
 
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
-const fieldShapedPickers = ["TimePicker/catalog.tsx", "ColorPicker/parts.tsx", "Icon/index.tsx"];
+const fieldShapedPickers = ["TimePicker/catalog.tsx", "ColorPicker/parts.tsx"];
+
+/** Field-triggered pickers pinned to the field's width exactly. */
+const matchTriggerPickers = ["Icon/index.tsx"];
 
 const intrinsicGridPickers = ["DatePicker/parts.tsx", "DatePicker/DatetimePicker.catalog.tsx"];
 
@@ -40,12 +45,19 @@ describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
     expect(source).toContain('widthMode="at-least-trigger"');
   });
 
-  it.each(fieldShapedPickers)("%s no longer passes the fitContent boolean", (relative) => {
-    const source = read(relative);
-    expect(source).not.toMatch(/^\s*fitContent\s*$/m);
-    expect(source).not.toMatch(/fitContent=\{?true/);
+  it.each(matchTriggerPickers)("%s declares match-trigger", (relative) => {
+    expect(read(relative)).toContain('widthMode="match-trigger"');
   });
 
+  it.each([...fieldShapedPickers, ...matchTriggerPickers])(
+    "%s no longer passes the fitContent boolean",
+    (relative) => {
+      const source = read(relative);
+      expect(source).not.toMatch(/^\s*fitContent\s*$/m);
+      expect(source).not.toMatch(/fitContent=\{?true/);
+    },
+  );
+
   it.each(buttonShapedPickers)("%s keeps fit-content deliberately", (relative) => {
     const source = read(relative);
     // Asserted, not merely tolerated: if this stops being true the exemption

package/src/FloatingPanel/touchRecipeHydration.spec.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { renderToString } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+import { TestProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { TextArea } from "../fields/TextArea";
+import { Input as InputParts } from "../InputParts";
+import { Input } from "../fields/Input";
+import { SearchInput } from "../fields/SearchInput";
+import { Select } from "../fields/Select";
+import { Combobox } from "../fields/Combobox";
+const modality = vi.hoisted(() => ({ touch: true }));
+vi.mock("@multiplatform.one/platform", async (original) => ({
+  ...(await original<object>()),
+  get isWebTouchable() {
+    return modality.touch && typeof window !== "undefined";
+  },
+}));
+const options = ["Alpha", "Beta", "Gamma", "Delta"].map((label) => ({ label, value: label }));
+function Fixture() {
+  return (
+    <TestProviders>
+      <Input aria-label="Input" />
+      <TextArea aria-label="Area" />
+      <InputParts>
+        <InputParts.Box>
+          <InputParts.Area aria-label="Compound" />
+          <InputParts.Icon>
+            <span>Icon</span>
+          </InputParts.Icon>
+          <InputParts.Button aria-label="End">End</InputParts.Button>
+        </InputParts.Box>
+      </InputParts>
+      <SearchInput aria-label="Search" />
+      <Select aria-label="Select" options={options} defaultValue="Alpha" />
+      <Combobox aria-label="Combobox" options={options} defaultValue="Alpha" />
+    </TestProviders>
+  );
+}
+describe("touch recipe hydration", () => {
+  it.each([true, false, true])(
+    "hydrates actual controls on repeated coarse mount %s",
+    async (touch) => {
+      modality.touch = touch;
+      const browserWindow = window;
+      let html: string;
+      vi.stubGlobal("window", undefined);
+      try {
+        html = renderToString(<Fixture />);
+      } finally {
+        vi.stubGlobal("window", browserWindow);
+      }
+      const container = document.createElement("div");
+      container.innerHTML = html;
+      document.body.append(container);
+      const errors: unknown[] = [];
+      const spy = vi.spyOn(console, "error").mockImplementation((...args) => errors.push(args));
+      let root: ReturnType<typeof hydrateRoot> | undefined;
+      try {
+        await act(async () => {
+          root = hydrateRoot(container, <Fixture />, {
+            onRecoverableError: (error) => errors.push(error),
+          });
+        });
+        expect(
+          errors.filter((error) => /hydration|hydrated|didn't match/i.test(String(error))),
+        ).toEqual([]);
+        const heights = [...container.querySelectorAll("[data-visual-height]")].map((el) =>
+          Number(el.getAttribute("data-visual-height")),
+        );
+        expect(container.querySelector("[touch]")).toBeNull();
+        expect(heights.length).toBeGreaterThanOrEqual(2);
+        expect(heights.every((height) => height >= 44)).toBe(true);
+      } finally {
+        await act(async () => root?.unmount());
+        spy.mockRestore();
+        container.remove();
+      }
+    },
+  );
+});