@sudobility/entity_pages 0.0.86 → 0.0.87

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as t, Fragment as R } from "react/jsx-runtime";
+import { jsx as e, jsxs as t, Fragment as S } from "react/jsx-runtime";
 import * as M from "react";
 import { useState as k } from "react";
 import { Section as I } from "@sudobility/components";
-import { EntityList as E, InvitationForm as K, InvitationList as S, MemberList as Y } from "@sudobility/entity-components";
-import { useEntities as $, useCreateEntity as q, useEntityMembers as U, useUpdateMemberRole as B, useRemoveMember as G, useEntityInvitations as H, useCreateInvitation as J, useCancelInvitation as Q, useMyInvitations as V, useAcceptInvitation as X, useDeclineInvitation as Z } from "@sudobility/entity_client";
-function _({
+import { EntityList as z, InvitationForm as K, InvitationList as A, MemberList as Y } from "@sudobility/entity-components";
+import { useEntities as q, useCreateEntity as U, useEntityMembers as B, useUpdateMemberRole as G, useRemoveMember as H, useEntityInvitations as J, useCreateInvitation as Q, useCancelInvitation as V, useMyInvitations as X, useAcceptInvitation as Z, useDeclineInvitation as _ } from "@sudobility/entity_client";
+function ee({
   title: n,
   titleId: a,
   ...l
@@ -27,8 +27,13 @@ function _({
     d: "M12 4.5v15m7.5-7.5h-15"
   }));
 }
-const ee = /* @__PURE__ */ M.forwardRef(_);
-function te() {
+const te = /* @__PURE__ */ M.forwardRef(ee), L = {
+  // Background utilities
+  background: {
+    overlay: "bg-black/50 dark:bg-black/70"
+  }
+};
+function ne() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading workspaces", children: [
     [1, 2, 3].map((n) => /* @__PURE__ */ e(
       "div",
@@ -40,7 +45,7 @@ function te() {
     /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading workspaces..." })
   ] });
 }
-function de({
+function me({
   client: n,
   onSelectEntity: a
 }) {
@@ -51,11 +56,24 @@ function de({
     data: v = [],
     isLoading: u,
     isError: y,
-    error: x,
-    refetch: N
-  } = $(n), p = q(n), b = v.filter((s) => s.entityType === "personal"), c = v.filter(
+    error: N,
+    refetch: w
+  } = q(n), p = U(n), b = v.filter((s) => s.entityType === "personal"), c = v.filter(
     (s) => s.entityType === "organization"
-  );
+  ), x = async (s) => {
+    if (s.preventDefault(), m(null), !i.displayName.trim()) {
+      m("Display name is required");
+      return;
+    }
+    try {
+      await p.mutateAsync({
+        displayName: i.displayName.trim(),
+        description: i.description.trim() || void 0
+      }), r(!1), o({ displayName: "", description: "" });
+    } catch (f) {
+      m(f.message || "Failed to create organization");
+    }
+  };
   return /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { role: "main", "aria-label": "Workspaces", children: [
     /* @__PURE__ */ t("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8", children: [
       /* @__PURE__ */ t("div", { children: [
@@ -70,7 +88,7 @@ function de({
           "aria-label": "Create new organization",
           className: "flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",
           children: [
-            /* @__PURE__ */ e(ee, { className: "h-4 w-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ e(te, { className: "h-4 w-4", "aria-hidden": "true" }),
             /* @__PURE__ */ e("span", { children: "New Organization" })
           ]
         }
@@ -79,7 +97,7 @@ function de({
     l && /* @__PURE__ */ e(
       "div",
       {
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        className: `fixed inset-0 z-50 flex items-center justify-center ${L.background.overlay} p-4`,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Create organization",
@@ -94,20 +112,7 @@ function de({
           /* @__PURE__ */ t(
             "form",
             {
-              onSubmit: async (s) => {
-                if (s.preventDefault(), m(null), !i.displayName.trim()) {
-                  m("Display name is required");
-                  return;
-                }
-                try {
-                  await p.mutateAsync({
-                    displayName: i.displayName.trim(),
-                    description: i.description.trim() || void 0
-                  }), r(!1), o({ displayName: "", description: "" });
-                } catch (f) {
-                  m(f.message || "Failed to create organization");
-                }
-              },
+              onSubmit: x,
               className: "space-y-4",
               "aria-label": "Create organization form",
               children: [
@@ -210,12 +215,12 @@ function de({
         "aria-live": "polite",
         children: [
           /* @__PURE__ */ e("p", { className: "text-destructive font-medium mb-2", children: "Failed to load workspaces" }),
-          /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-4", children: x?.message || "An unexpected error occurred" }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-4", children: N?.message || "An unexpected error occurred" }),
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => N(),
+              onClick: () => w(),
               "aria-label": "Retry loading workspaces",
               className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
               children: "Retry"
@@ -224,12 +229,12 @@ function de({
         ]
       }
     ),
-    u && /* @__PURE__ */ e(te, {}),
-    !u && !y && /* @__PURE__ */ t(R, { children: [
+    u && /* @__PURE__ */ e(ne, {}),
+    !u && !y && /* @__PURE__ */ t(S, { children: [
       b.length > 0 && /* @__PURE__ */ t("section", { className: "mb-6 sm:mb-8", "aria-label": "Personal workspace", children: [
         /* @__PURE__ */ e("h2", { className: "text-base sm:text-lg font-semibold mb-3", children: "Personal Workspace" }),
         /* @__PURE__ */ e(
-          E,
+          z,
           {
             entities: b,
             onSelect: a,
@@ -259,7 +264,7 @@ function de({
             ]
           }
         ) : /* @__PURE__ */ e(
-          E,
+          z,
           {
             entities: c,
             onSelect: a,
@@ -281,7 +286,7 @@ function de({
     ] })
   ] }) });
 }
-function z() {
+function R() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading members", children: [
     [1, 2, 3].map((n) => /* @__PURE__ */ e(
       "div",
@@ -293,7 +298,7 @@ function z() {
     /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading members..." })
   ] });
 }
-function ne({
+function re({
   title: n,
   message: a,
   confirmLabel: l,
@@ -303,7 +308,7 @@ function ne({
   return /* @__PURE__ */ e(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+      className: `fixed inset-0 z-50 flex items-center justify-center ${L.background.overlay} p-4`,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": n,
@@ -340,7 +345,7 @@ function ne({
     }
   );
 }
-function me({
+function ue({
   client: n,
   entity: a,
   currentUserId: l
@@ -351,15 +356,15 @@ function me({
     isError: v,
     error: u,
     refetch: y
-  } = U(n, a.entitySlug), x = B(n), N = G(n), {
+  } = B(n, a.entitySlug), N = G(n), w = H(n), {
     data: p = [],
     isLoading: b,
     isError: c,
-    error: w,
+    error: x,
     refetch: s
-  } = H(n, r ? a.entitySlug : null), f = J(n), A = Q(n), D = async (d, h) => {
+  } = J(n, r ? a.entitySlug : null), f = Q(n), D = V(n), F = async (d, h) => {
     try {
-      await x.mutateAsync({
+      await N.mutateAsync({
         entitySlug: a.entitySlug,
         memberId: d,
         role: h
@@ -367,45 +372,45 @@ function me({
     } catch (C) {
       console.error("Failed to update role:", C);
     }
-  }, F = (d) => {
-    const h = g.find((L) => L.id === d), C = h?.user?.displayName || h?.user?.email || "this member";
+  }, j = (d) => {
+    const h = g.find((E) => E.id === d), C = h?.user?.displayName || h?.user?.email || "this member";
     o({
       type: "removeMember",
       id: d,
       displayLabel: C
     });
-  }, j = async (d) => {
+  }, P = async (d) => {
     try {
-      await N.mutateAsync({
+      await w.mutateAsync({
         entitySlug: a.entitySlug,
         memberId: d
       });
     } catch (h) {
       console.error("Failed to remove member:", h);
     }
-  }, P = async (d) => {
+  }, T = async (d) => {
     await f.mutateAsync({
       entitySlug: a.entitySlug,
       request: d
     });
-  }, T = (d) => {
-    const C = p.find((L) => L.id === d)?.email || "this invitation";
+  }, W = (d) => {
+    const C = p.find((E) => E.id === d)?.email || "this invitation";
     o({
       type: "cancelInvitation",
       id: d,
       displayLabel: C
     });
-  }, W = async (d) => {
+  }, O = async (d) => {
     try {
-      await A.mutateAsync({
+      await D.mutateAsync({
         entitySlug: a.entitySlug,
         invitationId: d
       });
     } catch (h) {
       console.error("Failed to cancel invitation:", h);
     }
-  }, O = async () => {
-    i && (i.type === "removeMember" ? await j(i.id) : i.type === "cancelInvitation" && await W(i.id), o(null));
+  }, $ = async () => {
+    i && (i.type === "removeMember" ? await P(i.id) : i.type === "cancelInvitation" && await O(i.id), o(null));
   };
   return a.entityType === "personal" ? /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t(
     "div",
@@ -420,12 +425,12 @@ function me({
     }
   ) }) : /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { role: "main", "aria-label": "Members management", children: [
     i && /* @__PURE__ */ e(
-      ne,
+      re,
       {
         title: i.type === "removeMember" ? "Remove Member" : "Cancel Invitation",
         message: i.type === "removeMember" ? `Are you sure you want to remove ${i.displayLabel}? They will lose access to this organization.` : `Are you sure you want to cancel the invitation to ${i.displayLabel}?`,
         confirmLabel: i.type === "removeMember" ? "Remove" : "Cancel Invitation",
-        onConfirm: O,
+        onConfirm: $,
         onCancel: () => o(null)
       }
     ),
@@ -446,7 +451,7 @@ function me({
           /* @__PURE__ */ e(
             K,
             {
-              onSubmit: P,
+              onSubmit: T,
               isSubmitting: f.isPending
             }
           )
@@ -463,7 +468,7 @@ function me({
           "aria-live": "polite",
           children: [
             /* @__PURE__ */ e("p", { className: "text-destructive font-medium mb-2", children: "Failed to load invitations" }),
-            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-3", children: w?.message || "An unexpected error occurred" }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-3", children: x?.message || "An unexpected error occurred" }),
             /* @__PURE__ */ e(
               "button",
               {
@@ -476,7 +481,7 @@ function me({
             )
           ]
         }
-      ) : b ? /* @__PURE__ */ e(z, {}) : p.length === 0 ? /* @__PURE__ */ e(
+      ) : b ? /* @__PURE__ */ e(R, {}) : p.length === 0 ? /* @__PURE__ */ e(
         "div",
         {
           className: "text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",
@@ -484,11 +489,11 @@ function me({
           children: /* @__PURE__ */ e("p", { children: "No pending invitations" })
         }
       ) : /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
-        S,
+        A,
         {
           invitations: p,
           mode: "admin",
-          onCancel: T,
+          onCancel: W,
           isLoading: b,
           emptyMessage: "No pending invitations"
         }
@@ -521,7 +526,7 @@ function me({
             )
           ]
         }
-      ) : m ? /* @__PURE__ */ e(z, {}) : g.length === 0 ? /* @__PURE__ */ t(
+      ) : m ? /* @__PURE__ */ e(R, {}) : g.length === 0 ? /* @__PURE__ */ t(
         "div",
         {
           className: "text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",
@@ -537,15 +542,15 @@ function me({
           members: g,
           currentUserId: l,
           canManage: r,
-          onRoleChange: D,
-          onRemove: F,
+          onRoleChange: F,
+          onRemove: j,
           isLoading: m
         }
       ) })
     ] })
   ] }) });
 }
-function re() {
+function ie() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading invitations", children: [
     [1, 2].map((n) => /* @__PURE__ */ e(
       "div",
@@ -557,7 +562,7 @@ function re() {
     /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading invitations..." })
   ] });
 }
-function ie({
+function ae({
   entityName: n,
   onConfirm: a,
   onCancel: l
@@ -565,7 +570,7 @@ function ie({
   return /* @__PURE__ */ e(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+      className: `fixed inset-0 z-50 flex items-center justify-center ${L.background.overlay} p-4`,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Decline invitation",
@@ -607,7 +612,7 @@ function ie({
     }
   );
 }
-function ue({
+function ge({
   client: n,
   onInvitationAccepted: a
 }) {
@@ -617,13 +622,13 @@ function ue({
     isError: i,
     error: o,
     refetch: g
-  } = V(n), m = X(n), v = Z(n), [u, y] = k(null), x = async (c) => {
+  } = X(n), m = Z(n), v = _(n), [u, y] = k(null), N = async (c) => {
     try {
       await m.mutateAsync(c), a?.();
-    } catch (w) {
-      console.error("Failed to accept invitation:", w);
+    } catch (x) {
+      console.error("Failed to accept invitation:", x);
     }
-  }, N = (c) => {
+  }, w = (c) => {
     const s = l.find((f) => f.token === c)?.entity?.displayName || "this organization";
     y({ token: c, entityName: s });
   }, p = async () => {
@@ -640,7 +645,7 @@ function ue({
   ).length;
   return /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { role: "main", "aria-label": "Invitations", children: [
     u && /* @__PURE__ */ e(
-      ie,
+      ae,
       {
         entityName: u.entityName,
         onConfirm: p,
@@ -673,8 +678,8 @@ function ue({
         ]
       }
     ),
-    r && /* @__PURE__ */ e(re, {}),
-    !r && !i && /* @__PURE__ */ e(R, { children: l.length === 0 ? /* @__PURE__ */ t(
+    r && /* @__PURE__ */ e(ie, {}),
+    !r && !i && /* @__PURE__ */ e(S, { children: l.length === 0 ? /* @__PURE__ */ t(
       "div",
       {
         className: "text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",
@@ -685,12 +690,12 @@ function ue({
         ]
       }
     ) : /* @__PURE__ */ e("section", { "aria-label": "Invitation list", children: /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
-      S,
+      A,
       {
         invitations: l,
         mode: "user",
-        onAccept: x,
-        onDecline: N,
+        onAccept: N,
+        onDecline: w,
         isLoading: r,
         emptyMessage: "You don't have any pending invitations"
       }
@@ -698,7 +703,7 @@ function ue({
   ] }) });
 }
 export {
-  de as EntityListPage,
-  ue as InvitationsPage,
-  me as MembersManagementPage
+  me as EntityListPage,
+  ge as InvitationsPage,
+  ue as MembersManagementPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "description": "Page containers for entity/organization management",
   "type": "module",
   "main": "dist/index.js",
@@ -40,16 +40,18 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@tanstack/react-query": "^5.0.0",
-    "@sudobility/components": "^5.0.49",
+    "@sudobility/components": "^5.0.50",
     "@sudobility/entity_client": "^0.0.33",
     "@sudobility/entity-components": "^1.0.13",
     "@heroicons/react": "^2.2.0",
-    "@sudobility/types": "^1.9.61"
+    "@sudobility/types": "^1.9.61",
+    "@sudobility/design": "^1.1.26"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@heroicons/react": "^2.2.0",
-    "@sudobility/components": "^5.0.49",
+    "@sudobility/components": "^5.0.50",
+    "@sudobility/design": "^1.1.26",
     "@sudobility/entity-components": "^1.0.13",
     "@sudobility/entity_client": "^0.0.33",
     "@sudobility/types": "^1.9.61",