@lotics/ui 47.5.1 → 47.5.2

package/docs/composition.md

@@ -136,6 +136,19 @@ the subject into rows.
 | Register / work list / calendar | 1040 |
 | Wide wallboard / report | 1100 |
 
+**A row that navigates PAINTS.** A link is not a row: it paints nothing, so a row tall enough to
+hold an identity mark becomes a large silent target — the pointer crosses it and the only thing
+saying it is pressable is the cursor. Reach for the row surface (`PressableRow`), never a
+hand-rolled hover on the anchor: the wash has to span the WHOLE row *including its trailing
+controls*, and a parent's Pressability hover is released to the innermost nested pressable, which
+stops the wash short of the `⋯` and leaves a gap exactly where the eye is going. Keep the anchor
+INSIDE as the accessible door — a row of places to go owes middle-click, cmd-click and copy-link,
+which only a real anchor gives.
+
+Without that wash the trailing controls are what look wrong: nothing ties a `⋯` to its row, so the
+right edge reads as a floating column competing with the names, and the instinct is to hide the
+control. Paint the row first — the clutter usually WAS the missing wash.
+
 **ONE LEFT EDGE — the whole page, and then the whole APP.** Headings, detail labels, prose, a
 table's first column, a footer's totals, a dialog's title. Then check the screen this one OPENS: a
 list and the record it opens are one reading column seen twice, and both must derive from ONE

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.5.1",
+  "version": "47.5.2",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/popover.tsx

@@ -433,6 +433,34 @@ export function PopoverContent(props: PopoverContentProps) {
     return () => document.removeEventListener("click", onOutsideClick, true);
   }, [open, small, onOpenChange, triggerRef]);
 
+  // The one press the click listener above CANNOT see: one that lands inside a
+  // cross-origin iframe. Those events are dispatched in the frame's own document
+  // and never cross into this one, so a popover anchored over an embedded app —
+  // the app page's own chrome is exactly this shape — stayed open while the user
+  // clicked around underneath it, with no way to dismiss but pressing the trigger
+  // again or hitting Escape.
+  //
+  // Focus is the signal that survives the boundary: clicking into a frame moves
+  // this document's `activeElement` to the IFRAME element and blurs the window.
+  //
+  // Checking `activeElement` is what keeps this from over-firing. A window blur
+  // alone also means "switched tab" or "moved to another app", and dismissing
+  // then is a menu that quietly disappears while the user was reading something
+  // else. Only a blur that HANDED FOCUS TO A FRAME is a press we missed.
+  useEffect(() => {
+    if (!open || small) return;
+    const onWindowBlur = () => {
+      // Deferred: at blur time the browser has not always moved `activeElement`
+      // to the frame yet, so reading it synchronously can still report the
+      // trigger and miss the dismissal entirely.
+      setTimeout(() => {
+        if (document.activeElement instanceof HTMLIFrameElement) onOpenChange(false);
+      }, 0);
+    };
+    window.addEventListener("blur", onWindowBlur);
+    return () => window.removeEventListener("blur", onWindowBlur);
+  }, [open, small, onOpenChange]);
+
   const calculatePosition = useCallback(() => {
     if (!popoverRef.current) return;
     if (small) return;