@astryxdesign/core 0.5.2-canary.237d82a → 0.5.2-canary.28ce0ea

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2KD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA6Yf;yBA5Ze,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA4KD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAiZf;yBAhae,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -36,7 +36,7 @@ import { AppShellMobileContext } from "./AppShellMobileContext.js";
 import { mergeProps, isRenderable } from "../utils/index.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
-import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
+import { observeResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
@@ -105,6 +105,7 @@ const styles = {
     k1xSpc: "x78zum5",
     kXwgrk: "xdt5ytf",
     kVAEAm: "x1n2onr6",
+    kVQacm: "x7giv3",
     $$css: true
   },
   variantWash: {
@@ -294,6 +295,9 @@ export function AppShell({
   const navHasDividers = variant === 'section';
   const isElevated = variant === 'elevated';
   const navAreaStyle = variant === 'wash' || variant === 'elevated' ? styles.navAreaWash : variant === 'surface' ? styles.navAreaSurface : undefined;
+  // Section normally inherits the shell's surface background. Its auto-height
+  // header needs to paint that surface itself while content scrolls beneath it.
+  const headerAreaStyle = navAreaStyle ?? (isAuto && variant === 'section' ? styles.navAreaSurface : undefined);
   const contentAreaStyle = variant === 'wash' ? styles.contentBgWash : variant === 'elevated' && hasTopNav && hasSideNav && !isBelowBreakpoint ? styles.contentBgTransparent : variant === 'surface' || variant === 'elevated' ? styles.contentBgSurface : undefined;
 
   // Background for sticky elements in auto mode — must be opaque so content
@@ -316,8 +320,7 @@ export function AppShell({
       const height = headerEl.getBoundingClientRect().height;
       shellEl.style.setProperty('--_app-shell-header-height', `${height}px`);
     };
-    observeResize(headerEl, () => updateHeight());
-    return () => unobserveResize(headerEl);
+    return observeResize(headerEl, () => updateHeight());
   }, [isAuto]);
 
   // =========================================================================
@@ -395,7 +398,7 @@ export function AppShell({
     role: "banner",
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
   }) : undefined;
 
@@ -473,7 +476,7 @@ export function AppShell({
     role: headerContent == null ? 'banner' : undefined,
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: /*#__PURE__*/_jsx(LayoutHeader, {
       padding: 0,
       hasDivider: navHasDividers,

package/dist/Banner/Banner.d.ts

@@ -11,6 +11,11 @@
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
  *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
+ * - Description (themeProps 'banner-description'): the supporting line owns its
+ *   own colour and type, and the space between it and the title
+ * - The end area carries no target: it is a layout row (flex, wrap, edge
+ *   compensation) rather than a painted surface, and a theme that wants the
+ *   header to grow around its buttons sets `padding-block` on 'banner'
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - Children are collapsible by default: a toggle appears in the header end

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCA6Ob;yBAjQe,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAmPb;yBAvQe,MAAM"}

package/dist/Banner/Banner.js

@@ -15,6 +15,11 @@
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
  *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
+ * - Description (themeProps 'banner-description'): the supporting line owns its
+ *   own colour and type, and the space between it and the title
+ * - The end area carries no target: it is a layout row (flex, wrap, edge
+ *   compensation) rather than a painted surface, and a theme that wants the
+ *   header to grow around its buttons sets `padding-block` on 'banner'
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - Children are collapsible by default: a toggle appears in the header end
@@ -429,9 +434,9 @@ export function Banner({
           },
           children: title
         }), isRenderable(description) && /*#__PURE__*/_jsx("div", {
-          ...{
+          ...mergeProps(themeProps('banner-description'), {
             className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
-          },
+          }),
           children: description
         })]
       }), showEndArea && /*#__PURE__*/_jsxs("div", {

package/dist/Chat/ChatComposer.d.ts

@@ -46,8 +46,8 @@ export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
     /**
      * Resting elevation of the composer body. `low` (the default) keeps today's
      * raised look — low at rest, bumping to med on hover / focus. `none` flattens
-     * it and draws a border with the same rest / hover / focus treatment as a
-     * text input (emphasized border → accent on focus, with matching inset rings).
+     * it and draws a border. Keyboard focus in the editor adds the shared focus
+     * ring in either presentation; pointer focus does not add that ring.
      * @default 'low'
      */
     elevation?: 'none' | 'low';

package/dist/Chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AAoMD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiLpD;yBAjLe,YAAY"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AA8MD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA2MpD;yBA3Me,YAAY"}

package/dist/Chat/ChatComposer.js

@@ -33,6 +33,8 @@ import { ChatComposerContext } from "./ChatContext.js";
 import { ChatSendButton } from "./ChatSendButton.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
 
 // =============================================================================
 // Types
@@ -65,7 +67,8 @@ const styles = {
 
 // Resting elevation for the composer body, narrowed to two steps.
 // - `low` (default) preserves today's look: low at rest, bumping to med on
-//   hover / focus-within (a CSS-only interaction state the component owns).
+//   hover / focus-within. The WCAG focus indicator is a separate shared ring,
+//   gated to keyboard focus in the editor; the shadow change remains depth.
 // - `none` is flat; depth comes from a border + inset rings instead. The
 //   border is drawn *inside* the padding — its width is subtracted from every
 //   side (like Card) so total inset (border + padding) equals the elevated
@@ -88,6 +91,9 @@ const elevationStyles = {
     $$css: true
   }
 };
+function isComposerEditor(target) {
+  return target instanceof HTMLElement && target.matches('textarea, [contenteditable="true"], [role="textbox"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"]');
+}
 
 // =============================================================================
 // Component
@@ -134,6 +140,8 @@ export function ChatComposer(props) {
   } = props;
   const placeholder = placeholderFromProps ?? t('@astryx.chat.composer.placeholder');
   const [internalValue, setInternalValue] = useState('');
+  const [hasKeyboardEditorFocus, setHasKeyboardEditorFocus] = useState(false);
+  useInteractionModalityTracking();
   const isControlled = controlledValue !== undefined;
   const currentValue = isControlled ? controlledValue : internalValue;
   const updateValue = useCallback(newValue => {
@@ -175,6 +183,14 @@ export function ChatComposer(props) {
     const editable = bodyRef.current?.querySelector('[contenteditable="true"], textarea');
     editable?.focus();
   }, []);
+  const handleBodyFocusCapture = useCallback(event => {
+    setHasKeyboardEditorFocus(isComposerEditor(event.target) && getInteractionModality() === 'keyboard');
+  }, []);
+  const handleBodyBlurCapture = useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setHasKeyboardEditorFocus(false);
+    }
+  }, []);
   const statusEl = status ? /*#__PURE__*/_jsxs("div", {
     role: status.type === 'error' ? 'alert' : 'status',
     ...{
@@ -238,7 +254,10 @@ export function ChatComposer(props) {
       children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
         ref: bodyRef,
         onClick: handleBodyClick,
-        ...stylex.props(styles.body, elevationStyles[elevation], density === 'compact' && styles.compact, xstyle),
+        onPointerDownCapture: () => setHasKeyboardEditorFocus(false),
+        onFocusCapture: handleBodyFocusCapture,
+        onBlurCapture: handleBodyBlurCapture,
+        ...stylex.props(styles.body, elevationStyles[elevation], hasKeyboardEditorFocus && focusOutlineStyles.focusWithin, density === 'compact' && styles.compact, xstyle),
         children: [(headerActions || headerContext) && /*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj xe0p6wg"

package/dist/Chat/ChatComposerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}

package/dist/Chat/ChatComposerInput.js

@@ -30,7 +30,7 @@ import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/
 import { mergeProps, isImeKeyEvent } from "../utils/index.js";
 import { useTriggerMenu } from "./useTriggerMenu.js";
 import { useChatComposerTokens, isCustomToken } from "./useChatComposerTokens.js";
-import { ensureCaretInside, insertTextAtCursor } from "./chatComposerSelection.js";
+import { ensureCaretInside, insertTextAtCursor, isSelectionAtStart, isSelectionAtEnd, placeCaretAtEnd, getSelectionRangeInside, restoreSelectionRange } from "./chatComposerSelection.js";
 import { ChatPastedTextToken } from "./ChatPastedTextToken.js";
 import { useChatPasteAsToken } from "./useChatPasteAsToken.js";
 import { Badge } from "../Badge/index.js";
@@ -182,11 +182,65 @@ export function ChatComposerInput(props) {
   // when a parent attaches a ref — without this, paste-as-token would
   // silently no-op whenever `ChatComposerInput` is rendered without
   // a forwarded ref (e.g. inside `ChatComposer`).
+  /**
+   * Focus the editable and put the caret after the draft.
+   *
+   * A bare `focus()` is not enough: Chromium collapses the caret to the
+   * start of the content, which is the one position where ArrowUp means
+   * "recall history" — so focusing a composer that already holds a draft
+   * would arm the next ArrowUp to replace it. Landing after the text is
+   * also what a click on the composer's trailing space means.
+   */
+  /**
+   * Focus the editable, keeping a caret or selection the user already has
+   * inside it.
+   *
+   * A bare `focus()` is not enough on its own: Chromium collapses the caret
+   * to the start of the content, which is the one position where ArrowUp
+   * means "recall history" — so focusing a composer that already holds a
+   * draft would arm the next ArrowUp to replace it. But a consumer calling
+   * `focus()` to return the user to where they were must not have their
+   * caret moved either, so an existing in-editor selection is captured
+   * before focusing and restored after. Only when there is none does the
+   * caret land after the draft.
+   */
+  const focusEditable = useCallback(() => {
+    const editable = editableRef.current;
+    if (!editable) {
+      return;
+    }
+    // Read before focusing: `focus()` itself creates the offset-0 caret, so
+    // asking afterwards cannot tell the user's own caret from the engine's.
+    const existing = getSelectionRangeInside(editable);
+    editable.focus();
+    if (existing) {
+      restoreSelectionRange(existing);
+      return;
+    }
+    placeCaretAtEnd(editable);
+  }, []);
+
+  /**
+   * Focus the editable and put the caret after the draft, whatever the
+   * selection was.
+   *
+   * This is the composer shell's click-to-focus path: clicking the empty
+   * space after a draft means "put me after the text", so it overrides a
+   * stale caret rather than restoring one.
+   */
+  const focusEditableAtEnd = useCallback(() => {
+    const editable = editableRef.current;
+    if (!editable) {
+      return;
+    }
+    editable.focus();
+    placeCaretAtEnd(editable);
+  }, []);
   const handle = {
     insertToken: token => insertTokenRef.current(token),
     expandToken: id => tokens.expandToken(id),
     insertText: text => insertTextRef.current(text),
-    focus: () => editableRef.current?.focus(),
+    focus: focusEditable,
     getValue: () => serialize(editableRef.current ?? document.createElement('div'))
   };
   selfRef.current = handle;
@@ -201,12 +255,12 @@ export function ChatComposerInput(props) {
       return;
     }
     inputControlRef.current = {
-      focus: () => editableRef.current?.focus()
+      focus: focusEditableAtEnd
     };
     return () => {
       inputControlRef.current = null;
     };
-  }, [inputControlRef]);
+  }, [inputControlRef, focusEditableAtEnd]);
   useEffect(() => {
     if (controlledValue === undefined || !editableRef.current) {
       return;
@@ -373,12 +427,36 @@ export function ChatComposerInput(props) {
       return;
     }
 
-    // History navigation (only when trigger menu is not active)
+    // History navigation (only when trigger menu is not active).
+    // Recall only at the text boundaries so the caret can still move
+    // between lines in a multi-line draft: ArrowUp recalls the
+    // previous message when the caret is at the very start, ArrowDown
+    // steps forward when it's at the very end. A recalled message is
+    // shown fully selected (see `selectAll` below); that spans both
+    // boundaries at once, so repeated presses keep stepping through
+    // history. Mid-text, we bail before `preventDefault` and let the
+    // browser move the caret up/down a line.
     if (hasHistory && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
       if (!editableRef.current) {
         return;
       }
-      const text = serialize(editableRef.current);
+      const editable = editableRef.current;
+      // Last-resort fallback for a caret we never placed: an engine that
+      // leaves no Range inside the editable on focus, or a consumer that
+      // focused the DOM node directly instead of through our focus
+      // control. Place it where the focus control would have, so a
+      // pending draft is never mistaken for a caret at the start. A no-op
+      // whenever a real caret exists — including one the user moved.
+      ensureCaretInside(editable);
+      const isCollapsed = window.getSelection()?.isCollapsed ?? true;
+      const atStart = isSelectionAtStart(editable);
+      const atEnd = isSelectionAtEnd(editable);
+      const canRecallPrev = atStart && (isCollapsed || atEnd);
+      const canRecallNext = atEnd && (isCollapsed || atStart);
+      if (e.key === 'ArrowUp' ? !canRecallPrev : !canRecallNext) {
+        return;
+      }
+      const text = serialize(editable);
       const history = historyRef.current;
       if (history.length === 0) {
         return;

package/dist/Chat/chatComposerSelection.d.ts

@@ -7,31 +7,93 @@
  * Selection helpers for the contentEditable chat input. Both the
  * imperative `insertToken` / `insertText` APIs and the paste pipeline
  * need a valid Range inside the editable before they can mutate the
- * DOM. Browsers do NOT create a Selection range when an element is
- * programmatically focused — a Range only exists once the user has
- * clicked inside the editable or we've created one explicitly.
+ * DOM, and history recall needs to know where the caret sits.
  *
- * `ensureCaretInside` centralizes the fallback: if the current
- * Selection has no Range inside the given editable, place a collapsed
- * caret at the end of the editable. Callers can then read
- * `selection.getRangeAt(0)` safely.
+ * What a programmatic `focus()` does to the Selection is browser- and
+ * state-dependent, and it is never what a click on the composer's padding
+ * means. Measured in Chromium: focusing a contentEditable collapses the
+ * caret to offset 0 — the *start* of the draft — whether or not a
+ * selection existed before, and whether the editable is empty or not.
+ * Other engines may instead leave no Range inside the editable at all.
+ *
+ * So the composer never infers the caret from a bare `focus()`:
+ * - `placeCaretAtEnd` states the caret outright, and is what the composer
+ *   shell's click-to-focus uses, because clicking the space after a draft
+ *   means "put me after the text" in every chat composer.
+ * - `getSelectionRangeInside` + `restoreSelectionRange` let the imperative
+ *   `focus()` keep a caret or selection the user already had: it is read
+ *   before focusing, since afterwards the engine's own caret is
+ *   indistinguishable from theirs.
+ * - `ensureCaretInside` is the weaker fallback for callers that only
+ *   need *a* valid Range (paste, imperative insertion): it respects a
+ *   caret that already exists and creates one at the end otherwise.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerInput.tsx (consumer)
  * - /packages/core/src/Chat/useChatComposerTokens.ts (consumer)
  */
+/**
+ * The current Selection's range when it lies inside `editable`, or `null`.
+ *
+ * Callers use this to read the caret *before* focusing, because `focus()`
+ * creates a caret of its own and afterwards the two are indistinguishable.
+ * The range is cloned, so later DOM work cannot mutate the saved position.
+ */
+export declare function getSelectionRangeInside(editable: HTMLElement): Range | null;
+/** Make `range` the current Selection again. */
+export declare function restoreSelectionRange(range: Range): void;
+/**
+ * Collapse the Selection to the very end of `editable`'s content,
+ * replacing whatever the Selection held before.
+ *
+ * Unlike {@link ensureCaretInside} this is unconditional: a caret the
+ * browser placed on `focus()` is overwritten, which is the point — that
+ * caret lands at the start of the draft, where ArrowUp means "recall
+ * history" and would discard what the user had typed.
+ *
+ * Returns `true` when the caret was placed, `false` if the Selection API
+ * is unavailable (e.g. a detached document).
+ */
+export declare function placeCaretAtEnd(editable: HTMLElement): boolean;
 /**
  * Ensure the current Selection has a Range inside `editable`.
  *
  * If `window.getSelection()` already has a Range whose `startContainer`
- * is inside `editable`, this is a no-op. Otherwise a collapsed caret
- * is placed at the end of `editable` and the Selection is updated.
+ * is inside `editable`, this is a no-op — including the start-of-draft
+ * caret a `focus()` leaves behind, which is why callers that care where
+ * the caret lands want {@link placeCaretAtEnd} instead. Otherwise a
+ * collapsed caret is placed at the end of `editable`.
  *
  * Returns the live `Selection` on success, or `null` if no Selection
  * is available at all (e.g. detached document, JSDOM without selection
  * support).
  */
 export declare function ensureCaretInside(editable: HTMLElement): Selection | null;
+/**
+ * Whether the current selection's start boundary sits at the very
+ * beginning of `editable`'s content.
+ *
+ * Used by the composer to decide when ArrowUp should recall message
+ * history versus move the caret up a line: history is only recalled
+ * when the caret is at the very start of the draft. This handles both
+ * the editable root and offset 0 of its leading text node without
+ * cloning the draft's contents.
+ *
+ * Returns `false` when there is no selection, the range is not inside
+ * `editable`, or the boundary APIs are unavailable — callers treat
+ * that as "not at the boundary" and let the browser move the caret.
+ */
+export declare function isSelectionAtStart(editable: HTMLElement): boolean;
+/**
+ * Whether the current selection's end boundary sits at the very end of
+ * `editable`'s content.
+ *
+ * The ArrowDown counterpart to {@link isSelectionAtStart}: history is
+ * only stepped forward when the caret is at the very end of the draft.
+ *
+ * Returns `false` under the same conditions as {@link isSelectionAtStart}.
+ */
+export declare function isSelectionAtEnd(editable: HTMLElement): boolean;
 /**
  * Insert plain text at the current selection, scoped to `editable`.
  *

package/dist/Chat/chatComposerSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatComposerSelection.d.ts","sourceRoot":"","sources":["../../src/Chat/chatComposerSelection.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,CAmBzE;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,WAAW,EACrB,IAAI,EAAE,MAAM,GACX,OAAO,CAiBT"}
+{"version":3,"file":"chatComposerSelection.d.ts","sourceRoot":"","sources":["../../src/Chat/chatComposerSelection.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CAa3E;AAED,gDAAgD;AAChD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAOxD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,WAAW,GAAG,OAAO,CAW9D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,CAmBzE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,WAAW,GAAG,OAAO,CAYjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,OAAO,CAO/D;AAiED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,WAAW,EACrB,IAAI,EAAE,MAAM,GACX,OAAO,CAiBT"}

package/dist/Chat/chatComposerSelection.js

@@ -11,26 +11,94 @@
  * Selection helpers for the contentEditable chat input. Both the
  * imperative `insertToken` / `insertText` APIs and the paste pipeline
  * need a valid Range inside the editable before they can mutate the
- * DOM. Browsers do NOT create a Selection range when an element is
- * programmatically focused — a Range only exists once the user has
- * clicked inside the editable or we've created one explicitly.
+ * DOM, and history recall needs to know where the caret sits.
  *
- * `ensureCaretInside` centralizes the fallback: if the current
- * Selection has no Range inside the given editable, place a collapsed
- * caret at the end of the editable. Callers can then read
- * `selection.getRangeAt(0)` safely.
+ * What a programmatic `focus()` does to the Selection is browser- and
+ * state-dependent, and it is never what a click on the composer's padding
+ * means. Measured in Chromium: focusing a contentEditable collapses the
+ * caret to offset 0 — the *start* of the draft — whether or not a
+ * selection existed before, and whether the editable is empty or not.
+ * Other engines may instead leave no Range inside the editable at all.
+ *
+ * So the composer never infers the caret from a bare `focus()`:
+ * - `placeCaretAtEnd` states the caret outright, and is what the composer
+ *   shell's click-to-focus uses, because clicking the space after a draft
+ *   means "put me after the text" in every chat composer.
+ * - `getSelectionRangeInside` + `restoreSelectionRange` let the imperative
+ *   `focus()` keep a caret or selection the user already had: it is read
+ *   before focusing, since afterwards the engine's own caret is
+ *   indistinguishable from theirs.
+ * - `ensureCaretInside` is the weaker fallback for callers that only
+ *   need *a* valid Range (paste, imperative insertion): it respects a
+ *   caret that already exists and creates one at the end otherwise.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerInput.tsx (consumer)
  * - /packages/core/src/Chat/useChatComposerTokens.ts (consumer)
  */
 
+/**
+ * The current Selection's range when it lies inside `editable`, or `null`.
+ *
+ * Callers use this to read the caret *before* focusing, because `focus()`
+ * creates a caret of its own and afterwards the two are indistinguishable.
+ * The range is cloned, so later DOM work cannot mutate the saved position.
+ */
+export function getSelectionRangeInside(editable) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  if (!editable.contains(range.startContainer) || !editable.contains(range.endContainer)) {
+    return null;
+  }
+  return range.cloneRange();
+}
+
+/** Make `range` the current Selection again. */
+export function restoreSelectionRange(range) {
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+/**
+ * Collapse the Selection to the very end of `editable`'s content,
+ * replacing whatever the Selection held before.
+ *
+ * Unlike {@link ensureCaretInside} this is unconditional: a caret the
+ * browser placed on `focus()` is overwritten, which is the point — that
+ * caret lands at the start of the draft, where ArrowUp means "recall
+ * history" and would discard what the user had typed.
+ *
+ * Returns `true` when the caret was placed, `false` if the Selection API
+ * is unavailable (e.g. a detached document).
+ */
+export function placeCaretAtEnd(editable) {
+  const selection = window.getSelection();
+  if (!selection) {
+    return false;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(editable);
+  range.collapse(false); // collapse to end
+  selection.removeAllRanges();
+  selection.addRange(range);
+  return true;
+}
+
 /**
  * Ensure the current Selection has a Range inside `editable`.
  *
  * If `window.getSelection()` already has a Range whose `startContainer`
- * is inside `editable`, this is a no-op. Otherwise a collapsed caret
- * is placed at the end of `editable` and the Selection is updated.
+ * is inside `editable`, this is a no-op — including the start-of-draft
+ * caret a `focus()` leaves behind, which is why callers that care where
+ * the caret lands want {@link placeCaretAtEnd} instead. Otherwise a
+ * collapsed caret is placed at the end of `editable`.
  *
  * Returns the live `Selection` on success, or `null` if no Selection
  * is available at all (e.g. detached document, JSDOM without selection
@@ -55,6 +123,84 @@ export function ensureCaretInside(editable) {
   return selection;
 }
 
+/**
+ * Whether the current selection's start boundary sits at the very
+ * beginning of `editable`'s content.
+ *
+ * Used by the composer to decide when ArrowUp should recall message
+ * history versus move the caret up a line: history is only recalled
+ * when the caret is at the very start of the draft. This handles both
+ * the editable root and offset 0 of its leading text node without
+ * cloning the draft's contents.
+ *
+ * Returns `false` when there is no selection, the range is not inside
+ * `editable`, or the boundary APIs are unavailable — callers treat
+ * that as "not at the boundary" and let the browser move the caret.
+ */
+export function isSelectionAtStart(editable) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return false;
+  }
+  const range = selection.getRangeAt(0);
+  return isBoundaryAtEdge(editable, range.startContainer, range.startOffset, 'start');
+}
+
+/**
+ * Whether the current selection's end boundary sits at the very end of
+ * `editable`'s content.
+ *
+ * The ArrowDown counterpart to {@link isSelectionAtStart}: history is
+ * only stepped forward when the caret is at the very end of the draft.
+ *
+ * Returns `false` under the same conditions as {@link isSelectionAtStart}.
+ */
+export function isSelectionAtEnd(editable) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return false;
+  }
+  const range = selection.getRangeAt(0);
+  return isBoundaryAtEdge(editable, range.endContainer, range.endOffset, 'end');
+}
+
+/**
+ * Check whether a Range boundary is at an edge of `editable` without
+ * materializing the content before or after it. Chromium represents a caret
+ * at the start of non-empty contenteditables as the first text node at offset
+ * zero (and likewise uses the last text node's length at the end). Those are
+ * distinct DOM boundary points from the editable's child offsets, so
+ * `compareBoundaryPoints` cannot be used here.
+ */
+function isBoundaryAtEdge(editable, container, offset, edge) {
+  if (!editable.contains(container) || !isAtNodeEdge(container, offset, edge)) {
+    return false;
+  }
+  for (let node = container; node && node !== editable;) {
+    if (hasContentSibling(node, edge)) {
+      return false;
+    }
+    node = node.parentNode;
+  }
+  return true;
+}
+function isAtNodeEdge(node, offset, edge) {
+  if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE) {
+    return edge === 'start' ? offset === 0 : offset === (node.nodeValue?.length ?? 0);
+  }
+  return edge === 'start' ? offset === 0 : offset === node.childNodes.length;
+}
+function hasContentSibling(node, edge) {
+  for (let sibling = edge === 'start' ? node.previousSibling : node.nextSibling; sibling; sibling = edge === 'start' ? sibling.previousSibling : sibling.nextSibling) {
+    // Elements (including <br> and tokens) represent a content boundary even
+    // when they have no text. Empty text nodes and comments do not.
+    if (sibling.nodeType === Node.ELEMENT_NODE || sibling.nodeType === Node.TEXT_NODE && sibling.nodeValue !== '') {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Insert plain text at the current selection, scoped to `editable`.
  *