@tensor_1/react 2.41.0 → 2.42.0

package/dist/components/ShortcutHint.js

@@ -0,0 +1,149 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { KbdCombo, ariaKeyShortcuts, useKbdPlatform } from "./Kbd.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const isShown = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+const focusVisible = (el) => {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+};
+const stop = (event) => event.stopPropagation();
+function ShortcutHint({ keys, label, ownsAria }) {
+  const markerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [host, setHost] = useState(null);
+  const [open, setOpen] = useState(false);
+  const platform = useKbdPlatform();
+  const shortcuts = ariaKeyShortcuts(keys, platform);
+  useAnchoredPosition(anchorRef, bubbleRef, { open, placement: "top", offset: 6 });
+  useIsomorphicLayoutEffect(() => {
+    const button = markerRef.current?.parentElement;
+    if (!button || !ownsAria) return void 0;
+    const before = button.getAttribute("aria-keyshortcuts");
+    button.setAttribute("aria-keyshortcuts", shortcuts);
+    return () => {
+      if (button.getAttribute("aria-keyshortcuts") !== shortcuts) return;
+      if (before == null) button.removeAttribute("aria-keyshortcuts");
+      else button.setAttribute("aria-keyshortcuts", before);
+    };
+  }, [shortcuts, ownsAria]);
+  useIsomorphicLayoutEffect(() => {
+    const button = markerRef.current?.parentElement ?? null;
+    anchorRef.current = button;
+    if (!button || button.parentElement?.closest(".uix-tooltip")) {
+      setHost(null);
+      return;
+    }
+    setHost(button.closest("dialog") ?? button.ownerDocument.body);
+  }, []);
+  useEffect(() => {
+    const button = anchorRef.current;
+    const bubble = bubbleRef.current;
+    if (!host || !button || !bubble) return void 0;
+    let timer;
+    const show = () => {
+      window.clearTimeout(timer);
+      if (!isShown(bubble)) {
+        try {
+          bubble.showPopover();
+        } catch {
+        }
+      }
+      setOpen(true);
+    };
+    const hide = () => {
+      window.clearTimeout(timer);
+      if (isShown(bubble)) {
+        try {
+          bubble.hidePopover();
+        } catch {
+        }
+      }
+      setOpen(false);
+    };
+    const hideSoon = () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (button.ownerDocument.activeElement === button && focusVisible(button)) return;
+        hide();
+      }, 100);
+    };
+    const onFocus = () => {
+      if (focusVisible(button)) show();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    const watch = new MutationObserver(() => {
+      if (button.hasAttribute("disabled") || button.getAttribute("aria-disabled") === "true") hide();
+    });
+    watch.observe(button, { attributes: true, attributeFilter: ["disabled", "aria-disabled"] });
+    button.addEventListener("mouseenter", show);
+    button.addEventListener("mouseleave", hideSoon);
+    button.addEventListener("focus", onFocus);
+    button.addEventListener("blur", hide);
+    bubble.addEventListener("mouseenter", show);
+    bubble.addEventListener("mouseleave", hideSoon);
+    button.ownerDocument.addEventListener("keydown", onKey);
+    return () => {
+      window.clearTimeout(timer);
+      watch.disconnect();
+      button.removeEventListener("mouseenter", show);
+      button.removeEventListener("mouseleave", hideSoon);
+      button.removeEventListener("focus", onFocus);
+      button.removeEventListener("blur", hide);
+      bubble.removeEventListener("mouseenter", show);
+      bubble.removeEventListener("mouseleave", hideSoon);
+      button.ownerDocument.removeEventListener("keydown", onKey);
+      if (isShown(bubble)) {
+        try {
+          bubble.hidePopover();
+        } catch {
+        }
+      }
+    };
+  }, [host]);
+  const bubbleAttr = { popover: "manual" };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: markerRef, hidden: true, "data-uix-shortcut-hint": "" }),
+    host && createPortal(
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref: bubbleRef,
+          className: "uix-tooltip__bubble uix-tooltip__bubble--hint",
+          "aria-hidden": "true",
+          ...bubbleAttr,
+          onClick: stop,
+          onDoubleClick: stop,
+          onContextMenu: stop,
+          onPointerDown: stop,
+          onPointerUp: stop,
+          onMouseDown: stop,
+          onMouseUp: stop,
+          children: [
+            label && /* @__PURE__ */ jsx("span", { children: label }),
+            /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
+          ]
+        }
+      ),
+      host
+    )
+  ] });
+}
+export {
+  ShortcutHint
+};

package/dist/components/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { Placement } from '../overlay-position.js';
+import { KeyShortcut } from './Kbd.js';
 
 interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
     /** Tooltip text. Pass this or `content`. */
@@ -13,6 +14,14 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
     content?: ReactNode;
     /** Preferred placement. Default `'top'`. */
     placement?: Placement;
+    /**
+     * The trigger's keyboard shortcut, in `KbdCombo` key names, e.g. `['Mod', 'K']` (HAR-2031):
+     * shown with `Kbd` after the text, and set as the trigger's `aria-keyshortcuts` for the
+     * viewer's platform. Default: the `shortcut` of a `Button` child, so a Tooltip around a Button
+     * with a shortcut shows one bubble with the label and the keys. The kit only shows it: the
+     * product binds the key.
+     */
+    shortcut?: KeyShortcut;
     children?: ReactNode;
 }
 /**
@@ -23,6 +32,6 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
  * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
  * the pointer is over it (UIX-A11Y-1).
  */
-declare function Tooltip({ label, content, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, content, placement, shortcut, className, children, ...props }: TooltipProps): react.JSX.Element;
 
 export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -3,12 +3,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-function Tooltip({ label, content, placement = "top", className, children, ...props }) {
+import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
   const [open, setOpen] = useState(false);
   const id = useId();
+  const platform = useKbdPlatform();
+  const childShortcut = isValidElement(children) ? children.props.shortcut : void 0;
+  const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
+  const keys = own && own.length > 0 ? own : null;
+  const keyshortcuts = keys ? ariaKeyShortcuts(keys, platform) : void 0;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
   const cancelClose = () => {
     if (closeTimer.current != null) {
@@ -63,7 +69,8 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
   const bubbleAttr = { popover: "manual" };
   const single = isValidElement(children);
   const child = single ? cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+    ...keyshortcuts ? { "aria-keyshortcuts": keyshortcuts } : {}
   }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
@@ -71,6 +78,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
       ref: triggerRef,
       className: cx("uix-tooltip", className),
       "aria-describedby": single ? void 0 : id,
+      "aria-keyshortcuts": single ? void 0 : keyshortcuts,
       tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
@@ -82,7 +90,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
       ...props,
       children: [
         child,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "span",
           {
             ref: bubbleRef,
@@ -92,7 +100,10 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: content ?? label
+            children: [
+              content ?? label,
+              keys && /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
+            ]
           }
         )
       ]

package/dist/emoji.cjs

@@ -173,11 +173,16 @@ function translationOf(el) {
   if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
   try {
     const m = new DOMMatrixReadOnly(t);
-    return { x: m.m41, y: m.m42 };
+    const z = zoomOf(el);
+    return { x: m.m41 * z, y: m.m42 * z };
   } catch {
     return { x: 0, y: 0 };
   }
 }
+function zoomOf(el) {
+  const z = el.currentCSSZoom;
+  return typeof z === "number" && Number.isFinite(z) && z > 0 ? z : 1;
+}
 var signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
 var prepared = /* @__PURE__ */ new WeakSet();
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8, shiftMainAxis = true, capHeight = false, onAnchorHidden }) {
@@ -202,8 +207,9 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       const s = floating.style;
       if (keepPlace && current.anchor.isConnected) {
         const a = current.anchor.getBoundingClientRect();
-        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
-        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+        const z = zoomOf(floating);
+        s.top = `${Math.round(((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy) / z)}px`;
+        s.left = `${Math.round(((current.xEdge === "right" ? a.right : a.left) + current.dx) / z)}px`;
       }
       s.removeProperty("position-anchor");
     }
@@ -231,6 +237,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       written.current = "";
     }
     const { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, capHeight: cap } = opts.current;
+    const zoom = floating.getClientRects().length > 0 ? zoomOf(floating) : zoomOf(anchorEl);
     if (cap) {
       if (!heightCap.current) {
         const own = getComputedStyle(floating);
@@ -244,7 +251,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
         };
         if (setOverflow) s.overflowY = "auto";
       }
-      const room = `${Math.max(0, window.innerHeight - 2 * pad)}px`;
+      const room = `${Math.max(0, (window.innerHeight - 2 * pad * zoom) / zoom)}px`;
       const max = heightCap.current.ownMaxHeight ? `min(${room}, ${heightCap.current.ownMaxHeight})` : room;
       if (max !== heightCap.current.written) {
         s.maxHeight = max;
@@ -254,19 +261,19 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       uncap();
     }
     const a = anchorEl.getBoundingClientRect();
-    const size = { width: floating.offsetWidth, height: floating.offsetHeight };
+    const size = { width: floating.offsetWidth * zoom, height: floating.offsetHeight * zoom };
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
       size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
+      { placement: p, offset: o * zoom, padding: pad * zoom, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
     );
     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;
     const writeFixed = (at) => {
-      const left2 = `${Math.round(at.x)}px`;
-      const top2 = `${Math.round(at.y)}px`;
+      const left2 = `${Math.round(at.x / zoom)}px`;
+      const top2 = `${Math.round(at.y / zoom)}px`;
       const key2 = `fixed ${left2} ${top2}`;
       if (key2 === written.current) return;
       s.left = left2;
@@ -293,8 +300,8 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     current.xEdge = pos.side === "right" ? "right" : "left";
     current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
     current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
-    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
-    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy / zoom)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx / zoom)}, 1px)`;
     const key = `anchored ${top} ${left}`;
     if (key !== written.current) {
       s.top = top;
@@ -1079,14 +1086,79 @@ function EditorIcon({ name, ...props }) {
 }
 
 // src/components/Tooltip.tsx
+var import_react6 = require("react");
+
+// src/components/Kbd.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Tooltip({ label, content, placement = "top", className, children, ...props }) {
-  const triggerRef = (0, import_react5.useRef)(null);
-  const bubbleRef = (0, import_react5.useRef)(null);
-  const closeTimer = (0, import_react5.useRef)(null);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const id = (0, import_react5.useId)();
+var KEYS = {
+  Mod: { mac: ["\u2318", "Command"], other: ["Ctrl", "Control"] },
+  Ctrl: { mac: ["\u2303", "Control"], other: ["Ctrl", "Control"] },
+  Shift: { mac: ["\u21E7", "Shift"], other: ["Shift", "Shift"] },
+  Alt: { mac: ["\u2325", "Option"], other: ["Alt", "Alt"] },
+  Enter: { mac: ["\u21B5", "Enter"], other: ["Enter", "Enter"] },
+  Escape: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Esc: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Delete: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Del: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Space: { mac: ["Space", "Space"], other: ["Space", "Space"] },
+  " ": { mac: ["Space", "Space"], other: ["Space", "Space"] },
+  Backspace: { mac: ["\u232B", "Backspace"], other: ["Backspace", "Backspace"] },
+  Tab: { mac: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
+  ArrowUp: { mac: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
+  ArrowDown: { mac: ["\u2193", "Down arrow"], other: ["\u2193", "Down arrow"] },
+  ArrowLeft: { mac: ["\u2190", "Left arrow"], other: ["\u2190", "Left arrow"] },
+  ArrowRight: { mac: ["\u2192", "Right arrow"], other: ["\u2192", "Right arrow"] }
+};
+var detectPlatform = () => {
+  if (typeof navigator === "undefined") return "other";
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform ?? navigator.platform ?? "") ? "mac" : "other";
+};
+var noSubscription = () => () => {
+};
+var serverPlatform = () => "other";
+function useKbdPlatform(platform) {
+  const detected = (0, import_react5.useSyncExternalStore)(noSubscription, detectPlatform, serverPlatform);
+  return platform ?? detected;
+}
+var ARIA_KEYS = {
+  Mod: { mac: "Meta", other: "Control" },
+  Ctrl: { mac: "Control", other: "Control" },
+  Esc: { mac: "Escape", other: "Escape" },
+  Del: { mac: "Delete", other: "Delete" },
+  " ": { mac: "Space", other: "Space" },
+  "+": { mac: "Plus", other: "Plus" }
+};
+function ariaKeyShortcuts(keys, platform) {
+  return keys.map((key) => ARIA_KEYS[key]?.[platform] ?? (key.length === 1 ? key.toUpperCase() : key)).join("+");
+}
+var isKeyShortcut = (value) => Array.isArray(value) && value.length > 0 && value.every((key) => typeof key === "string");
+function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
+  const active = useKbdPlatform(platform);
+  const parts = keys.map((key) => {
+    const known = KEYS[key]?.[active];
+    return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: cx("uix-kbd-combo", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uix-visually-hidden", children: parts.map((p) => p.spoken).join("+") }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uix-kbd-combo__keys", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("kbd", { className: "uix-kbd", children: p.glyph }, `${keys[i]}-${i}`)) })
+  ] });
+}
+
+// src/components/Tooltip.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+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 [open, setOpen] = (0, import_react6.useState)(false);
+  const id = (0, import_react6.useId)();
+  const platform = useKbdPlatform();
+  const childShortcut = (0, import_react6.isValidElement)(children) ? children.props.shortcut : void 0;
+  const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
+  const keys = own && own.length > 0 ? own : null;
+  const keyshortcuts = keys ? ariaKeyShortcuts(keys, platform) : void 0;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
   const cancelClose = () => {
     if (closeTimer.current != null) {
@@ -1120,7 +1192,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
     cancelClose();
     closeTimer.current = window.setTimeout(hide, 100);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") hide();
@@ -1128,7 +1200,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open]);
-  (0, import_react5.useEffect)(() => () => {
+  (0, import_react6.useEffect)(() => () => {
     if (closeTimer.current != null) clearTimeout(closeTimer.current);
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
@@ -1139,16 +1211,18 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
-  const single = (0, import_react5.isValidElement)(children);
-  const child = single ? (0, import_react5.cloneElement)(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+  const single = (0, import_react6.isValidElement)(children);
+  const child = single ? (0, import_react6.cloneElement)(children, {
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+    ...keyshortcuts ? { "aria-keyshortcuts": keyshortcuts } : {}
   }) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
       "aria-describedby": single ? void 0 : id,
+      "aria-keyshortcuts": single ? void 0 : keyshortcuts,
       tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
@@ -1160,7 +1234,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
       ...props,
       children: [
         child,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "span",
           {
             ref: bubbleRef,
@@ -1170,7 +1244,10 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: content ?? label
+            children: [
+              content ?? label,
+              keys && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KbdCombo, { keys: [...keys], platform }) })
+            ]
           }
         )
       ]
@@ -1179,7 +1256,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
 }
 
 // src/components/ReactionBar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_REACTION_BAR_LABELS = {
   group: "Reactions",
   addReaction: "Add reaction",
@@ -1212,10 +1289,10 @@ function ReactionBar({
     const names = hidden > 0 ? `${shown} ${formatLabel(labels.others, { count: hidden })}` : shown;
     return formatLabel(labels.reactedWith, { names, emoji: reaction.emoji, count: reaction.count });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx("uix-reactions", className), role: "group", "aria-label": labels.group, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("uix-reactions", className), role: "group", "aria-label": labels.group, children: [
     reactions.filter((r) => r.count > 0).map((reaction) => {
       const text = describe(reaction);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip, { label: text, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tooltip, { label: text, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -1226,13 +1303,13 @@ function ReactionBar({
           disabled,
           onClick: () => onToggle(reaction.emoji),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: renderEmoji(reaction.emoji) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-reaction__count", "aria-hidden": "true", children: reaction.count })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: renderEmoji(reaction.emoji) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "uix-reaction__count", "aria-hidden": "true", children: reaction.count })
           ]
         }
       ) }, reaction.emoji);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       EmojiPicker,
       {
         quickPicks,
@@ -1243,7 +1320,7 @@ function ReactionBar({
         onSelect: (emoji) => {
           if (!reactions.some((r) => r.emoji === emoji && r.reactedByMe)) onToggle(emoji);
         },
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "uix-reaction-add", "aria-label": labels.addReaction, title: labels.addReaction, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EditorIcon, { name: "addReaction" }) })
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "uix-reaction-add", "aria-label": labels.addReaction, title: labels.addReaction, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditorIcon, { name: "addReaction" }) })
       }
     )
   ] });

package/dist/hooks/useAnchoredPosition.d.ts

@@ -30,6 +30,18 @@ interface UseAnchoredPositionOptions {
 type AnchorArg = RefObject<HTMLElement | null> | HTMLElement | null | undefined;
 /** @internal The element behind an anchor ref or element. */
 declare const resolveAnchor: (a: AnchorArg) => HTMLElement | null;
+/**
+ * The element's effective CSS `zoom` (HAR-1798): `currentCSSZoom` where the engine has it, else 1.
+ *
+ * Under `html { zoom: 2 }` (how a page emulates 200 % reflow) `getBoundingClientRect()` and the
+ * viewport size are in zoomed, on-screen pixels, while the `top` / `left` / `max-height` written
+ * on the element, its offsetWidth and its transform are in its own unzoomed CSS pixels, which the
+ * browser multiplies by the zoom. The placement is computed on screen and divided back on write;
+ * without that, an overlay opened low on the page landed at twice its offset, off-screen.
+ * Browser zoom (Ctrl +) changes the CSS pixel itself and leaves this at 1.
+ * @internal Also used by components that size an overlay from its anchor (Select).
+ */
+declare function zoomOf(el: HTMLElement): number;
 /**
  * Position a floating element (a native-popover overlay) against an anchor with
  * cross-browser flip/shift — the DOM half of the overlay-position engine (UIX-FIX-02).
@@ -50,4 +62,4 @@ declare const resolveAnchor: (a: AnchorArg) => HTMLElement | null;
  */
 declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding, shiftMainAxis, capHeight, onAnchorHidden }: UseAnchoredPositionOptions): () => void;
 
-export { type UseAnchoredPositionOptions, resolveAnchor, useAnchoredPosition };
+export { type UseAnchoredPositionOptions, resolveAnchor, useAnchoredPosition, zoomOf };

package/dist/hooks/useAnchoredPosition.js

@@ -33,11 +33,16 @@ function translationOf(el) {
   if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
   try {
     const m = new DOMMatrixReadOnly(t);
-    return { x: m.m41, y: m.m42 };
+    const z = zoomOf(el);
+    return { x: m.m41 * z, y: m.m42 * z };
   } catch {
     return { x: 0, y: 0 };
   }
 }
+function zoomOf(el) {
+  const z = el.currentCSSZoom;
+  return typeof z === "number" && Number.isFinite(z) && z > 0 ? z : 1;
+}
 const signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
 const prepared = /* @__PURE__ */ new WeakSet();
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8, shiftMainAxis = true, capHeight = false, onAnchorHidden }) {
@@ -62,8 +67,9 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       const s = floating.style;
       if (keepPlace && current.anchor.isConnected) {
         const a = current.anchor.getBoundingClientRect();
-        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
-        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+        const z = zoomOf(floating);
+        s.top = `${Math.round(((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy) / z)}px`;
+        s.left = `${Math.round(((current.xEdge === "right" ? a.right : a.left) + current.dx) / z)}px`;
       }
       s.removeProperty("position-anchor");
     }
@@ -91,6 +97,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       written.current = "";
     }
     const { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, capHeight: cap } = opts.current;
+    const zoom = floating.getClientRects().length > 0 ? zoomOf(floating) : zoomOf(anchorEl);
     if (cap) {
       if (!heightCap.current) {
         const own = getComputedStyle(floating);
@@ -104,7 +111,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
         };
         if (setOverflow) s.overflowY = "auto";
       }
-      const room = `${Math.max(0, window.innerHeight - 2 * pad)}px`;
+      const room = `${Math.max(0, (window.innerHeight - 2 * pad * zoom) / zoom)}px`;
       const max = heightCap.current.ownMaxHeight ? `min(${room}, ${heightCap.current.ownMaxHeight})` : room;
       if (max !== heightCap.current.written) {
         s.maxHeight = max;
@@ -114,19 +121,19 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       uncap();
     }
     const a = anchorEl.getBoundingClientRect();
-    const size = { width: floating.offsetWidth, height: floating.offsetHeight };
+    const size = { width: floating.offsetWidth * zoom, height: floating.offsetHeight * zoom };
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
       size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
+      { placement: p, offset: o * zoom, padding: pad * zoom, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
     );
     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;
     const writeFixed = (at) => {
-      const left2 = `${Math.round(at.x)}px`;
-      const top2 = `${Math.round(at.y)}px`;
+      const left2 = `${Math.round(at.x / zoom)}px`;
+      const top2 = `${Math.round(at.y / zoom)}px`;
       const key2 = `fixed ${left2} ${top2}`;
       if (key2 === written.current) return;
       s.left = left2;
@@ -153,8 +160,8 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     current.xEdge = pos.side === "right" ? "right" : "left";
     current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
     current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
-    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
-    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy / zoom)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx / zoom)}, 1px)`;
     const key = `anchored ${top} ${left}`;
     if (key !== written.current) {
       s.top = top;
@@ -221,5 +228,6 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
 }
 export {
   resolveAnchor,
-  useAnchoredPosition
+  useAnchoredPosition,
+  zoomOf
 };

package/dist/hooks/useDialog.d.ts

@@ -1,3 +1,8 @@
-declare function useDialog(open: boolean, onClose?: () => void): React.RefObject<HTMLDialogElement>;
+/**
+ * `keepOpen` is asked when the browser closed the dialog on its own (Escape or a close request
+ * nobody cancelled, a `method="dialog"` form). Returning `true` reopens it instead of calling
+ * `onClose`: a form dialog with unsaved input or a save in flight (HAR-2029).
+ */
+declare function useDialog(open: boolean, onClose?: () => void, keepOpen?: () => boolean): React.RefObject<HTMLDialogElement>;
 
 export { useDialog };