panelui-native 0.90.0 → 0.92.0

package/lib/module/components/fab/index.js

@@ -46,6 +46,45 @@
  * instead of a menu appearing. Every action carries its label beside it, because
  * a column of unlabelled circles is a quiz.
  *
+ * ## The menu
+ *
+ * ```tsx
+ * <Fab.Group layout="menu" glass icon={<PlusIcon size={24} />} accessibilityLabel="Add">
+ *   <Fab.Action icon={<ImageIcon size={18} />} label="Photo" onPress={addPhoto} />
+ *   <Fab.Action icon={<FileIcon size={18} />} label="File" onPress={addFile} />
+ * </Fab.Group>
+ * ```
+ *
+ * `layout="menu"` unfolds one panel of rows out of the button instead of a
+ * column of buttons — the shape the platform's own menus take. Each row is a
+ * label with its glyph, on the side the appearance puts it or `iconPlacement`
+ * says, and the panel springs out of the corner the
+ * trigger sits in, so it reads as the button opening rather than a sheet
+ * arriving. Drawn in glass, the panel is one piece of the material; the rows
+ * are content on it.
+ *
+ * ## Glass
+ *
+ * ```tsx
+ * <Fab glass icon={<PlusIcon size={24} />} accessibilityLabel="New note" />
+ * ```
+ *
+ * `glass` draws the button in the material iOS 26 uses for its own floating
+ * controls, in place of the variant's fill. A control floating over content is
+ * exactly what that material is for: it refracts what scrolls under it rather
+ * than covering it, and lifts its own edge, so the shadow goes too.
+ *
+ * Every variant takes the plain material, because a tint is a dimmer: measured
+ * over content, a colour laid on the glass turns it back into a fill and a
+ * monochrome one only greys it. The glyph reads in the ordinary foreground
+ * colour, and in red on `destructive` — the colour that carries meaning goes
+ * on the glyph, where it stays legible. Pressed, it answers the way the platform's
+ * own glass controls do: the material swells and brightens under the finger,
+ * in place of this component's press scale. The material exists on iOS 26 and
+ * above with the optional `expo-glass-effect` installed. Everywhere else — older iOS,
+ * Android, web, Reduce Transparency on — the flag is inert and the button keeps
+ * its ordinary fill, so nothing has to be written twice.
+ *
  * Opening also drops a scrim over the screen. Not for looks: an open dial is
  * modal — the next tap either picks something or closes it — and a scrim is what
  * says so, as well as what catches the tap that closes it.
@@ -64,12 +103,14 @@
  */
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useMemo, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';
+import Animated, { Easing, Extrapolation, interpolate, runOnJS, useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from "../../icons/index.js";
 import { useBackHandler } from "../../hooks/use-back-handler.js";
+import { NativeHost, getComposeMenu, getSwiftUIMenu, getSwiftUIModifiers } from "../../native/index.js";
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Glass, GlassContainer, useGlassMaterial } from "../../primitives/glass.js";
 import { Scrim } from "../../primitives/scrim.js";
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
@@ -80,18 +121,127 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /** How far from the edges a floating button sits, in points. */
 const DEFAULT_OFFSET = 16;
 
-/** How long the dial takes to open, and how much each action lags the one above it. */
-const OPEN_DURATION = 220;
-const STAGGER = 45;
+/**
+ * The spring the dial opens on. Underdamped enough to overshoot a little and
+ * settle, which is what makes buttons read as arriving rather than being
+ * placed; the stagger between actions comes from where each one reads the
+ * spring, not from a delay.
+ */
+const OPEN_SPRING = {
+  damping: 15,
+  stiffness: 170,
+  mass: 0.9
+};
+
+/** How far behind the action above starts, as a share of the dial's opening. */
+const STAGGER = 0.08;
 
 /** How far an action starts below its resting place, in points. */
 const ACTION_TRAVEL = 12;
 
+/**
+ * How a glass dial's action starts: nothing, sitting on the trigger, and
+ * merging with it while the two are within this distance. Scale, not
+ * opacity — the material survives a zero scale and not a zero opacity. Shorter than the
+ * dial's gaps, so pieces at rest stay separate and only overlapping ones
+ * flow together.
+ */
+const RISE_FROM_SCALE = 0;
+const DIAL_BLEND = 6;
+
+/** How far into an action's arrival its label grows out of it, and from how far aside. */
+const LABEL_AFTER = 0.45;
+const LABEL_TRAVEL = 16;
+
 /** A quarter turn on the trigger while the dial is open — a plus becomes a cross. */
 const OPEN_ROTATION = 45;
+
+/** How the menu is drawn: the platform's own shape, or rows with a glyph well. */
+
+/** Which side of a menu row the glyph sits on. */
+
+/**
+ * The metrics of each appearance, in points. Fixed rather than measured so
+ * the panel's height — and with it the point it grows from — is known on the
+ * first frame.
+ */
+
+const MENU_METRICS = {
+  /* As wide and as round as the platform's own menus, with the glyph after
+     the label and a hairline between rows, the way they draw it. */
+  platform: {
+    width: 250,
+    radius: 26,
+    row: 44,
+    hairline: 1,
+    padding: 6,
+    icon: 'trailing'
+  },
+  /* Tighter, with the glyph leading in a tinted well and each row its own
+     pill — the shape of a menu an app designed rather than the system. */
+  wells: {
+    width: 224,
+    radius: 22,
+    row: 48,
+    hairline: 0,
+    padding: 6,
+    icon: 'leading'
+  }
+};
+
+/**
+ * How small the menu is once it has left the trigger, and how far into the
+ * dial's spring it gets there.
+ *
+ * A closed panel has to be *nothing*, not something small. Resting at a
+ * fraction of its size leaves a box above the trigger for as long as the
+ * spring takes to satisfy its completion threshold — which is most of a
+ * second, and is not a frame anyone would call an animation. So zero is where
+ * it starts and ends, and the pop to `MENU_FROM_SCALE` happens over the first
+ * sliver of the spring: the panel still reads as coming out of the button at a
+ * size rather than growing from a point.
+ */
+const MENU_FROM_SCALE = 0.3;
+const MENU_POP_AT = 0.06;
+
+/** The gap between the panel and the trigger — the group's `gap-3`. */
+const GROUP_GAP = 12;
+
+/**
+ * Where the menu grows from: the centre of the trigger, in the panel's own
+ * coordinates.
+ *
+ * Not the panel's corner. The panel sits a gap above the trigger, and a panel
+ * scaling from its own corner grows out of thin air just above the button.
+ * Scaling about the trigger's centre — below the panel, and in from its
+ * edge by half a button — is what makes it come out of the button.
+ */
+function menuOrigin(placement, metrics, width, count, size) {
+  const height = metrics.padding * 2 + metrics.row * count + metrics.hairline * Math.max(0, count - 1);
+  const half = SIZE_PX[size] / 2;
+  const y = height + GROUP_GAP + half;
+  if (placement === 'bottom-left') return [half, y, 0];
+  if (placement === 'bottom-center') return [width / 2, y, 0];
+  return [width - half, y, 0];
+}
+
+/** How the group lines its parts up under each placement. */
+const GROUP_ALIGN = {
+  'bottom-right': 'items-end',
+  'bottom-center': 'items-center',
+  'bottom-left': 'items-start'
+};
+
+/** The diameter of each size, in points — the radius the material rounds itself to. */
+const SIZE_PX = {
+  sm: 44,
+  md: 56,
+  lg: 64
+};
 const fabVariants = tv({
   slots: {
-    root: 'flex-row items-center justify-center gap-2 rounded-full bg-primary shadow-lg',
+    root: 'items-center justify-center rounded-full bg-primary shadow-lg',
+    content: 'flex-row items-center justify-center gap-2',
     label: 'font-medium text-primary-foreground'
   },
   variants: {
@@ -138,9 +288,27 @@ const fabVariants = tv({
       true: {
         root: 'opacity-[0.64] shadow-none'
       }
+    },
+    /* The material replaces the fill, the border and the shadow: it draws its
+       own edge, and a shadow under a translucent surface is a smudge behind it.
+       Only set when the material is really being drawn — see `useGlassMaterial`. */
+    glass: {
+      true: {
+        root: 'border-0 bg-transparent shadow-none'
+      }
     }
   },
-  compoundVariants: [{
+  compoundVariants: [
+  /* A faded material stops being one, so a disabled glass button dims what
+     sits on the material rather than the material itself. */
+  {
+    glass: true,
+    disabled: true,
+    class: {
+      root: 'opacity-100',
+      content: 'opacity-[0.64]'
+    }
+  }, {
     extended: true,
     size: 'sm',
     class: {
@@ -180,7 +348,8 @@ const fabVariants = tv({
   defaultVariants: {
     size: 'md',
     variant: 'primary',
-    extended: false
+    extended: false,
+    glass: false
   }
 });
 
@@ -196,6 +365,22 @@ const CONTENT_COLOR_VAR = {
   surface: '--color-foreground'
 };
 
+/**
+ * The token each variant's glyph reads in over the glass.
+ *
+ * The material is never tinted: a tint is a dimmer, and at any strength it
+ * turns the glass back into a fill or greys it. So the glass is neither light
+ * nor dark and the glyph reads in the ordinary foreground — except on
+ * `destructive`, where the colour that carries meaning goes on the glyph
+ * instead, the way a menu's destructive row is red text on the same panel.
+ */
+const GLASS_CONTENT_COLOR_VAR = {
+  primary: '--color-foreground',
+  destructive: '--color-destructive',
+  secondary: '--color-foreground',
+  surface: '--color-foreground'
+};
+
 /** Where a floating button parks itself, given its offset. */
 function anchor(placement, offset) {
   const base = {
@@ -231,46 +416,86 @@ const FabRoot = /*#__PURE__*/forwardRef(({
   variant,
   disabled = false,
   haptics = false,
+  glass = false,
   onPress,
   style,
+  accessibilityState,
   ...props
 }, ref) => {
   const isDisabled = Boolean(disabled);
+  // Asked for *and* drawable. Where the material cannot be drawn the flag
+  // changes nothing, so the fill, border and shadow all stay.
+  const material = useGlassMaterial() && glass;
+  const resolvedVariant = variant ?? 'primary';
   const {
     root,
+    content,
     label
   } = fabVariants({
     size,
     variant,
     extended: extended && !!children,
-    disabled: isDisabled
+    disabled: isDisabled,
+    glass: material
   });
-  const themed = useCSSVariable(CONTENT_COLOR_VAR[variant ?? 'primary']);
+  const themed = useCSSVariable((material ? GLASS_CONTENT_COLOR_VAR : CONTENT_COLOR_VAR)[resolvedVariant]);
   const contentColor = typeof themed === 'string' ? themed : undefined;
   const handlePress = useCallback(event => {
     if (haptics) selectionTick();
     onPress?.(event);
   }, [haptics, onPress]);
+  const pressable = /*#__PURE__*/_jsx(AnimatedPressable, {
+    ref: ref,
+    ...props,
+    accessibilityRole: "button"
+    // Whatever the caller says about the button — a group's trigger says
+    // whether it is expanded — with the disabled state kept authoritative.
+    ,
+    accessibilityState: {
+      ...accessibilityState,
+      disabled: isDisabled
+    },
+    disabled: isDisabled,
+    onPress: handlePress
+    // The platform animates the glass under a touch; a second scale on
+    // top of it would fight it.
+    ,
+    pressScale: material ? 1 : undefined,
+    className: material ? 'h-full w-full items-center justify-center' : root({
+      className
+    }),
+    style: material ? undefined : [placement ? anchor(placement, offset) : null, style],
+    children: /*#__PURE__*/_jsxs(View, {
+      className: content(),
+      children: [icon, extended && children ? /*#__PURE__*/_jsx(Text, {
+        className: label({
+          className: material ? resolvedVariant === 'destructive' ? 'text-destructive' : 'text-foreground' : undefined
+        }),
+        children: children
+      }) : null]
+    })
+  });
+
+  /*
+   * Drawn in glass, the material is the box and the pressable fills it. The
+   * platform only tracks a touch that lands inside the glass view, and
+   * tracking it is what makes the button swell and glow under the finger,
+   * so the pressable has to be inside rather than under it. It rounds
+   * itself to the button's own radius: the material clipped by a rounded
+   * parent loses its lit edge.
+   */
   return /*#__PURE__*/_jsx(IconColorProvider, {
     color: contentColor,
-    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
-      ref: ref,
-      ...props,
-      accessibilityRole: "button",
-      accessibilityState: {
-        disabled: isDisabled
-      },
-      disabled: isDisabled,
-      onPress: handlePress,
+    children: material ? /*#__PURE__*/_jsx(Glass, {
+      interactive: true,
+      variant: "regular",
+      radius: SIZE_PX[size ?? 'md'] / 2,
       className: root({
         className
       }),
       style: [placement ? anchor(placement, offset) : null, style],
-      children: [icon, extended && children ? /*#__PURE__*/_jsx(Text, {
-        className: label(),
-        children: children
-      }) : null]
-    })
+      children: pressable
+    }) : pressable
   });
 });
 FabRoot.displayName = 'Fab';
@@ -281,6 +506,20 @@ FabRoot.displayName = 'Fab';
 
 /** Whatever was written as a dial child, and the one prop a slot reaches for. */
 
+/**
+ * What opens out of the trigger: a column of buttons, one panel of rows, or
+ * the platform's own menu.
+ */
+
+/**
+ * How big a hosted glyph is drawn in a platform menu row, in points.
+ *
+ * Stated rather than measured because it has to be: anything of ours inside
+ * the native tree needs a definite size on both axes above it, and an icon
+ * whose box the platform is left to work out is the crash this library has
+ * already paid for twice.
+ */
+const NATIVE_ROW_ICON = 24;
 const FabGroupContext = /*#__PURE__*/createContext(null);
 function useFabGroup(part) {
   const ctx = useContext(FabGroupContext);
@@ -305,10 +544,18 @@ const FabGroup = /*#__PURE__*/forwardRef(({
   onOpenChange,
   placement = 'bottom-right',
   offset = DEFAULT_OFFSET,
+  layout = 'dial',
+  appearance = 'platform',
+  iconPlacement,
+  menuWidth,
+  menuRadius,
+  menuClassName,
+  rowClassName,
   size = 'md',
   variant,
   disabled = false,
   haptics = false,
+  glass = false,
   blur = false,
   rotateOnOpen = true,
   accessibilityLabel,
@@ -317,6 +564,10 @@ const FabGroup = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const open = openProp ?? internalOpen;
+  // Asked for *and* drawable, decided once here so the trigger, the actions
+  // and their motion all agree; where the material cannot be drawn the flag
+  // is inert everywhere rather than in the trigger alone.
+  const material = useGlassMaterial() && glass;
   const setOpen = useCallback(next => {
     if (openProp === undefined) setInternalOpen(next);
     onOpenChange?.(next);
@@ -333,6 +584,18 @@ const FabGroup = /*#__PURE__*/forwardRef(({
    */
   const actionCount = actions.length;
 
+  /*
+   * The platform's menu, when one was asked for and the toolkit is there.
+   *
+   * Resolved before anything below reads `layout`, because a native menu
+   * that cannot be drawn is not an error — it falls back to the panel, and
+   * every decision after this one has to be made against the layout that is
+   * really being drawn rather than the one that was requested.
+   */
+  const swiftMenu = layout === 'native' ? getSwiftUIMenu() : null;
+  const composeMenu = layout === 'native' && !swiftMenu ? getComposeMenu() : null;
+  const resolvedLayout = layout === 'native' && !swiftMenu && !composeMenu ? 'menu' : layout;
+
   /*
    * One shared value for the whole dial rather than one per action.
    *
@@ -341,9 +604,26 @@ const FabGroup = /*#__PURE__*/forwardRef(({
    * driving every row, and there is no chain of JavaScript timeouts to get
    * out of step with itself when the dial is closed halfway through opening.
    */
-  const progress = useDerivedValue(() => withTiming(open ? 1 : 0, {
-    duration: OPEN_DURATION + STAGGER * actionCount
-  }), [open, actionCount]);
+  /*
+   * The actions stay mounted while the spring runs back down, so closing is
+   * the opening in reverse rather than a cut. `closing` is set the moment
+   * `open` drops and cleared by the spring when it comes to rest; the
+   * mounted-only-while-open rule below still holds once it has.
+   */
+  const [closing, setClosing] = useState(false);
+  // Noted during render rather than in an effect: an effect lands a frame
+  // after the render that dropped `open`, and that frame would have no
+  // actions in it — a blink, and a remount of the material mid-flight.
+  const [wasOpen, setWasOpen] = useState(open);
+  if (wasOpen !== open) {
+    setWasOpen(open);
+    if (!open) setClosing(true);
+  }
+  const settle = useCallback(() => setClosing(false), []);
+  const progress = useDerivedValue(() => withSpring(open ? 1 : 0, OPEN_SPRING, finished => {
+    if (finished && !open) runOnJS(settle)();
+  }), [open, settle]);
+  const present = open || closing;
   const rotation = useAnimatedStyle(() => ({
     transform: [{
       rotate: `${interpolate(progress.value, [0, 1], [0, OPEN_ROTATION])}deg`
@@ -354,8 +634,13 @@ const FabGroup = /*#__PURE__*/forwardRef(({
     progress,
     count: actionCount,
     size,
+    glass: material,
+    layout: resolvedLayout,
+    appearance,
+    iconPlacement: iconPlacement ?? MENU_METRICS[appearance].icon,
+    rowClassName,
     close
-  }), [progress, actionCount, size, close]);
+  }), [progress, actionCount, size, material, resolvedLayout, appearance, iconPlacement, rowClassName, close]);
   const toggle = useCallback(() => {
     if (haptics) selectionTick();
     setOpen(!open);
@@ -364,6 +649,231 @@ const FabGroup = /*#__PURE__*/forwardRef(({
   // An open dial owns the back button: back should shut it, not leave it
   // standing over the screen underneath.
   useBackHandler(open, close);
+  const themedDestructive = useCSSVariable('--color-destructive');
+  const Group = material && resolvedLayout === 'dial' ? GlassContainer : View;
+
+  /*
+   * The trigger as the platform hosts it.
+   *
+   * Sized here rather than left to the platform, on both axes where both are
+   * known. An axis handed to `matchContents` is written back to for good, and
+   * a hosted view with nothing definite above it is the crash this library
+   * has already paid for twice — so a circle states its diameter, and only an
+   * extended button's width, which is its label's, is the platform's to
+   * measure.
+   */
+  const triggerSize = SIZE_PX[size];
+  const triggerExtended = !!label;
+  const triggerFrame = triggerExtended ? {
+    height: triggerSize
+  } : {
+    width: triggerSize,
+    height: triggerSize
+  };
+  const nativeTrigger = /*#__PURE__*/_jsx(View
+  // On iOS the menu owns the tap: a pressable in front of it would eat
+  // the touch and the menu would never open. Android's is controlled, so
+  // there the button is what opens it.
+  , {
+    pointerEvents: swiftMenu ? 'none' : 'auto',
+    style: triggerFrame,
+    children: /*#__PURE__*/_jsx(FabRoot, {
+      icon: icon,
+      extended: triggerExtended,
+      size: size,
+      variant: variant,
+      disabled: disabled,
+      glass: glass,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled,
+        expanded: open
+      },
+      onPress: composeMenu ? toggle : undefined,
+      children: label
+    })
+  });
+
+  /*
+   * The screen behind an open platform menu, frosted the way it is behind
+   * the dial and the panel — the page is what recedes, and a native menu
+   * over an untouched page reads as a control belonging to something else.
+   *
+   * It closes on a tap, which is the safety net rather than the mechanism.
+   * The platform dismisses its own menu from its own window, so this never
+   * sees that tap and never competes for it; what it catches is the next
+   * one. Menu content is not promised an `onDisappear`, and a frosted page
+   * with no way back would be worse than no scrim at all.
+   */
+  const nativeScrim = open ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: "Close",
+    onPress: close,
+    style: StyleSheet.absoluteFill,
+    children: /*#__PURE__*/_jsx(Scrim, {
+      blur: blur,
+      dimClassName: "bg-black/32"
+    })
+  }) : null;
+
+  /*
+   * SwiftUI's menu. The trigger goes through the `label` slot, which takes a
+   * view as readily as a string — so the button stays ours and only the menu
+   * is the platform's.
+   *
+   * The open state is not passed and cannot be: SwiftUI owns it. `open` and
+   * `onOpenChange` are inert on this path, which is stated on the prop.
+   */
+  if (swiftMenu) {
+    const {
+      Host,
+      RNHostView,
+      Menu,
+      Button
+    } = swiftMenu;
+    const swiftModifiers = getSwiftUIModifiers();
+
+    /*
+     * What each row carries beyond its label.
+     *
+     * The first one also carries the menu's open state. SwiftUI's menu owns
+     * that state and reports nothing about it, but it builds its content
+     * only when it presents it — so the first row appearing is the menu
+     * appearing, and that is what puts the screen behind it under the
+     * scrim.
+     */
+    const itemModifiers = (item, index) => {
+      const list = [];
+      if (item.disabled && swiftModifiers?.disabled) {
+        list.push(swiftModifiers.disabled(true));
+      }
+      if (index === 0 && swiftModifiers?.onAppear) {
+        list.push(swiftModifiers.onAppear(() => setOpen(true)));
+      }
+      /*
+       * Every row carries the teardown, not just the first.
+       *
+       * The one that reports the menu opening is enough to raise the scrim,
+       * but taking it down cannot rest on a single view: whichever row
+       * SwiftUI tears down first has to be able to say so, or a menu
+       * dismissed from anywhere else leaves the page frosted behind it.
+       */
+      if (swiftModifiers?.onDisappear) {
+        list.push(swiftModifiers.onDisappear(() => setOpen(false)));
+      }
+      return list.length > 0 ? list : undefined;
+    };
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [nativeScrim, /*#__PURE__*/_jsx(NativeHost, {
+        host: Host,
+        matchContents: triggerExtended ? {
+          horizontal: true
+        } : false,
+        ignoreSafeArea: "keyboard",
+        style: [anchor(placement, offset), triggerFrame, style],
+        ...props,
+        children: /*#__PURE__*/_jsx(Menu, {
+          label: /*#__PURE__*/_jsx(RNHostView, {
+            matchContents: true,
+            children: nativeTrigger
+          }),
+          children: actions.map((action, index) => {
+            const item = action.props;
+            return /*#__PURE__*/_jsx(Button, {
+              label: item.label ?? '',
+              systemImage: item.systemImage,
+              role: item.destructive ? 'destructive' : 'default'
+              // Picking a row closes the menu, so the scrim has to come
+              // down with it rather than waiting to be told the content
+              // went away.
+              ,
+              onPress: item.disabled ? undefined : () => {
+                close();
+                item.onPress?.();
+              },
+              modifiers: itemModifiers(item, index)
+            }, index);
+          })
+        })
+      })]
+    });
+  }
+
+  /*
+   * Compose's dropdown menu — the same instruction, a different control.
+   *
+   * This one takes the open state rather than owning it, so the group's own
+   * state drives it and `open`/`onOpenChange` work here. Its rows take a text
+   * slot rather than a label prop, and a glyph of ours goes in the leading
+   * slot at a stated size.
+   */
+  if (composeMenu) {
+    const {
+      Host,
+      RNHostView,
+      Text: ComposeText,
+      DropdownMenu,
+      DropdownMenuItem
+    } = composeMenu;
+    const destructiveColor = typeof themedDestructive === 'string' ? themedDestructive : undefined;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [nativeScrim, /*#__PURE__*/_jsx(NativeHost, {
+        host: Host,
+        matchContents: triggerExtended ? {
+          horizontal: true
+        } : false,
+        ignoreSafeArea: "keyboard",
+        style: [anchor(placement, offset), triggerFrame, style],
+        ...props,
+        children: /*#__PURE__*/_jsxs(DropdownMenu, {
+          expanded: open,
+          onDismissRequest: close,
+          children: [/*#__PURE__*/_jsx(DropdownMenu.Trigger, {
+            children: /*#__PURE__*/_jsx(RNHostView, {
+              matchContents: true,
+              children: nativeTrigger
+            })
+          }), /*#__PURE__*/_jsx(DropdownMenu.Items, {
+            children: actions.map((action, index) => {
+              const item = action.props;
+              return /*#__PURE__*/_jsxs(DropdownMenuItem, {
+                enabled: !item.disabled,
+                elementColors: item.destructive && destructiveColor ? {
+                  textColor: destructiveColor
+                } : undefined,
+                onClick: () => {
+                  close();
+                  item.onPress?.();
+                },
+                children: [item.icon ? /*#__PURE__*/_jsx(DropdownMenuItem.LeadingIcon, {
+                  children: /*#__PURE__*/_jsx(RNHostView, {
+                    matchContents: true,
+                    style: {
+                      width: NATIVE_ROW_ICON,
+                      height: NATIVE_ROW_ICON
+                    },
+                    children: /*#__PURE__*/_jsx(View, {
+                      style: {
+                        width: NATIVE_ROW_ICON,
+                        height: NATIVE_ROW_ICON,
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                      },
+                      children: item.icon
+                    })
+                  })
+                }) : null, /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
+                  children: /*#__PURE__*/_jsx(ComposeText, {
+                    children: item.label ?? ''
+                  })
+                })]
+              }, index);
+            })
+          })]
+        })
+      })]
+    });
+  }
 
   /*
    * Two absolutely positioned siblings, scrim first, both in the group's own
@@ -400,12 +910,23 @@ const FabGroup = /*#__PURE__*/forwardRef(({
       })
     }) : null, /*#__PURE__*/_jsx(FabGroupContext.Provider, {
       value: context,
-      children: /*#__PURE__*/_jsxs(View, {
+      children: /*#__PURE__*/_jsxs(Group, {
         ref: ref,
-        className: cn('items-end gap-3', className),
+        spacing: material && resolvedLayout === 'dial' ? DIAL_BLEND : undefined,
+        className: cn(resolvedLayout === 'menu' ? GROUP_ALIGN[placement] : 'items-end', 'gap-3', className),
         style: [anchor(placement, offset), style],
         ...props,
-        children: [open ? actions.map((action, index) => /*#__PURE__*/_jsx(FabActionSlot, {
+        children: [present && resolvedLayout === 'menu' ? /*#__PURE__*/_jsx(FabMenu, {
+          progress: progress,
+          placement: placement,
+          size: size,
+          glass: material,
+          appearance: appearance,
+          width: menuWidth,
+          radius: menuRadius,
+          className: menuClassName,
+          children: actions
+        }) : null, present && resolvedLayout === 'dial' ? actions.map((action, index) => /*#__PURE__*/_jsx(FabActionSlot, {
           index: index,
           children: action
         }, index)) : null, /*#__PURE__*/_jsx(FabRoot, {
@@ -417,6 +938,7 @@ const FabGroup = /*#__PURE__*/forwardRef(({
           size: size,
           variant: variant,
           disabled: disabled,
+          glass: glass,
           accessibilityLabel: accessibilityLabel,
           accessibilityState: {
             disabled,
@@ -431,6 +953,103 @@ const FabGroup = /*#__PURE__*/forwardRef(({
 });
 FabGroup.displayName = 'Fab.Group';
 
+/**
+ * The menu panel: one surface, springing out of the trigger's corner.
+ *
+ * It scales up from that corner rather than fading in, and the two are not
+ * interchangeable: the material cannot be faded — at zero it stops drawing
+ * and does not come back — and a panel growing out of the button is what
+ * says the button opened. The rows inside fade in on the dial's own stagger,
+ * nearest the trigger first.
+ */
+function FabMenu({
+  progress,
+  placement,
+  size,
+  glass,
+  appearance,
+  width: widthProp,
+  radius: radiusProp,
+  className,
+  children
+}) {
+  const metrics = MENU_METRICS[appearance];
+  const width = widthProp ?? metrics.width;
+  const radius = radiusProp ?? metrics.radius;
+
+  /*
+   * The panel rides the group's own spring rather than one of its own.
+   *
+   * It used to run a second, faster spring, and closing raced it against the
+   * one that decides when the panel unmounts: the panel reached its collapsed
+   * scale early and then sat there, a small box above the trigger, until the
+   * slower spring came to rest and took it away. One value cannot race
+   * itself, so the panel is gone exactly when the dial says it is.
+   *
+   * Scale and not opacity, for the same reason the dial's actions are: the
+   * material survives a zero scale and does not come back from a zero
+   * opacity.
+   */
+  const style = useAnimatedStyle(() => ({
+    transform: [{
+      scale: interpolate(progress.value, [0, MENU_POP_AT, 1], [0, MENU_FROM_SCALE, 1], Extrapolation.CLAMP)
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, {
+      transformOrigin: menuOrigin(placement, metrics, width, children.length, size)
+    }],
+    children: /*#__PURE__*/_jsx(Glass, {
+      radius: radius
+      // Without the material the panel is the same surface a popover is.
+      ,
+      fallbackClassName: "border border-border bg-popover shadow-lg",
+      className: cn(appearance === 'wells' ? 'p-1.5' : 'py-1.5', glass ? null : 'shadow-lg', className),
+      style: {
+        width
+      },
+      children: children.map((action, index) => /*#__PURE__*/_jsx(FabActionSlot, {
+        index: index,
+        separator: metrics.hairline > 0 && index > 0,
+        children: action
+      }, index))
+    })
+  });
+}
+
+/**
+ * How far along its own arrival an action is, from the dial's one progress.
+ *
+ * The stagger runs bottom-up: the action nearest the trigger arrives first,
+ * which is the order a hand travelling away from the button meets them in.
+ */
+function slotProgress(progress, count, index) {
+  'worklet';
+
+  // A short lag per action rather than a full turn each: the actions leave
+  // the trigger nearly together and settle nearly together, so a later one
+  // does not rise through a slot an earlier one is already sitting in.
+  const from = (count - 1 - index) * STAGGER;
+  const to = from + 1 - STAGGER * Math.max(0, count - 1);
+  // The spring's overshoot past its target is passed on to every action, so
+  // a button arrives with a little bounce rather than stopping dead. It is
+  // added on top of the clamped window rather than read through it: a window
+  // that ends before the dial's does would otherwise leave its action past
+  // its slot for good.
+  const within = interpolate(progress, [from, Math.min(1, to)], [0, 1], Extrapolation.CLAMP);
+  return within + Math.max(0, progress - 1);
+}
+
+/** The same progress, decelerating into 1 and never past it — for size and opacity. */
+function settled(t) {
+  'worklet';
+
+  return Easing.out(Easing.cubic)(Math.min(1, Math.max(0, t)));
+}
+
+/** Which slot an action is in — what it needs to know to animate itself. */
+const FabSlotContext = /*#__PURE__*/createContext(0);
+
 /**
  * One action's slot in the unfolding.
  *
@@ -439,13 +1058,19 @@ FabGroup.displayName = 'Fab.Group';
  */
 function FabActionSlot({
   index,
+  separator = false,
   children
 }) {
   const {
     progress,
     count,
+    glass,
+    layout,
     close
   } = useFabGroup('Fab.Action');
+  // A menu's rows are content on one panel, not glass of their own, so they
+  // may fade; a dial's actions are each their own material.
+  const material = glass && layout === 'dial';
 
   /*
    * Whatever is in the slot closes the dial when it is pressed.
@@ -460,26 +1085,38 @@ function FabActionSlot({
     onPress
   } = children.props;
   const child = onPress ? /*#__PURE__*/cloneElement(children, {
-    onPress: () => {
+    onPress: event => {
       close();
-      onPress();
+      onPress(event);
     }
   }) : children;
+
+  /*
+   * A glass action never fades. The material stops drawing under an ancestor
+   * at zero opacity and does not come back when the opacity does, so a fade
+   * from zero is a button that sometimes never appears — whichever ones got
+   * their first frame at zero. A glass dial's action animates its own parts
+   * instead, rising out of the trigger; see `Fab.Action`. The slot only
+   * fades a plain action, where it reads better on a flat surface.
+   */
   const style = useAnimatedStyle(() => {
-    const steps = Math.max(1, count);
-    const from = (count - 1 - index) / (steps + 1);
-    const to = from + 1 / (steps + 1) + 0.35;
-    const t = interpolate(progress.value, [from, Math.min(1, to)], [0, 1], 'clamp');
+    if (material) return {};
+    const t = slotProgress(progress.value, count, index);
     return {
-      opacity: t,
+      opacity: settled(t),
       transform: [{
         translateY: interpolate(t, [0, 1], [ACTION_TRAVEL, 0])
       }]
     };
   });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: style,
-    children: child
+  return /*#__PURE__*/_jsx(FabSlotContext.Provider, {
+    value: index,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: style,
+      children: [separator ? /*#__PURE__*/_jsx(View, {
+        className: "mx-4 h-px bg-border"
+      }) : null, child]
+    })
   });
 }
 
@@ -501,6 +1138,8 @@ function FabActionSlot({
 const FabAction = /*#__PURE__*/forwardRef(({
   className,
   icon,
+  // Read off the element by a native group, never rendered here.
+  systemImage: _systemImage,
   label,
   onPress,
   disabled = false,
@@ -509,35 +1148,141 @@ const FabAction = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const {
+    progress,
+    count,
     size,
+    glass,
+    layout,
+    appearance,
+    iconPlacement,
+    rowClassName,
     close
   } = useFabGroup('Fab.Action');
+  const index = useContext(FabSlotContext);
+  const [pressed, setPressed] = useState(false);
+
+  /*
+   * A glass dial's action rises out of the trigger.
+   *
+   * It starts small and sitting on the button, and springs up to its slot
+   * on the dial's stagger; inside the group's glass container the two
+   * materials are one blob until it pulls free. The distance is known from
+   * the fixed sizes, so nothing is measured. The label follows once the
+   * button is most of the way there, sliding in from the button's side —
+   * it is glass too, so it moves rather than fades.
+   */
+  const actionSize = size === 'lg' ? 'md' : 'sm';
+  const rise = (count - 1 - index) * (SIZE_PX[actionSize] + GROUP_GAP) + GROUP_GAP + SIZE_PX[size] / 2 + SIZE_PX[actionSize] / 2;
+  // Travel follows the spring, overshoot and all; size settles without it.
+  const buttonStyle = useAnimatedStyle(() => {
+    const t = slotProgress(progress.value, count, index);
+    return {
+      transform: [{
+        translateY: interpolate(t, [0, 1], [rise, 0])
+      }, {
+        scale: interpolate(settled(t), [0, 1], [RISE_FROM_SCALE, 1])
+      }]
+    };
+  });
+  const chipStyle = useAnimatedStyle(() => {
+    const t = slotProgress(progress.value, count, index);
+    // Rides up with its button, then grows out of it once the button is
+    // most of the way to its slot.
+    const late = settled(interpolate(t, [LABEL_AFTER, 1], [0, 1], 'clamp'));
+    return {
+      transform: [{
+        translateY: interpolate(t, [0, 1], [rise, 0])
+      }, {
+        translateX: interpolate(late, [0, 1], [LABEL_TRAVEL, 0])
+      }, {
+        scale: interpolate(late, [0, 1], [RISE_FROM_SCALE, 1])
+      }]
+    };
+  });
   const handlePress = useCallback(() => {
     close();
     onPress?.();
   }, [close, onPress]);
+  const themedRow = useCSSVariable(destructive ? '--color-destructive' : '--color-foreground');
+  const rowColor = typeof themedRow === 'string' ? themedRow : undefined;
+
+  /*
+   * In a menu the action is a row on the panel. The press tints the row
+   * rather than scaling it — a row that shrinks inside a panel that does
+   * not looks detached from it — and the tint is React state rather than a
+   * worklet because it is a colour toggle, not a curve.
+   */
+  if (layout === 'menu') {
+    const wells = appearance === 'wells';
+    const glyph = wells ? /*#__PURE__*/_jsx(View, {
+      className: cn('h-8 w-8 items-center justify-center rounded-full', destructive ? 'bg-destructive/15' : 'bg-foreground/10'),
+      children: icon
+    }) : icon;
+    return /*#__PURE__*/_jsx(IconColorProvider, {
+      color: rowColor,
+      children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+        ref: ref,
+        accessibilityRole: "button",
+        accessibilityState: {
+          disabled
+        },
+        disabled: disabled,
+        onPress: handlePress,
+        onPressIn: () => setPressed(true),
+        onPressOut: () => setPressed(false),
+        pressScale: 1,
+        className: cn('flex-row items-center gap-3', wells ? 'h-12 rounded-2xl px-2' : 'h-11 px-4', iconPlacement === 'trailing' ? 'justify-between' : null, pressed && 'bg-foreground/10', disabled && 'opacity-40', rowClassName, className),
+        ...props,
+        children: [iconPlacement === 'leading' ? glyph : null, /*#__PURE__*/_jsx(Text, {
+          className: cn('shrink', destructive ? 'text-destructive' : 'text-foreground', labelClassName),
+          numberOfLines: 1,
+          children: label
+        }), iconPlacement === 'trailing' ? glyph : null]
+      })
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
     className: "flex-row items-center justify-end gap-3",
     ...props,
-    children: [label ? /*#__PURE__*/_jsx(View, {
+    children: [label ?
+    // The chip is in the same material as the button beside it, so a
+    // glass dial is glass all the way across and not glass with paper
+    // labels. Without the material it is the popover surface it was.
+    glass ? /*#__PURE__*/_jsx(Animated.View, {
+      style: chipStyle,
+      children: /*#__PURE__*/_jsx(Glass, {
+        radius: 8,
+        fallbackClassName: "bg-popover shadow-sm",
+        className: "px-2.5 py-1",
+        children: /*#__PURE__*/_jsx(Text, {
+          size: "sm",
+          className: cn('text-foreground', labelClassName),
+          children: label
+        })
+      })
+    }) : /*#__PURE__*/_jsx(View, {
       className: "rounded-lg bg-popover px-2.5 py-1 shadow-sm",
       children: /*#__PURE__*/_jsx(Text, {
         size: "sm",
         className: cn('text-foreground', labelClassName),
         children: label
       })
-    }) : null, /*#__PURE__*/_jsx(FabRoot, {
-      ref: ref,
-      icon: icon
-      // A step down from the trigger, so the trigger stays the one that
-      // leads even while the dial it opened is on screen.
-      ,
-      size: size === 'lg' ? 'md' : 'sm',
-      variant: destructive ? 'destructive' : 'surface',
-      disabled: disabled,
-      accessibilityLabel: label,
-      onPress: handlePress,
-      className: className
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: glass ? buttonStyle : undefined,
+      children: /*#__PURE__*/_jsx(FabRoot, {
+        ref: ref,
+        icon: icon
+        // A step down from the trigger, so the trigger stays the one that
+        // leads even while the dial it opened is on screen.
+        ,
+        size: actionSize,
+        variant: destructive ? 'destructive' : 'surface',
+        disabled: disabled,
+        glass: glass,
+        accessibilityLabel: label,
+        onPress: handlePress,
+        className: className
+      })
     })]
   });
 });