@ai-matrx/design-system 0.32.0 → 0.35.0

package/dist/index.d.cts

@@ -1089,6 +1089,34 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
      * `styles.css` already honours `prefers-reduced-motion`.
      */
     animated?: boolean;
+    /**
+     * HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
+     * surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
+     *
+     * `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
+     * labels, where a ragged edge would look broken.
+     *
+     * `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
+     * NOT CHOOSE — a person's name, a record's title, a row the user is about to
+     * create. The relation picker offered
+     *
+     *     Create “Marisol Okonkwo — 418 Calle Pu
+     *
+     * inside a 16rem box, cut mid-word, on the one control that exists to show the name
+     * being created. A fixed width cannot be right for content of unknown length, so
+     * this one grows to its content between an honest floor and an honest ceiling:
+     *
+     *   · at least the trigger's own width, and at least 20rem — the width Airtable's and
+     *     Notion's link-record pickers settle on, and wide enough that an ordinary
+     *     "name — street, town" fits on one line;
+     *   · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
+     *     so it still fits a 375px phone with nothing running off the screen. The floor is
+     *     clamped by the same gutter, so on a very narrow screen the ceiling still wins.
+     *
+     * Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
+     * Growing, then ellipsis — never a mid-word cut.
+     */
+    sizing?: "fixed" | "content";
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -1089,6 +1089,34 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
      * `styles.css` already honours `prefers-reduced-motion`.
      */
     animated?: boolean;
+    /**
+     * HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
+     * surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
+     *
+     * `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
+     * labels, where a ragged edge would look broken.
+     *
+     * `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
+     * NOT CHOOSE — a person's name, a record's title, a row the user is about to
+     * create. The relation picker offered
+     *
+     *     Create “Marisol Okonkwo — 418 Calle Pu
+     *
+     * inside a 16rem box, cut mid-word, on the one control that exists to show the name
+     * being created. A fixed width cannot be right for content of unknown length, so
+     * this one grows to its content between an honest floor and an honest ceiling:
+     *
+     *   · at least the trigger's own width, and at least 20rem — the width Airtable's and
+     *     Notion's link-record pickers settle on, and wide enough that an ordinary
+     *     "name — street, town" fits on one line;
+     *   · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
+     *     so it still fits a 375px phone with nothing running off the screen. The floor is
+     *     clamped by the same gutter, so on a very narrow screen the ceiling still wins.
+     *
+     * Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
+     * Growing, then ellipsis — never a mid-word cut.
+     */
+    sizing?: "fixed" | "content";
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1601,6 +1601,7 @@ var PopoverContent = React16.forwardRef(
     sideOffset = 4,
     container,
     animated = true,
+    sizing = "fixed",
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
@@ -1617,7 +1618,8 @@ var PopoverContent = React16.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
         ),
@@ -1724,7 +1726,7 @@ function CreatablePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx20(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx20(PopoverContent, { sizing: "content", align: "start", className: "p-0", children: /* @__PURE__ */ jsxs9(
       Command,
       {
         filter: (itemValue, search, keywords) => {
@@ -3522,13 +3524,40 @@ function OrganizationPicker({
         }
       ) : listed.length === 0 ? (
         /* THE ARCHIVED-ITEMS LAW, honesty half: "nothing" may only be said
-           when both halves are empty. Here the other half is one line down. */
+           when both halves are empty. Here the other half is one line down.
+           AND IT SAYS WHAT IS TRUE, NOT WHAT IS EMPTY. The earlier sentence
+           read "Nothing matches “X” outside the test organizations below" —
+           which opens by negating the very rows sitting one click away, and
+           `fixtures` IS query-filtered, so those rows ARE matches for X. A
+           person reading "nothing matches" retypes their search instead of
+           clicking. So: count the matches, say where they are, and carry
+           the click that reveals them — the same shape as the honest
+           empty-filter twin one line down. (TAILS-3) */
         /* @__PURE__ */ jsx38(
           "p",
           {
             className: "px-2 py-2 text-xs text-muted-foreground",
             "data-slot": "organization-picker-only-fixtures",
-            children: query.trim() ? `Nothing matches \u201C${query.trim()}\u201D outside the test organizations below.` : `Every organization you belong to is a test organization \u2014 all ${fixtures.length} are below.`
+            children: query.trim() ? /* @__PURE__ */ jsxs21(Fragment2, { children: [
+              fixtures.length === 1 ? `1 match for \u201C${query.trim()}\u201D is in your test organizations` : `All ${fixtures.length} matches for \u201C${query.trim()}\u201D are in your test organizations`,
+              showFixtures ? ", listed below." : /* @__PURE__ */ jsxs21(Fragment2, { children: [
+                " \u2014 ",
+                /* @__PURE__ */ jsx38(
+                  "button",
+                  {
+                    type: "button",
+                    className: "underline underline-offset-2 hover:text-foreground",
+                    "data-slot": "organization-picker-show-fixtures",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      setShowFixtures(true);
+                    },
+                    children: "show them"
+                  }
+                ),
+                "."
+              ] })
+            ] }) : `Every organization you belong to is a test organization \u2014 all ${fixtures.length} are below.`
           }
         )
       ) : /* @__PURE__ */ jsx38("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map(renderRow) }),