feat(TopNav): under a finger, the phone bar's end items sit on an iOS 26 capsule

.changeset/appshell-adaptive-height.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] AppShell accepts `height="adaptive"`: `fill` with a mouse or trackpad, `auto` under a finger (a coarse primary pointer, through the shared touch resolver). With `fill`, the main region scrolls inside a viewport-high shell, so a phone browser never sees the page scroll: its toolbar or address bar does not minimize, and on iOS a status-bar tap does not return to the top. `adaptive` lets the page scroll under the sticky header under a finger and keeps independent scroll regions with a mouse. The root now reports which element scrolls in `data-scroll-owner` (`content` for the main region, `document` for the page), for code that listens to or restores the scroll position. `fill` and `auto` are unchanged, and `fill` stays the default.
+
+@vjeux

.changeset/appshell-touch-scroll-edge.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] AppShell: under a finger (one touch model on every touch device), when the page scrolls (`height="auto"`, or `height="adaptive"` on a touch device), the pinned header looks like an iOS 26 bar. It paints no background of its own and draws no divider. Once the content has moved more than 10px under it, a veil of the header's colour fades in at its top on iOS's measured spring (0.29 s): strongest at the top, gone just below the header. It fades out (0.51 s) when the content comes back. A scroll the program drives (`scrollTo`, a status-bar tap) switches the veil at once instead: on iOS 26.2 a fade that starts on such a scroll makes WebKit drop the header's items for a frame or two. Under Reduce Motion the fades are the animator's 200 ms cross-fade. Where the browser supports `prefers-reduced-transparency` (Safari 26.2 does not yet), Reduce Transparency makes the veil an opaque band ending at the header's bottom edge. With a mouse nothing changes. The springs and the veil's shape are internal measured constants; the veil takes the header's theme colour.
+
+@vjeux

.changeset/build-stylex-cross-file-consts.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/build': patch
+---
+
+[fix] `astryxStylex` resolves `defineConsts` values read from another file. With the `{stylexOptions}` form (the one Storybook uses), a file that read only constants from a `.stylex.ts` module lost that import once StyleX compiled it, so the constants never reached the CSS: a constant used as a media-query key failed the build ("Invalid empty selector") and one used as a value shipped as a custom property nothing declares. In either form, a constant defined on the other side of the layer split, or in an Astryx package (compiled with the library class-name prefix) and read from an app file (compiled with its own), stayed unresolved.
+
+@vjeux

.changeset/core-internal-entries.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Core's internal entries, reserved for Astryx's own packages, also give Lab components the pan recognizer, the gesture types, the touch presentation queries and the motion math and tuning tables that Core components use. Apps import nothing new.
+
+@vjeux

.changeset/gesture-arena-moving-cancel.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: a gesture that cancels itself on a finger's move (a long press dragged past its tolerance) keeps that finger claimed until it lifts, so the page never takes the drag over midway; a resting finger is still given back when its gesture is cancelled. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-browser-negotiation.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: touch-action derivation, the native scroll probe and haptics for the gesture system. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-hook-fixes.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the gesture hooks call nothing back after unmount; `usePressTracker` brakes with the host by default and keeps one tracker, so an option change or a new ref never drops a press in progress; the recognizer's arena plumbing is `protected`. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-host-fixes.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: gesture host fixes from review. A page scroll under a still finger keeps the press and its click; watchers and touches nothing can claim get passive listeners only; a claimed pen holds only its own stylus touches; an element's own `touch-action` is never widened; slotted content scrolls with its shadow-tree scroller. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-host-owner.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the gesture host becomes the one document-level touch owner: the finger count, touch gates, and a kept press for continuous-tracking controls, whose element gets `touch-action: manipulation` where the pointer is coarse. A scroll lock's page hold and the finger-scroll watch keep their own listeners and ask the host only about the touches it owns. A second finger fails a one-finger pan that has not claimed, so the page can pinch. A scroll-edge pan holds a lone finger from the first move that pulls away from an edge every scroller under it is at, so those moves are cancelled before it begins; with a second finger anywhere on the screen the page keeps its pinch. Where the primary pointer is fine, the host attaches nothing and registers no listener, following the pointer when it changes; a recognizer that reads each event's pointer itself opts out with `perEventPointer`, and a press tracker with it paints a finger's press feedback only, with no control event and no mouse or pen press. A press tracker whose hold acts (a stepper's hold-repeat) can bring a selection lock for its presses, as a recognizer can. Internal, for the touch components that adopt them; not exported from the package entry point.
+
+@vjeux

.changeset/gesture-host.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the gesture system's DOM host (claims, click suppression, the browser's takeover, the pointer behind a contact). Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-pan.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: the pan gesture recognizer, with UIKit's measured hysteresis and velocity filter. Not exported from the package entry point; no component uses it yet.
+[chore] Internal: the pan gesture recognizer, with UIKit's measured hysteresis and velocity filter. Not exported from the package entry point.
 
 @vjeux

.changeset/gesture-press-tracking.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: UIControl press tracking with control and cell profiles and the gesture hooks, with every press painter writing `data-astryx-press` through one internal writer in `utils/pressFeedback.ts`. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-readme.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the gesture system's README for component authors, with its browser proof in Chromium and WebKit.
+
+@vjeux

.changeset/gesture-recognizer-core.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: the gesture recognizer core for touch presentations: UIKit's recognizer state machine and the arena that settles which recognizer owns a touch. Not exported from the package entry point; no component uses it yet.
+[chore] Internal: the gesture recognizer core for touch presentations: UIKit's recognizer state machine and the arena that settles which recognizer owns a touch. Not exported from the package entry point.
 
 @vjeux

.changeset/gesture-recognizer-fixes.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: gesture recognizer and arena fixes from review; a pan claims nothing before it begins at 10 pt; one velocity tracker for every gesture (`spec:AST-100`: UIKit's measured blend, a scrolling surface's release through the pan's `scrollVelocity()`, and FR2's release rules). Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-swipe-pinch-rotation-edge-hover.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: swipe, pinch, rotation, screen-edge pan and hover gesture recognizers. Not exported from the package entry point.
+
+@vjeux

.changeset/gesture-tap-long-press.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: tap and long-press gesture recognizers with UIKit's measured thresholds. Not exported from the package entry point; no component uses them yet.
+[chore] Internal: tap and long-press gesture recognizers with UIKit's measured thresholds. Not exported from the package entry point.
 
 @vjeux

.changeset/gesture-watcher.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: a recognizer created with `claimsTouches: false` is a watcher: passive listeners only, simultaneous with every recognizer, and it follows a touch the browser takes for a scroll to the lift. Not exported from the package entry point.
+
+@vjeux

.changeset/reduced-motion-record.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: Reduce Motion for the touch presentations follows design:reduced-motion beyond the animator too. `reducedMotionFade()` gives code beside the animator the animator's own fade (an opacity-only 200 ms cross-fade on a coarse pointer or after a touch release, at once on any other pointer), `animator.reducedMotion()` reports which form a change takes for feedback that plays no fade of its own, and `reducedMotion.stylex.ts` holds the fade's constants for StyleX transitions. The fade's length is not a theme motion role. Not exported from the package entry point.
+
+@vjeux

.changeset/topnav-touch-bar-capsule.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] TopNav's phone bar under a finger (one touch model on every touch device, iOS and Android alike) takes the iOS 26 bar's geometry, and its end items sit together on one capsule. The geometry comes from the theme's spacing and size tokens: with the defaults the bar is 54px tall, with its items on the top 44px and 16px from the screen's sides, and the capsule is 44px tall and fully rounded, placing each control where UIKit centres its 36px cells. The capsule paints the theme's `--color-background-surface`, with no shadow and nothing blurred. No token is added. With a mouse the bar is unchanged.
+
+@vjeux

.changeset/touch-selection-lock-gestures.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the gesture host applies a recognizer's own `selectionLock` to that recognizer's contact and imports no lock itself; a long press brings one only when it has a hold (a `minimumPressDuration` above 0), and `selectionLock: null` opts out. Not exported from the package entry point.
+
+@vjeux

.changeset/touch-selection-lock.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Where the primary pointer is fine (a mouse, a trackpad, a touchscreen laptop, a desktop pen tablet), the press feedback controller no longer registers a touch listener: it reads the primary pointer at the first finger or pen press and keeps its `touchcancel` listener only while that pointer is coarse.
+
+@vjeux

.changeset/uikit-constants-table.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: the UIKit constants table for touch presentations (springs, scroll physics, timing curves and navigation values), each value with its source and a checked list of the simulator measurements still owed. Not exported from the package entry point; no component reads it yet.
+[chore] Internal: the UIKit constants table for touch presentations (springs, scroll physics, timing curves and navigation values), each value with its source and a checked list of the simulator measurements still owed. Not exported from the package entry point.
 
 @vjeux

.changeset/uikit-motion-animator-pseudo-element.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the touch presentations' animator drives a pseudo-element such as a dialog's ::backdrop: a static filling animation holds its value after a curve ends and after `set`, a custom property on its host promotes it, and a Reduce Motion dip borrows and hands back the pseudo-element's own opacity. Not exported from the package entry point.
+
+@vjeux

.changeset/uikit-motion-animator.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: a compositor animator for touch presentations. It plays UIKit's springs, and scroll coasts (built by a separate coast module, so a surface that never coasts does not carry them; `decay` plays momentum, and sends a spring back from past an edge through the Reduce Motion policy: a cross-fade on a coarse pointer or after a touch release, at once elsewhere) as Web Animations on translate, rotate, scale and opacity, so they keep running while JavaScript is busy, and reads values and velocities back from the curves for interruption, retargeting and Reduce Motion cross-fades. Not exported from the package entry point; no component uses it yet.
+[chore] Internal: a compositor animator for touch presentations. It plays UIKit's springs, and scroll coasts (built by a separate coast module, so a surface that never coasts does not carry them; `decay` plays momentum, and sends a spring back from past an edge through the Reduce Motion policy: a cross-fade on a coarse pointer or after a touch release, at once elsewhere) as Web Animations on translate, rotate, scale and opacity, so they keep running while JavaScript is busy, and reads values and velocities back from the curves for interruption, retargeting and Reduce Motion cross-fades. Not exported from the package entry point.
 
 @vjeux

.changeset/uikit-motion-math.md

@@ -2,6 +2,6 @@
 '@astryxdesign/core': patch
 ---
 
-[chore] Internal: the spring, decay, rubber-band and projection math of UIKit for touch presentations, as pure functions checked against an independent integration and against values read from UIKit. Not exported from the package entry point; no component uses it yet.
+[chore] Internal: the spring, decay, rubber-band and projection math of UIKit for touch presentations, as pure functions checked against an independent integration and against values read from UIKit. Not exported from the package entry point.
 
 @vjeux

.changeset/uikit-motion-use-animator.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: useAnimator, a React wrapper around the touch presentations' animator that never re-renders per frame, and browser proofs on the interaction harness that the animator's motion keeps running through a blocked main thread in Chromium and WebKit. Not exported from the package entry point.
+
+@vjeux

.changeset/use-finger-scroll.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: `useFingerScroll(scroller)` tells a finger's scroll from the program's, and the gestures README gains a guide to migrating a raw-touch drag onto the recognizers. Internal to the touch components: not exported from the package entry point or the gestures barrel.
+
+@vjeux

apps/storybook/stories/AppShell.stories.tsx

@@ -21,6 +21,7 @@ import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {TextArea} from '@astryxdesign/core/TextArea';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '@astryxdesign/core/theme/tokens.stylex';
 import {
   HomeIcon,
   Cog6ToothIcon,
@@ -60,8 +61,41 @@ const styles = stylex.create({
     flexDirection: 'column' as const,
     gap: 32,
   },
+  // No top padding: the tiles meet the header, so they start passing under
+  // it at once.
+  tiles: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: 12,
+    paddingInline: 16,
+    paddingBlockEnd: 16,
+  },
+  tile: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    height: 120,
+    padding: 12,
+    borderRadius: 12,
+    color: colorVars['--color-on-dark'],
+    fontWeight: 600,
+  },
+  tileBlue: {backgroundColor: colorVars['--color-icon-blue']},
+  tileGreen: {backgroundColor: colorVars['--color-icon-green']},
+  tileOrange: {backgroundColor: colorVars['--color-icon-orange']},
+  tilePurple: {backgroundColor: colorVars['--color-icon-purple']},
+  tilePink: {backgroundColor: colorVars['--color-icon-pink']},
+  tileTeal: {backgroundColor: colorVars['--color-icon-teal']},
 });
 
+const TILE_COLORS = [
+  styles.tileBlue,
+  styles.tileGreen,
+  styles.tileOrange,
+  styles.tilePurple,
+  styles.tilePink,
+  styles.tileTeal,
+];
+
 // =============================================================================
 // Helpers
 // =============================================================================
@@ -246,7 +280,7 @@ const meta: Meta<typeof AppShell> = {
   argTypes: {
     height: {
       control: 'radio',
-      options: ['fill', 'auto'],
+      options: ['fill', 'auto', 'adaptive'],
     },
     variant: {
       control: 'radio',
@@ -277,7 +311,7 @@ export const Playground: StoryObj<typeof AppShell> = {
     },
     height: {
       control: 'radio',
-      options: ['fill', 'auto'],
+      options: ['fill', 'auto', 'adaptive'],
     },
   },
   args: {
@@ -505,6 +539,62 @@ export const AutoHeight: Story = {
   ),
 };
 
+/**
+ * Adaptive height: `fill` with a mouse or trackpad, `auto` where the primary
+ * pointer is touch. On a phone (or with touch emulation) the page itself
+ * scrolls under the sticky header, so a status-bar tap returns to the top and
+ * the browser's toolbar minimizes as you scroll. On a desktop the main region
+ * scrolls inside the viewport-high shell; the page's action gives keyboard
+ * users a stop inside it, from which the arrow keys scroll it.
+ */
+export const AdaptiveHeight: Story = {
+  render: () => (
+    <AppShell
+      contentPadding={6}
+      topNav={<AppTopNav />}
+      sideNav={<SideNavWithoutHeader />}
+      height="adaptive">
+      <div {...stylex.props(styles.longContent)}>
+        <div>
+          <Button label="New page" variant="primary" />
+        </div>
+        <MockContent paragraphs={20} />
+      </div>
+    </AppShell>
+  ),
+};
+
+/**
+ * The touch bar over scrolling content. Under a finger, when the page scrolls
+ * (`height="auto"`, as here, or `height="adaptive"` on a phone), the pinned
+ * header paints no background of its own, as an iOS 26 bar does. Scroll the
+ * tiles under it: once they have moved 10px under the bar, a veil of the
+ * bar's colour fades in at the top of the screen, and it fades out when they
+ * come back. With a mouse the header stays opaque.
+ */
+export const TouchBarOverContent: Story = {
+  render: () => (
+    <AppShell
+      contentPadding={0}
+      topNav={<AppTopNav />}
+      height="auto"
+      variant="surface">
+      <div {...stylex.props(styles.tiles)}>
+        {Array.from({length: 18}, (_, index) => (
+          <div
+            key={index}
+            {...stylex.props(
+              styles.tile,
+              TILE_COLORS[index % TILE_COLORS.length],
+            )}>
+            Tile {index + 1}
+          </div>
+        ))}
+      </div>
+    </AppShell>
+  ),
+};
+
 /**
  * Auto height mode with Field-based inputs. Scroll the inputs under the
  * sticky header — the header must stay above the input surfaces. Field