@tensor_1/react 2.48.0 → 2.49.1

package/dist/components/Toast.js

@@ -1,12 +1,91 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
+import { tokenMs } from "../motion.js";
 import { XIcon } from "../icons/components.js";
 import { toast as defaultToast } from "../toast-store.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const SWIPE_VELOCITY = 0.11;
+const SWIPE_SLOP = 6;
+const SWIPE_WINDOW = 100;
+function releaseVelocity(samples, x, t) {
+  const recent = samples.filter((s) => t - s.t <= SWIPE_WINDOW);
+  if (recent.length === 0) return 0;
+  return (x - recent[0].x) / Math.max(1, t - recent[0].t);
+}
+function useSwipeToDismiss(onClose, own) {
+  const drag = useRef(null);
+  const end = (e) => {
+    const d = drag.current;
+    drag.current = null;
+    if (!d?.active || !onClose) return;
+    const el = e.currentTarget;
+    el.removeAttribute("data-swiping");
+    const v = releaseVelocity(d.samples, e.clientX, e.timeStamp);
+    const fling = Math.abs(v) > SWIPE_VELOCITY && Math.sign(v) === Math.sign(d.dx);
+    if (e.type === "pointerup" && (fling || Math.abs(d.dx) > el.offsetWidth / 3)) {
+      if (!prefersReducedMotion()) el.style.translate = `${Math.sign(d.dx) * (el.offsetWidth + 32)}px 0`;
+      onClose();
+    } else {
+      el.style.translate = "";
+    }
+  };
+  return {
+    onPointerDown: (e) => {
+      own.onPointerDown?.(e);
+      if (!onClose || e.defaultPrevented || e.button !== 0) return;
+      if (e.target.closest('button, a, input, textarea, select, [role="button"]')) return;
+      drag.current = { id: e.pointerId, x0: e.clientX, y0: e.clientY, dx: 0, samples: [{ x: e.clientX, t: e.timeStamp }], active: false };
+    },
+    onPointerMove: (e) => {
+      own.onPointerMove?.(e);
+      const d = drag.current;
+      if (!d || d.id !== e.pointerId) return;
+      const dx = e.clientX - d.x0;
+      if (!d.active) {
+        if (Math.abs(dx) < SWIPE_SLOP) return;
+        if (Math.abs(e.clientY - d.y0) > Math.abs(dx)) {
+          drag.current = null;
+          return;
+        }
+        d.active = true;
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        e.currentTarget.setAttribute("data-swiping", "");
+      }
+      d.samples = [...d.samples.filter((s) => e.timeStamp - s.t <= SWIPE_WINDOW), { x: e.clientX, t: e.timeStamp }];
+      d.dx = dx;
+      e.currentTarget.style.translate = `${dx}px 0`;
+    },
+    onPointerUp: (e) => {
+      own.onPointerUp?.(e);
+      end(e);
+    },
+    onPointerCancel: (e) => {
+      own.onPointerCancel?.(e);
+      end(e);
+    }
+  };
+}
+function Toast({
+  title,
+  message,
+  tone,
+  icon,
+  action,
+  onClose,
+  leaving,
+  dismissLabel: dismissLabelProp,
+  className,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  ...props
+}) {
   const uixLabels = useUixLabels();
   const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
@@ -29,6 +108,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
     }
     onClose?.();
   };
+  const swipe = useSwipeToDismiss(onClose, { onPointerDown, onPointerMove, onPointerUp, onPointerCancel });
   const ownLiveRegion = assertive || !toaster;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -38,6 +118,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
       role: ownLiveRegion ? assertive ? "alert" : "status" : void 0,
       "aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
       ...props,
+      ...swipe,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsxs("div", { className: "uix-toast__body", ref: bodyRef, children: [
@@ -169,6 +250,28 @@ function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.
     return () => document.removeEventListener("visibilitychange", sync);
   }, []);
   useToastTimers(store, visible, hovered || focused || hidden);
+  const regionRef = useRef(null);
+  const tops = useRef(/* @__PURE__ */ new Map());
+  useIsomorphicLayoutEffect(() => {
+    const region = regionRef.current;
+    if (!region) return;
+    const base = region.getBoundingClientRect().top;
+    const next = /* @__PURE__ */ new Map();
+    const glide = !prefersReducedMotion();
+    for (const el of Array.from(region.querySelectorAll(":scope > [data-toast-id]"))) {
+      const id = el.dataset.toastId;
+      const top = base + el.offsetTop;
+      next.set(id, top);
+      const before = tops.current.get(id);
+      if (!glide || before === void 0 || Math.abs(before - top) < 1 || typeof el.animate !== "function") continue;
+      el.animate([{ transform: `translateY(${before - top}px)` }, { transform: "translateY(0)" }], {
+        duration: tokenMs("--uix-dur", 160, el),
+        easing: getComputedStyle(el).getPropertyValue("--uix-ease-out").trim() || "ease-out",
+        composite: "add"
+      });
+    }
+    tops.current = next;
+  });
   const handleKeyDown = (event) => {
     onKeyDown?.(event);
     if (event.defaultPrevented || event.key !== "Escape") return;
@@ -181,6 +284,7 @@ function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.
   return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: regionRef,
       className: cx("uix-toaster", className),
       role: "region",
       "aria-label": regionLabel,

package/dist/components/Tooltip.js

@@ -4,11 +4,15 @@ import { cloneElement, isValidElement, useEffect, useId, useLayoutEffect, useRef
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
 import { KbdCombo, isKeyShortcut, spokenKeys, useKbdPlatform } from "./Kbd.js";
+import { markKeyOpened, tokenMs, watchInputModality } from "../motion.js";
+const group = { open: 0, lastClosed: -Infinity, current: null };
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
+  const openTimer = useRef(null);
+  const shown = useRef(false);
   const [open, setOpen] = useState(false);
   const id = useId();
   const platform = useKbdPlatform();
@@ -16,37 +20,81 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
   const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
   const keys = own && own.length > 0 ? own : null;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  useEffect(() => {
+    watchInputModality();
+  }, []);
   const cancelClose = () => {
     if (closeTimer.current != null) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   };
-  const show = () => {
-    cancelClose();
+  const cancelOpen = () => {
+    if (openTimer.current != null) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  };
+  const reveal = (instant) => {
+    cancelOpen();
+    if (group.current && group.current !== self) group.current.current(true);
+    group.current = self;
     const b = bubbleRef.current;
     if (b && !b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
+      markKeyOpened(b);
       try {
         b.showPopover();
       } catch {
       }
     }
+    if (!shown.current) {
+      shown.current = true;
+      group.open += 1;
+    }
     setOpen(true);
   };
-  const hide = () => {
+  const show = (via) => {
+    cancelClose();
+    if (shown.current) return;
+    const warm = group.open > 0 || performance.now() - group.lastClosed < tokenMs("--uix-delay-tooltip-skip", 300);
+    if (via === "focus" || warm) {
+      reveal(via === "pointer");
+      return;
+    }
+    if (openTimer.current == null) openTimer.current = window.setTimeout(() => reveal(false), tokenMs("--uix-delay-tooltip", 400));
+  };
+  const hide = (instant = false) => {
     cancelClose();
+    cancelOpen();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
       try {
         b.hidePopover();
       } catch {
       }
     }
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     setOpen(false);
   };
+  const self = useRef(hide);
+  self.current = hide;
   const scheduleHide = () => {
     cancelClose();
-    closeTimer.current = window.setTimeout(hide, 100);
+    closeTimer.current = window.setTimeout(() => {
+      closeTimer.current = null;
+      try {
+        if (triggerRef.current?.matches(":hover")) return;
+      } catch {
+      }
+      hide();
+    }, 100);
   };
   useIsomorphicLayoutEffect(() => {
     if (!open) return void 0;
@@ -61,6 +109,13 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
   }, [open]);
   useEffect(() => () => {
     if (closeTimer.current != null) clearTimeout(closeTimer.current);
+    if (openTimer.current != null) clearTimeout(openTimer.current);
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -83,10 +138,10 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
       className: cx("uix-tooltip", className),
       "aria-describedby": single ? void 0 : description,
       tabIndex: single ? void 0 : 0,
-      onMouseEnter: show,
+      onMouseEnter: () => show("pointer"),
       onMouseLeave: scheduleHide,
-      onFocus: show,
-      onBlur: hide,
+      onFocus: () => show("focus"),
+      onBlur: () => hide(),
       ...props,
       children: [
         child,

package/dist/emoji.cjs

@@ -169,12 +169,17 @@ function removeAnchorName(el, name) {
   else el.style.removeProperty("anchor-name");
 }
 function translationOf(el) {
-  const t = getComputedStyle(el).transform;
+  const style = getComputedStyle(el);
+  const t = style.transform;
   if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
   try {
     const m = new DOMMatrixReadOnly(t);
+    const [ox = 0, oy = 0] = style.transformOrigin.split(" ").map((v) => parseFloat(v) || 0);
+    const cx2 = el.offsetWidth / 2 - ox;
+    const cy = el.offsetHeight / 2 - oy;
+    const p = m.transformPoint({ x: cx2, y: cy });
     const z = zoomOf(el);
-    return { x: m.m41 * z, y: m.m42 * z };
+    return { x: (p.x - cx2) * z, y: (p.y - cy) * z };
   } catch {
     return { x: 0, y: 0 };
   }
@@ -271,6 +276,13 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
     if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    if (measured) {
+      const clamp2 = (v, max) => Math.min(Math.max(v, 0), max);
+      const ox = pos.side === "left" ? size.width : pos.side === "right" ? 0 : clamp2(a.x + a.width / 2 - pos.x, size.width);
+      const oy = pos.side === "top" ? size.height : pos.side === "bottom" ? 0 : clamp2(a.y + a.height / 2 - pos.y, size.height);
+      const origin = `${Math.round(ox / zoom)}px ${Math.round(oy / zoom)}px`;
+      if (s.getPropertyValue("--uix-anchor-origin") !== origin) s.setProperty("--uix-anchor-origin", origin);
+    }
     const writeFixed = (at) => {
       const left2 = `${Math.round(at.x / zoom)}px`;
       const top2 = `${Math.round(at.y / zoom)}px`;
@@ -367,6 +379,33 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
   return reposition;
 }
 
+// src/motion.ts
+var KEY_OPENED = "data-uix-key-opened";
+var keyboard = false;
+var watching = false;
+function watchInputModality() {
+  if (watching || typeof document === "undefined") return;
+  watching = true;
+  document.addEventListener("keydown", (event) => {
+    if (!["Shift", "Control", "Alt", "Meta"].includes(event.key)) keyboard = true;
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    keyboard = false;
+  }, true);
+}
+function markKeyOpened(el) {
+  if (!el) return;
+  if (keyboard) el.setAttribute(KEY_OPENED, "");
+  else el.removeAttribute(KEY_OPENED);
+}
+function tokenMs(name, fallback, el) {
+  if (typeof getComputedStyle === "undefined" || typeof document === "undefined") return fallback;
+  const raw = getComputedStyle(el ?? document.documentElement).getPropertyValue(name).trim();
+  const m = /^(-?\d*\.?\d+)(ms|s)$/.exec(raw);
+  if (!m) return fallback;
+  return m[2] === "s" ? Number(m[1]) * 1e3 : Number(m[1]);
+}
+
 // src/components/Popover.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var useIsomorphicLayoutEffect2 = typeof document !== "undefined" ? import_react2.useLayoutEffect : import_react2.useEffect;
@@ -420,6 +459,14 @@ function Popover({
       el.hidePopover();
     } : void 0
   });
+  (0, import_react2.useEffect)(() => {
+    watchInputModality();
+    const el = ref.current;
+    if (!el) return;
+    const mark = () => markKeyOpened(el);
+    el.addEventListener("beforetoggle", mark);
+    return () => el.removeEventListener("beforetoggle", mark);
+  }, []);
   (0, import_react2.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
@@ -556,9 +603,9 @@ function buildEmojiData(locale, compact, messages) {
   const sorted = [...compact].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   for (const item of sorted) {
     if (item.group === void 0) continue;
-    const group = groupIndex.get(item.group);
-    if (group === void 0) continue;
-    const entry = { emoji: item.unicode, name: item.label, tags: item.tags ?? [], group };
+    const group2 = groupIndex.get(item.group);
+    if (group2 === void 0) continue;
+    const entry = { emoji: item.unicode, name: item.label, tags: item.tags ?? [], group: group2 };
     emojis.push(entry);
     names.set(item.unicode, item.label);
     names.set(item.unicode.replace(/️/g, ""), item.label);
@@ -830,8 +877,8 @@ function EmojiPicker({
     if (quickPicks?.length) list.push({ key: "quick", title: labels.quickPicks, emojis: [...new Set(quickPicks)] });
     if (recent.length) list.push({ key: "recent", title: labels.recent, emojis: recent });
     if (data) {
-      data.groups.forEach((group, index) => {
-        list.push({ key: group.key, title: group.name, emojis: data.emojis.filter((e) => e.group === index).map((e) => e.emoji) });
+      data.groups.forEach((group2, index) => {
+        list.push({ key: group2.key, title: group2.name, emojis: data.emojis.filter((e) => e.group === index).map((e) => e.emoji) });
       });
     }
     return list;
@@ -1138,11 +1185,14 @@ function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
 
 // src/components/Tooltip.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var group = { open: 0, lastClosed: -Infinity, current: null };
 var useIsomorphicLayoutEffect4 = typeof document !== "undefined" ? import_react6.useLayoutEffect : import_react6.useEffect;
 function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = (0, import_react6.useRef)(null);
   const bubbleRef = (0, import_react6.useRef)(null);
   const closeTimer = (0, import_react6.useRef)(null);
+  const openTimer = (0, import_react6.useRef)(null);
+  const shown = (0, import_react6.useRef)(false);
   const [open, setOpen] = (0, import_react6.useState)(false);
   const id = (0, import_react6.useId)();
   const platform = useKbdPlatform();
@@ -1150,37 +1200,81 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
   const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
   const keys = own && own.length > 0 ? own : null;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  (0, import_react6.useEffect)(() => {
+    watchInputModality();
+  }, []);
   const cancelClose = () => {
     if (closeTimer.current != null) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   };
-  const show = () => {
-    cancelClose();
+  const cancelOpen = () => {
+    if (openTimer.current != null) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  };
+  const reveal = (instant) => {
+    cancelOpen();
+    if (group.current && group.current !== self) group.current.current(true);
+    group.current = self;
     const b = bubbleRef.current;
     if (b && !b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
+      markKeyOpened(b);
       try {
         b.showPopover();
       } catch {
       }
     }
+    if (!shown.current) {
+      shown.current = true;
+      group.open += 1;
+    }
     setOpen(true);
   };
-  const hide = () => {
+  const show = (via) => {
     cancelClose();
+    if (shown.current) return;
+    const warm = group.open > 0 || performance.now() - group.lastClosed < tokenMs("--uix-delay-tooltip-skip", 300);
+    if (via === "focus" || warm) {
+      reveal(via === "pointer");
+      return;
+    }
+    if (openTimer.current == null) openTimer.current = window.setTimeout(() => reveal(false), tokenMs("--uix-delay-tooltip", 400));
+  };
+  const hide = (instant = false) => {
+    cancelClose();
+    cancelOpen();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
       try {
         b.hidePopover();
       } catch {
       }
     }
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     setOpen(false);
   };
+  const self = (0, import_react6.useRef)(hide);
+  self.current = hide;
   const scheduleHide = () => {
     cancelClose();
-    closeTimer.current = window.setTimeout(hide, 100);
+    closeTimer.current = window.setTimeout(() => {
+      closeTimer.current = null;
+      try {
+        if (triggerRef.current?.matches(":hover")) return;
+      } catch {
+      }
+      hide();
+    }, 100);
   };
   useIsomorphicLayoutEffect4(() => {
     if (!open) return void 0;
@@ -1195,6 +1289,13 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
   }, [open]);
   (0, import_react6.useEffect)(() => () => {
     if (closeTimer.current != null) clearTimeout(closeTimer.current);
+    if (openTimer.current != null) clearTimeout(openTimer.current);
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -1217,10 +1318,10 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
       className: cx("uix-tooltip", className),
       "aria-describedby": single ? void 0 : description,
       tabIndex: single ? void 0 : 0,
-      onMouseEnter: show,
+      onMouseEnter: () => show("pointer"),
       onMouseLeave: scheduleHide,
-      onFocus: show,
-      onBlur: hide,
+      onFocus: () => show("focus"),
+      onBlur: () => hide(),
       ...props,
       children: [
         child,

package/dist/hooks/useAnchoredPosition.js

@@ -29,12 +29,17 @@ function removeAnchorName(el, name) {
   else el.style.removeProperty("anchor-name");
 }
 function translationOf(el) {
-  const t = getComputedStyle(el).transform;
+  const style = getComputedStyle(el);
+  const t = style.transform;
   if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
   try {
     const m = new DOMMatrixReadOnly(t);
+    const [ox = 0, oy = 0] = style.transformOrigin.split(" ").map((v) => parseFloat(v) || 0);
+    const cx = el.offsetWidth / 2 - ox;
+    const cy = el.offsetHeight / 2 - oy;
+    const p = m.transformPoint({ x: cx, y: cy });
     const z = zoomOf(el);
-    return { x: m.m41 * z, y: m.m42 * z };
+    return { x: (p.x - cx) * z, y: (p.y - cy) * z };
   } catch {
     return { x: 0, y: 0 };
   }
@@ -131,6 +136,13 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
     if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    if (measured) {
+      const clamp = (v, max) => Math.min(Math.max(v, 0), max);
+      const ox = pos.side === "left" ? size.width : pos.side === "right" ? 0 : clamp(a.x + a.width / 2 - pos.x, size.width);
+      const oy = pos.side === "top" ? size.height : pos.side === "bottom" ? 0 : clamp(a.y + a.height / 2 - pos.y, size.height);
+      const origin = `${Math.round(ox / zoom)}px ${Math.round(oy / zoom)}px`;
+      if (s.getPropertyValue("--uix-anchor-origin") !== origin) s.setProperty("--uix-anchor-origin", origin);
+    }
     const writeFixed = (at) => {
       const left2 = `${Math.round(at.x / zoom)}px`;
       const top2 = `${Math.round(at.y / zoom)}px`;

package/dist/hooks/useDeferredReorder.d.ts

@@ -0,0 +1,32 @@
+import { PointerEvent, FocusEvent } from 'react';
+
+type Key = string | number;
+interface UseDeferredReorderResult<T> {
+    /** The items to render: the new data, in the order that was showing while the list is held. */
+    items: T[];
+    /** A new order is waiting until the pointer and focus leave the list. Say so if it matters ("New order — move away to apply"). */
+    held: boolean;
+    /** Spread on the list element. */
+    listProps: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+    };
+}
+/**
+ * Never re-sort under the pointer (HAR-2586, motion standard §2.5). While a mouse pointer is
+ * over the list, or keyboard focus is inside it, a new order from live data waits: rows keep
+ * their places (their content still updates), new rows join at the end, removed rows still go.
+ * When the pointer and keyboard focus leave, the new order applies — with `MotionList`, as a
+ * glide. A click alone does not hold the list (focus from a click is not keyboard focus), and
+ * a hold whose focused row disappeared lets go.
+ *
+ * ```tsx
+ * const queue = useDeferredReorder(liveRows, (row) => row.id);
+ * <MotionList {...queue.listProps} items={queue.items} getKey={(row) => row.id} renderItem={…} />
+ * ```
+ */
+declare function useDeferredReorder<T>(items: readonly T[], getKey: (item: T) => Key): UseDeferredReorderResult<T>;
+
+export { type UseDeferredReorderResult, useDeferredReorder };

package/dist/hooks/useDeferredReorder.js

@@ -0,0 +1,47 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function useDeferredReorder(items, getKey) {
+  const [pointer, setPointer] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const holding = pointer || focus;
+  const keyOf = useRef(getKey);
+  keyOf.current = getKey;
+  const shownOrder = useRef(items.map(getKey));
+  const list = useRef(null);
+  const shown = useMemo(() => {
+    const key = keyOf.current;
+    if (!holding) return [...items];
+    const byKey = new Map(items.map((item) => [key(item), item]));
+    const kept = shownOrder.current.filter((k) => byKey.has(k)).map((k) => byKey.get(k));
+    const keptKeys = new Set(shownOrder.current);
+    const added = items.filter((item) => !keptKeys.has(key(item)));
+    return [...kept, ...added];
+  }, [items, holding]);
+  shownOrder.current = shown.map((item) => keyOf.current(item));
+  const held = holding && shown.some((item, i) => keyOf.current(item) !== keyOf.current(items[i]));
+  useEffect(() => {
+    if (focus && list.current && !list.current.contains(document.activeElement)) setFocus(false);
+  }, [items, focus]);
+  const onPointerEnter = useCallback((event) => {
+    list.current = event.currentTarget;
+    if (event.pointerType === "mouse" || event.pointerType === "pen") setPointer(true);
+  }, []);
+  const onPointerLeave = useCallback(() => setPointer(false), []);
+  const onFocus = useCallback((event) => {
+    list.current = event.currentTarget;
+    const target = event.target;
+    let keyboard = true;
+    try {
+      keyboard = target.matches(":focus-visible");
+    } catch {
+    }
+    if (keyboard) setFocus(true);
+  }, []);
+  const onBlur = useCallback((event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setFocus(false);
+  }, []);
+  return { items: shown, held, listProps: { onPointerEnter, onPointerLeave, onFocus, onBlur } };
+}
+export {
+  useDeferredReorder
+};

package/dist/hooks/useDialog.js

@@ -1,5 +1,6 @@
 "use client";
 import { useRef, useEffect, useLayoutEffect } from "react";
+import { markKeyOpened, watchInputModality } from "../motion.js";
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 let lockCount = 0;
 let saved = null;
@@ -37,13 +38,22 @@ function useDialog(open, onClose, keepOpen) {
   onCloseRef.current = onClose;
   const keepOpenRef = useRef(keepOpen);
   keepOpenRef.current = keepOpen;
+  useEffect(() => {
+    watchInputModality();
+  }, []);
   useIsomorphicLayoutEffect(() => {
     const el = ref.current;
     if (!el || !open) {
-      if (el && el.open) el.close();
+      if (el && el.open) {
+        markKeyOpened(el);
+        el.close();
+      }
       return;
     }
-    if (!el.open) el.showModal();
+    if (!el.open) {
+      markKeyOpened(el);
+      el.showModal();
+    }
     lockBodyScroll();
     let locked = true;
     const handleClose = () => {
@@ -61,9 +71,12 @@ function useDialog(open, onClose, keepOpen) {
       }
       onCloseRef.current?.();
     };
+    const handleCancel = () => markKeyOpened(el);
     el.addEventListener("close", handleClose);
+    el.addEventListener("cancel", handleCancel);
     return () => {
       el.removeEventListener("close", handleClose);
+      el.removeEventListener("cancel", handleCancel);
       if (locked) {
         locked = false;
         unlockBodyScroll();