@ai-matrx/design-system 0.34.0 → 0.35.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.35.0 — 2026-09-22
+
+**A popover may now be sized by its CONTENT, because a fixed width cannot be right for a
+name nobody chose the length of.** (lane FIX-14.)
+
+`PopoverContent` was `w-72` for everyone, so every surface showing content of unknown
+length pasted its own width over it — and `@ai-matrx/records-ui`'s relation picker pasted
+`w-64`, which is how the one control whose job is to show the name you are about to create
+came to read `Create “Marisol Okonkwo — 418 Calle Pu`, cut mid-word.
+
+* New `sizing` prop. `"fixed"` (default) is exactly the old `w-72` — nothing moves for any
+  existing caller. `"content"` grows to its content between an honest floor and an honest
+  ceiling: at least the trigger's width and at least 20rem (the width Airtable's and
+  Notion's link-record pickers settle on), at most 28rem, and never wider than the viewport
+  less a 1rem gutter each side. The floor is clamped by the same gutter, so on a very
+  narrow screen the ceiling still wins.
+* **Consumer action:** a popover whose body shows a record title, a person's name, or any
+  other value the system did not choose passes `sizing="content"` and removes its own
+  `w-*` class. Content beyond the ceiling truncates with an ellipsis and a `title` — that
+  part belongs to the caller.
+
+Measured headlessly at 1600×1000 and at 375 wide on the records-ui harness against the live
+store: the picker's popover is 408px and shows the whole name on the desktop viewport, and
+343px with a real `text-overflow: ellipsis` on the phone, inside the viewport both times.
+Suite: 103 files / 1114 tests green, `tsc --noEmit` clean.
+
 ## 0.34.0 — 2026-09-21
 
 **The release gate was red on main, and the red was a stale expectation.**

package/dist/content-transfer.cjs

@@ -597,6 +597,7 @@ var PopoverContent = React7.forwardRef(
     sideOffset = 4,
     container,
     animated = true,
+    sizing = "fixed",
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
@@ -613,7 +614,8 @@ var PopoverContent = React7.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : "w-72",
           animated && MOTION_POPPER,
           className
         ),