@ai-matrx/associations 0.13.3 → 0.13.5

package/dist/react/index.js

@@ -2016,7 +2016,7 @@ import {
   useState as useState6
 } from "react";
 import { createPortal } from "react-dom";
-import { cn as cn2 } from "@ai-matrx/design-system";
+import { cn as cn2, FloatingLayer, useFloatingLayerZIndex } from "@ai-matrx/design-system";
 
 // src/react/icons.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2205,6 +2205,7 @@ function DefaultWindowShell({
   className
 }) {
   const panelRef = useRef7(null);
+  const zIndex = useFloatingLayerZIndex(50);
   const [mounted, setMounted] = useState6(false);
   const [isMobile, setIsMobile] = useState6(false);
   const [rect, setRect] = useState6(() => centred());
@@ -2281,19 +2282,19 @@ function DefaultWindowShell({
     height: rect.height
   };
   return createPortal(
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx5(FloatingLayer, { children: /* @__PURE__ */ jsxs3(
       "div",
       {
         ref: panelRef,
         role: "dialog",
         "aria-labelledby": labelId,
         tabIndex: -1,
-        style,
+        style: { ...style, zIndex },
         className: cn2(
           // 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
         ),
@@ -2367,7 +2368,7 @@ function DefaultWindowShell({
           )
         ]
       }
-    ),
+    ) }),
     document.body
   );
 }
@@ -3546,7 +3547,7 @@ function AssociationCardGrid({
     const role = store.registry.getEntityInfo(token).contentRole;
     return !role || !roleIds.has(role);
   }) : [];
-  return /* @__PURE__ */ jsxs10("div", { className: cn8("space-y-5", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn8("@container space-y-5", className), children: [
     CONTENT_ROLES.map((role) => {
       const inRole = list.filter(
         (token) => store.registry.getEntityInfo(token).contentRole === role.id
@@ -3565,7 +3566,7 @@ function AssociationCardGrid({
           ] }),
           /* @__PURE__ */ jsx12("p", { className: "hidden text-xs text-muted-foreground sm:block", children: role.tagline })
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
+        /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
       ] }, role.id);
     }),
     roleless.length > 0 && /* @__PURE__ */ jsxs10("section", { children: [
@@ -3573,7 +3574,7 @@ function AssociationCardGrid({
         /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: "Filed under" }),
         /* @__PURE__ */ jsx12("p", { className: "hidden text-xs text-muted-foreground sm:block", children: "Libraries, topics and other places this is kept." })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
     ] })
   ] });
 }