@sudobility/entity_pages 0.0.123 → 0.0.124

package/dist/index.js

@@ -1,13 +1,13 @@
 import { jsxs as t, Fragment as k, jsx as e } from "react/jsx-runtime";
 import * as z from "react";
 import { useState as x } from "react";
-import { createPortal as S } from "react-dom";
+import { createPortal as j } from "react-dom";
 import { ContentLayout as E } from "@sudobility/components";
-import { EntityList as D, MemberList as j, InvitationForm as A, InvitationList as P } from "@sudobility/entity-components";
-import { useEntities as T, useCreateEntity as O, useEntityMembers as $, useUpdateMemberRole as W, useRemoveMember as K, useCreateInvitation as Y, useMyInvitations as q, useAcceptInvitation as U, useDeclineInvitation as B } from "@sudobility/entity_client";
-function G({
+import { EntityList as I, MemberList as A, InvitationForm as P, InvitationList as T } from "@sudobility/entity-components";
+import { useEntities as O, useCreateEntity as $, useEntityMembers as W, useUpdateMemberRole as K, useRemoveMember as Y, useCreateInvitation as q, useMyInvitations as U, useAcceptInvitation as B, useDeclineInvitation as G } from "@sudobility/entity_client";
+function H({
   title: r,
-  titleId: i,
+  titleId: a,
   ...o
 }, n) {
   return /* @__PURE__ */ z.createElement("svg", Object.assign({
@@ -19,22 +19,27 @@ function G({
     "aria-hidden": "true",
     "data-slot": "icon",
     ref: n,
-    "aria-labelledby": i
+    "aria-labelledby": a
   }, o), r ? /* @__PURE__ */ z.createElement("title", {
-    id: i
+    id: a
   }, r) : null, /* @__PURE__ */ z.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M12 4.5v15m7.5-7.5h-15"
   }));
 }
-const I = /* @__PURE__ */ z.forwardRef(G), R = {
-  // Background utilities
-  background: {
-    overlay: "bg-black/50 dark:bg-black/70"
+const L = /* @__PURE__ */ z.forwardRef(H), R = (r, a) => a, D = {
+  // Background utilities (theme-aware getter)
+  get background() {
+    return {
+      surface: R("bg-card", "bg-white dark:bg-gray-800"),
+      subtle: R("bg-muted", "bg-gray-50 dark:bg-gray-900"),
+      muted: R("bg-muted", "bg-gray-100 dark:bg-gray-700"),
+      overlay: "bg-black/50 dark:bg-black/70"
+    };
   }
 };
-function H() {
+function J() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading workspaces", children: [
     [1, 2, 3].map((r) => /* @__PURE__ */ e(
       "div",
@@ -48,7 +53,7 @@ function H() {
 }
 function ie({
   client: r,
-  onSelectEntity: i
+  onSelectEntity: a
 }) {
   const [o, n] = x(!1), [s, l] = x({
     displayName: "",
@@ -59,10 +64,10 @@ function ie({
     isError: b,
     error: N,
     refetch: w
-  } = T(r), h = O(r), y = u.filter((a) => a.entityType === "personal"), c = u.filter(
-    (a) => a.entityType === "organization"
-  ), v = async (a) => {
-    if (a.preventDefault(), d(null), !s.displayName.trim()) {
+  } = O(r), h = $(r), y = u.filter((i) => i.entityType === "personal"), c = u.filter(
+    (i) => i.entityType === "organization"
+  ), v = async (i) => {
+    if (i.preventDefault(), d(null), !s.displayName.trim()) {
       d("Display name is required");
       return;
     }
@@ -76,19 +81,19 @@ function ie({
     }
   };
   return /* @__PURE__ */ t(k, { children: [
-    o && S(
+    o && j(
       /* @__PURE__ */ e(
         "div",
         {
-          className: `fixed inset-0 z-50 flex items-center justify-center ${R.background.overlay} p-4`,
+          className: `fixed inset-0 z-50 flex items-center justify-center ${D.background.overlay} p-4`,
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Create organization",
-          onClick: (a) => {
-            a.target === a.currentTarget && (n(!1), l({ displayName: "", description: "" }), d(null));
+          onClick: (i) => {
+            i.target === i.currentTarget && (n(!1), l({ displayName: "", description: "" }), d(null));
           },
-          onKeyDown: (a) => {
-            a.key === "Escape" && (n(!1), l({ displayName: "", description: "" }), d(null));
+          onKeyDown: (i) => {
+            i.key === "Escape" && (n(!1), l({ displayName: "", description: "" }), d(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" }),
@@ -114,9 +119,9 @@ function ie({
                         id: "create-org-name",
                         type: "text",
                         value: s.displayName,
-                        onChange: (a) => l((f) => ({
+                        onChange: (i) => l((f) => ({
                           ...f,
-                          displayName: a.target.value
+                          displayName: i.target.value
                         })),
                         placeholder: "My Organization",
                         "aria-required": "true",
@@ -139,9 +144,9 @@ function ie({
                       {
                         id: "create-org-description",
                         value: s.description,
-                        onChange: (a) => l((f) => ({
+                        onChange: (i) => l((f) => ({
                           ...f,
-                          description: a.target.value
+                          description: i.target.value
                         })),
                         placeholder: "What is this organization for?",
                         rows: 3,
@@ -208,7 +213,7 @@ function ie({
               "aria-label": "Create new organization",
               className: "flex flex-shrink-0 items-center justify-center gap-2 px-3 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
               children: [
-                /* @__PURE__ */ e(I, { className: "h-4 w-4", "aria-hidden": "true" }),
+                /* @__PURE__ */ e(L, { className: "h-4 w-4", "aria-hidden": "true" }),
                 /* @__PURE__ */ e("span", { children: "New Organization" })
               ]
             }
@@ -237,7 +242,7 @@ function ie({
               ]
             }
           ),
-          m && /* @__PURE__ */ e(H, {}),
+          m && /* @__PURE__ */ e(J, {}),
           !m && !b && /* @__PURE__ */ t(k, { children: [
             y.length > 0 && /* @__PURE__ */ t(
               "section",
@@ -247,10 +252,10 @@ function ie({
                 children: [
                   /* @__PURE__ */ e("h2", { className: "text-base sm:text-lg font-semibold mb-3", children: "Personal Workspace" }),
                   /* @__PURE__ */ e(
-                    D,
+                    I,
                     {
                       entities: y,
-                      onSelect: i,
+                      onSelect: a,
                       isLoading: m
                     }
                   )
@@ -279,10 +284,10 @@ function ie({
                   ]
                 }
               ) : /* @__PURE__ */ e(
-                D,
+                I,
                 {
                   entities: c,
-                  onSelect: i,
+                  onSelect: a,
                   isLoading: m
                 }
               )
@@ -304,7 +309,7 @@ function ie({
     )
   ] });
 }
-function J() {
+function Q() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading members", children: [
     [1, 2, 3].map((r) => /* @__PURE__ */ e(
       "div",
@@ -316,9 +321,9 @@ function J() {
     /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading members..." })
   ] });
 }
-function Q({
+function V({
   title: r,
-  message: i,
+  message: a,
   confirmLabel: o,
   onConfirm: n,
   onCancel: s
@@ -326,7 +331,7 @@ function Q({
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `fixed inset-0 z-50 flex items-center justify-center ${R.background.overlay} p-4`,
+      className: `fixed inset-0 z-50 flex items-center justify-center ${D.background.overlay} p-4`,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": r,
@@ -338,7 +343,7 @@ function Q({
       },
       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: r }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-4", children: i }),
+        /* @__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",
@@ -363,35 +368,35 @@ function Q({
     }
   );
 }
-function ae({
+function oe({
   client: r,
-  entity: i,
+  entity: a,
   currentUserId: o
 }) {
-  const n = i.userRole === "owner", [s, l] = x(!1), [g, d] = x(null), {
+  const n = a.userRole === "owner", [s, l] = x(!1), [g, d] = x(null), {
     data: u = [],
     isLoading: m,
     isError: b,
     error: N,
     refetch: w
-  } = $(r, i.entitySlug), h = W(r), y = K(r), c = Y(r), v = async (p, C) => {
+  } = W(r, a.entitySlug), h = K(r), y = Y(r), c = q(r), v = async (p, C) => {
     try {
       await h.mutateAsync({
-        entitySlug: i.entitySlug,
+        entitySlug: a.entitySlug,
         memberId: p,
         role: C
       });
     } catch (M) {
       console.error("Failed to update role:", M);
     }
-  }, a = (p) => {
-    const C = u.find((F) => F.id === p), M = C?.user?.displayName || C?.user?.email || "this member";
+  }, i = (p) => {
+    const C = u.find((S) => S.id === p), M = C?.user?.displayName || C?.user?.email || "this member";
     d({ id: p, label: M });
   }, f = async () => {
     if (g) {
       try {
         await y.mutateAsync({
-          entitySlug: i.entitySlug,
+          entitySlug: a.entitySlug,
           memberId: g.id
         });
       } catch (p) {
@@ -399,13 +404,13 @@ function ae({
       }
       d(null);
     }
-  }, L = async (p) => {
+  }, F = async (p) => {
     await c.mutateAsync({
-      entitySlug: i.entitySlug,
+      entitySlug: a.entitySlug,
       request: p
     }), l(!1);
   };
-  return i.entityType === "personal" ? /* @__PURE__ */ e(
+  return a.entityType === "personal" ? /* @__PURE__ */ e(
     E,
     {
       header: /* @__PURE__ */ e("div", { className: "border-b bg-background px-4 py-3", children: /* @__PURE__ */ e("h1", { className: "text-lg sm:text-xl font-bold text-foreground", children: "Members" }) }),
@@ -424,7 +429,7 @@ function ae({
     }
   ) : /* @__PURE__ */ t(k, { children: [
     g && /* @__PURE__ */ e(
-      Q,
+      V,
       {
         title: "Remove Member",
         message: `Are you sure you want to remove ${g.label}? They will lose access to this organization.`,
@@ -446,7 +451,7 @@ function ae({
                 u.length === 1 ? "" : "s",
                 " in",
                 " ",
-                i.displayName
+                a.displayName
               ] })
             ] }),
             n && /* @__PURE__ */ t(
@@ -458,7 +463,7 @@ function ae({
                 "aria-controls": "invite-member-panel",
                 className: "flex flex-shrink-0 items-center gap-2 px-3 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
                 children: [
-                  /* @__PURE__ */ e(I, { className: "h-4 w-4", "aria-hidden": "true" }),
+                  /* @__PURE__ */ e(L, { className: "h-4 w-4", "aria-hidden": "true" }),
                   /* @__PURE__ */ e("span", { children: "Invite" })
                 ]
               }
@@ -473,9 +478,9 @@ function ae({
               children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ t("div", { className: "border-t px-4 py-3 sm:py-4", children: [
                 /* @__PURE__ */ e("h2", { className: "text-sm font-semibold mb-3", children: "Invite Member" }),
                 /* @__PURE__ */ e(
-                  A,
+                  P,
                   {
-                    onSubmit: L,
+                    onSubmit: F,
                     isSubmitting: c.isPending
                   }
                 )
@@ -504,7 +509,7 @@ function ae({
               )
             ]
           }
-        ) : m ? /* @__PURE__ */ e(J, {}) : u.length === 0 ? /* @__PURE__ */ t(
+        ) : m ? /* @__PURE__ */ e(Q, {}) : u.length === 0 ? /* @__PURE__ */ t(
           "div",
           {
             className: "text-center py-8 sm:py-12 text-muted-foreground border border-dashed rounded-lg",
@@ -515,13 +520,13 @@ function ae({
             ]
           }
         ) : /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
-          j,
+          A,
           {
             members: u,
             currentUserId: o,
             canManage: n,
             onRoleChange: v,
-            onRemove: a,
+            onRemove: i,
             isLoading: m
           }
         ) }) })
@@ -529,7 +534,7 @@ function ae({
     )
   ] });
 }
-function V() {
+function X() {
   return /* @__PURE__ */ t("div", { className: "space-y-3", role: "status", "aria-label": "Loading invitations", children: [
     [1, 2].map((r) => /* @__PURE__ */ e(
       "div",
@@ -541,15 +546,15 @@ function V() {
     /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading invitations..." })
   ] });
 }
-function X({
+function Z({
   entityName: r,
-  onConfirm: i,
+  onConfirm: a,
   onCancel: o
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `fixed inset-0 z-50 flex items-center justify-center ${R.background.overlay} p-4`,
+      className: `fixed inset-0 z-50 flex items-center justify-center ${D.background.overlay} p-4`,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Decline invitation",
@@ -581,7 +586,7 @@ function X({
             "button",
             {
               type: "button",
-              onClick: i,
+              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"
             }
@@ -591,9 +596,9 @@ function X({
     }
   );
 }
-function oe({
+function se({
   client: r,
-  onInvitationAccepted: i
+  onInvitationAccepted: a
 }) {
   const {
     data: o = [],
@@ -601,15 +606,15 @@ function oe({
     isError: s,
     error: l,
     refetch: g
-  } = q(r), d = U(r), u = B(r), [m, b] = x(null), N = async (c) => {
+  } = U(r), d = B(r), u = G(r), [m, b] = x(null), N = async (c) => {
     try {
-      await d.mutateAsync(c), i?.();
+      await d.mutateAsync(c), a?.();
     } catch (v) {
       console.error("Failed to accept invitation:", v);
     }
   }, w = (c) => {
-    const a = o.find((f) => f.token === c)?.entity?.displayName || "this organization";
-    b({ token: c, entityName: a });
+    const i = o.find((f) => f.token === c)?.entity?.displayName || "this organization";
+    b({ token: c, entityName: i });
   }, h = async () => {
     if (m) {
       try {
@@ -624,7 +629,7 @@ function oe({
   ).length;
   return /* @__PURE__ */ t(k, { children: [
     m && /* @__PURE__ */ e(
-      X,
+      Z,
       {
         entityName: m.entityName,
         onConfirm: h,
@@ -661,7 +666,7 @@ function oe({
               ]
             }
           ),
-          n && /* @__PURE__ */ e(V, {}),
+          n && /* @__PURE__ */ e(X, {}),
           !n && !s && /* @__PURE__ */ e(k, { children: o.length === 0 ? /* @__PURE__ */ t(
             "div",
             {
@@ -673,7 +678,7 @@ function oe({
               ]
             }
           ) : /* @__PURE__ */ e("section", { "aria-label": "Invitation list", children: /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
-            P,
+            T,
             {
               invitations: o,
               mode: "user",
@@ -690,6 +695,6 @@ function oe({
 }
 export {
   ie as EntityListPage,
-  oe as InvitationsPage,
-  ae as MembersManagementPage
+  se as InvitationsPage,
+  oe as MembersManagementPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.123",
+  "version": "0.0.124",
   "description": "Page containers for entity/organization management",
   "type": "module",
   "main": "dist/index.js",
@@ -40,18 +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.82",
+    "@sudobility/components": "^5.0.83",
     "@sudobility/entity_client": "^0.0.36",
     "@sudobility/entity-components": "^1.0.13",
     "@heroicons/react": "^2.2.0",
     "@sudobility/types": "^1.9.62",
-    "@sudobility/design": "^1.1.33"
+    "@sudobility/design": "^1.1.34"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@heroicons/react": "^2.2.0",
-    "@sudobility/components": "^5.0.82",
-    "@sudobility/design": "^1.1.33",
+    "@sudobility/components": "^5.0.83",
+    "@sudobility/design": "^1.1.34",
     "@sudobility/entity-components": "^1.0.13",
     "@sudobility/entity_client": "^0.0.36",
     "@sudobility/types": "^1.9.62",