@elevasis/ui 2.21.0 → 2.23.0

package/dist/{chunk-GBMNCNHX.js → chunk-KVJ3LFH2.js}

@@ -3,8 +3,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cloneElement } from 'react';
 
 // src/components/modal/CustomModal.tsx
+var FULL_SIZE = "80%";
 var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
   const canClose = loading === true ? false : true;
+  const resolvedSize = size === "full" ? FULL_SIZE : size;
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -16,7 +18,7 @@ var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
       closeOnEscape: canClose,
       centered: true,
       style,
-      size,
+      size: resolvedSize,
       children
     }
   );

package/dist/{chunk-VQESMHQV.js → chunk-LJWV4TWV.js}

@@ -38,7 +38,6 @@ function createFeatureAccessHook({
     };
   };
 }
-var createUseFeatureAccess = createFeatureAccessHook;
 
 // ../core/src/organization-model/helpers.ts
 function defaultPathFor(id) {
@@ -333,4 +332,4 @@ function ElevasisFeaturesProvider({
   return /* @__PURE__ */ jsx(ElevasisFeaturesContext.Provider, { value, children });
 }
 
-export { ElevasisFeaturesProvider, createFeatureAccessHook, createUseFeatureAccess, useElevasisFeatures, useOptionalElevasisFeatures };
+export { ElevasisFeaturesProvider, createFeatureAccessHook, useElevasisFeatures, useOptionalElevasisFeatures };

package/dist/{chunk-BJWIKEQG.js → chunk-N6WLOWOD.js}

@@ -4,10 +4,10 @@ import { TableSelectionToolbar, SortableHeader } from './chunk-TUMSNGTX.js';
 import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
-import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-7GG6OSD7.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
+import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-GUJUK6EH.js';
 import { useCreateTask, useCreateMilestone, useProjectMilestones, useUpdateTask, useProjects, useDeleteProject, useProject, useProjectNotes, useUpdateMilestone, useCreateNote, showApiErrorNotification, projectKeys } from './chunk-Z6FAH4XV.js';
-import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
+import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { StatusBadge, EmptyState, PageTitleCaption, CenteredErrorState, StatCard, CardHeader } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { PAGE_SIZE_DEFAULT, formatTimeAgo, formatDate, formatRelativeTime } from './chunk-SGXXJE52.js';
@@ -1097,7 +1097,7 @@ function renderMilestoneBullet(status) {
 function getMilestoneSurfaceStyles(status) {
   const normalizedStatus = status ?? "upcoming";
   const accent = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "color-mix(in srgb, var(--color-primary) 72%, white)" : "color-mix(in srgb, var(--color-primary) 36%, var(--color-border))";
-  const background = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0%, transparent 100%)" : "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)";
+  const background = normalizedStatus === "completed" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)" : normalizedStatus === "in_progress" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0%, transparent 100%)" : "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)";
   return {
     accent,
     background
@@ -1482,7 +1482,7 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
                                       {
                                         fw: 700,
                                         size: "lg",
-                                        c: milestone.status === "completed" ? "var(--color-background)" : "var(--color-text)",
+                                        c: "var(--color-text)",
                                         children: milestone.name
                                       }
                                     ),
@@ -1501,15 +1501,7 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
                                       }
                                     )
                                   ] }),
-                                  milestone.description && /* @__PURE__ */ jsx(
-                                    Text,
-                                    {
-                                      size: "sm",
-                                      c: milestone.status === "completed" ? "color-mix(in srgb, var(--color-background) 82%, transparent)" : "var(--color-text-dimmed)",
-                                      maw: 900,
-                                      children: milestone.description
-                                    }
-                                  )
+                                  milestone.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", maw: 900, children: milestone.description })
                                 ] }),
                                 /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
                                   milestone.due_date && /* @__PURE__ */ jsxs(

package/dist/{chunk-XLZZOFGM.js → chunk-PTUOINQ2.js}

@@ -1,21 +1,23 @@
 import { AppShellLoader } from './chunk-M25JL54Z.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
-import { useAvailablePresets } from './chunk-TIIPYB2Z.js';
-import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useResources, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas } from './chunk-7GG6OSD7.js';
-import { showErrorNotification } from './chunk-Z6FAH4XV.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
+import { useAvailablePresets } from './chunk-QZJM3RYI.js';
+import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useResources, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useOrgRoles, useAssignRole, useRevokeRole, useHasPermission, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas } from './chunk-GUJUK6EH.js';
+import { showApiErrorNotification, showErrorNotification, showSuccessNotification } from './chunk-Z6FAH4XV.js';
 import { ListSkeleton, EmptyState, PageTitleCaption, CardHeader, APIErrorAlert, StatCard } from './chunk-XUYBOO32.js';
-import { formatDateTime, OAUTH_POPUP_CHECK_INTERVAL, OAUTH_FLOW_TIMEOUT } from './chunk-SGXXJE52.js';
+import { RoleBadge } from './chunk-SQ5JGELM.js';
+import { isAPIClientError, formatDateTime, OAUTH_POPUP_CHECK_INTERVAL, OAUTH_FLOW_TIMEOUT } from './chunk-SGXXJE52.js';
 import { useInitialization } from './chunk-DK2HVHCY.js';
 import { useElevasisServices } from './chunk-IRW7JMQ4.js';
-import { Table, Group, Text, Tooltip, ActionIcon, Stack, Title, Button, Select, TextInput, Alert, PasswordInput, Anchor, Paper, Card, Switch, Badge, Center, Loader, Box, Code, CopyButton, ThemeIcon, SimpleGrid, UnstyledButton, Divider, Textarea } from '@mantine/core';
-import { IconSettings, IconKey, IconCalendar, IconPencil, IconTrash, IconAlertTriangle, IconInfoCircle, IconExclamationMark, IconPlus, IconAlertCircle, IconUsers, IconSearch, IconBuilding, IconWebhook, IconCheck, IconCopy, IconUser, IconMail, IconRefresh, IconPalette, IconEye, IconSparkles, IconTrendingUp, IconClock, IconPlayerPause, IconPlayerPlay, IconActivity, IconBrandDropbox, IconBrandGoogleDrive, IconPlug, IconEdit, IconUserX, IconUserCheck } from '@tabler/icons-react';
+import { createUseExternalEvents, Text, Table, Group, Tooltip, ActionIcon, Stack, Title, Button, Select, TextInput, Alert, PasswordInput, Anchor, Paper, Card, Switch, Badge, Center, Loader, Box, Code, CopyButton, ThemeIcon, SimpleGrid, UnstyledButton, Divider, Textarea, Tabs, MultiSelect } from '@mantine/core';
+import { IconSettings, IconShieldOff, IconKey, IconCalendar, IconPencil, IconTrash, IconAlertTriangle, IconInfoCircle, IconExclamationMark, IconPlus, IconAlertCircle, IconUsers, IconSearch, IconBuilding, IconWebhook, IconCheck, IconCopy, IconUser, IconMail, IconRefresh, IconPalette, IconEye, IconSparkles, IconTrendingUp, IconClock, IconPlayerPause, IconPlayerPlay, IconActivity, IconShieldLock, IconAdjustments, IconBrandDropbox, IconBrandGoogleDrive, IconPlug, IconEdit, IconUserX, IconUserCheck } from '@tabler/icons-react';
 import { z } from 'zod';
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { randomId } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { useForm } from '@mantine/form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { notifications } from '@mantine/notifications';
 import { create } from 'zustand';
 
 // ../core/src/integrations/oauth/provider-registry.ts
@@ -160,6 +162,63 @@ function buildCredentialValue(type, formValues) {
   }
   return value;
 }
+var [useModalsEvents, createEvent] = createUseExternalEvents("mantine-modals");
+var openModal = (payload) => {
+  const id = payload.modalId || randomId();
+  createEvent("openModal")({ ...payload, modalId: id });
+  return id;
+};
+var openConfirmModal = (payload) => {
+  const id = payload.modalId || randomId();
+  createEvent("openConfirmModal")({ ...payload, modalId: id });
+  return id;
+};
+var openContextModal = (payload) => {
+  const id = payload.modalId || randomId();
+  createEvent("openContextModal")({ ...payload, modalId: id });
+  return id;
+};
+var closeModal = createEvent("closeModal");
+var closeAllModals = createEvent("closeAllModals");
+var updateModal = (payload) => createEvent("updateModal")(payload);
+var updateContextModal = (payload) => createEvent("updateContextModal")(payload);
+var modals = {
+  open: openModal,
+  close: closeModal,
+  closeAll: closeAllModals,
+  openConfirmModal,
+  openContextModal,
+  updateModal,
+  updateContextModal
+};
+function showAuthError(error) {
+  if (isAPIClientError(error)) {
+    if (error.code === "LAST_OWNER_PROTECTED") {
+      modals.openConfirmModal({
+        title: "Last owner protection",
+        children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "You are the only active owner. Promote another active member to owner before changing this role." }),
+        labels: { confirm: "Open members", cancel: "Cancel" },
+        onConfirm: () => {
+          if (typeof window !== "undefined") {
+            window.location.href = "/settings/organization";
+          }
+        }
+      });
+      return;
+    }
+    if (error.code === "FORBIDDEN") {
+      notifications.show({
+        title: "Permission required",
+        message: error.message,
+        color: "red",
+        position: "top-right",
+        icon: /* @__PURE__ */ jsx(IconShieldOff, { size: 16 })
+      });
+      return;
+    }
+  }
+  showApiErrorNotification(error);
+}
 function CredentialList({ credentials, isLoading, onEdit }) {
   const [deleteCredential, setDeleteCredential] = useState(null);
   const deleteMutation = useDeleteCredential();
@@ -1158,10 +1217,11 @@ function EditWebhookEndpointModal({ opened, endpoint, onClose }) {
     ] })
   ] }) }) });
 }
-function getWebhookUrl(apiUrl, key) {
-  return `${apiUrl}/api/webhooks/inbound/${key}`;
+function formatKeyDisplay(keyPrefix) {
+  if (!keyPrefix) return "Unavailable";
+  return `${keyPrefix}...`;
 }
-function WebhookEndpointList({ endpoints, isLoading, apiUrl }) {
+function WebhookEndpointList({ endpoints, isLoading }) {
   const [deleteTarget, setDeleteTarget] = useState(null);
   const [editTarget, setEditTarget] = useState(null);
   const deleteMutation = useDeleteWebhookEndpoint();
@@ -1200,14 +1260,13 @@ function WebhookEndpointList({ endpoints, isLoading, apiUrl }) {
         /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
         /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
         /* @__PURE__ */ jsx(Table.Th, { children: "Target Resource" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "URL" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Key" }),
         /* @__PURE__ */ jsx(Table.Th, { children: "Last Triggered" }),
         /* @__PURE__ */ jsx(Table.Th, { children: "Requests" }),
         /* @__PURE__ */ jsx(Table.Th, { w: 120 })
       ] }) }),
       /* @__PURE__ */ jsx(Table.Tbody, { children: endpoints.map((endpoint) => {
-        const webhookUrl = getWebhookUrl(apiUrl, endpoint.key);
-        const truncatedUrl = webhookUrl.length > 50 ? `...${endpoint.key.slice(-16)}` : webhookUrl;
+        const keyDisplay = formatKeyDisplay(endpoint.keyPrefix);
         const isToggling = updateMutation.isPending;
         return /* @__PURE__ */ jsxs(Table.Tr, { children: [
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
@@ -1219,19 +1278,14 @@ function WebhookEndpointList({ endpoints, isLoading, apiUrl }) {
           ] }) }),
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: endpoint.status === "active" ? "teal" : "gray", variant: "light", children: endpoint.status }) }),
           /* @__PURE__ */ jsx(Table.Td, { children: endpoint.resourceId ? /* @__PURE__ */ jsx(Code, { children: endpoint.resourceId }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Not configured" }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Paper, { withBorder: true, style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
-            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ff: "monospace", style: { userSelect: "all" }, children: truncatedUrl }),
-            /* @__PURE__ */ jsx(CopyButton, { value: webhookUrl, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy URL", position: "top", children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                color: copied ? "teal" : "gray",
-                variant: copied ? "filled" : "subtle",
-                onClick: copy,
-                size: "sm",
-                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
-              }
-            ) }) })
-          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              label: "Full URL is shown only at creation. Use the prefix to identify which endpoint this is.",
+              position: "top",
+              children: /* @__PURE__ */ jsx(Paper, { withBorder: true, style: { display: "inline-flex", alignItems: "center", padding: "2px 8px" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ff: "monospace", style: { userSelect: "all" }, children: keyDisplay }) })
+            }
+          ) }),
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
             /* @__PURE__ */ jsx(IconClock, { size: 14, style: { opacity: 0.5 } }),
             /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDateTime(endpoint.lastTriggeredAt) })
@@ -1398,7 +1452,7 @@ function CreateWebhookEndpointModal({ opened, onClose, onSuccess }) {
     ] })
   ] }) }) });
 }
-function getWebhookUrl2(apiUrl, key) {
+function getWebhookUrl(apiUrl, key) {
   return `${apiUrl}/api/webhooks/inbound/${key}`;
 }
 function WebhookEndpointSettings({ apiUrl }) {
@@ -1444,7 +1498,7 @@ function WebhookEndpointSettings({ apiUrl }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(WebhookEndpointList, { endpoints, isLoading, apiUrl }) }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(WebhookEndpointList, { endpoints, isLoading }) }),
     /* @__PURE__ */ jsx(
       CreateWebhookEndpointModal,
       {
@@ -1453,34 +1507,133 @@ function WebhookEndpointSettings({ apiUrl }) {
         onSuccess: handleEndpointCreated
       }
     ),
-    newEndpoint && /* @__PURE__ */ jsx(
+    newEndpoint && newEndpoint.key && /* @__PURE__ */ jsx(
       WebhookUrlDisplayModal,
       {
         opened: true,
         endpoint: newEndpoint,
-        webhookUrl: getWebhookUrl2(apiUrl, newEndpoint.key),
+        webhookUrl: getWebhookUrl(apiUrl, newEndpoint.key),
         onClose: () => setNewEndpoint(null)
       }
     )
   ] });
 }
-function MemberConfigModal({ opened, onClose, member }) {
-  const [localConfig, setLocalConfig] = useState(void 0);
-  const mutation = useUpdateMemberConfig();
+function diffRoles(current, next) {
+  const adds = next.filter((id) => !current.includes(id));
+  const removes = current.filter((id) => !next.includes(id));
+  return { adds, removes };
+}
+function MemberAccessModal({ opened, onClose, orgId, member, defaultTab = "roles" }) {
+  const [activeTab, setActiveTab] = useState(defaultTab);
   useEffect(() => {
-    if (member) {
-      setLocalConfig(member.config);
-    }
-  }, [member]);
+    if (opened) setActiveTab(defaultTab);
+  }, [opened, defaultTab]);
+  const handleClose = () => {
+    onClose();
+  };
+  if (!member) return null;
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "xl", children: /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Member access" }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Text, { fw: 500, children: member.name }),
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: member.role })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.email })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v ?? "roles"), children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        /* @__PURE__ */ jsx(Tabs.Tab, { value: "roles", leftSection: /* @__PURE__ */ jsx(IconShieldLock, { size: 14 }), children: "Roles" }),
+        /* @__PURE__ */ jsx(Tabs.Tab, { value: "features", leftSection: /* @__PURE__ */ jsx(IconAdjustments, { size: 14 }), children: "Feature access" })
+      ] }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "roles", pt: "md", children: /* @__PURE__ */ jsx(RolesTabPanel, { orgId, member, onSaved: onClose }) }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "features", pt: "md", children: /* @__PURE__ */ jsx(FeaturesTabPanel, { member, onSaved: onClose }) })
+    ] })
+  ] }) });
+}
+function RolesTabPanel({ orgId, member, onSaved }) {
+  const { data: rolesData, isLoading: rolesLoading } = useOrgRoles(orgId ?? void 0);
+  const assignMutation = useAssignRole();
+  const revokeMutation = useRevokeRole();
+  const canManagePrivileged = useHasPermission("roles.manage");
+  const allRoles = rolesData?.roles ?? [];
+  const currentRoleIds = useMemo(() => {
+    const matched = allRoles.find((r) => r.slug === member.role);
+    return matched ? [matched.id] : [];
+  }, [allRoles, member.role]);
+  const [selectedIds, setSelectedIds] = useState(currentRoleIds);
+  const [saving, setSaving] = useState(false);
   useEffect(() => {
-    if (!opened) {
-      setLocalConfig(void 0);
+    setSelectedIds(currentRoleIds);
+  }, [currentRoleIds, member.id]);
+  const options = allRoles.map((r) => ({
+    value: r.id,
+    label: r.name + (r.is_system ? " (built-in)" : ""),
+    disabled: !canManagePrivileged && (r.slug === "owner" || r.slug === "admin")
+  }));
+  const hasZeroRoles = selectedIds.length === 0;
+  const isUnchanged = selectedIds.length === currentRoleIds.length && selectedIds.every((id) => currentRoleIds.includes(id));
+  async function handleSave() {
+    if (hasZeroRoles || isUnchanged) return;
+    setSaving(true);
+    try {
+      const { adds, removes } = diffRoles(currentRoleIds, selectedIds);
+      await Promise.all([
+        ...adds.map((roleId) => assignMutation.mutateAsync({ membershipId: member.id, roleId })),
+        ...removes.map((roleId) => revokeMutation.mutateAsync({ membershipId: member.id, roleId }))
+      ]);
+      showSuccessNotification("Roles updated");
+      onSaved();
+    } catch (err) {
+      showAuthError(err);
+    } finally {
+      setSaving(false);
     }
-  }, [opened]);
-  if (!member) return null;
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Select the roles assigned to this member. Each role grants a bundle of permissions; the member's effective permissions are the union of all assigned roles." }),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        data: options,
+        value: selectedIds,
+        onChange: setSelectedIds,
+        placeholder: rolesLoading ? "Loading roles..." : "Select roles",
+        disabled: saving || rolesLoading,
+        searchable: true,
+        clearable: false
+      }
+    ),
+    !canManagePrivileged && /* @__PURE__ */ jsxs(Alert, { color: "blue", variant: "light", children: [
+      "Only owners (with ",
+      /* @__PURE__ */ jsx("code", { children: "roles.manage" }),
+      ") can grant or revoke the owner / admin system roles."
+    ] }),
+    !rolesLoading && hasZeroRoles && currentRoleIds.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", children: "At least one role is required for an active membership." }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: onSaved, disabled: saving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 14 }),
+          loading: saving,
+          disabled: hasZeroRoles || isUnchanged,
+          onClick: handleSave,
+          children: "Save roles"
+        }
+      )
+    ] })
+  ] });
+}
+function FeaturesTabPanel({ member, onSaved }) {
+  const [localConfig, setLocalConfig] = useState(member.config);
+  const mutation = useUpdateMemberConfig();
+  useEffect(() => {
+    setLocalConfig(member.config);
+  }, [member.config, member.id]);
   const handleSave = async () => {
     if (!localConfig) {
-      onClose();
+      onSaved();
       return;
     }
     try {
@@ -1488,22 +1641,13 @@ function MemberConfigModal({ opened, onClose, member }) {
         membershipId: member.id,
         config: localConfig
       });
-      onClose();
+      showSuccessNotification("Feature access updated");
+      onSaved();
     } catch {
     }
   };
-  const handleClose = () => {
-    if (!mutation.isPending) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: mutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Title, { order: 3, children: "Configure Member Access" }),
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      /* @__PURE__ */ jsx(Text, { fw: 500, children: member.name }),
-      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: member.role })
-    ] }),
-    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.email }),
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Override which features and surfaces this member can see in the Command Center. Defaults follow the organization's feature configuration." }),
     /* @__PURE__ */ jsx(
       MembershipFeaturePanel,
       {
@@ -1512,11 +1656,11 @@ function MemberConfigModal({ opened, onClose, member }) {
         disabled: mutation.isPending
       }
     ),
-    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "md", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: mutation.isPending, children: "Cancel" }),
-      /* @__PURE__ */ jsx(Button, { onClick: handleSave, loading: mutation.isPending, children: "Save Changes" })
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: onSaved, disabled: mutation.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 14 }), loading: mutation.isPending, onClick: handleSave, children: "Save feature access" })
     ] })
-  ] }) });
+  ] });
 }
 function transformMemberForModal(member) {
   const firstName = member.user?.firstName || "";
@@ -1534,8 +1678,10 @@ function OrgMembersList({ orgId }) {
   const { data: members, isLoading, error } = useOrganizationMembers(orgId);
   const [selectedMember, setSelectedMember] = useState(null);
   const [modalOpened, setModalOpened] = useState(false);
-  const handleConfigClick = (member) => {
+  const [defaultTab, setDefaultTab] = useState("roles");
+  const openModal2 = (member, tab) => {
     setSelectedMember(member);
+    setDefaultTab(tab);
     setModalOpened(true);
   };
   const handleModalClose = () => {
@@ -1570,28 +1716,27 @@ function OrgMembersList({ orgId }) {
         return /* @__PURE__ */ jsxs(Table.Tr, { children: [
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: displayName }) }),
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.user?.email || "Unknown" }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: "blue", size: "sm", children: member.role.slug }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: member.status }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Group, { gap: "xs", children: /* @__PURE__ */ jsx(
-            ActionIcon,
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+            RoleBadge,
             {
-              variant: "light",
-              size: "sm",
-              color: "gray",
-              onClick: () => handleConfigClick(member),
-              title: "Configure member access",
-              children: /* @__PURE__ */ jsx(IconSettings, { size: 14 })
+              slug: member.role.slug,
+              name: member.role.slug.charAt(0).toUpperCase() + member.role.slug.slice(1),
+              isSystem: true
             }
-          ) }) })
+          ) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: member.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Edit member access", withArrow: true, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", size: "sm", color: "gray", onClick: () => openModal2(member, "roles"), children: /* @__PURE__ */ jsx(IconPencil, { size: 14 }) }) }) })
         ] }, member.id);
       }) })
     ] }) }),
     /* @__PURE__ */ jsx(
-      MemberConfigModal,
+      MemberAccessModal,
       {
         opened: modalOpened,
         onClose: handleModalClose,
-        member: selectedMember ? transformMemberForModal(selectedMember) : null
+        orgId,
+        member: selectedMember ? transformMemberForModal(selectedMember) : null,
+        defaultTab
       }
     )
   ] });
@@ -1660,6 +1805,60 @@ function OrganizationSettings({ user, currentMembership, isOrgAdmin }) {
     ] }) })
   ] });
 }
+function MemberConfigModal({ opened, onClose, member }) {
+  const [localConfig, setLocalConfig] = useState(void 0);
+  const mutation = useUpdateMemberConfig();
+  useEffect(() => {
+    if (member) {
+      setLocalConfig(member.config);
+    }
+  }, [member]);
+  useEffect(() => {
+    if (!opened) {
+      setLocalConfig(void 0);
+    }
+  }, [opened]);
+  if (!member) return null;
+  const handleSave = async () => {
+    if (!localConfig) {
+      onClose();
+      return;
+    }
+    try {
+      await mutation.mutateAsync({
+        membershipId: member.id,
+        config: localConfig
+      });
+      onClose();
+    } catch {
+    }
+  };
+  const handleClose = () => {
+    if (!mutation.isPending) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: mutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Configure Member Access" }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { fw: 500, children: member.name }),
+      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: member.role })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.email }),
+    /* @__PURE__ */ jsx(
+      MembershipFeaturePanel,
+      {
+        currentConfig: localConfig ?? member.config,
+        onConfigChange: (newConfig) => setLocalConfig(newConfig),
+        disabled: mutation.isPending
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: mutation.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, loading: mutation.isPending, children: "Save Changes" })
+    ] })
+  ] }) });
+}
 function useOAuthFlow({ apiUrl }) {
   const [isAuthorizing, setIsAuthorizing] = useState(false);
   const [error, setError] = useState(null);
@@ -1983,4 +2182,4 @@ var settingsManifest = {
   icon: IconSettings
 };
 
-export { AccountSettings, AppearanceSettings, CreateCredentialModal, CreateWebhookEndpointModal, CredentialList, CredentialSettings, EditCredentialModal, EditWebhookEndpointModal, MemberConfigModal, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OAuthIntegrationsCard, OrgMembersList, OrganizationMembershipsList, OrganizationSettings, WebhookEndpointList, WebhookEndpointSettings, WebhookUrlDisplayModal, settingsManifest };
+export { AccountSettings, AppearanceSettings, CreateCredentialModal, CreateWebhookEndpointModal, CredentialList, CredentialSettings, EditCredentialModal, EditWebhookEndpointModal, MemberAccessModal, MemberConfigModal, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OAuthIntegrationsCard, OrgMembersList, OrganizationMembershipsList, OrganizationSettings, WebhookEndpointList, WebhookEndpointSettings, WebhookUrlDisplayModal, settingsManifest, showAuthError };

package/dist/{chunk-CZK67OHH.js → chunk-PXGSJNBH.js}

@@ -3,10 +3,10 @@ import { TableSelectionToolbar, SortableHeader } from './chunk-TUMSNGTX.js';
 import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
-import { acquisitionListKeys, useListsTelemetry, useLists, useCreateList, useTableSort, sortData, usePaginationState, useTableSelection, useList, useListProgress, useListExecutions, useContacts, useCompanies, useCompanyFacets, useDeleteCompanies, useDeleteContacts } from './chunk-7GG6OSD7.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
+import { acquisitionListKeys, useListsTelemetry, useLists, useCreateList, useTableSort, sortData, usePaginationState, useTableSelection, useList, useListProgress, useListExecutions, useContacts, useCompanies, useCompanyFacets, useDeleteCompanies, useDeleteContacts } from './chunk-GUJUK6EH.js';
 import { showApiErrorNotification, showSuccessNotification } from './chunk-Z6FAH4XV.js';
-import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
+import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { PageTitleCaption, CenteredErrorState, StatCard, CardHeader, EmptyState } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { useElevasisServices } from './chunk-IRW7JMQ4.js';

package/dist/{chunk-TIIPYB2Z.js → chunk-QZJM3RYI.js}

@@ -1,4 +1,4 @@
-import { usePresetsContext } from './chunk-Q5HC6ENG.js';
+import { usePresetsContext } from './chunk-XOTJNW4Q.js';
 import { useMemo } from 'react';
 
 var BUILT_IN_NAMES = /* @__PURE__ */ new Set([

package/dist/{chunk-7YQKVWSD.js → chunk-SQ5JGELM.js}

@@ -1,10 +1,16 @@
 import { useUserProfile } from './chunk-QHSW4WHM.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Button, Loader, Menu, Text, Badge } from '@mantine/core';
-import { IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
+import { Badge, Group, Button, Loader, Menu, Text } from '@mantine/core';
+import { IconLock, IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+function RoleBadge({ name, isSystem }) {
+  return /* @__PURE__ */ jsx(Badge, { color: isSystem ? "gray" : "primary", variant: "light", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+    isSystem && /* @__PURE__ */ jsx(IconLock, { size: 10 }),
+    name
+  ] }) });
+}
 function OrganizationSwitcher({
   currentOrganization,
   memberships,
@@ -64,7 +70,14 @@ function OrganizationSwitcher({
             Menu.Item,
             {
               leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-              rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+              rightSection: /* @__PURE__ */ jsx(
+                RoleBadge,
+                {
+                  slug: membership.role.slug,
+                  name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                  isSystem: true
+                }
+              ),
               onClick: () => {
                 const workosOrgId = membership.organization?.workos_org_id;
                 if (!workosOrgId) {
@@ -84,7 +97,14 @@ function OrganizationSwitcher({
               Menu.Item,
               {
                 leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-                rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+                rightSection: /* @__PURE__ */ jsx(
+                  RoleBadge,
+                  {
+                    slug: membership.role.slug,
+                    name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                    isSystem: true
+                  }
+                ),
                 onClick: () => {
                   const workosOrgId = membership.organization?.workos_org_id;
                   if (!workosOrgId) {
@@ -346,4 +366,4 @@ function createUseOrgInitialization(useOrganizations, useApiClient) {
   };
 }
 
-export { OrganizationSwitcher, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };
+export { OrganizationSwitcher, RoleBadge, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };