@elevasis/ui 2.20.0 → 2.22.0

package/dist/components/index.js

@@ -1,64 +1,66 @@
-import { useBreadcrumbs } from '../chunk-MG3NF7QL.js';
-import '../chunk-6GUW5GGF.js';
-export { AllTasksPage, HealthStatusCard, MilestoneTimeline, ProjectDetailPage, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, TaskCard, UpcomingMilestonesPage, calculateProgress, deliveryManifest, formatStatusLabel, milestoneStatusColors, noteTypeColors, projectStatusColors, taskStatusColors, taskTypeColors } from '../chunk-JR5WNTLA.js';
-export { LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, buildListConfig, getEnrichmentColor, getStatusColor, leadGenManifest, useDeleteLists } from '../chunk-GP3AFJYG.js';
-export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-YP6T426C.js';
+import { useBreadcrumbs } from '../chunk-DDZOHLHB.js';
+import '../chunk-6Z3G4U2R.js';
+export { AllTasksPage, HealthStatusCard, MilestoneTimeline, ProjectDetailPage, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, TaskCard, UpcomingMilestonesPage, calculateProgress, deliveryManifest, formatStatusLabel, milestoneStatusColors, noteTypeColors, projectStatusColors, taskStatusColors, taskTypeColors } from '../chunk-LVJGPE6H.js';
+export { LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, buildListConfig, getEnrichmentColor, getStatusColor, leadGenManifest, useDeleteLists } from '../chunk-COG4ABRI.js';
+export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-IBUYJXA3.js';
 import '../chunk-ROSMICXG.js';
 import '../chunk-3JCMO7SD.js';
 import '../chunk-ZTWA5H77.js';
-import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton } from '../chunk-PJVG3ISO.js';
-export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, ZodFormRenderer, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-PJVG3ISO.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton } from '../chunk-LKVBEE63.js';
+export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, ZodFormRenderer, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-LKVBEE63.js';
 import '../chunk-442LZPIR.js';
-import { NotificationList } from '../chunk-GTYUP7MB.js';
-export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-GTYUP7MB.js';
-export { ResourceHealthPanel } from '../chunk-ZE2KQSHL.js';
+import { NotificationList } from '../chunk-WWJ6S2HQ.js';
+export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-WWJ6S2HQ.js';
+export { ResourceHealthPanel } from '../chunk-GJ7EIABJ.js';
 export { ResourceHealthChart, getHealthColor } from '../chunk-LGKLC5MG.js';
-import '../chunk-CTTY6FUT.js';
-export { SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, seoManifest } from '../chunk-AL23U6C3.js';
-export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest } from '../chunk-MZFJWCPH.js';
+import '../chunk-TSSKOQBX.js';
+export { SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, seoManifest } from '../chunk-BIWHHWCJ.js';
+import { showAuthError } from '../chunk-BSZRKBAW.js';
+export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest, showAuthError } from '../chunk-BSZRKBAW.js';
 import { AppShellLoader } from '../chunk-M25JL54Z.js';
-export { ActivityFeedWidget, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, TasksDueWidget, crmManifest, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity } from '../chunk-2CFOFSSG.js';
+export { ActivityFeedWidget, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, TasksDueWidget, crmManifest, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity } from '../chunk-IOTLB6ND.js';
 import '../chunk-BZZCNLT6.js';
 export { SortableHeader, TableSelectionToolbar } from '../chunk-TUMSNGTX.js';
 import '../chunk-CEWTOKE7.js';
 import '../chunk-IIMU5YAJ.js';
 import { FilterBar } from '../chunk-PDHTXPSF.js';
 export { FilterBar } from '../chunk-PDHTXPSF.js';
-import { CustomModal } from '../chunk-GBMNCNHX.js';
-export { ConfirmationInputModal, ConfirmationModal, CustomModal } from '../chunk-GBMNCNHX.js';
-import '../chunk-TIIPYB2Z.js';
+import { CustomModal } from '../chunk-KVJ3LFH2.js';
+export { ConfirmationInputModal, ConfirmationModal, CustomModal } from '../chunk-KVJ3LFH2.js';
+import '../chunk-QZJM3RYI.js';
 export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-E4WQGJNS.js';
 import '../chunk-7M2VOCYN.js';
-import { useCommandViewLayout, useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, usePaginationState, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useSyncDealStage, dealKeys, useMarkAllAsRead, useNotifications } from '../chunk-FMFX4K6E.js';
+import { useCommandViewLayout, useOrganizationPermissions, useCreateOrgRole, usePermissionCatalog, useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, usePaginationState, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useSyncDealStage, dealKeys, useMarkAllAsRead, useNotifications } from '../chunk-B4FHWKEF.js';
 import '../chunk-BRXELOHC.js';
 import '../chunk-QSTH6T77.js';
-import { showErrorNotification, showSuccessNotification, showApiErrorNotification } from '../chunk-M7W7CGPL.js';
-export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-M7W7CGPL.js';
+import { showSuccessNotification, showErrorNotification, showApiErrorNotification } from '../chunk-Z6FAH4XV.js';
+export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-Z6FAH4XV.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS } from '../chunk-22UVE3RA.js';
 export { Graph_module_css_default as graphStyles } from '../chunk-22UVE3RA.js';
 import '../chunk-3ZMAGTWF.js';
-import '../chunk-Q4QJOSVS.js';
-import '../chunk-TO7QXDBX.js';
-import '../chunk-Q5HC6ENG.js';
+import '../chunk-ZBCTB5CA.js';
+import '../chunk-3HEUGBOT.js';
+import '../chunk-XOTJNW4Q.js';
 import '../chunk-WLOQ4IBG.js';
-import '../chunk-LR5CRY5A.js';
-import '../chunk-OUYH2SBS.js';
-import { SubshellContentContainer } from '../chunk-RX4UWZZR.js';
-import { ListSkeleton, EmptyState, PageTitleCaption, StatCard, CenteredErrorState, CardHeader, ActivityTimeline } from '../chunk-BHR7IV72.js';
-export { APIErrorAlert, ActivityTimeline, CardHeader, CenteredErrorState, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, FeatureUnavailableState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StatusBadge, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-BHR7IV72.js';
+import '../chunk-AXXTN44Z.js';
+import '../chunk-LVUCBY7X.js';
+import '../chunk-LJWV4TWV.js';
+import { SubshellContentContainer } from '../chunk-TKAYX2SP.js';
+import { ListSkeleton, EmptyState, PageTitleCaption, StatCard, CenteredErrorState, CardHeader, ActivityTimeline } from '../chunk-XUYBOO32.js';
+export { APIErrorAlert, ActivityTimeline, CardHeader, CenteredErrorState, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, FeatureUnavailableState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StatusBadge, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-XUYBOO32.js';
 export { ElevasisLoader } from '../chunk-SZHARWKU.js';
 export { StyledMarkdown } from '../chunk-3KMDHCAR.js';
 export { NavigationButton } from '../chunk-NYBEU5TE.js';
-import '../chunk-R7OJCNL3.js';
+import '../chunk-T6INEVX6.js';
 import '../chunk-2IFYDILW.js';
 import { useRouterContext } from '../chunk-Q7DJKLEN.js';
-import '../chunk-7YQKVWSD.js';
+export { RoleBadge } from '../chunk-SQ5JGELM.js';
 import '../chunk-6IA2OMAE.js';
 import { useAppearance } from '../chunk-QJ2KCHKX.js';
 import '../chunk-HQ7M6PBW.js';
 import '../chunk-DT3QYZVU.js';
 import '../chunk-RNP5R5I3.js';
-import { getResourceIcon, getResourceColor, formatDateTime, PAGE_SIZE_DEFAULT, formatTimeAgo } from '../chunk-OD7GWIZS.js';
+import { getResourceIcon, getResourceColor, formatDateTime, PAGE_SIZE_DEFAULT, formatTimeAgo } from '../chunk-SGXXJE52.js';
 import '../chunk-KRWALB24.js';
 import '../chunk-SLH2QLKV.js';
 import { useInitialization } from '../chunk-DK2HVHCY.js';
@@ -67,14 +69,15 @@ import '../chunk-QHSW4WHM.js';
 import { useElevasisServices } from '../chunk-IRW7JMQ4.js';
 import '../chunk-BRJ3QZ4E.js';
 import '../chunk-I2KLQ2HA.js';
-import { Stack, Group, ThemeIcon, Text, Badge, Box, Title, TextInput, Alert, Button, Table, Tooltip, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Loader, Pagination, SegmentedControl, Switch, Select, Textarea, Divider, Card, Menu, Timeline, Tabs, ScrollArea, Breadcrumbs as Breadcrumbs$1, Drawer, Center, Popover, Indicator } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { IconBrain, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconPencil, IconKey, IconCalendar, IconTrash, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconTag, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconBell } from '@tabler/icons-react';
-import { useQueryClient, useQuery } from '@tanstack/react-query';
-import { memo, forwardRef, useMemo, useImperativeHandle, useState, useEffect, useCallback, useRef } from 'react';
 import * as runtime from 'react/jsx-runtime';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Stack, Group, ThemeIcon, Text, Badge, Box, Card, Title, Checkbox, Tooltip, Center, TextInput, Textarea, Loader, Alert, Button, Table, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Pagination, SegmentedControl, Switch, Select, Divider, Menu, Timeline, Tabs, ScrollArea, Breadcrumbs as Breadcrumbs$1, Drawer, Popover, Indicator } from '@mantine/core';
+import { IconBrain, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconLock, IconPencil, IconKey, IconCalendar, IconTrash, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconTag, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconBell } from '@tabler/icons-react';
 import { useForm } from '@mantine/form';
+import { memo, forwardRef, useMemo, useImperativeHandle, useRef, useEffect, useState, useCallback } from 'react';
+import { z } from 'zod';
+import { useDisclosure } from '@mantine/hooks';
+import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { useReactFlow, ReactFlow, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { Link, RichTextEditor as RichTextEditor$1 } from '@mantine/tiptap';
@@ -84,6 +87,210 @@ import StarterKit from '@tiptap/starter-kit';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
+function Can({ permission, fallback = null, children }) {
+  const { hasPermission, isReady } = useOrganizationPermissions();
+  if (!isReady) return null;
+  return hasPermission(permission) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+function groupByDomain(catalog) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of catalog) {
+    const domain = row.key.split(".")[0] ?? row.key;
+    const existing = groups.get(domain);
+    if (existing) {
+      existing.push(row);
+    } else {
+      groups.set(domain, [row]);
+    }
+  }
+  return groups;
+}
+var DOMAIN_LABELS = {
+  org: "Organization",
+  members: "Members",
+  roles: "Roles",
+  secrets: "Secrets",
+  operations: "Operations",
+  work: "Work"
+};
+function domainLabel(domain) {
+  return DOMAIN_LABELS[domain] ?? domain.charAt(0).toUpperCase() + domain.slice(1);
+}
+function PermissionMatrix({ catalog, selectedKeys, onChange, systemLocked }) {
+  const groups = groupByDomain(catalog);
+  const isDisplayOnly = !onChange || systemLocked;
+  function handleToggle(key, checked) {
+    if (!onChange || systemLocked) return;
+    if (checked) {
+      onChange([...selectedKeys, key]);
+    } else {
+      onChange(selectedKeys.filter((k) => k !== key));
+    }
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "md", children: Array.from(groups.entries()).map(([domain, rows]) => /* @__PURE__ */ jsxs(Card, { withBorder: true, padding: "md", children: [
+    /* @__PURE__ */ jsx(Title, { order: 5, mb: "sm", style: { textTransform: "capitalize" }, children: domainLabel(domain) }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: rows.map((row) => {
+      const isLocked = !row.isOrgGrantable;
+      const isChecked = selectedKeys.includes(row.key);
+      const isDisabled = isDisplayOnly || isLocked;
+      const checkbox = /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: (e) => handleToggle(row.key, e.currentTarget.checked),
+          label: /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: isLocked ? "var(--color-text-subtle)" : void 0, children: row.key }),
+            isLocked && /* @__PURE__ */ jsx(IconLock, { size: 14, style: { color: "var(--color-text-subtle)", flexShrink: 0 } }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: row.description })
+          ] })
+        },
+        row.key
+      );
+      if (isLocked) {
+        return /* @__PURE__ */ jsx(Tooltip, { label: "Reserved for built-in roles", position: "right", children: /* @__PURE__ */ jsx("div", { children: checkbox }) }, row.key);
+      }
+      return checkbox;
+    }) })
+  ] }, domain)) });
+}
+function NoAccessState() {
+  return /* @__PURE__ */ jsx(Center, { style: { flex: 1, minHeight: "100%", width: "100%", padding: 24 }, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", style: { maxWidth: 480, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx(IconLock, { size: 44, stroke: 1.8, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Access restricted" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "You don't have permission to view this page. Contact an org admin if you need access." })
+  ] }) });
+}
+var CreateRoleFormSchema = z.object({
+  name: z.string().trim().min(2).max(50),
+  slug: z.string().regex(/^[a-z0-9-]+$/, "lowercase, numbers, dashes only").min(2).max(50),
+  description: z.string().max(200).optional(),
+  permissionKeys: z.array(z.string())
+});
+function toSlug(name) {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
+var nameSchema = CreateRoleFormSchema.shape.name;
+var slugSchema = CreateRoleFormSchema.shape.slug;
+var descriptionSchema = z.string().max(200);
+function extractError(result) {
+  return result.error.issues[0]?.message ?? "Invalid value";
+}
+function CreateRoleModal({ opened, onClose, onCreated }) {
+  const createMutation = useCreateOrgRole();
+  const catalog = usePermissionCatalog();
+  const slugDirtyRef = useRef(false);
+  const form = useForm({
+    initialValues: {
+      name: "",
+      slug: "",
+      description: "",
+      permissionKeys: []
+    },
+    validate: {
+      name: (value) => {
+        const r = nameSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      slug: (value) => {
+        const r = slugSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      description: (value) => {
+        if (!value) return null;
+        const r = descriptionSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      permissionKeys: () => null
+    }
+  });
+  useEffect(() => {
+    if (!slugDirtyRef.current) {
+      form.setFieldValue("slug", toSlug(form.values.name));
+    }
+  }, [form.values.name]);
+  const handleSlugChange = (e) => {
+    slugDirtyRef.current = true;
+    form.setFieldValue("slug", e.currentTarget.value);
+  };
+  const handleClose = () => {
+    if (!createMutation.isPending) {
+      form.reset();
+      slugDirtyRef.current = false;
+      onClose();
+    }
+  };
+  const onSubmit = form.onSubmit(async (values) => {
+    try {
+      const role = await createMutation.mutateAsync({
+        name: values.name,
+        slug: values.slug,
+        description: values.description || void 0,
+        permissionKeys: values.permissionKeys
+      });
+      showSuccessNotification(`Role "${role.name}" created.`);
+      onCreated?.(role.id);
+      handleClose();
+    } catch (err) {
+      showAuthError(err);
+    }
+  });
+  const grantableCatalog = (catalog.data?.permissions ?? []).filter((p) => p.isOrgGrantable);
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "lg", loading: createMutation.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
+    /* @__PURE__ */ jsx(Title, { order: 4, children: "Create custom role" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: "Display name",
+          placeholder: "e.g. Content Editor",
+          required: true,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("name")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: "Slug",
+          placeholder: "e.g. content-editor",
+          description: "Lowercase letters, numbers, and dashes only",
+          required: true,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("slug"),
+          onChange: handleSlugChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: "Description",
+          placeholder: "Optional description",
+          minRows: 2,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("description")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Title, { order: 5, children: "Permissions" }),
+      catalog.isLoading && /* @__PURE__ */ jsx(Loader, { size: "sm" }),
+      catalog.isError && /* @__PURE__ */ jsx(Alert, { color: "red", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Failed to load permission catalog. Please close and try again." }) }),
+      !catalog.isLoading && !catalog.isError && /* @__PURE__ */ jsx(
+        PermissionMatrix,
+        {
+          catalog: grantableCatalog,
+          selectedKeys: form.values.permissionKeys,
+          onChange: (keys) => form.setFieldValue("permissionKeys", keys)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: handleClose, disabled: createMutation.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createMutation.isPending, children: "Create role" })
+    ] })
+  ] }) }) });
+}
 function EditApiKeyModal({ apiKey, onClose }) {
   const [name, setName] = useState("");
   const [nameError, setNameError] = useState(null);
@@ -3034,9 +3241,9 @@ function MdxRenderer({ compiledSource }) {
   if (!Content) return null;
   return /* @__PURE__ */ jsx(Content, { components: mdxComponents });
 }
-var Breadcrumbs = ({ navItems }) => {
+var Breadcrumbs = (props) => {
   const { Link: Link2 } = useRouterContext();
-  const breadcrumbs = useBreadcrumbs({ navItems });
+  const breadcrumbs = useBreadcrumbs(props);
   const items = breadcrumbs.map((item) => {
     const isActive = item.isActive;
     if (isActive) {
@@ -3488,4 +3695,4 @@ function NotificationBell({ unreadCount, onNavigate }) {
   ] });
 }
 
-export { AbsoluteScheduleForm, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, CommandViewEdge, CommandViewGraph, CommandViewNode, CrashErrorFallback, CreateApiKeyModal, CreateScheduleModal, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDrawer, DealKanbanCard, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, EditApiKeyModal, ErrorReportCard, KanbanBoard, MdxRenderer, NotificationBell, NotificationPanel, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, TaskScheduler, buildErrorReport, mdxComponents };
+export { AbsoluteScheduleForm, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, Can, CommandViewEdge, CommandViewGraph, CommandViewNode, CrashErrorFallback, CreateApiKeyModal, CreateRoleModal, CreateScheduleModal, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDrawer, DealKanbanCard, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, EditApiKeyModal, ErrorReportCard, KanbanBoard, MdxRenderer, NoAccessState, NotificationBell, NotificationPanel, PermissionMatrix, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, TaskScheduler, buildErrorReport, mdxComponents };