chore(sandbox): preview only, do not merge, the ContextMenu lift on and off

.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,8 @@
     "/pages/codeblock-perf/",
     "/pages/color-studio/",
     "/pages/component-scores/",
+    "/pages/context-menu-lift-shapes/",
+    "/pages/context-menu-lift/",
     "/pages/dictation-lab/",
     "/pages/diffviewer-perf/",
     "/pages/doc-discover/",

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

@@ -0,0 +1,123 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file page.tsx
+ * @input ContextMenu and the preview's lift switch
+ * @output Preview only: one list of message rows, each with the same
+ *   ContextMenu, with the lift on (`?lift=L0`) or off (`?lift=L2`)
+ * @position A raw Sandbox page (/pages/context-menu-lift-shapes/) with no
+ *   sandbox frame. The document scrolls.
+ */
+
+'use client';
+
+import {useEffect, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {ContextMenu} from '@astryxdesign/core/ContextMenu';
+import {Item} from '@astryxdesign/core/Item';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {useThemeControls} from '../../../providers';
+
+type LiftShape = 'L0' | 'L2';
+
+const SHAPES: Record<LiftShape, string> = {
+  L0: 'L0: the row lifts above a dimmed page',
+  L2: 'L2: no lift',
+};
+
+const ACTIONS = ['Copy', 'Share', 'Rename', 'Delete'];
+
+const ROWS = Array.from({length: 12}, (_, i) => `Message ${i + 1}`);
+
+const styles = stylex.create({
+  switches: {
+    display: 'flex',
+    gap: 12,
+  },
+  switchLink: {
+    paddingBlock: 10,
+    paddingInline: 20,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'currentColor',
+    color: 'inherit',
+    fontWeight: 600,
+    textDecoration: 'none',
+  },
+  current: {
+    backgroundColor: 'var(--color-background-secondary)',
+  },
+});
+
+function readShape(): LiftShape {
+  return new URLSearchParams(window.location.search).get('lift') === 'L2'
+    ? 'L2'
+    : 'L0';
+}
+
+export default function ContextMenuLiftShapesPage() {
+  const {setThemeName, setMode} = useThemeControls();
+  const [shape, setShape] = useState<LiftShape | null>(null);
+  const [lastAction, setLastAction] = useState('none');
+
+  // The switch is read once, after hydration, before any hold.
+  useEffect(() => {
+    const next = readShape();
+    (
+      globalThis as {__astryxPreviewLiftShape?: LiftShape}
+    ).__astryxPreviewLiftShape = next;
+    setShape(next);
+  }, []);
+
+  // The page opens in Neutral light. The reset waits one frame, so it comes
+  // after the Sandbox restores the theme it kept from an earlier visit.
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setThemeName('neutral');
+      setMode('light');
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [setThemeName, setMode]);
+
+  const menu = ACTIONS.map(label => ({
+    label,
+    onClick: () => setLastAction(label),
+  }));
+
+  return (
+    <VStack gap={4} padding={4}>
+      <VStack gap={2}>
+        <Heading level={1}>ContextMenu lift preview</Heading>
+        <Text type="body" weight="bold">
+          {shape == null ? 'Reading the switch' : SHAPES[shape]}
+        </Text>
+        <nav {...stylex.props(styles.switches)}>
+          {(['L0', 'L2'] as const).map(option => (
+            <a
+              key={option}
+              href={`?lift=${option}`}
+              {...stylex.props(
+                styles.switchLink,
+                option === shape && styles.current,
+              )}>
+              {option}
+            </a>
+          ))}
+        </nav>
+        <Text type="supporting">{`Last action: ${lastAction}`}</Text>
+      </VStack>
+      <VStack gap={0}>
+        {ROWS.map(row => (
+          <ContextMenu key={row} items={menu} label={row}>
+            <Item
+              label={row}
+              description="Hold the row until its menu shows."
+            />
+          </ContextMenu>
+        ))}
+      </VStack>
+    </VStack>
+  );
+}