@ai-matrx/associations 0.13.3 → 0.13.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @ai-matrx/associations
 
+## 0.13.5
+
+- **The default picker window stacks above a modal it was opened from.** `DefaultWindowShell` painted at z-50 under a blocking Sheet/Drawer's z-10000 scrim, so picking an option closed the modal. It now wraps its root in design-system's `FloatingLayer` and paints at `useFloatingLayerZIndex(50)`. Needs `@ai-matrx/design-system` 0.48.0. No consumer action (hosts that bind `windowShell` follow design-system 0.48.0's consumer action).
+
+## 0.13.4
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/associations/v0.13.3..npm/associations/v0.13.4 -- apps/shared/associations`).
+No source changes intended and no consumer action required.
+
 ## 0.13.3
 
 **A named pair is written with its registered name.** `platform.association_types` names some pairs
@@ -14,6 +24,9 @@ processed_document -> scope". `assoc_add` now writes the registry's label for ev
   `registeredEdgeLabel`), written by `pnpm gen:entity-types` from the live registry;
   `pnpm check:entity-types` now also fails when it drifts.
 * Regenerated vocabulary picks up `spatial_board`.
+* `AssociationCardGrid` columns follow the grid's own width (container queries `@md` / `@3xl`),
+  not the viewport — in a 360–420px side rail the viewport rule drew three columns and hid every
+  card's name.
 
 ## 0.13.2
 

package/dist/react/index.cjs

@@ -2263,6 +2263,7 @@ function DefaultWindowShell({
   className
 }) {
   const panelRef = (0, import_react11.useRef)(null);
+  const zIndex = (0, import_design_system2.useFloatingLayerZIndex)(50);
   const [mounted, setMounted] = (0, import_react11.useState)(false);
   const [isMobile, setIsMobile] = (0, import_react11.useState)(false);
   const [rect, setRect] = (0, import_react11.useState)(() => centred());
@@ -2339,19 +2340,19 @@ function DefaultWindowShell({
     height: rect.height
   };
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system2.FloatingLayer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ref: panelRef,
         role: "dialog",
         "aria-labelledby": labelId,
         tabIndex: -1,
-        style,
+        style: { ...style, zIndex },
         className: (0, import_design_system2.cn)(
           // Non-modal by design: no backdrop element exists, so the page
           // behind keeps every click. `pointer-events-auto` re-asserts our
           // own subtree in case a Radix surface left <body> inert.
-          "pointer-events-auto fixed z-50 flex flex-col overflow-hidden border border-border bg-card text-card-foreground shadow-xl outline-none",
+          "pointer-events-auto fixed flex flex-col overflow-hidden border border-border bg-card text-card-foreground shadow-xl outline-none",
           isMobile ? "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl" : "rounded-xl",
           className
         ),
@@ -2425,7 +2426,7 @@ function DefaultWindowShell({
           )
         ]
       }
-    ),
+    ) }),
     document.body
   );
 }
@@ -3604,7 +3605,7 @@ function AssociationCardGrid({
     const role = store.registry.getEntityInfo(token).contentRole;
     return !role || !roleIds.has(role);
   }) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system8.cn)("space-y-5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system8.cn)("@container space-y-5", className), children: [
     CONTENT_ROLES.map((role) => {
       const inRole = list.filter(
         (token) => store.registry.getEntityInfo(token).contentRole === role.id
@@ -3623,7 +3624,7 @@ function AssociationCardGrid({
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: role.tagline })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
       ] }, role.id);
     }),
     roleless.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
@@ -3631,7 +3632,7 @@ function AssociationCardGrid({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Filed under" }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: "Libraries, topics and other places this is kept." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
     ] })
   ] });
 }