@multiplatform.one/forms 7.90.6 → 8.1.0

package/dist/jsx/shared/nativeOverlayWindow.native.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var nativeOverlayWindow_exports = {};
+__export(nativeOverlayWindow_exports, {
+  OverlayWindow: () => OverlayWindow
+});
+module.exports = __toCommonJS(nativeOverlayWindow_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_overlayStack = require("./overlayStack.native.js");
+function OverlayWindow(param) {
+  var {
+    zIndex,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.PortalProvider, {
+    shouldAddRootHost: false,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_overlayStack.OverlayStackProvider, {
+      zIndex,
+      children
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+      pointerEvents: "box-none",
+      style: import_react_native.StyleSheet.absoluteFill,
+      testID: "overlay-window-host",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.PortalHost, {
+        name: "root"
+      })
+    })]
+  });
+}
+//# sourceMappingURL=nativeOverlayWindow.native.js.map

package/dist/jsx/shared/nativeOverlayWindow.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc"],"sources":["../../../src/shared/nativeOverlayWindow.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAY,CAAAC,cAAA;AACrB,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAA4B;AAkBjC,IAAAC,iBAAA,GAAAJ,MAAA,CAAAK,mBAAA;AAFG,IAAAC,YAAS,GAAAN,MAAgB,CAAAO,SAAQ,CAAAC,cAAgC;AACtE,IAAAC,QACE,GAAAA,CAAAC,MAAA,EAAAC,GAAA,KAAC;EACC,SAAAC,IAAA,IAAAD,GAAA,EACAZ,SAAA,CAAAW,MAAA,EAAAE,IAAC;IAAAC,GAAA,EAAOF,GAAA,CAAAC,IAAA;IAAAE,UAAc;EAAW;AAEjC;AAGN,IAAAC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.90.6",
+  "version": "8.1.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -37,8 +37,8 @@
   "types": "types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    "./src/*": "./src/*",
     ".": {
+      "gnome": "./src/index.gnome.ts",
       "source": "./src/index.ts",
       "react-native": {
         "types": "./types/index.d.ts",
@@ -50,6 +50,19 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/cjs/index.cjs"
+    },
+    "./native-twins": {
+      "source": "./src/nativeTwins.ts",
+      "react-native": {
+        "types": "./types/nativeTwins.d.ts",
+        "import": "./dist/esm/nativeTwins.native.js",
+        "require": "./dist/cjs/nativeTwins.native.js",
+        "default": "./dist/esm/nativeTwins.native.js"
+      },
+      "types": "./types/nativeTwins.d.ts",
+      "import": "./dist/esm/nativeTwins.mjs",
+      "require": "./dist/cjs/nativeTwins.cjs",
+      "default": "./dist/cjs/nativeTwins.cjs"
     }
   },
   "publishConfig": {
@@ -57,10 +70,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.90.6",
-    "@multiplatform.one/router": "^7.90.6",
-    "@multiplatform.one/table-primitives": "^7.90.6",
-    "@multiplatform.one/theme": "^7.90.6",
+    "@multiplatform.one/platform": "^8.1.0",
+    "@multiplatform.one/router": "^8.1.0",
+    "@multiplatform.one/table-primitives": "^8.1.0",
+    "@multiplatform.one/theme": "^8.1.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +93,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.90.6",
-    "@multiplatform.one/storybook": "7.90.6",
-    "@multiplatform.one/test-utils": "7.90.6",
+    "@multiplatform.one/config": "8.1.0",
+    "@multiplatform.one/storybook": "8.1.0",
+    "@multiplatform.one/test-utils": "8.1.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/Button/glass.native.field.spec.ts

@@ -0,0 +1,14 @@
+/**
+ * LC-268 (FZ-10606): the field loader is the system glass or nothing, the
+ * same probe as the icon button's.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("expo-modules-core", () => ({ requireOptionalNativeModule: () => null }));
+
+describe("loadFieldGlassView (native)", () => {
+  it("a binary without the native module gives a field no glass", async () => {
+    const { loadFieldGlassView } = await import("./glass.native");
+    expect(loadFieldGlassView()).toBeNull();
+  });
+});

package/src/Button/glass.native.ts

@@ -70,3 +70,8 @@ export function loadGlassView(): GlassViewComponent | null {
 export function loadGlassContainer(): GlassContainerComponent | null {
   return systemGlass()?.container ?? null;
 }
+
+/** LC-268 (FZ-10606): a field in a bar sits on the system's glass, never a drawn face. */
+export function loadFieldGlassView(): GlassViewComponent | null {
+  return systemGlass()?.view ?? null;
+}

package/src/Button/glass.ts

@@ -33,3 +33,11 @@ export function loadGlassView(): GlassViewComponent | null {
 export function loadGlassContainer(): GlassContainerComponent | null {
   return null;
 }
+
+/**
+ * LC-268 (FZ-10606): the system Liquid Glass a field in a bar sits on. Only
+ * native iOS 26 has it; the web, iOS Safari included, keeps the plain field.
+ */
+export function loadFieldGlassView(): GlassViewComponent | null {
+  return null;
+}

package/src/Button/index.tsx

@@ -42,7 +42,6 @@ import {
   useElevatedSurface,
   useGlyphTintOnSurface,
   useResolvedKnobs,
-  useTopBarSurface,
   useTouchSurface,
   type ControlTier,
   type SizeRecipeFamilyName,
@@ -430,8 +429,7 @@ export interface ButtonProps extends Omit<
    * plated case: a translucent material circle for a control floating over
    * an image or video, where a bare glyph would be lost on the picture.
    * `plate="primary"` is the overlay's one confirm (LC-260): an accent-filled
-   * circle with an on-fill glyph, the iOS 26 sheet's checkmark. In the page's
-   * top bar it is a bar glyph like back and "…" (FZ-8989).
+   * circle with an on-fill glyph, the iOS 26 sheet's checkmark.
    */
   plate?: "media" | "primary";
   /**
@@ -600,10 +598,7 @@ export function Button({
     (s) => ({ isValid: s.isValid ?? true }),
   );
 
-  // LC-176 (FZ-8989): the filled ✓ is an overlay's one confirm; the page's
-  // top bar draws its confirm as a bar glyph beside back and "…".
-  const topBar = useTopBarSurface();
-  const primaryPlate = plate === "primary" && !topBar;
+  const primaryPlate = plate === "primary";
   const intent =
     ((accent || primaryPlate) && "accent") ||
     (error && "error") ||

package/src/Composer/Composer.spec.tsx

@@ -0,0 +1,66 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useBarSurface } from "@multiplatform.one/theme";
+import { Composer } from "./index";
+
+function BarProbe({ name }: { name: string }) {
+  return <span data-probe={name} data-bar={String(useBarSurface())} />;
+}
+
+describe("Composer", () => {
+  it("names its field by the placeholder", () => {
+    const result = renderWithProviders(<Composer placeholder="Type a message" />);
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.getAttribute("placeholder")).toBe("Type a message");
+    expect(result.container.querySelector("[aria-label='Type a message'], label")).not.toBeNull();
+  });
+
+  it("calls onChange with the field's text (LC-14)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Composer placeholder="Ask" onChange={onChange} />);
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "hello" } });
+    expect(onChange).toHaveBeenCalledWith("hello");
+  });
+
+  it("lays the tools out as one row inside the card, off any bar surface", () => {
+    const result = renderWithProviders(
+      <Composer
+        placeholder="Type a message"
+        tools={
+          <>
+            <BarProbe name="first" />
+            <BarProbe name="second" />
+          </>
+        }
+      />,
+    );
+    const row = result.container.querySelector("[data-composer-tools]") as HTMLElement;
+    expect(row.closest("[data-composer-card]")).not.toBeNull();
+    expect(row.querySelectorAll("[data-probe]")).toHaveLength(2);
+    expect(row.querySelector('[data-probe="first"]')!.getAttribute("data-bar")).toBe("false");
+  });
+
+  it("draws the tool row inside the card and the footer under it", () => {
+    const result = renderWithProviders(
+      <Composer
+        placeholder="Ask"
+        tools={<span data-probe="tool" />}
+        footer={<span data-probe="footer" />}
+      />,
+    );
+    const tool = result.container.querySelector("[data-probe='tool']")!;
+    const footer = result.container.querySelector("[data-probe='footer']")!;
+    expect(tool.closest("[data-composer-card]")).not.toBeNull();
+    expect(footer.closest("[data-composer-card]")).toBeNull();
+    expect(footer.closest("[data-composer-footer]")).not.toBeNull();
+  });
+
+  it("leaves out empty slots", () => {
+    const result = renderWithProviders(<Composer placeholder="Ask" />);
+    expect(result.container.querySelector("[data-composer-tools]")).toBeNull();
+    expect(result.container.querySelector("[data-composer-footer]")).toBeNull();
+  });
+});

package/src/Composer/Composer.stories.tsx

@@ -0,0 +1,56 @@
+import { action } from "@multiplatform.one/storybook";
+import { MicrophoneIcon, PaperclipIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { XStack, YStack } from "tamagui";
+import { IconButton } from "../Button";
+import { Composer } from "./index";
+
+const meta: Meta<typeof Composer> = {
+  title: "Forms/Composer",
+  component: Composer,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The one composer (`data-composer`): a field on the elevated ground, an optional tool row inside the same card and an optional footer.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Composer>;
+
+function Controlled(props: Partial<Parameters<typeof Composer>[0]>) {
+  const [value, setValue] = useState("");
+  return (
+    <YStack padding="$4" width="100%" maxWidth={480}>
+      <Composer
+        placeholder="Type a message"
+        value={value}
+        onChange={setValue}
+        onSubmit={action("submit")}
+        {...props}
+      />
+    </YStack>
+  );
+}
+
+export const Main: Story = { render: () => <Controlled /> };
+
+export const WithTools: Story = {
+  name: "Tools",
+  render: () => (
+    <Controlled
+      tools={
+        <>
+          <IconButton icon={PaperclipIcon} aria-label="Attach" onPress={action("attach")} />
+          <XStack flex={1} />
+          <IconButton icon={MicrophoneIcon} aria-label="Dictate" onPress={action("dictate")} />
+        </>
+      }
+    />
+  ),
+};

package/src/Composer/index.tsx

@@ -0,0 +1,82 @@
+import { Surface, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { XStack, YStack } from "tamagui";
+import { Input } from "../fields/Input";
+
+export interface ComposerProps {
+  /** The field's hint, and its accessible name. */
+  placeholder: string;
+  value?: string;
+  defaultValue?: string;
+  /** LC-14: the canonical change prop, called with the field's text. */
+  onChange?: (value: string) => void;
+  /** Return on a single-line field (web and hardware keyboards). */
+  onSubmit?: (value: string) => void;
+  /**
+   * Tools under the field, inside the same card (attach, model, dictate). The
+   * composer lays them out as one centred row; a flexed spacer between two of
+   * them pushes the rest to the trailing edge.
+   */
+  tools?: ReactNode;
+  /** A line under the composer (live facts about the conversation). */
+  footer?: ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+/**
+ * The one composer: a field on the elevated ground with an optional tool row
+ * under it in the same card and an optional footer. Every app's chat, prompt
+ * and quick-add box is this.
+ */
+export function Composer({
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  onSubmit,
+  tools,
+  footer,
+  disabled,
+  testID,
+}: ComposerProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  return (
+    <YStack data-composer="" testID={testID} {...knobProps.gapSm}>
+      <YStack
+        data-composer-card=""
+        {...knobProps.panelPadding}
+        {...knobProps.elevatedSurface}
+        {...knobProps.containerRadius}
+        {...knobProps.gapSm}
+      >
+        <Surface painted elevated>
+          <Input
+            placeholder={placeholder}
+            label={placeholder}
+            labelHidden
+            chromeless
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            onChangeText={(text: string) => onChange?.(text)}
+            inputProps={
+              onSubmit
+                ? ({
+                    onSubmitEditing: (event: { nativeEvent?: { text?: string } }) =>
+                      onSubmit(event?.nativeEvent?.text ?? value ?? ""),
+                  } as never)
+                : undefined
+            }
+          />
+          {tools ? (
+            <XStack data-composer-tools="" alignItems="center" {...knobProps.gapSm}>
+              {tools}
+            </XStack>
+          ) : null}
+        </Surface>
+      </YStack>
+      {footer ? <YStack data-composer-footer="">{footer}</YStack> : null}
+    </YStack>
+  );
+}

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -214,7 +214,7 @@ function ScrollClipPair({ where }: { where: string }) {
         placeholder="Pick a fruit"
         options={scrollClipOptions}
         value={value}
-        onValueChange={(next) => setValue(Array.isArray(next) ? next[0] : next)}
+        onChange={(next) => setValue(Array.isArray(next) ? next[0] : next)}
       />
       <FloatingPanel
         open={open}

package/src/FloatingPanel/index.native.tsx

@@ -142,7 +142,7 @@ import {
   type TriggerRect,
 } from "./pointAnchor";
 import { RegularPanel } from "./RegularPanel";
-import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
+import { panelViewportPadding } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { iconCoverRect } from "./coverRect";
 import {
@@ -211,7 +211,6 @@ export function FloatingPanel({
   panelWidth = "content",
   sheet,
   widthMode,
-  fitContent,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
@@ -741,7 +740,7 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              widthMode={resolvePanelWidthMode(widthMode, fitContent)}
+              widthMode={widthMode ?? "at-least-trigger"}
               echo={triggerEcho ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
               header={header}

package/src/FloatingPanel/index.tsx

@@ -70,7 +70,6 @@ export {
   panelTransition,
   panelViewportPadding,
   panelAnchorOffset,
-  resolvePanelWidthMode,
 } from "./useFloatingPanel";
 export type {
   PanelWidthMode,
@@ -182,12 +181,6 @@ export interface FloatingPanelProps {
    * `"content"` panel already takes (FZ-8220). A pinned width ignores it.
    */
   floor?: number;
-  /**
-   * @deprecated Pass `widthMode` instead — the boolean cannot express
-   * `"match-trigger"`. `true` → `"fit-content"`, `false`/undefined →
-   * `"at-least-trigger"`. An explicit `widthMode` always wins.
-   */
-  fitContent?: boolean;
   /**
    * Content padding for both sheet and web floating panel.
    * Use "none" for self-contained widgets (ColorPicker, DatePicker, TimePicker)
@@ -795,7 +788,6 @@ function FloatingPanelWeb({
   disabled,
   sizing = "grow",
   widthMode,
-  fitContent,
   panelWidth,
   floor,
   contentPadding = "default",
@@ -850,8 +842,7 @@ function FloatingPanelWeb({
     disabled,
     repositionRef: repositionFnRef,
     wheelGrowRef: isFill ? undefined : grownRef,
-    widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
-    fitContent,
+    widthMode: widthMode ?? (isContextMenu ? "fit-content" : undefined),
     freeOverlay: pointMenu,
     cover,
     panelWidth,

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -27,14 +27,12 @@ const fieldShapedPickers = [
   "ColorPicker/parts.tsx",
   "DatePicker/parts.tsx",
   "DatePicker/DatetimePicker.catalog.tsx",
+  "Geolocation/index.tsx",
 ];
 
 /** Field-triggered pickers pinned to the field's width exactly. */
 const matchTriggerPickers = ["Icon/index.tsx"];
 
-/** Panels opened from an icon/button trigger, where fit-content is correct. */
-const buttonShapedPickers = ["Geolocation/index.tsx"];
-
 function read(relative: string): string {
   return readFileSync(resolve(fieldsDir, relative), "utf8");
 }
@@ -57,11 +55,4 @@ describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
       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
-    // list is stale and someone must re-judge it rather than delete a line.
-    expect(source).toMatch(/fitContent/);
-  });
 });

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -30,20 +30,17 @@ import {
   panelAnchorOffset,
   panelCoverOffset,
   panelViewportPadding,
-  resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
 
 function Harness({
   open,
-  fitContent,
   widthMode,
   panelWidth,
   echo,
   floor,
 }: {
   open: boolean;
-  fitContent?: boolean;
   widthMode?: PanelWidthMode;
   panelWidth?: PanelWidth;
   echo?: boolean;
@@ -53,7 +50,6 @@ function Harness({
     open,
     onOpenChange: () => {},
     useAutoUpdate: false,
-    fitContent,
     widthMode,
     panelWidth,
     echo,
@@ -89,7 +85,6 @@ function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number;
  *  floating element once floating-ui has positioned it. */
 async function openAgainstTrigger(
   props: {
-    fitContent?: boolean;
     widthMode?: PanelWidthMode;
     panelWidth?: PanelWidth;
     echo?: boolean;
@@ -276,15 +271,6 @@ describe("FloatingPanel panelWidth setting (LC-112, FZ-8438 r3)", () => {
 });
 
 describe("FloatingPanel width modes (MPO-38)", () => {
-  it("resolves the deprecated boolean onto the three modes", () => {
-    expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
-    expect(resolvePanelWidthMode(undefined, false)).toBe("at-least-trigger");
-    expect(resolvePanelWidthMode(undefined, true)).toBe("fit-content");
-    // An explicit mode always wins over the boolean, in both directions.
-    expect(resolvePanelWidthMode("match-trigger", true)).toBe("match-trigger");
-    expect(resolvePanelWidthMode("fit-content", false)).toBe("fit-content");
-  });
-
   it("at-least-trigger writes min-width only, so content may still grow it", async () => {
     const result = await openAgainstTrigger({ widthMode: "at-least-trigger" }, trigger);
     await waitFor(() => {
@@ -302,13 +288,6 @@ describe("FloatingPanel width modes (MPO-38)", () => {
     });
   });
 
-  it("at-least-trigger is what an explicit fitContent={false} means", async () => {
-    const result = await openAgainstTrigger({ fitContent: false }, trigger);
-    await waitFor(() => {
-      expect(result.getByTestId("anchor-floating").style.minWidth).toBe("240px");
-    });
-  });
-
   it("match-trigger pins the width exactly — narrow content cannot shrink it", async () => {
     const result = await openAgainstTrigger({ widthMode: "match-trigger" }, trigger);
     await waitFor(() => {
@@ -336,11 +315,6 @@ describe("FloatingPanel width modes (MPO-38)", () => {
     expect(el.style.width).toBe("");
     expect(el.style.maxWidth).toBe("");
   });
-
-  it("fitContent still reaches fit-content, so existing consumers do not move", async () => {
-    const result = await openAgainstTrigger({ fitContent: true }, trigger);
-    expect(result.getByTestId("anchor-floating").style.minWidth).toBe("");
-  });
 });
 
 /**

package/src/FloatingPanel/useFloatingPanel.ts

@@ -133,13 +133,6 @@ export interface UseFloatingPanelOptions {
    * Default `"at-least-trigger"`.
    */
   widthMode?: PanelWidthMode;
-  /**
-   * @deprecated Pass `widthMode` instead. `fitContent` is the two-valued
-   * spelling of the same idea and cannot express `"match-trigger"`.
-   * `true` → `"fit-content"`, `false`/undefined → `"at-least-trigger"`.
-   * An explicit `widthMode` always wins.
-   */
-  fitContent?: boolean;
   /**
    * The panel opens at a point, not from the trigger's box (ContextMenu). It
    * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
@@ -163,16 +156,6 @@ export interface UseFloatingPanelOptions {
   floor?: number;
 }
 
-/** One place that resolves the deprecated boolean onto the three modes, so
- *  the hook and the component cannot disagree about what a consumer meant. */
-export function resolvePanelWidthMode(
-  widthMode: PanelWidthMode | undefined,
-  fitContent: boolean | undefined,
-): PanelWidthMode {
-  if (widthMode) return widthMode;
-  return fitContent ? "fit-content" : "at-least-trigger";
-}
-
 // ── Return type ───────────────────────────────────────────────
 
 export interface UseFloatingPanelReturn {
@@ -287,14 +270,13 @@ export function useFloatingPanel({
   useAutoUpdate: useAutoUpdateProp = true,
   wheelGrowRef,
   widthMode: widthModeProp,
-  fitContent,
   freeOverlay = false,
   cover = true,
   panelWidth,
   echo = cover && !freeOverlay,
   floor = 0,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
-  const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
+  const widthMode = widthModeProp ?? "at-least-trigger";
   // An overlay floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
   const hasBorder = knobProps.borderRadius.borderWidth > 0;

package/src/FloatingPanel/viewportHydration.spec.tsx

@@ -23,14 +23,14 @@ function Fixture({ kind }: { kind: string }) {
           aria-label="Choice"
           options={options}
           value={value}
-          onValueChange={(next) => setValue(String(next))}
+          onChange={(next) => setValue(String(next))}
         />
       ) : kind === "Combobox" ? (
         <Combobox
           aria-label="Choice"
           options={options}
           value={value}
-          onValueChange={(next) => setValue(String(next))}
+          onChange={(next) => setValue(String(next))}
         />
       ) : (
         <FloatingPanel