feat(ContextMenu): a held finger lifts a block trigger above a tint

.changeset/contextmenu-outside-press-watch.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] ContextMenu closes on an outside press through the layer's outside-press watch. A mouse or pen press closes it at its `mousedown`, in the menu's own document, so a menu in an iframe or a Picture-in-Picture window no longer closes on a press in the page.
+
+@vjeux

.changeset/contextmenu-touch-lift.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] ContextMenu where the primary pointer is coarse and the menu opens at the finger: when the held finger opens the menu on a block trigger, the trigger lifts out of the page, as on iOS. It grows by up to 15% above a tinted page, its spot in the page held, and the menu fades in beside it, below when it fits, else above. A tap on the tint closes the menu and reaches nothing beneath; the trigger returns to its place. The lifted trigger casts no shadow; one with no background of its own, such as a row of text, lifts on the theme's surface, rounded. An inline trigger, the bottom sheet, `presentation="popover"` and a menu opened by mouse or keyboard keep today's look.
+
+@vjeux

.changeset/contextmenu-touch-slide-to-pick.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] ContextMenu where the primary pointer is coarse and the menu opens at the finger (`presentation` unset, or `adaptive` where it stays a popover): after the held finger opens the menu, the same finger may slide onto an action without lifting, as on iOS. Lifting over an action picks it, and lifting over no action leaves the menu open. The finger picks only after it has moved 10 px in the open menu, so a still lift picks nothing.
+
+@vjeux

.changeset/contextmenu-touch-timeline.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] ContextMenu opens from a held finger on iOS 26's measured timeline where the primary pointer is coarse. A block trigger whose menu opens at the finger starts to grow 150 ms after the finger lands, toward its held size on UIKit's lift spring, played on the compositor, and the hold keeps UIKit's measured moments. The growth scales an inner box that holds the trigger's children, so the menu never takes the press's scale. At 400 ms the press takes the finger: its lift no longer sends a click, and the page cannot scroll under it. The menu opens at 735 ms if the finger is still down, or as soon as it lifts after 400 ms. A finger that lifts before 400 ms, or drifts more than 11.5 px on either axis before the menu opens, gets no menu, and the trigger springs back to its size. A touch outside the menu closes it as it begins to pan, or at its lift. Over a lifted trigger's tint that pan scrolls nothing; the next one scrolls the page. The trigger returns to its size when the menu closes. A touch open lights no row: the menu takes the focus, and a row lights only under the finger, as in UIKit (keyboard and pointer opens still focus the first item). A second finger cancels the press before 400 ms; after it, the menu still opens. A fine pointer (a mouse) keeps the right-click menu, and a finger there keeps today's 500 ms long press. Pass `presentation="popover"` to keep today's menu: the menu at the pointer, opened by a finger held for 500 ms.
+
+@vjeux

.changeset/lift-module.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: one opt-in lift-from-trigger presentation for touch surfaces. The trigger itself lifts into the top layer above a tinted backdrop; a surface grows out of the press beside it on the shared rect morph and shrinks back into it on the layer runtime's exit copy; the trigger returns to its place. Translate, scale and opacity only; nothing mounted at rest, three elements while lifted, and no shadow. A zoom from a thumbnail lifts a copy of the thumbnail's picture into the viewer instead, while the thumbnail hides in place. Not exported from the package entry point; ContextMenu's touch lift uses it, and nothing else does yet.
+
+@vjeux

.changeset/motion-morph-path.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the rect morph's paths, the geometry touch presentations share when they grow out of a source rect and shrink back into it. `lerpPath` (a straight line between two rects) and `edgeGrowPath` (UIKit's popover, growing out of a point on its edge) name the rect an element shows at each progress, and say how an interrupted motion continues in their own law; `morphCurves` turns a path into compositor curves (`translate`, `scale` and a companion `opacity`). Not exported from the package entry point; ContextMenu's touch lift uses `lerpPath`, through the lift module.
+
+@vjeux

.changeset/motion-rect-morph.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the rect morph, one way for a touch presentation to grow out of a source rect and shrink back into it. `createRectMorph` presents an element along a path (`lerpPath`, `edgeGrowPath`) and dismisses it back on a copy or on itself, each continuing the other from the rect on screen. Each play takes the timing the component's motion record names (AST-094 FR45): a duration and easing, or a spring, starting from the velocity it is given. Reduced Motion is left to the animator. `easedProgress` moves to the progress helpers and keeps a retargeted velocity; `timedCurve` joins them. Not exported from the package entry point; ContextMenu's touch lift uses it, through the lift module.
+
+@vjeux

.github/playwright-leg-durations.json

@@ -123,6 +123,7 @@
     "packages/core/src/Chat/__tests__/ChatLayoutKeyboard.interaction.browser.spec.ts": 29.9,
     "packages/core/src/Chat/__tests__/ChatLayoutPanelView.interaction.browser.spec.ts": 4.1,
     "packages/core/src/Chat/__tests__/ChatMessageAvatar.interaction.browser.spec.ts": 2.2,
+    "packages/core/src/ContextMenu/__tests__/ContextMenuLongPress.interaction.browser.spec.ts": 58.3,
     "packages/core/src/DateInput/__tests__/DateInputFocusLeave.interaction.browser.spec.ts": 4.2,
     "packages/core/src/DateInput/__tests__/MonthScroller.interaction.browser.spec.ts": 8.5,
     "packages/core/src/DateInput/__tests__/MonthScrollerSteps.interaction.browser.spec.ts": 12.1,

apps/sandbox/scripts/next-export-routes.json

@@ -13,6 +13,7 @@
     "/pages/codeblock-perf/",
     "/pages/color-studio/",
     "/pages/component-scores/",
+    "/pages/context-menu-lift/",
     "/pages/dictation-lab/",
     "/pages/diffviewer-perf/",
     "/pages/doc-discover/",

apps/sandbox/src/app/(raw)/pages/context-menu-lift/page.tsx

@@ -0,0 +1,309 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file page.tsx
+ * @input ContextMenu and the components a page wraps in one
+ * @output A phone page of ContextMenus in place: list rows, cards, table
+ *   cells, thumbnails, the page's edges, a scroller and a clipping box
+ * @position A raw Sandbox page (/pages/context-menu-lift/) with no sandbox
+ *   frame. The document scrolls, so a held finger lifts each trigger where a
+ *   page puts it, with the page's own scroll.
+ */
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {Card} from '@astryxdesign/core/Card';
+import {ContextMenu} from '@astryxdesign/core/ContextMenu';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Item} from '@astryxdesign/core/Item';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Switch} from '@astryxdesign/core/Switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from '@astryxdesign/core/Table';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+import {useThemeControls} from '../../../providers';
+
+const MENU = [
+  {label: 'Copy', onClick: () => {}},
+  {label: 'Share', onClick: () => {}},
+  {label: 'Rename', onClick: () => {}},
+  {label: 'Delete', onClick: () => {}},
+];
+
+const ROWS = Array.from({length: 24}, (_, i) => ({
+  id: i + 1,
+  name: `Message ${i + 1}`,
+  preview: 'Hold the row to lift it. Tap the dimmed page to close.',
+}));
+
+const FILES = [
+  {name: 'Budget.xlsx', owner: 'Ana', size: '24 KB'},
+  {name: 'Roadmap.pdf', owner: 'Ben', size: '1.2 MB'},
+  {name: 'Logo.svg', owner: 'Chris', size: '8 KB'},
+  {name: 'Notes.txt', owner: 'Dana', size: '2 KB'},
+];
+
+const HUES = [210, 20, 140, 280, 50, 330];
+
+// A flat swatch as an image, so the page needs no network for its pictures.
+function swatch(hue: number): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect width="96" height="96" fill="hsl(${hue} 70% 55%)"/></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const styles = stylex.create({
+  // The rows at the page's very top and bottom touch its edges.
+  edgeRow: {paddingInline: 0},
+  scroller: {
+    overflowX: 'auto',
+    paddingBlock: 8,
+  },
+  scrollerCard: {flexShrink: 0},
+  clip: {
+    overflow: 'hidden',
+    height: 120,
+  },
+  // The trigger fills its table cell.
+  cellTrigger: {display: 'block'},
+  iconRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+  },
+  outlined: {
+    padding: 12,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'currentColor',
+    borderRadius: 12,
+  },
+  translucent: {
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: 'rgba(59, 130, 246, 0.3)',
+  },
+  pseudoFill: {
+    position: 'relative',
+    isolation: 'isolate',
+    padding: 12,
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      zIndex: -1,
+      borderRadius: 12,
+      backgroundColor: 'rgba(16, 185, 129, 1)',
+    },
+  },
+});
+
+export default function ContextMenuLiftPage() {
+  const {mode, setMode} = useThemeControls();
+  return (
+    <VStack gap={0}>
+      <ContextMenu items={MENU} label="Top row">
+        <Item
+          label="Top edge"
+          description="The page's first row, against the top of the screen"
+          xstyle={styles.edgeRow}
+        />
+      </ContextMenu>
+      <VStack gap={6} padding={4}>
+        <VStack gap={2}>
+          <Heading level={1}>ContextMenu in place</Heading>
+          <Text>
+            Hold any row, card, cell or picture until its menu shows. The page
+            scrolls on its own; tap the dimmed page to close a menu.
+          </Text>
+          <Switch
+            label="Dark mode"
+            value={mode === 'dark'}
+            onChange={isOn => setMode(isOn ? 'dark' : 'light')}
+          />
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Rows in a long list</Heading>
+          <VStack gap={0}>
+            {ROWS.map((row, i) => (
+              <VStack key={row.id} gap={0}>
+                {i > 0 ? <Divider /> : null}
+                <ContextMenu items={MENU} label={row.name}>
+                  <Item label={row.name} description={row.preview} />
+                </ContextMenu>
+              </VStack>
+            ))}
+          </VStack>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Cards in a grid</Heading>
+          <Grid columns={2} gap={3}>
+            {HUES.map((hue, i) => (
+              <ContextMenu key={hue} items={MENU} label={`Card ${i + 1}`}>
+                <Card>
+                  <VStack gap={1}>
+                    <Thumbnail src={swatch(hue)} alt="" />
+                    <Text weight="semibold">{`Card ${i + 1}`}</Text>
+                    <Text type="supporting">A card in a two-column grid</Text>
+                  </VStack>
+                </Card>
+              </ContextMenu>
+            ))}
+          </Grid>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Table cells</Heading>
+          <Text type="supporting">
+            A row has no wrapper, so each name cell holds the trigger.
+          </Text>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Owner</TableHeaderCell>
+                <TableHeaderCell>Size</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {FILES.map(file => (
+                <TableRow key={file.name}>
+                  <TableCell>
+                    <ContextMenu
+                      items={MENU}
+                      label={file.name}
+                      triggerXstyle={styles.cellTrigger}>
+                      <Text>{file.name}</Text>
+                    </ContextMenu>
+                  </TableCell>
+                  <TableCell>{file.owner}</TableCell>
+                  <TableCell>{file.size}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Thumbnails</Heading>
+          <HStack gap={2}>
+            {HUES.slice(0, 4).map((hue, i) => (
+              <ContextMenu key={hue} items={MENU} label={`Picture ${i + 1}`}>
+                <Thumbnail src={swatch(hue)} alt={`Picture ${i + 1}`} />
+              </ContextMenu>
+            ))}
+          </HStack>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Other shapes</Heading>
+          <Text>
+            A trigger with no surface of its own lifts on a plate. One with a
+            fill of its own lifts as it is.
+          </Text>
+          <Grid columns={2} gap={3}>
+            <ContextMenu items={MENU} label="Row with an icon">
+              <div {...stylex.props(styles.iconRow)}>
+                <svg width={20} height={20} viewBox="0 0 20 20" aria-hidden>
+                  <circle cx={10} cy={10} r={8} fill="currentColor" />
+                </svg>
+                <Text>A row with an icon</Text>
+              </div>
+            </ContextMenu>
+            <ContextMenu items={MENU} label="Outlined box">
+              <div {...stylex.props(styles.outlined)}>
+                <Text>An outlined box</Text>
+              </div>
+            </ContextMenu>
+            <ContextMenu items={MENU} label="Translucent box">
+              <div {...stylex.props(styles.translucent)}>
+                <Text>A translucent fill</Text>
+              </div>
+            </ContextMenu>
+            <ContextMenu items={MENU} label="Filled box">
+              <div {...stylex.props(styles.pseudoFill)}>
+                <Text>A fill from a pseudo-element</Text>
+              </div>
+            </ContextMenu>
+            <ContextMenu items={MENU} label="Inline image">
+              <img
+                src={swatch(HUES[3])}
+                alt="Purple swatch"
+                width={64}
+                height={64}
+              />
+            </ContextMenu>
+          </Grid>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>The side edges</Heading>
+          <HStack gap={2} justify="between">
+            <ContextMenu items={MENU} label="Left edge">
+              <Card padding={2}>
+                <Text>Left edge</Text>
+              </Card>
+            </ContextMenu>
+            <ContextMenu items={MENU} label="Right edge">
+              <Card padding={2}>
+                <Text>Right edge</Text>
+              </Card>
+            </ContextMenu>
+          </HStack>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Inside a scroller</Heading>
+          <HStack gap={3} xstyle={styles.scroller}>
+            {HUES.map((hue, i) => (
+              <ContextMenu
+                key={hue}
+                items={MENU}
+                label={`Scrolled card ${i + 1}`}>
+                <Card width={160} xstyle={styles.scrollerCard}>
+                  <VStack gap={1}>
+                    <Thumbnail src={swatch(hue)} alt="" />
+                    <Text>{`Scrolled card ${i + 1}`}</Text>
+                  </VStack>
+                </Card>
+              </ContextMenu>
+            ))}
+          </HStack>
+        </VStack>
+
+        <VStack gap={2}>
+          <Heading level={2}>Inside a clipping box</Heading>
+          <Card padding={0} xstyle={styles.clip}>
+            <VStack gap={0}>
+              {ROWS.slice(0, 4).map(row => (
+                <ContextMenu key={row.id} items={MENU} label={row.name}>
+                  <Item
+                    label={`Clipped ${row.name}`}
+                    description="Its box hides what overflows"
+                  />
+                </ContextMenu>
+              ))}
+            </VStack>
+          </Card>
+        </VStack>
+      </VStack>
+      <ContextMenu items={MENU} label="Bottom row">
+        <Item
+          label="Bottom edge"
+          description="The page's last row, against the bottom of the screen"
+          xstyle={styles.edgeRow}
+        />
+      </ContextMenu>
+    </VStack>
+  );
+}

apps/sandbox/src/app/sandboxPages.ts

@@ -182,6 +182,12 @@ export const categories: SandboxCategory[] = [
         description:
           'Every built-in Text type at the default size, on a bare page that scrolls',
       },
+      {
+        name: 'ContextMenu in Place',
+        href: '/pages/context-menu-lift/',
+        description:
+          'ContextMenus on list rows, cards, table cells and pictures, at the page edges and in clipping boxes, on a bare page that scrolls',
+      },
     ],
   },
   {