@sudobility/entity_pages 0.0.51 → 0.0.53

package/dist/index.esm.js

@@ -1,15 +1,15 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import * as v from "react";
-import { useState as N } from "react";
-import { Section as x } from "@sudobility/components";
-import { EntityList as C, InvitationForm as I, InvitationList as M, MemberList as k } from "@sudobility/entity-components";
-import { useEntities as z, useCreateEntity as L, useEntityMembers as E, useUpdateMemberRole as F, useRemoveMember as A, useEntityInvitations as R, useCreateInvitation as P, useCancelInvitation as D, useMyInvitations as W, useAcceptInvitation as j, useDeclineInvitation as O } from "@sudobility/entity_client";
-function T({
-  title: a,
-  titleId: n,
-  ...c
-}, i) {
-  return /* @__PURE__ */ v.createElement("svg", Object.assign({
+import { jsx as e, jsxs as t, Fragment as R } 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 _({
+  title: n,
+  titleId: a,
+  ...l
+}, r) {
+  return /* @__PURE__ */ M.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -17,288 +17,688 @@ function T({
     stroke: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon",
-    ref: i,
-    "aria-labelledby": n
-  }, c), a ? /* @__PURE__ */ v.createElement("title", {
-    id: n
-  }, a) : null, /* @__PURE__ */ v.createElement("path", {
+    ref: r,
+    "aria-labelledby": a
+  }, l), n ? /* @__PURE__ */ M.createElement("title", {
+    id: a
+  }, n) : null, /* @__PURE__ */ M.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M12 4.5v15m7.5-7.5h-15"
   }));
 }
-const Y = /* @__PURE__ */ v.forwardRef(T);
-function H({
-  client: a,
-  onSelectEntity: n
+const ee = /* @__PURE__ */ M.forwardRef(_);
+function te() {
+  return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading workspaces", children: [
+    [1, 2, 3].map((n) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-16 sm:h-20 rounded-lg bg-muted animate-pulse"
+      },
+      n
+    )),
+    /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading workspaces..." })
+  ] });
+}
+function de({
+  client: n,
+  onSelectEntity: a
 }) {
-  const [c, i] = N(!1), [s, d] = N({
+  const [l, r] = k(!1), [i, o] = k({
     displayName: "",
     description: ""
-  }), [h, m] = N(null), { data: u = [], isLoading: r } = z(a), l = L(a), y = u.filter((o) => o.entityType === "personal"), f = u.filter(
-    (o) => o.entityType === "organization"
+  }), [g, m] = k(null), {
+    data: v = [],
+    isLoading: u,
+    isError: y,
+    error: x,
+    refetch: N
+  } = $(n), p = q(n), b = v.filter((s) => s.entityType === "personal"), c = v.filter(
+    (s) => s.entityType === "organization"
   );
-  return /* @__PURE__ */ t(x, { spacing: "lg", maxWidth: "4xl", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-8", children: [
+  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: [
-        /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Workspaces" }),
-        /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: "Manage your personal and organization workspaces" })
+        /* @__PURE__ */ e("h1", { className: "text-xl sm:text-2xl font-bold text-foreground", children: "Workspaces" }),
+        /* @__PURE__ */ e("p", { className: "text-sm sm:text-base text-muted-foreground", children: "Manage your personal and organization workspaces" })
       ] }),
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          onClick: () => i(!0),
-          className: "flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors",
+          onClick: () => r(!0),
+          "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(Y, { className: "h-4 w-4" }),
+            /* @__PURE__ */ e(ee, { className: "h-4 w-4", "aria-hidden": "true" }),
             /* @__PURE__ */ e("span", { children: "New Organization" })
           ]
         }
       )
     ] }),
-    c && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ t("div", { className: "w-full max-w-md rounded-lg bg-background p-6 shadow-lg", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: "Create Organization" }),
-      /* @__PURE__ */ t("form", { onSubmit: async (o) => {
-        if (o.preventDefault(), m(null), !s.displayName.trim()) {
-          m("Display name is required");
-          return;
-        }
-        try {
-          await l.mutateAsync({
-            displayName: s.displayName.trim(),
-            description: s.description.trim() || void 0
-          }), i(!1), d({ displayName: "", description: "" });
-        } catch (g) {
-          m(g.message || "Failed to create organization");
-        }
-      }, className: "space-y-4", children: [
-        /* @__PURE__ */ t("div", { children: [
-          /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Display Name" }),
-          /* @__PURE__ */ e(
-            "input",
+    l && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Create organization",
+        onClick: (s) => {
+          s.target === s.currentTarget && (r(!1), o({ displayName: "", description: "" }), m(null));
+        },
+        onKeyDown: (s) => {
+          s.key === "Escape" && (r(!1), o({ displayName: "", description: "" }), m(null));
+        },
+        children: /* @__PURE__ */ t("div", { className: "w-full max-w-md rounded-lg bg-background p-4 sm:p-6 shadow-lg", children: [
+          /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: "Create Organization" }),
+          /* @__PURE__ */ t(
+            "form",
             {
-              type: "text",
-              value: s.displayName,
-              onChange: (o) => d((g) => ({
-                ...g,
-                displayName: o.target.value
-              })),
-              placeholder: "My Organization",
-              className: "w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+              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");
+                }
+              },
+              className: "space-y-4",
+              "aria-label": "Create organization form",
+              children: [
+                /* @__PURE__ */ t("div", { children: [
+                  /* @__PURE__ */ e(
+                    "label",
+                    {
+                      htmlFor: "create-org-name",
+                      className: "block text-sm font-medium mb-1",
+                      children: "Display Name"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      id: "create-org-name",
+                      type: "text",
+                      value: i.displayName,
+                      onChange: (s) => o((f) => ({
+                        ...f,
+                        displayName: s.target.value
+                      })),
+                      placeholder: "My Organization",
+                      "aria-required": "true",
+                      "aria-invalid": g ? "true" : void 0,
+                      className: "w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("div", { children: [
+                  /* @__PURE__ */ e(
+                    "label",
+                    {
+                      htmlFor: "create-org-description",
+                      className: "block text-sm font-medium mb-1",
+                      children: "Description (optional)"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "textarea",
+                    {
+                      id: "create-org-description",
+                      value: i.description,
+                      onChange: (s) => o((f) => ({
+                        ...f,
+                        description: s.target.value
+                      })),
+                      placeholder: "What is this organization for?",
+                      rows: 3,
+                      className: "w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y"
+                    }
+                  )
+                ] }),
+                g && /* @__PURE__ */ e(
+                  "p",
+                  {
+                    className: "text-sm text-destructive",
+                    role: "alert",
+                    "aria-live": "polite",
+                    children: g
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        r(!1), o({
+                          displayName: "",
+                          description: ""
+                        }), m(null);
+                      },
+                      className: "px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: p.isPending,
+                      "aria-busy": p.isPending,
+                      className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",
+                      children: p.isPending ? "Creating..." : "Create"
+                    }
+                  )
+                ] })
+              ]
             }
           )
-        ] }),
-        /* @__PURE__ */ t("div", { children: [
-          /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Description (optional)" }),
+        ] })
+      }
+    ),
+    y && /* @__PURE__ */ t(
+      "div",
+      {
+        className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-6 sm:mb-8",
+        role: "alert",
+        "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(
-            "textarea",
+            "button",
             {
-              value: s.description,
-              onChange: (o) => d((g) => ({
-                ...g,
-                description: o.target.value
-              })),
-              placeholder: "What is this organization for?",
-              rows: 3,
-              className: "w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y"
+              type: "button",
+              onClick: () => N(),
+              "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"
             }
           )
-        ] }),
-        h && /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: h }),
-        /* @__PURE__ */ t("div", { className: "flex justify-end gap-2", children: [
+        ]
+      }
+    ),
+    u && /* @__PURE__ */ e(te, {}),
+    !u && !y && /* @__PURE__ */ t(R, { 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,
+          {
+            entities: b,
+            onSelect: a,
+            isLoading: u
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("section", { "aria-label": "Organizations", children: [
+        /* @__PURE__ */ e("h2", { className: "text-base sm:text-lg font-semibold mb-3", children: "Organizations" }),
+        c.length === 0 ? /* @__PURE__ */ t(
+          "div",
+          {
+            className: "text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",
+            role: "status",
+            children: [
+              /* @__PURE__ */ e("p", { children: "No organizations yet" }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => r(!0),
+                  className: "mt-2 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded",
+                  "aria-label": "Create your first organization",
+                  children: "Create your first organization"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ e(
+          E,
+          {
+            entities: c,
+            onSelect: a,
+            isLoading: u
+          }
+        )
+      ] }),
+      v.length === 0 && /* @__PURE__ */ t(
+        "div",
+        {
+          className: "text-center py-8 sm:py-12 text-muted-foreground",
+          role: "status",
+          children: [
+            /* @__PURE__ */ e("p", { className: "text-base sm:text-lg font-medium mb-2", children: "No workspaces found" }),
+            /* @__PURE__ */ e("p", { className: "text-sm", children: "Create an organization to get started." })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function z() {
+  return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading members", children: [
+    [1, 2, 3].map((n) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-14 sm:h-16 rounded-lg bg-muted animate-pulse"
+      },
+      n
+    )),
+    /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading members..." })
+  ] });
+}
+function ne({
+  title: n,
+  message: a,
+  confirmLabel: l,
+  onConfirm: r,
+  onCancel: i
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": n,
+      onClick: (o) => {
+        o.target === o.currentTarget && i();
+      },
+      onKeyDown: (o) => {
+        o.key === "Escape" && i();
+      },
+      children: /* @__PURE__ */ t("div", { className: "w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg", children: [
+        /* @__PURE__ */ e("h3", { className: "text-lg font-semibold mb-2", children: n }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-4", children: a }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => {
-                i(!1), d({ displayName: "", description: "" }), m(null);
-              },
-              className: "px-4 py-2 rounded-lg border hover:bg-muted transition-colors",
+              onClick: i,
+              className: "px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",
               children: "Cancel"
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
-              type: "submit",
-              disabled: l.isPending,
-              className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",
-              children: l.isPending ? "Creating..." : "Create"
+              type: "button",
+              onClick: r,
+              className: "px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",
+              children: l
             }
           )
         ] })
       ] })
-    ] }) }),
-    y.length > 0 && /* @__PURE__ */ t("div", { className: "mb-8", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Personal Workspace" }),
-      /* @__PURE__ */ e(
-        C,
-        {
-          entities: y,
-          onSelect: n,
-          isLoading: r
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Organizations" }),
-      f.length === 0 && !r ? /* @__PURE__ */ t("div", { className: "text-center py-8 text-muted-foreground border border-dashed rounded-lg", children: [
-        /* @__PURE__ */ e("p", { children: "No organizations yet" }),
-        /* @__PURE__ */ e(
-          "button",
-          {
-            type: "button",
-            onClick: () => i(!0),
-            className: "mt-2 text-primary hover:underline",
-            children: "Create your first organization"
-          }
-        )
-      ] }) : /* @__PURE__ */ e(
-        C,
-        {
-          entities: f,
-          onSelect: n,
-          isLoading: r
-        }
-      )
-    ] })
-  ] });
+    }
+  );
 }
-function J({
-  client: a,
-  entity: n,
-  currentUserId: c
+function me({
+  client: n,
+  entity: a,
+  currentUserId: l
 }) {
-  const i = n.userRole === "owner", { data: s = [], isLoading: d } = E(
-    a,
-    n.entitySlug
-  ), h = F(a), m = A(a), { data: u = [], isLoading: r } = R(a, i ? n.entitySlug : null), l = P(a), y = D(a), f = async (p, b) => {
+  const r = a.userRole === "owner", [i, o] = k(null), {
+    data: g = [],
+    isLoading: m,
+    isError: v,
+    error: u,
+    refetch: y
+  } = U(n, a.entitySlug), x = B(n), N = G(n), {
+    data: p = [],
+    isLoading: b,
+    isError: c,
+    error: w,
+    refetch: s
+  } = H(n, r ? a.entitySlug : null), f = J(n), A = Q(n), D = async (d, h) => {
     try {
-      await h.mutateAsync({
-        entitySlug: n.entitySlug,
-        memberId: p,
-        role: b
+      await x.mutateAsync({
+        entitySlug: a.entitySlug,
+        memberId: d,
+        role: h
       });
-    } catch (S) {
-      console.error("Failed to update role:", S);
+    } catch (C) {
+      console.error("Failed to update role:", C);
     }
-  }, w = async (p) => {
-    if (confirm("Are you sure you want to remove this member?"))
-      try {
-        await m.mutateAsync({
-          entitySlug: n.entitySlug,
-          memberId: p
-        });
-      } catch (b) {
-        console.error("Failed to remove member:", b);
-      }
-  }, o = async (p) => {
-    await l.mutateAsync({
-      entitySlug: n.entitySlug,
-      request: p
+  }, F = (d) => {
+    const h = g.find((L) => L.id === d), C = h?.user?.displayName || h?.user?.email || "this member";
+    o({
+      type: "removeMember",
+      id: d,
+      displayLabel: C
+    });
+  }, j = async (d) => {
+    try {
+      await N.mutateAsync({
+        entitySlug: a.entitySlug,
+        memberId: d
+      });
+    } catch (h) {
+      console.error("Failed to remove member:", h);
+    }
+  }, P = async (d) => {
+    await f.mutateAsync({
+      entitySlug: a.entitySlug,
+      request: d
+    });
+  }, T = (d) => {
+    const C = p.find((L) => L.id === d)?.email || "this invitation";
+    o({
+      type: "cancelInvitation",
+      id: d,
+      displayLabel: C
     });
-  }, g = async (p) => {
+  }, W = async (d) => {
     try {
-      await y.mutateAsync({
-        entitySlug: n.entitySlug,
-        invitationId: p
+      await A.mutateAsync({
+        entitySlug: a.entitySlug,
+        invitationId: d
       });
-    } catch (b) {
-      console.error("Failed to cancel invitation:", b);
+    } 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));
   };
-  return n.entityType === "personal" ? /* @__PURE__ */ e(x, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { className: "text-center py-12 text-muted-foreground", children: [
-    /* @__PURE__ */ e("p", { children: "Personal workspaces cannot have additional members." }),
-    /* @__PURE__ */ e("p", { className: "mt-2", children: "Create an organization to collaborate with others." })
-  ] }) }) : /* @__PURE__ */ t(x, { spacing: "lg", maxWidth: "4xl", children: [
-    /* @__PURE__ */ t("div", { className: "mb-8", children: [
-      /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Members" }),
-      /* @__PURE__ */ t("p", { className: "text-muted-foreground", children: [
+  return a.entityType === "personal" ? /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: "text-center py-8 sm:py-12 text-muted-foreground",
+      role: "status",
+      "aria-label": "Personal workspace notice",
+      children: [
+        /* @__PURE__ */ e("p", { children: "Personal workspaces cannot have additional members." }),
+        /* @__PURE__ */ e("p", { className: "mt-2", children: "Create an organization to collaborate with others." })
+      ]
+    }
+  ) }) : /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { role: "main", "aria-label": "Members management", children: [
+    i && /* @__PURE__ */ e(
+      ne,
+      {
+        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,
+        onCancel: () => o(null)
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mb-6 sm:mb-8", children: [
+      /* @__PURE__ */ e("h1", { className: "text-xl sm:text-2xl font-bold text-foreground", children: "Members" }),
+      /* @__PURE__ */ t("p", { className: "text-sm sm:text-base text-muted-foreground", children: [
         "Manage members and invitations for ",
-        n.displayName
+        a.displayName
       ] })
     ] }),
-    i && /* @__PURE__ */ t("div", { className: "rounded-lg border p-4 mb-8", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: "Invite Members" }),
-      /* @__PURE__ */ e(
-        I,
+    r && /* @__PURE__ */ t(
+      "section",
+      {
+        className: "rounded-lg border p-3 sm:p-4 mb-6 sm:mb-8",
+        "aria-label": "Invite members",
+        children: [
+          /* @__PURE__ */ e("h2", { className: "text-base sm:text-lg font-semibold mb-3 sm:mb-4", children: "Invite Members" }),
+          /* @__PURE__ */ e(
+            K,
+            {
+              onSubmit: P,
+              isSubmitting: f.isPending
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ t("section", { className: "mb-6 sm:mb-8", "aria-label": "Pending invitations", children: [
+      /* @__PURE__ */ e("h2", { className: "text-base sm:text-lg font-semibold mb-3", children: "Pending Invitations" }),
+      c ? /* @__PURE__ */ t(
+        "div",
         {
-          onSubmit: o,
-          isSubmitting: l.isPending
+          className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",
+          role: "alert",
+          "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(
+              "button",
+              {
+                type: "button",
+                onClick: () => s(),
+                "aria-label": "Retry loading invitations",
+                className: "px-3 py-1.5 text-sm 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"
+              }
+            )
+          ]
         }
-      )
-    ] }),
-    i && /* @__PURE__ */ t("div", { className: "mb-8", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Pending Invitations" }),
-      /* @__PURE__ */ e(
-        M,
+      ) : b ? /* @__PURE__ */ e(z, {}) : p.length === 0 ? /* @__PURE__ */ e(
+        "div",
+        {
+          className: "text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",
+          role: "status",
+          children: /* @__PURE__ */ e("p", { children: "No pending invitations" })
+        }
+      ) : /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
+        S,
         {
-          invitations: u,
+          invitations: p,
           mode: "admin",
-          onCancel: g,
-          isLoading: r,
+          onCancel: T,
+          isLoading: b,
           emptyMessage: "No pending invitations"
         }
-      )
+      ) })
     ] }),
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t("h2", { className: "text-lg font-semibold mb-3", children: [
+    /* @__PURE__ */ t("section", { "aria-label": "Current members", children: [
+      /* @__PURE__ */ t("h2", { className: "text-base sm:text-lg font-semibold mb-3", children: [
         "Current Members (",
-        s.length,
+        g.length,
         ")"
       ] }),
-      /* @__PURE__ */ e(
-        k,
+      v ? /* @__PURE__ */ t(
+        "div",
         {
-          members: s,
-          currentUserId: c,
-          canManage: i,
-          onRoleChange: f,
-          onRemove: w,
-          isLoading: d
+          className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",
+          role: "alert",
+          "aria-live": "polite",
+          children: [
+            /* @__PURE__ */ e("p", { className: "text-destructive font-medium mb-2", children: "Failed to load members" }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-3", children: u?.message || "An unexpected error occurred" }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => y(),
+                "aria-label": "Retry loading members",
+                className: "px-3 py-1.5 text-sm 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"
+              }
+            )
+          ]
         }
-      )
+      ) : m ? /* @__PURE__ */ e(z, {}) : g.length === 0 ? /* @__PURE__ */ t(
+        "div",
+        {
+          className: "text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",
+          role: "status",
+          children: [
+            /* @__PURE__ */ e("p", { children: "No members yet" }),
+            r && /* @__PURE__ */ e("p", { className: "text-sm mt-1", children: "Use the invite form above to add members." })
+          ]
+        }
+      ) : /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
+        Y,
+        {
+          members: g,
+          currentUserId: l,
+          canManage: r,
+          onRoleChange: D,
+          onRemove: F,
+          isLoading: m
+        }
+      ) })
     ] })
+  ] }) });
+}
+function re() {
+  return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading invitations", children: [
+    [1, 2].map((n) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-16 sm:h-20 rounded-lg bg-muted animate-pulse"
+      },
+      n
+    )),
+    /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading invitations..." })
   ] });
 }
-function K({
-  client: a,
-  onInvitationAccepted: n
+function ie({
+  entityName: n,
+  onConfirm: a,
+  onCancel: l
 }) {
-  const { data: c = [], isLoading: i } = W(a), s = j(a), d = O(a), h = async (r) => {
-    try {
-      await s.mutateAsync(r), n?.();
-    } catch (l) {
-      console.error("Failed to accept invitation:", l);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Decline invitation",
+      onClick: (r) => {
+        r.target === r.currentTarget && l();
+      },
+      onKeyDown: (r) => {
+        r.key === "Escape" && l();
+      },
+      children: /* @__PURE__ */ t("div", { className: "w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg", children: [
+        /* @__PURE__ */ e("h3", { className: "text-lg font-semibold mb-2", children: "Decline Invitation" }),
+        /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground mb-4", children: [
+          "Are you sure you want to decline the invitation to join",
+          " ",
+          /* @__PURE__ */ e("strong", { children: n }),
+          "? You will need a new invitation to join later."
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: l,
+              className: "px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",
+              children: "Keep"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: a,
+              className: "px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",
+              children: "Decline"
+            }
+          )
+        ] })
+      ] })
     }
-  }, m = async (r) => {
+  );
+}
+function ue({
+  client: n,
+  onInvitationAccepted: a
+}) {
+  const {
+    data: l = [],
+    isLoading: r,
+    isError: i,
+    error: o,
+    refetch: g
+  } = V(n), m = X(n), v = Z(n), [u, y] = k(null), x = async (c) => {
     try {
-      await d.mutateAsync(r);
-    } catch (l) {
-      console.error("Failed to decline invitation:", l);
+      await m.mutateAsync(c), a?.();
+    } catch (w) {
+      console.error("Failed to accept invitation:", w);
     }
-  }, u = c.filter((r) => r.status === "pending").length;
-  return /* @__PURE__ */ t(x, { spacing: "lg", maxWidth: "4xl", children: [
-    /* @__PURE__ */ t("div", { className: "mb-6", children: [
-      /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-foreground", children: "Invitations" }),
-      /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: u > 0 ? `You have ${u} pending invitation${u > 1 ? "s" : ""}` : "No pending invitations" })
+  }, N = (c) => {
+    const s = l.find((f) => f.token === c)?.entity?.displayName || "this organization";
+    y({ token: c, entityName: s });
+  }, p = async () => {
+    if (u) {
+      try {
+        await v.mutateAsync(u.token);
+      } catch (c) {
+        console.error("Failed to decline invitation:", c);
+      }
+      y(null);
+    }
+  }, b = l.filter(
+    (c) => c.status === "pending"
+  ).length;
+  return /* @__PURE__ */ e(I, { spacing: "lg", maxWidth: "4xl", children: /* @__PURE__ */ t("div", { role: "main", "aria-label": "Invitations", children: [
+    u && /* @__PURE__ */ e(
+      ie,
+      {
+        entityName: u.entityName,
+        onConfirm: p,
+        onCancel: () => y(null)
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mb-4 sm:mb-6", children: [
+      /* @__PURE__ */ e("h1", { className: "text-xl sm:text-2xl font-bold text-foreground", children: "Invitations" }),
+      /* @__PURE__ */ e("p", { className: "text-sm sm:text-base text-muted-foreground", children: b > 0 ? `You have ${b} pending invitation${b > 1 ? "s" : ""}` : "No pending invitations" })
     ] }),
-    /* @__PURE__ */ e(
-      M,
+    i && /* @__PURE__ */ t(
+      "div",
       {
-        invitations: c,
+        className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-4 sm:mb-6",
+        role: "alert",
+        "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-4", children: o?.message || "An unexpected error occurred" }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => g(),
+              "aria-label": "Retry loading invitations",
+              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"
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ e(re, {}),
+    !r && !i && /* @__PURE__ */ e(R, { children: l.length === 0 ? /* @__PURE__ */ t(
+      "div",
+      {
+        className: "text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",
+        role: "status",
+        children: [
+          /* @__PURE__ */ e("p", { className: "text-base sm:text-lg font-medium mb-1", children: "No invitations" }),
+          /* @__PURE__ */ e("p", { className: "text-sm", children: "You don't have any pending invitations" })
+        ]
+      }
+    ) : /* @__PURE__ */ e("section", { "aria-label": "Invitation list", children: /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
+      S,
+      {
+        invitations: l,
         mode: "user",
-        onAccept: h,
-        onDecline: m,
-        isLoading: i,
+        onAccept: x,
+        onDecline: N,
+        isLoading: r,
         emptyMessage: "You don't have any pending invitations"
       }
-    )
-  ] });
+    ) }) }) })
+  ] }) });
 }
 export {
-  H as EntityListPage,
-  K as InvitationsPage,
-  J as MembersManagementPage
+  de as EntityListPage,
+  ue as InvitationsPage,
+  me as MembersManagementPage
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@sudobility/components"),require("@sudobility/entity-components"),require("@sudobility/entity_client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@sudobility/components","@sudobility/entity-components","@sudobility/entity_client"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.EntityPages={},r.jsxRuntime,r.React,r.SudobilityComponents,r.SudobilityEntityComponents,r.SudobilityEntityClient))})(this,(function(r,e,v,x,b,s){"use strict";function M(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(a,i,n.get?n:{enumerable:!0,get:()=>t[i]})}}return a.default=t,Object.freeze(a)}const N=M(v);function I({title:t,titleId:a,...i},n){return N.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":a},i),t?N.createElement("title",{id:a},t):null,N.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}))}const k=N.forwardRef(I);function E({client:t,onSelectEntity:a}){const[i,n]=v.useState(!1),[c,g]=v.useState({displayName:"",description:""}),[y,m]=v.useState(null),{data:u=[],isLoading:o}=s.useEntities(t),d=s.useCreateEntity(t),w=u.filter(l=>l.entityType==="personal"),S=u.filter(l=>l.entityType==="organization"),C=async l=>{if(l.preventDefault(),m(null),!c.displayName.trim()){m("Display name is required");return}try{await d.mutateAsync({displayName:c.displayName.trim(),description:c.description.trim()||void 0}),n(!1),g({displayName:"",description:""})}catch(p){m(p.message||"Failed to create organization")}};return e.jsxs(x.Section,{spacing:"lg",maxWidth:"4xl",children:[e.jsxs("div",{className:"flex items-center justify-between mb-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Workspaces"}),e.jsx("p",{className:"text-muted-foreground",children:"Manage your personal and organization workspaces"})]}),e.jsxs("button",{type:"button",onClick:()=>n(!0),className:"flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors",children:[e.jsx(k,{className:"h-4 w-4"}),e.jsx("span",{children:"New Organization"})]})]}),i&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:e.jsxs("div",{className:"w-full max-w-md rounded-lg bg-background p-6 shadow-lg",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Create Organization"}),e.jsxs("form",{onSubmit:C,className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Display Name"}),e.jsx("input",{type:"text",value:c.displayName,onChange:l=>g(p=>({...p,displayName:l.target.value})),placeholder:"My Organization",className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium mb-1",children:"Description (optional)"}),e.jsx("textarea",{value:c.description,onChange:l=>g(p=>({...p,description:l.target.value})),placeholder:"What is this organization for?",rows:3,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y"})]}),y&&e.jsx("p",{className:"text-sm text-destructive",children:y}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{n(!1),g({displayName:"",description:""}),m(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:d.isPending,className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",children:d.isPending?"Creating...":"Create"})]})]})]})}),w.length>0&&e.jsxs("div",{className:"mb-8",children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(b.EntityList,{entities:w,onSelect:a,isLoading:o})]}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Organizations"}),S.length===0&&!o?e.jsxs("div",{className:"text-center py-8 text-muted-foreground border border-dashed rounded-lg",children:[e.jsx("p",{children:"No organizations yet"}),e.jsx("button",{type:"button",onClick:()=>n(!0),className:"mt-2 text-primary hover:underline",children:"Create your first organization"})]}):e.jsx(b.EntityList,{entities:S,onSelect:a,isLoading:o})]})]})}function L({client:t,entity:a,currentUserId:i}){const n=a.userRole==="owner",{data:c=[],isLoading:g}=s.useEntityMembers(t,a.entitySlug),y=s.useUpdateMemberRole(t),m=s.useRemoveMember(t),{data:u=[],isLoading:o}=s.useEntityInvitations(t,n?a.entitySlug:null),d=s.useCreateInvitation(t),w=s.useCancelInvitation(t),S=async(h,f)=>{try{await y.mutateAsync({entitySlug:a.entitySlug,memberId:h,role:f})}catch(j){console.error("Failed to update role:",j)}},C=async h=>{if(confirm("Are you sure you want to remove this member?"))try{await m.mutateAsync({entitySlug:a.entitySlug,memberId:h})}catch(f){console.error("Failed to remove member:",f)}},l=async h=>{await d.mutateAsync({entitySlug:a.entitySlug,request:h})},p=async h=>{try{await w.mutateAsync({entitySlug:a.entitySlug,invitationId:h})}catch(f){console.error("Failed to cancel invitation:",f)}};return a.entityType==="personal"?e.jsx(x.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{className:"text-center py-12 text-muted-foreground",children:[e.jsx("p",{children:"Personal workspaces cannot have additional members."}),e.jsx("p",{className:"mt-2",children:"Create an organization to collaborate with others."})]})}):e.jsxs(x.Section,{spacing:"lg",maxWidth:"4xl",children:[e.jsxs("div",{className:"mb-8",children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Members"}),e.jsxs("p",{className:"text-muted-foreground",children:["Manage members and invitations for ",a.displayName]})]}),n&&e.jsxs("div",{className:"rounded-lg border p-4 mb-8",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Invite Members"}),e.jsx(b.InvitationForm,{onSubmit:l,isSubmitting:d.isPending})]}),n&&e.jsxs("div",{className:"mb-8",children:[e.jsx("h2",{className:"text-lg font-semibold mb-3",children:"Pending Invitations"}),e.jsx(b.InvitationList,{invitations:u,mode:"admin",onCancel:p,isLoading:o,emptyMessage:"No pending invitations"})]}),e.jsxs("div",{children:[e.jsxs("h2",{className:"text-lg font-semibold mb-3",children:["Current Members (",c.length,")"]}),e.jsx(b.MemberList,{members:c,currentUserId:i,canManage:n,onRoleChange:S,onRemove:C,isLoading:g})]})]})}function P({client:t,onInvitationAccepted:a}){const{data:i=[],isLoading:n}=s.useMyInvitations(t),c=s.useAcceptInvitation(t),g=s.useDeclineInvitation(t),y=async o=>{try{await c.mutateAsync(o),a?.()}catch(d){console.error("Failed to accept invitation:",d)}},m=async o=>{try{await g.mutateAsync(o)}catch(d){console.error("Failed to decline invitation:",d)}},u=i.filter(o=>o.status==="pending").length;return e.jsxs(x.Section,{spacing:"lg",maxWidth:"4xl",children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:"Invitations"}),e.jsx("p",{className:"text-muted-foreground",children:u>0?`You have ${u} pending invitation${u>1?"s":""}`:"No pending invitations"})]}),e.jsx(b.InvitationList,{invitations:i,mode:"user",onAccept:y,onDecline:m,isLoading:n,emptyMessage:"You don't have any pending invitations"})]})}r.EntityListPage=E,r.InvitationsPage=P,r.MembersManagementPage=L,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@sudobility/components"),require("@sudobility/entity-components"),require("@sudobility/entity_client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@sudobility/components","@sudobility/entity-components","@sudobility/entity_client"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.EntityPages={},l.jsxRuntime,l.React,l.SudobilityComponents,l.SudobilityEntityComponents,l.SudobilityEntityClient))})(this,(function(l,e,N,E,w,m){"use strict";function j(r){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(a,s,t.get?t:{enumerable:!0,get:()=>r[s]})}}return a.default=r,Object.freeze(a)}const I=j(N);function D({title:r,titleId:a,...s},t){return I.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:t,"aria-labelledby":a},s),r?I.createElement("title",{id:a},r):null,I.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}))}const P=I.forwardRef(D);function A(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading workspaces",children:[[1,2,3].map(r=>e.jsx("div",{className:"h-16 sm:h-20 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading workspaces..."})]})}function F({client:r,onSelectEntity:a}){const[s,t]=N.useState(!1),[o,n]=N.useState({displayName:"",description:""}),[f,u]=N.useState(null),{data:x=[],isLoading:g,isError:v,error:k,refetch:S}=m.useEntities(r),p=m.useCreateEntity(r),h=x.filter(i=>i.entityType==="personal"),c=x.filter(i=>i.entityType==="organization"),C=async i=>{if(i.preventDefault(),u(null),!o.displayName.trim()){u("Display name is required");return}try{await p.mutateAsync({displayName:o.displayName.trim(),description:o.description.trim()||void 0}),t(!1),n({displayName:"",description:""})}catch(b){u(b.message||"Failed to create organization")}};return e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Workspaces",children:[e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Workspaces"}),e.jsx("p",{className:"text-sm sm:text-base text-muted-foreground",children:"Manage your personal and organization workspaces"})]}),e.jsxs("button",{type:"button",onClick:()=>t(!0),"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:[e.jsx(P,{className:"h-4 w-4","aria-hidden":"true"}),e.jsx("span",{children:"New Organization"})]})]}),s&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":"Create organization",onClick:i=>{i.target===i.currentTarget&&(t(!1),n({displayName:"",description:""}),u(null))},onKeyDown:i=>{i.key==="Escape"&&(t(!1),n({displayName:"",description:""}),u(null))},children:e.jsxs("div",{className:"w-full max-w-md rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Create Organization"}),e.jsxs("form",{onSubmit:C,className:"space-y-4","aria-label":"Create organization form",children:[e.jsxs("div",{children:[e.jsx("label",{htmlFor:"create-org-name",className:"block text-sm font-medium mb-1",children:"Display Name"}),e.jsx("input",{id:"create-org-name",type:"text",value:o.displayName,onChange:i=>n(b=>({...b,displayName:i.target.value})),placeholder:"My Organization","aria-required":"true","aria-invalid":f?"true":void 0,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"})]}),e.jsxs("div",{children:[e.jsx("label",{htmlFor:"create-org-description",className:"block text-sm font-medium mb-1",children:"Description (optional)"}),e.jsx("textarea",{id:"create-org-description",value:o.description,onChange:i=>n(b=>({...b,description:i.target.value})),placeholder:"What is this organization for?",rows:3,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y"})]}),f&&e.jsx("p",{className:"text-sm text-destructive",role:"alert","aria-live":"polite",children:f}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:()=>{t(!1),n({displayName:"",description:""}),u(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:p.isPending,"aria-busy":p.isPending,className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:p.isPending?"Creating...":"Create"})]})]})]})}),v&&e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-6 sm:mb-8",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load workspaces"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:k?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>S(),"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"})]}),g&&e.jsx(A,{}),!g&&!v&&e.jsxs(e.Fragment,{children:[h.length>0&&e.jsxs("section",{className:"mb-6 sm:mb-8","aria-label":"Personal workspace",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(w.EntityList,{entities:h,onSelect:a,isLoading:g})]}),e.jsxs("section",{"aria-label":"Organizations",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Organizations"}),c.length===0?e.jsxs("div",{className:"text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{children:"No organizations yet"}),e.jsx("button",{type:"button",onClick:()=>t(!0),className:"mt-2 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded","aria-label":"Create your first organization",children:"Create your first organization"})]}):e.jsx(w.EntityList,{entities:c,onSelect:a,isLoading:g})]}),x.length===0&&e.jsxs("div",{className:"text-center py-8 sm:py-12 text-muted-foreground",role:"status",children:[e.jsx("p",{className:"text-base sm:text-lg font-medium mb-2",children:"No workspaces found"}),e.jsx("p",{className:"text-sm",children:"Create an organization to get started."})]})]})]})})}function z(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading members",children:[[1,2,3].map(r=>e.jsx("div",{className:"h-14 sm:h-16 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading members..."})]})}function O({title:r,message:a,confirmLabel:s,onConfirm:t,onCancel:o}){return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":r,onClick:n=>{n.target===n.currentTarget&&o()},onKeyDown:n=>{n.key==="Escape"&&o()},children:e.jsxs("div",{className:"w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:r}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:a}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:o,className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Cancel"}),e.jsx("button",{type:"button",onClick:t,className:"px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",children:s})]})]})})}function T({client:r,entity:a,currentUserId:s}){const t=a.userRole==="owner",[o,n]=N.useState(null),{data:f=[],isLoading:u,isError:x,error:g,refetch:v}=m.useEntityMembers(r,a.entitySlug),k=m.useUpdateMemberRole(r),S=m.useRemoveMember(r),{data:p=[],isLoading:h,isError:c,error:C,refetch:i}=m.useEntityInvitations(r,t?a.entitySlug:null),b=m.useCreateInvitation(r),Y=m.useCancelInvitation(r),$=async(d,y)=>{try{await k.mutateAsync({entitySlug:a.entitySlug,memberId:d,role:y})}catch(M){console.error("Failed to update role:",M)}},U=d=>{const y=f.find(L=>L.id===d),M=y?.user?.displayName||y?.user?.email||"this member";n({type:"removeMember",id:d,displayLabel:M})},B=async d=>{try{await S.mutateAsync({entitySlug:a.entitySlug,memberId:d})}catch(y){console.error("Failed to remove member:",y)}},G=async d=>{await b.mutateAsync({entitySlug:a.entitySlug,request:d})},H=d=>{const M=p.find(L=>L.id===d)?.email||"this invitation";n({type:"cancelInvitation",id:d,displayLabel:M})},J=async d=>{try{await Y.mutateAsync({entitySlug:a.entitySlug,invitationId:d})}catch(y){console.error("Failed to cancel invitation:",y)}},Q=async()=>{o&&(o.type==="removeMember"?await B(o.id):o.type==="cancelInvitation"&&await J(o.id),n(null))};return a.entityType==="personal"?e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{className:"text-center py-8 sm:py-12 text-muted-foreground",role:"status","aria-label":"Personal workspace notice",children:[e.jsx("p",{children:"Personal workspaces cannot have additional members."}),e.jsx("p",{className:"mt-2",children:"Create an organization to collaborate with others."})]})}):e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Members management",children:[o&&e.jsx(O,{title:o.type==="removeMember"?"Remove Member":"Cancel Invitation",message:o.type==="removeMember"?`Are you sure you want to remove ${o.displayLabel}? They will lose access to this organization.`:`Are you sure you want to cancel the invitation to ${o.displayLabel}?`,confirmLabel:o.type==="removeMember"?"Remove":"Cancel Invitation",onConfirm:Q,onCancel:()=>n(null)}),e.jsxs("div",{className:"mb-6 sm:mb-8",children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Members"}),e.jsxs("p",{className:"text-sm sm:text-base text-muted-foreground",children:["Manage members and invitations for ",a.displayName]})]}),t&&e.jsxs("section",{className:"rounded-lg border p-3 sm:p-4 mb-6 sm:mb-8","aria-label":"Invite members",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3 sm:mb-4",children:"Invite Members"}),e.jsx(w.InvitationForm,{onSubmit:G,isSubmitting:b.isPending})]}),t&&e.jsxs("section",{className:"mb-6 sm:mb-8","aria-label":"Pending invitations",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Pending Invitations"}),c?e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load invitations"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:C?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>i(),"aria-label":"Retry loading invitations",className:"px-3 py-1.5 text-sm 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"})]}):h?e.jsx(z,{}):p.length===0?e.jsx("div",{className:"text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",role:"status",children:e.jsx("p",{children:"No pending invitations"})}):e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.InvitationList,{invitations:p,mode:"admin",onCancel:H,isLoading:h,emptyMessage:"No pending invitations"})})]}),e.jsxs("section",{"aria-label":"Current members",children:[e.jsxs("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:["Current Members (",f.length,")"]}),x?e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load members"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:g?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>v(),"aria-label":"Retry loading members",className:"px-3 py-1.5 text-sm 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"})]}):u?e.jsx(z,{}):f.length===0?e.jsxs("div",{className:"text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{children:"No members yet"}),t&&e.jsx("p",{className:"text-sm mt-1",children:"Use the invite form above to add members."})]}):e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.MemberList,{members:f,currentUserId:s,canManage:t,onRoleChange:$,onRemove:U,isLoading:u})})]})]})})}function W(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading invitations",children:[[1,2].map(r=>e.jsx("div",{className:"h-16 sm:h-20 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading invitations..."})]})}function q({entityName:r,onConfirm:a,onCancel:s}){return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":"Decline invitation",onClick:t=>{t.target===t.currentTarget&&s()},onKeyDown:t=>{t.key==="Escape"&&s()},children:e.jsxs("div",{className:"w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Decline Invitation"}),e.jsxs("p",{className:"text-sm text-muted-foreground mb-4",children:["Are you sure you want to decline the invitation to join"," ",e.jsx("strong",{children:r}),"? You will need a new invitation to join later."]}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:s,className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Keep"}),e.jsx("button",{type:"button",onClick:a,className:"px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",children:"Decline"})]})]})})}function K({client:r,onInvitationAccepted:a}){const{data:s=[],isLoading:t,isError:o,error:n,refetch:f}=m.useMyInvitations(r),u=m.useAcceptInvitation(r),x=m.useDeclineInvitation(r),[g,v]=N.useState(null),k=async c=>{try{await u.mutateAsync(c),a?.()}catch(C){console.error("Failed to accept invitation:",C)}},S=c=>{const i=s.find(b=>b.token===c)?.entity?.displayName||"this organization";v({token:c,entityName:i})},p=async()=>{if(g){try{await x.mutateAsync(g.token)}catch(c){console.error("Failed to decline invitation:",c)}v(null)}},h=s.filter(c=>c.status==="pending").length;return e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Invitations",children:[g&&e.jsx(q,{entityName:g.entityName,onConfirm:p,onCancel:()=>v(null)}),e.jsxs("div",{className:"mb-4 sm:mb-6",children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Invitations"}),e.jsx("p",{className:"text-sm sm:text-base text-muted-foreground",children:h>0?`You have ${h} pending invitation${h>1?"s":""}`:"No pending invitations"})]}),o&&e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-4 sm:mb-6",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load invitations"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:n?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>f(),"aria-label":"Retry loading invitations",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"})]}),t&&e.jsx(W,{}),!t&&!o&&e.jsx(e.Fragment,{children:s.length===0?e.jsxs("div",{className:"text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{className:"text-base sm:text-lg font-medium mb-1",children:"No invitations"}),e.jsx("p",{className:"text-sm",children:"You don't have any pending invitations"})]}):e.jsx("section",{"aria-label":"Invitation list",children:e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.InvitationList,{invitations:s,mode:"user",onAccept:k,onDecline:S,isLoading:t,emptyMessage:"You don't have any pending invitations"})})})})]})})}l.EntityListPage=F,l.InvitationsPage=K,l.MembersManagementPage=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Page containers for entity/organization management",
   "type": "module",
   "main": "dist/index.umd.js",
@@ -43,7 +43,7 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "@tanstack/react-query": "^5.0.0",
     "@sudobility/components": "^5.0.15",
-    "@sudobility/entity_client": "^0.0.23",
+    "@sudobility/entity_client": "^0.0.24",
     "@sudobility/entity-components": "^1.0.11",
     "@heroicons/react": "^2.2.0",
     "@sudobility/types": "^1.9.54"
@@ -53,7 +53,7 @@
     "@heroicons/react": "^2.2.0",
     "@sudobility/components": "^5.0.15",
     "@sudobility/entity-components": "^1.0.11",
-    "@sudobility/entity_client": "^0.0.23",
+    "@sudobility/entity_client": "^0.0.24",
     "@sudobility/types": "^1.9.54",
     "@tanstack/react-query": "^5.0.0",
     "@testing-library/dom": "^10.4.0",