refactor(MobileNav): keep the closing dialog rendered through the layer runtime's presentation hold

.changeset/browser-support-on-screen-keyboard.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/cli': patch
+---
+
+[docs] The browser-support guide has a section on the on-screen keyboard: a fully expanded Tall BottomSheet and ChatLayout's composer measure it as the layout viewport's height minus the visual viewport's, and keep the focused field above it in Safari on iOS, Firefox for Android and Chrome on Android. In Chrome, by default (`interactive-widget=resizes-visual`), ChatLayout's composer rides the keyboard as Gboard slides it and a Tall BottomSheet adds its scroll room once Chrome reports the keyboard; with `interactive-widget=resizes-content` Chrome shrinks the page for the keyboard itself and neither changes. Your app owns its viewport `<meta>` element; Astryx never sets it.
+
+@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/chat-layout-rides-the-keyboard.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] ChatLayout keeps its composer on top of the software keyboard where the visual viewport shrinks for it, instead of leaving it underneath until the browser scrolls the whole page: in Safari on iOS (in the browser and as a home-screen app) and in Chrome on Android (on Gboard's measured slides) the dock rises and falls with the keyboard, in step with it, and in Firefox for Android it moves above the keyboard once Firefox reports it. Where a page sets `interactive-widget=resizes-content`, Chrome shrinks the page for the keyboard itself and the composer stays above it without moving. A conversation at its newest message stays there, and the rest of the transcript can still be scrolled above the composer. On a touch screen every way into the composer's text (a tap, the keyboard's previous and next buttons, Tab, the input's `focus()`) reaches it without the page scrolling; under a mouse the browser's own focus applies. The composer's dock is a group named "Message composer"; when the keyboard's Done ends typing, focus rests there (it is no tab stop), so the next tap or Tab starts from the composer. Under Reduce Motion the composer never travels: it cross-fades to its place above the keyboard on a touch screen. Nothing changes where no software keyboard appears.
+
+@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; no component uses them yet.
+
+@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: a scroll lock's page hold, finger scrolls, 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 second finger fails a one-finger pan that has not claimed, so the page can 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; no component uses them yet.
+
+@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-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; no component uses them yet.
+
+@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/keyboard-one-source.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] BottomSheet reads the on-screen keyboard from core's shared keyboard module. It now detects the keyboard from the browser's capabilities (a top-level document with a visual viewport, Chrome on Android included) instead of the user agent, measures the keyboard so that a page pan or a pinch zoom never reads as one and a pinch-zoomed page still reads the keyboard's full height, and lays a Tall sheet's keyboard room out through its own style rather than a CSS custom property. The browser-support guide documents Chrome on Android's `interactive-widget` viewport setting.
+
+@vjeux

.changeset/layer-exit-copy.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the layer runtime gains one exit copy for touch presentations that animate a popover out: a static, inert copy of the closing popover, shown only in the top layer where the popover was drawn, for the close to play on. Nothing uses it yet; no change in behavior.
+
+@vjeux

.changeset/layer-input-hold.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: one input hold for every layer (`Layer/inputHold`). While a layer presents, a touch, a press or a click anywhere reaches nothing (keys and assistive technology still act, and a pinch still zooms the page); while it dismisses, the same, and the layer's content is inert. The gesture host holds the layer's touches through its touch gates, and `isInputShield` lets a hit test see past a hold's shield. Not exported from the package entry point; no component uses it yet.
+
+@vjeux

.changeset/mobilenav-presentation-hold.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: MobileNav keeps its dialog rendered from the open until its delayed close has run through the layer runtime's presentation hold (Layer/presentationHold.ts). No behavior change.
+
+@cixzhang

.changeset/popover-presentation-hold.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: Popover keeps its chosen presentation (the sheet or the anchored layer, the touch grow or the pointer entrance) from the open until its close settles through the layer runtime's one presentation hold (Layer/presentationHold.ts). No behavior change.
+
+@cixzhang

.changeset/popover-uikit-presentation.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feature] Under a finger (a coarse primary pointer, on any touch device), Popover is presented like a native popover: it grows out of its trigger on UIKit's present spring, wide before tall, with its edge held on the trigger, and shrinks back into the trigger on the dismiss spring when it closes, on the compositor and interruptible both ways. With reduced motion it cross-fades in and out, opacity only, in 200 ms or less. A fine primary pointer (a mouse) keeps its entrance and the theme's motion. The shrink plays on the layer runtime's exit copy, of which Popover is the first user.
+
+@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/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-keyboard-notification.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the keyboard notifications' duration has its own export in the UIKit timing table, so code that reads only it bundles no other timing value. Not exported from the package entry point.
+
+@vjeux

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

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the touch presentations' animator plays any closed-form curve (such as a spring chasing a moving target) through `play`, with the same presentation values, velocities, stop and shared clock as a spring, and the Reduce Motion policy. 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-reduced-motion.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[chore] Internal: the touch presentations' animator follows design:reduced-motion (under Reduce Motion, an opacity-only cross-fade of 200 ms on a coarse pointer or after a touch release and an immediate change on any other pointer, with no option or theme value that keeps travel or lengthens the fade; an entrance or exit role orients a slide that changes no opacity), decided by its own planner module, and starts a call from rest when the browser commits it, as Core Animation does. 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 a release's momentum, and under Reduce Motion cross-fades a spring back from past an edge) 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

apps/docsite/next.config.mjs

@@ -9,9 +9,14 @@
  * @position Next.js configuration for the existing Vercel docsite deployment.
  */
 
-import {existsSync, readFileSync, readdirSync} from 'node:fs';
+import {existsSync, readFileSync, readdirSync, realpathSync} from 'node:fs';
+import {createRequire} from 'node:module';
 import {resolve} from 'node:path';
 
+const coreInternalModules = createRequire(import.meta.url)(
+  '../../scripts/core-internal-modules.cjs',
+);
+
 const playgroundCookieCompatibility = readFileSync(
   resolve(
     import.meta.dirname,
@@ -156,6 +161,28 @@ const nextConfig = {
         {'@astryxdesign/cli/api': 'module @astryxdesign/cli/api'},
       ];
     }
+    // Lab's build imports core's internal motion and gesture modules by their
+    // module paths, which core's "exports" do not list. Resolve each to the
+    // file core's own built components import, so a page keeps one gesture
+    // host and one animator per element.
+    const coreDir = realpathSync(
+      resolve(import.meta.dirname, 'node_modules/@astryxdesign/core'),
+    );
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        coreInternalModules.CORE_INTERNAL_SPECIFIER,
+        resource => {
+          const file = coreInternalModules.resolveCoreInternal(
+            resource.request,
+            {coreDir},
+          );
+          if (file != null) {
+            resource.request = file;
+          }
+        },
+      ),
+    );
+
     // Webpack's CSS @import resolver doesn't follow package.json "exports".
     // Map each theme's /theme.css subpath to the actual dist file.
     const themesDir = resolve(import.meta.dirname, '../../packages/themes');

apps/sandbox/vite.config.mts

@@ -15,6 +15,7 @@ import path from 'node:path';
 import {fileURLToPath} from 'node:url';
 import {createRequire} from 'node:module';
 import stylexResolution from '../../scripts/stylex-module-resolution.cjs';
+import coreInternalModules from '../../scripts/core-internal-modules.cjs';
 import {categories} from './src/app/sandboxPages';
 import {
   discoverRoutes,
@@ -33,6 +34,29 @@ let routes = discoverRoutes(
   categories.map(category => category.slug),
 );
 
+/**
+ * Lab's build imports core's internal motion and gesture modules by their
+ * module paths, which core's `exports` do not list. Resolve each to the file
+ * core's own built components import (its source under ASTRYX_SOURCE), so the
+ * page keeps one gesture host and one animator per element.
+ */
+function coreInternalModulePaths(): Plugin {
+  const coreDir = fs.realpathSync(
+    path.join(appDir, 'node_modules/@astryxdesign/core'),
+  );
+  const source = process.env.ASTRYX_SOURCE === '1';
+  return {
+    name: 'sandbox-core-internal-modules',
+    enforce: 'pre',
+    resolveId(specifier) {
+      return coreInternalModules.resolveCoreInternal(specifier, {
+        coreDir,
+        source,
+      });
+    },
+  };
+}
+
 function staticRoutes(): Plugin {
   const id = '\0virtual:sandbox-routes';
   let failed = false;
@@ -212,6 +236,7 @@ export default defineConfig({
         ],
       },
     }),
+    coreInternalModulePaths(),
     staticRoutes(),
   ],
   resolve: {

apps/storybook/stories/ChatLayout.stories.tsx

@@ -487,7 +487,14 @@ export const FullAIChat: StoryObj = {
     );
 
     return (
-      <div style={{height: '100vh', display: 'flex', flexDirection: 'column'}}>
+      <div
+        style={{
+          // The visible height, less the 16px the preview pads every story
+          // with on each side, so the composer rests on screen.
+          height: 'calc(100dvh - 32px)',
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <ChatLayout composer={composerEl}>
           <ChatMessageList>
             {messages.map(msg => {
@@ -827,7 +834,13 @@ export const PanelView: StoryObj = {
 export const WithEmptyState: StoryObj = {
   name: 'Empty State',
   render: () => (
-    <div style={{height: '100vh', display: 'flex', flexDirection: 'column'}}>
+    <div
+      style={{
+        // The visible height, less the preview's 16px padding on each side.
+        height: 'calc(100dvh - 32px)',
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
       <ChatLayout
         composer={
           <ChatComposer
@@ -861,7 +874,8 @@ export const Densities: StoryObj = {
       style={{
         display: 'flex',
         gap: 16,
-        height: '100vh',
+        // The visible height, less the preview's 16px padding on each side.
+        height: 'calc(100dvh - 32px)',
         padding: 16,
         boxSizing: 'border-box',
       }}>