@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/DescriptionList/DescriptionList.stories.tsx

@@ -10,13 +10,11 @@ const meta: Meta<typeof DescriptionList> = {
   parameters: { status: { type: "stable" } },
   argTypes: {
     placement: { control: "radio", options: ["side", "top"] },
-    compact: { control: "boolean" },
     framed: { control: "boolean" },
     quiet: { control: "boolean" },
   },
   args: {
     placement: "side",
-    compact: false,
     framed: false,
     quiet: false,
   },
@@ -244,5 +242,5 @@ export const Slots: Story = {
 };
 
 export const Compact: Story = {
-  render: () => <DescriptionList compact placement="side" items={HOST.slice(0, 3)} />,
+  render: () => <DescriptionList size="$3" placement="side" items={HOST.slice(0, 3)} />,
 };

package/src/DescriptionList/index.tsx

@@ -25,8 +25,8 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, XStack, YStack, isWeb } from "tamagui";
+import { compareSizeTokens, useResolvedKnobs } from "@multiplatform.one/theme";
+import { type SizeTokens, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { Button } from "../Button";
 import { FORM_GRID_COLLAPSE_WIDTH } from "../FormGrid";
 import { LABEL_COLUMN_MAX_CH, LABEL_COLUMN_WIDTH } from "../fieldDefaults";
@@ -67,8 +67,6 @@ export interface DescriptionListProps {
    * not apply to a read face. Explicit prop ejects.
    */
   placement?: DescriptionListPlacement;
-  /** Nested scale (LC-73 / LC-76) — space one stop; type and the 32 action stay. */
-  compact?: boolean;
   /** Card frame (paints, so it earns the inset — LC-39). */
   framed?: boolean;
   /** Same 1px `$borderColor` rule at opacity 0.5 — never a lighter colour. */
@@ -80,6 +78,11 @@ export interface DescriptionListProps {
   maxWidth?: number | "fluid";
   /** Eject the shared term column track. Default {@link LABEL_COLUMN_WIDTH}. */
   labelColumnWidth?: string;
+  /**
+   * Row size token (Tamagui's own `size`). Below `$true` the rows take the
+   * tight rhythm (shorter rows, `gapSm` columns).
+   */
+  size?: SizeTokens;
   testID?: string;
 }
 
@@ -96,14 +99,14 @@ function labelColumnGridTrack(width: string): string {
   return width;
 }
 
-function listItemRhythm(density: string) {
-  const compact = density === "compact";
+function listItemRhythm(sizeToken: string) {
+  const tight = compareSizeTokens(sizeToken, "$true") < 0;
   return {
-    compact,
-    padV: compact ? "$2" : "$2.5",
-    columnGap: compact ? "$2" : "$3",
-    stackGap: compact ? 4 : "$2",
-    minHeight: compact ? 39 : 45,
+    tight,
+    padV: tight ? "$2" : "$2.5",
+    columnGap: tight ? "$2" : "$3",
+    stackGap: tight ? 4 : "$2",
+    minHeight: tight ? 39 : 45,
   } as const;
 }
 
@@ -315,8 +318,7 @@ function DescriptionListWeb({
   rhythm,
   quiet,
   labelColumnWidth,
-  density,
-  size,
+  sizeToken,
   placement,
   framed,
 }: {
@@ -326,8 +328,7 @@ function DescriptionListWeb({
   rhythm: ReturnType<typeof listItemRhythm>;
   quiet?: boolean;
   labelColumnWidth: string;
-  density: string;
-  size: string;
+  sizeToken: string;
   placement: DescriptionListPlacement;
   framed: boolean;
 }) {
@@ -360,13 +361,12 @@ function DescriptionListWeb({
       data-mpo-description-list=""
       data-placement={placement}
       data-stacked={stacked ? "true" : "false"}
-      data-compact={rhythm.compact ? "true" : "false"}
+      data-rhythm={rhythm.tight ? "tight" : "regular"}
       data-framed={framed ? "true" : "false"}
       data-quiet={quiet ? "true" : "false"}
       data-has-action={hasAction ? "true" : "false"}
       data-label-column-width={labelColumnWidth}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
       style={style}
     >
       {rows.map((row, index) => (
@@ -438,16 +438,16 @@ export function DescriptionList({
   items,
   children,
   placement: placementProp,
-  compact,
   framed = false,
   quiet = false,
   maxWidth = formReadableMaxWidth,
   labelColumnWidth = LABEL_COLUMN_WIDTH,
+  size,
   testID,
 }: DescriptionListProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs({ size });
   const placement = resolvePlacement(placementProp, knobProps.fieldLabelPlacement);
-  const rhythm = listItemRhythm(knobProps.density);
+  const rhythm = listItemRhythm(knobProps.sizeToken);
   const rows = useMemo(() => {
     const fromItems = (items ?? []).filter((row) => !row.hidden);
     if (fromItems.length) return fromItems;
@@ -468,8 +468,7 @@ export function DescriptionList({
           rhythm={rhythm}
           quiet={quiet}
           labelColumnWidth={labelColumnWidth}
-          density={knobProps.density}
-          size={knobProps.size}
+          sizeToken={knobProps.sizeToken}
           placement={placement}
           framed={framed}
         />
@@ -478,13 +477,12 @@ export function DescriptionList({
           data-mpo-description-list=""
           data-placement={placement}
           data-stacked={stacked ? "true" : "false"}
-          data-compact={rhythm.compact ? "true" : "false"}
+          data-rhythm={rhythm.tight ? "tight" : "regular"}
           data-framed={framed ? "true" : "false"}
           data-quiet={quiet ? "true" : "false"}
           data-has-action={hasAction ? "true" : "false"}
           data-label-column-width={labelColumnWidth}
-          data-density={knobProps.density}
-          data-size={knobProps.size}
+          data-size-token={knobProps.sizeToken}
           width="100%"
           minWidth={0}
         >

package/src/FieldDisplay/index.tsx

@@ -17,7 +17,12 @@
  */
 
 import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
-import { useReadableTextOn, useResolvedKnobs, type KnobProps } from "@multiplatform.one/theme";
+import {
+  sizeKeyBelow,
+  useReadableTextOn,
+  useResolvedKnobs,
+  type KnobProps,
+} from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
 import type { SizeTokens } from "tamagui";
@@ -140,10 +145,9 @@ const INTENT_CHIP: Record<string, ChipColor> = {
   info: "blue",
 };
 
-function chipSizeFor(size: string): ChipSize {
-  if (size === "small") return "$2";
-  if (size === "large") return "$4";
-  return "$3";
+/** Display chips draw one `$size` key under the ambient control token. */
+function chipSizeFor(sizeToken: string): ChipSize {
+  return sizeKeyBelow(sizeToken) as ChipSize;
 }
 
 function resolveChipColor(
@@ -211,8 +215,7 @@ function DisplayFrame({ field, children }: { field: FieldDisplayType; children:
     <XStack
       data-component="FieldDisplay"
       data-field={field}
-      data-space={knobProps.space}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       alignItems="center"
       minWidth={0}
       width="100%"
@@ -394,7 +397,7 @@ function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<
   if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
   const options: Array<{ label: string; value: any; color?: string; intent?: string }> =
     fieldProps?.options ?? [];
-  const size = chipSizeFor(knobProps.size);
+  const size = chipSizeFor(knobProps.sizeToken);
   const values = Array.isArray(value) ? value : [value];
   return (
     <XStack alignItems="center" flexWrap="wrap" minWidth={0} {...knobProps.gap}>
@@ -663,7 +666,7 @@ function RatingDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<
   if (Number.isNaN(num)) return <TextCell>{asText(value)}</TextCell>;
   const maxStars = typeof fieldProps?.maxStars === "number" ? fieldProps.maxStars : 5;
   const filled = num > 1 ? Math.round(Math.min(maxStars, num)) : Math.round(num * maxStars);
-  const filledColor = theme.accentBackground?.val ?? theme.color10?.val;
+  const filledColor = theme[formSelectedColors.mark.slice(1)]?.val ?? theme.color10?.val;
   const emptyColor = theme.color8?.val;
   return (
     <XStack

package/src/FieldGroup.spec.tsx

@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
@@ -36,28 +36,30 @@ describe("FieldGroup design-law (MPO-60)", () => {
     expect(["400", "normal"]).toContain(String(weight));
   });
 
-  it("field gap follows space, not sizeToken (density≠size)", () => {
+  it("field gap is the within-group role at any size token, never sizeToken", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ size: "large", space: "small" }}>
+      <Surface size="$5">
         <FieldGroup legend="Billing">
           <div>card</div>
         </FieldGroup>
-      </Preset>,
+      </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-field-gap")).toBe("$2");
-    expect(group?.getAttribute("data-size")).toBe("large");
+    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.getAttribute("data-size-token")).toBe("$5");
   });
 
-  it("compact nested scale steps density without reading sizeToken as gap", () => {
+  it("has no compact switch: a smaller Surface changes the token, not the gap", () => {
     const result = renderWithProviders(
-      <FieldGroup legend="Compact" compact>
-        <div>field</div>
-      </FieldGroup>,
+      <Surface size="$3">
+        <FieldGroup legend="Small">
+          <div>field</div>
+        </FieldGroup>
+      </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-density")).toBe("compact");
-    expect(group?.getAttribute("data-size")).toBe("medium");
-    expect(group?.getAttribute("data-field-gap")).toBe("$2");
+    expect(group?.getAttribute("data-size-token")).toBe("$3");
+    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.hasAttribute("data-density")).toBe(false);
   });
 });

package/src/FieldGroup.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Text, YStack, isWeb } from "tamagui";
 import { FormGrid, type FormGridColumns } from "./FormGrid";
 
@@ -13,44 +13,40 @@ export interface FieldGroupProps {
    */
   columns?: FormGridColumns;
   /**
-   * Gap between fields. Defaults to the space recipe (`knobProps.gap`).
-   * Density/space, never `sizeToken`.
+   * Gap between fields. Defaults to the within-group role (`knobProps.gap`),
+   * never `sizeToken`.
    */
   gap?: number | string;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
 }
 
 /**
  * Groups related fields with a legend (fieldset on web).
  *
  * Polaris FormLayout.Group / GOV.UK fieldset: related short fields only
- * (name, city/postcode). Field gap follows the space knob; nest inside
- * {@link FormSection} so section spacing stays larger than field spacing.
- * `compact` wraps descendants in a compact density Preset (LC-73) so nested
- * fields inherit the same gaps without a per-field prop.
+ * (name, city/postcode). Field gap is the within-group role; nest inside
+ * {@link FormSection} so section spacing (gapLg) stays larger than field
+ * spacing.
  */
-export function FieldGroup({ legend, children, columns = 1, gap, compact }: FieldGroupProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+export function FieldGroup({ legend, children, columns = 1, gap }: FieldGroupProps) {
+  const { knobProps } = useResolvedKnobs();
   const resolvedGap = gap ?? knobProps.gap.gap;
   const useFieldset = isWeb;
   const body =
     columns > 1 ? (
-      <FormGrid columns={columns} gap={resolvedGap} compact={compact}>
+      <FormGrid columns={columns} gap={resolvedGap}>
         {children}
       </FormGrid>
     ) : (
       children
     );
 
-  const group = (
+  return (
     <YStack
       {...(useFieldset ? { render: "fieldset" as const } : {})}
       data-mpo-field-group=""
       data-columns={columns}
       data-field-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       width="100%"
       minWidth={0}
@@ -91,6 +87,4 @@ export function FieldGroup({ legend, children, columns = 1, gap, compact }: Fiel
       {body}
     </YStack>
   );
-
-  return compact ? <Preset overrides={{ density: "compact" }}>{group}</Preset> : group;
 }

package/src/FieldLayout.stories.tsx

@@ -41,7 +41,6 @@ const meta: Meta<typeof FieldLayout> = {
     helperText: { control: "text" },
     error: { control: "text" },
     required: { control: "boolean" },
-    compactSpacing: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4", "$6"] },
     id: { control: "text" },
   },
@@ -140,12 +139,12 @@ export const AnatomyEdgeCases: Story = {
       <FieldLayout id="fl-required" label="Required field" required>
         <Control id="fl-required" />
       </FieldLayout>
-      <FieldLayout id="fl-nolabel" helperText="No label means compact $1 gap">
+      <FieldLayout
+        id="fl-nolabel"
+        helperText="No label: helper text sits a gapSm under the control"
+      >
         <Control id="fl-nolabel" />
       </FieldLayout>
-      <FieldLayout id="fl-compact" label="Compact spacing" compactSpacing helperText="Compact gap">
-        <Control id="fl-compact" />
-      </FieldLayout>
       <FieldLayout
         id="fl-node-label"
         label={

package/src/FloatingPanel/FloatingPanel.native.spec.tsx

@@ -1,3 +1,4 @@
+import { Preset, nativeAnimationConfig } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -57,6 +58,38 @@ function panel(open: boolean) {
 }
 
 describe("FloatingPanel native presentation lifecycle", () => {
+  it("keeps the open sheet position when animation speed changes", () => {
+    const example = (animation: "quick" | "slowest") => (
+      <Preset overrides={{ animation }}>{panel(true)}</Preset>
+    );
+    const result = renderWithProviders(example("quick"));
+    const translateY = vi.mocked(Animated.timing).mock.calls[0][0];
+    const writes = vi.spyOn(translateY, "setValue");
+    result.rerender(example("slowest"));
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    expect(writes).not.toHaveBeenCalled();
+  });
+
+  it("uses the selected slide spring when dismissing", () => {
+    renderWithProviders(panel(true));
+    act(() => release());
+    expect(Animated.spring).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining(nativeAnimationConfig.medium),
+    );
+  });
+
+  it("enters and dismisses without spring motion at none", () => {
+    renderWithProviders(<Preset overrides={{ animation: "none" }}>{panel(true)}</Preset>);
+    expect(Animated.timing).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ duration: 0 }),
+    );
+    act(() => release());
+    expect(Animated.spring).not.toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
   it("keeps full-field triggers stretched and allows content-sized composite adornments", () => {
     for (const triggerSizing of [undefined, "content"] as const) {
       const result = renderWithProviders(

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -509,3 +509,65 @@ describe("FloatingPanel sheet — closed frame leaves the accessibility tree (MP
     expect((result.getByRole("textbox", { name: "Draft" }) as HTMLInputElement).value).toBe("acme");
   });
 });
+
+describe("FloatingPanel cover (LC-105 COVER-TRIGGER)", () => {
+  function CoverHarness({ cover }: { cover?: boolean }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <FloatingPanel
+        open={open}
+        onOpenChange={setOpen}
+        cover={cover}
+        trigger={<Button>Scope</Button>}
+      >
+        <Text>panel body</Text>
+      </FloatingPanel>
+    );
+  }
+
+  const triggerRect = { top: 200, bottom: 232, left: 40, right: 160, width: 120, height: 32 };
+
+  function mockTriggerRect() {
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    return vi
+      .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+      .mockImplementation(function (this: HTMLElement) {
+        if (this.hasAttribute("data-fp-reference")) {
+          return { ...triggerRect, x: triggerRect.left, y: triggerRect.top, toJSON: () => ({}) };
+        }
+        return original.call(this);
+      });
+  }
+
+  it("puts the panel's top edge on the trigger's top edge and scales from its top corner", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness cover />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.top}px`));
+    expect(viewport.style.transformOrigin).toBe("top left");
+    spy.mockRestore();
+  });
+
+  it("covers the trigger by default (LC-105)", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.top}px`));
+    spy.mockRestore();
+  });
+
+  it("supports an explicit non-cover panel without a trigger echo", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness cover={false} />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.bottom}px`));
+    expect(viewport.querySelector("[data-fp-trigger-row]")).toBeNull();
+    spy.mockRestore();
+  });
+});

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -40,8 +40,8 @@ export const Basic: Story = {
           <YStack gap="$3">
             <H4>Panel Content</H4>
             <Paragraph>
-              Anchored to the trigger with a gap, never covering it. Escape or an outside click
-              dismisses and returns focus.
+              Opens over its trigger: the top edge sits on the trigger's top edge and the trigger is
+              the first row. Escape or an outside click dismisses and returns focus.
             </Paragraph>
             <Separator />
             <Button onPress={() => setOpen(false)}>Close</Button>
@@ -222,7 +222,7 @@ export const InsideScrollView: Story = {
   render: () => (
     <Preset theme="blue" overrides={{ borderRadius: "large" }}>
       <XStack padding="$4" gap="$6" alignItems="flex-start" flexWrap="wrap">
-        <YStack width={320} gap="$2">
+        <YStack width={320} maxWidth="100%" gap="$2">
           <Paragraph color={formCommonColors.muted}>Inside a ScrollView</Paragraph>
           <ScrollView
             testID="scroll-clip-scroller"
@@ -241,7 +241,7 @@ export const InsideScrollView: Story = {
             </YStack>
           </ScrollView>
         </YStack>
-        <YStack width={320} gap="$2">
+        <YStack width={320} maxWidth="100%" gap="$2">
           <Paragraph color={formCommonColors.muted}>Outside, for comparison</Paragraph>
           <YStack padding="$3" gap="$3">
             <ScrollClipPair where="outside" />

package/src/FloatingPanel/index.native.tsx

@@ -50,6 +50,7 @@
  * as web does at ≤640.
  */
 
+import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
 import {
   type ReactNode,
   useCallback,
@@ -75,7 +76,12 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { OVERLAY_BREAKPOINT, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  OVERLAY_BREAKPOINT,
+  Surface,
+  useResolvedKnobs,
+  motionDurationMs,
+} from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
@@ -116,8 +122,6 @@ const minSheetHeight = 180;
 const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
-// Slide-in, and the delay before a backdrop tap can dismiss.
-const enterDuration = 280;
 
 export function FloatingPanel({
   open,
@@ -126,7 +130,7 @@ export function FloatingPanel({
   trigger,
   triggerEnd,
   triggerSizing = "stretch",
-  children,
+  children: panelChildren,
   scrollable,
   disabled,
   contentPadding = "default",
@@ -136,7 +140,18 @@ export function FloatingPanel({
   sheetFill,
   openOn = "press",
 }: FloatingPanelProps) {
-  const { knobProps } = useResolvedKnobs();
+  // The panel floats over the page: it never inherits a painted ancestor.
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const children = <Surface painted={false}>{panelChildren}</Surface>;
+  const slideTransition = knobProps.motion.slide.transition;
+  const enterDuration = motionDurationMs(slideTransition);
+  const scrimDuration = motionDurationMs(knobProps.motion.scrim.transition);
+  const motionDurationRef = useRef({ enterDuration, scrimDuration });
+  motionDurationRef.current = { enterDuration, scrimDuration };
+  const springConfig =
+    typeof slideTransition === "string"
+      ? nativeAnimationConfig[slideTransition as MotionStop]
+      : undefined;
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   // MPO-64: the sheet must end ABOVE the keyboard, not run under it.
   const keyboardInset = useKeyboardInset();
@@ -286,12 +301,14 @@ export function FloatingPanel({
       const presentation = presentationRef.current;
       const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
+      if (!springConfig) {
+        restAt(height);
+        return;
+      }
       Animated.spring(translateY, {
+        ...springConfig,
         toValue,
         velocity,
-        damping: 32,
-        stiffness: 320,
-        mass: 0.9,
         overshootClamping: true,
         // JS driver: see the header. A native-driven node inside this Modal
         // does not advance, and the drag already writes the value from JS.
@@ -301,27 +318,29 @@ export function FloatingPanel({
         if (activeRef.current && presentation === presentationRef.current) restAt(height);
       });
     },
-    [restAt, translateY],
+    [restAt, translateY, springConfig],
   );
 
   const dismiss = useCallback(
     (velocity = 0) => {
       if (!activeRef.current) return;
+      if (!springConfig) {
+        close();
+        return;
+      }
       const presentation = presentationRef.current;
       restRef.current = travelRef.current;
       Animated.spring(translateY, {
+        ...springConfig,
         toValue: travelRef.current,
         velocity,
-        damping: 40,
-        stiffness: 400,
-        mass: 0.9,
         overshootClamping: true,
         useNativeDriver: false,
       }).start(({ finished }) => {
         if (finished && activeRef.current && presentation === presentationRef.current) close();
       });
     },
-    [close, translateY],
+    [close, translateY, springConfig],
   );
 
   const panResponder = useMemo(
@@ -389,15 +408,15 @@ export function FloatingPanel({
         armTimerRef.current = null;
         setBackdropArmed(true);
       }
-    }, enterDuration);
+    }, motionDurationRef.current.scrimDuration);
     // MPO-62: the modal itself fades (so the backdrop dims IN PLACE) and only
     // the sheet slides, on this transform.
     translateY.setValue(travelRef.current);
     restRef.current = 0;
     Animated.timing(translateY, {
       toValue: 0,
-      duration: enterDuration,
-      easing: Easing.out(Easing.cubic),
+      duration: motionDurationRef.current.enterDuration,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
       useNativeDriver: false,
     }).start(({ finished }) => {
       // An interrupted entrance (a drag caught it mid-slide) leaves the pan
@@ -492,7 +511,7 @@ export function FloatingPanel({
       <Modal
         visible={open}
         transparent
-        animationType="fade"
+        animationType={knobProps.motion.scrim.transition ? "fade" : "none"}
         statusBarTranslucent
         onRequestClose={close}
         onShow={() => {
@@ -604,7 +623,7 @@ export function FloatingPanel({
                   flexShrink={1}
                   {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
                 >
-                  <Surface size="md">
+                  <Surface size="$true">
                     {header}
                     {content}
                   </Surface>
@@ -640,7 +659,7 @@ function PointPanel({
   onEscape: () => void;
   children: ReactNode;
 }) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const placement = size
     ? placeAtPoint({