canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/group-manager/GroupForm.js

@@ -2,5 +2,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Group, Modal, Paper, Stack, Text, TextInput, Textarea } from '@mantine/core';
 export const GroupForm = ({ isOpen, editingGroup, formData, onFormChange, onSave, onClose, }) => {
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: editingGroup ? 'Edit Group' : 'Create Group', children: _jsxs(Stack, { gap: "md", children: [editingGroup && (_jsxs("div", { children: [_jsx(Text, { size: "sm", fw: 500, mb: 4, children: "ID (system-generated)" }), _jsx(Paper, { p: "xs", withBorder: true, bg: "gray.0", children: _jsx(Text, { size: "sm", ff: "monospace", c: "dimmed", children: editingGroup.id }) })] })), _jsx(TextInput, { label: "Group Name", placeholder: "e.g., Content Editors", value: formData.name, onChange: (e) => onFormChange({ name: e.target.value }), required: true }), _jsx(Textarea, { label: "Description", placeholder: "Optional description", value: formData.description, onChange: (e) => onFormChange({ description: e.target.value }), rows: 3 }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "subtle", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: onSave, children: editingGroup ? 'Save' : 'Create' })] })] }) }));
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: editingGroup ? 'Edit group' : 'Create group', children: _jsxs(Stack, { gap: "md", children: [editingGroup && (_jsxs("div", { children: [_jsx(Text, { size: "sm", fw: 500, mb: 4, children: "ID (system-generated)" }), _jsx(Paper, { p: "xs", withBorder: true, bg: "var(--canopy-surface-subtle)", children: _jsx(Text, { size: "sm", ff: "monospace", c: "dimmed", children: editingGroup.id }) })] })), _jsx(TextInput, { label: "Group name", placeholder: "e.g. Content editors", value: formData.name, onChange: (e) => onFormChange({ name: e.target.value }), required: true }), _jsx(Textarea, { label: "Description", placeholder: "Optional description", value: formData.description, onChange: (e) => onFormChange({ description: e.target.value }), rows: 3 }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: onSave, children: editingGroup ? 'Apply' : 'Add' })] })] }) }));
 };

package/dist/editor/group-manager/InternalGroupsTab.d.ts

@@ -2,13 +2,14 @@ import React from 'react';
 import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types.js';
 export interface InternalGroupsTabProps {
     groups: InternalGroup[];
+    unsavedGroupIds: ReadonlySet<CanopyGroupId>;
     canEdit: boolean;
     onCreateGroup: () => void;
     onEditGroup: (group: InternalGroup) => void;
     onDeleteGroup: (groupId: CanopyGroupId) => void;
     onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
     onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     activeSearchGroupId: string | null;
     searchQuery: string;
     searchResults: UserSearchResult[];

package/dist/editor/group-manager/InternalGroupsTab.js

@@ -2,14 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Group, Paper, ScrollArea, Stack, Text } from '@mantine/core';
 import { IconPlus, IconUsers } from '@tabler/icons-react';
-import { GroupCard } from './GroupCard.js';
-export const InternalGroupsTab = ({ groups, canEdit, onCreateGroup, onEditGroup, onDeleteGroup, onAddMember, onRemoveMember, onGetUserMetadata, activeSearchGroupId, searchQuery, searchResults, isSearching, searchError, onSearchQueryChange, onShowSearch, onHideSearch, canSearch, }) => {
+import { GroupCard, memberCountLabel } from './GroupCard.js';
+export const InternalGroupsTab = ({ groups, unsavedGroupIds, canEdit, onCreateGroup, onEditGroup, onDeleteGroup, onAddMember, onRemoveMember, onGetUserMetadata, activeSearchGroupId, searchQuery, searchResults, isSearching, searchError, onSearchQueryChange, onShowSearch, onHideSearch, canSearch, }) => {
     if (!canEdit) {
         return (_jsx("div", { style: {
                 flex: 1,
                 overflow: 'auto',
                 paddingTop: 'var(--mantine-spacing-md)',
-            }, children: groups.length === 0 ? (_jsxs(Paper, { withBorder: true, p: "md", style: { textAlign: 'center' }, children: [_jsx(IconUsers, { size: 32, color: "gray", style: { margin: '0 auto', marginBottom: 8 } }), _jsx(Text, { size: "sm", c: "dimmed", children: "No internal groups" })] })) : (_jsx(Stack, { gap: "xs", pb: "md", children: groups.map((group) => (_jsx(Paper, { withBorder: true, p: "sm", children: _jsxs(Group, { justify: "space-between", children: [_jsxs("div", { children: [_jsx(Text, { size: "sm", fw: 500, children: group.name }), group.description && (_jsx(Text, { size: "xs", c: "dimmed", children: group.description }))] }), _jsxs(Text, { size: "sm", variant: "light", children: [group.members?.length || 0, " members"] })] }) }, group.id))) })) }));
+            }, children: groups.length === 0 ? (_jsxs(Paper, { withBorder: true, p: "md", style: { textAlign: 'center' }, children: [_jsx(IconUsers, { size: 32, color: "gray", style: { margin: '0 auto', marginBottom: 8 } }), _jsx(Text, { size: "sm", c: "dimmed", children: "No internal groups" })] })) : (_jsx(Stack, { gap: "xs", pb: "md", children: groups.map((group) => (_jsx(Paper, { withBorder: true, p: "sm", children: _jsxs(Group, { justify: "space-between", children: [_jsxs("div", { children: [_jsx(Text, { size: "sm", fw: 500, children: group.name }), group.description && (_jsx(Text, { size: "xs", c: "dimmed", children: group.description }))] }), _jsx(Text, { size: "sm", variant: "light", children: memberCountLabel(group.members?.length ?? 0) })] }) }, group.id))) })) }));
     }
-    return (_jsx(ScrollArea, { style: { height: '100%' }, pt: "md", children: _jsxs(Stack, { gap: "sm", pb: "md", children: [_jsxs(Group, { justify: "space-between", mb: "xs", children: [_jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Manage your internal groups" }), _jsx(Button, { size: "xs", variant: "light", leftSection: _jsx(IconPlus, { size: 14 }), onClick: onCreateGroup, children: "Create Group" })] }), groups.length === 0 ? (_jsxs(Paper, { withBorder: true, p: "md", style: { textAlign: 'center' }, children: [_jsx(IconUsers, { size: 32, color: "gray", style: { margin: '0 auto', marginBottom: 8 } }), _jsx(Text, { size: "sm", c: "dimmed", children: "No internal groups yet. Create one to get started." })] })) : (groups.map((group) => (_jsx(GroupCard, { group: group, onEdit: onEditGroup, onDelete: onDeleteGroup, onAddMember: onAddMember, onRemoveMember: onRemoveMember, onGetUserMetadata: onGetUserMetadata, showUserSearch: activeSearchGroupId === group.id, searchQuery: searchQuery, searchResults: searchResults, isSearching: isSearching, searchError: searchError, onSearchQueryChange: onSearchQueryChange, onShowSearch: () => onShowSearch(group.id), onHideSearch: onHideSearch, canSearch: canSearch }, group.id))))] }) }));
+    return (_jsx(ScrollArea, { style: { height: '100%' }, pt: "md", children: _jsxs(Stack, { gap: "sm", pb: "md", children: [_jsxs(Group, { justify: "space-between", mb: "xs", children: [_jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Manage your internal groups" }), _jsx(Button, { variant: "light", leftSection: _jsx(IconPlus, { size: 14 }), onClick: onCreateGroup, children: "Create group" })] }), groups.length === 0 ? (_jsxs(Paper, { withBorder: true, p: "md", style: { textAlign: 'center' }, children: [_jsx(IconUsers, { size: 32, color: "gray", style: { margin: '0 auto', marginBottom: 8 } }), _jsx(Text, { size: "sm", c: "dimmed", children: "No internal groups yet. Create one to get started." })] })) : (groups.map((group) => (_jsx(GroupCard, { group: group, isUnsaved: unsavedGroupIds.has(group.id), onEdit: onEditGroup, onDelete: onDeleteGroup, onAddMember: onAddMember, onRemoveMember: onRemoveMember, onGetUserMetadata: onGetUserMetadata, showUserSearch: activeSearchGroupId === group.id, searchQuery: searchQuery, searchResults: searchResults, isSearching: isSearching, searchError: searchError, onSearchQueryChange: onSearchQueryChange, onShowSearch: () => onShowSearch(group.id), onHideSearch: onHideSearch, canSearch: canSearch }, group.id))))] }) }));
 };

package/dist/editor/group-manager/MemberList.d.ts

@@ -5,7 +5,8 @@ export interface MemberListProps {
     members: CanopyUserId[];
     onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
     onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    /** Names each member; an id never shows as the label, since an unresolved one reads "Name unavailable". */
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     showUserSearch: boolean;
     searchQuery: string;
     searchResults: UserSearchResult[];

package/dist/editor/group-manager/MemberList.js

@@ -1,12 +1,23 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActionIcon, Badge, Button, Group, Loader, Paper, Stack, Text, TextInput, } from '@mantine/core';
-import { IconSearch, IconX } from '@tabler/icons-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button, Group, Loader, Paper, Stack, Text, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
 import { UserBadge } from '../components/UserBadge.js';
+import { useFocusAfterRemove } from '../utils/focus-return.js';
 export const MemberList = ({ groupId, members, onRemoveMember, onAddMember, onGetUserMetadata, showUserSearch, searchQuery, searchResults, isSearching, searchError, onSearchQueryChange, onShowSearch, onHideSearch, canSearch, }) => {
+    const { listRef, focusAfterRemove } = useFocusAfterRemove();
+    const addMemberRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const headingRef = useRef(null);
+    // With no member left, focus goes to whichever of these the section shows and can focus.
+    const emptyListFocus = showUserSearch ? searchInputRef : canSearch ? addMemberRef : headingRef;
     const handleAddMember = (userId) => {
         onAddMember(groupId, userId);
         onHideSearch();
     };
-    return (_jsxs("div", { children: [_jsx(Text, { size: "xs", fw: 500, mb: 4, children: "Members" }), _jsx(Group, { gap: "xs", mb: "xs", children: members.length > 0 ? (members.map((userId) => onGetUserMetadata ? (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "filled", color: "blue", onRemove: () => onRemoveMember(groupId, userId), showEmailTooltip: true }, userId)) : (_jsx(Badge, { variant: "filled", color: "blue", pr: 3, rightSection: _jsx(ActionIcon, { size: "xs", color: "blue", radius: "xl", variant: "transparent", onClick: () => onRemoveMember(groupId, userId), children: _jsx(IconX, { size: 10, style: { color: 'white' } }) }), children: userId }, userId)))) : (_jsx(Text, { size: "xs", c: "dimmed", children: "No members" })) }), showUserSearch ? (_jsx(Paper, { withBorder: true, p: "sm", mt: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsx(TextInput, { placeholder: "Search users by name or email...", value: searchQuery, onChange: (e) => onSearchQueryChange(e.target.value), "aria-label": "Search users by name or email", size: "xs" }), isSearching && _jsx(Loader, { size: "xs" }), searchError && (_jsx(Text, { size: "xs", c: "red", children: searchError })), searchResults.length > 0 && (_jsx(Stack, { gap: 4, children: searchResults.map((user) => (_jsx(Paper, { p: "xs", withBorder: true, style: { cursor: 'pointer' }, onClick: () => handleAddMember(user.id), children: onGetUserMetadata ? (_jsx(UserBadge, { userId: user.id, getUserMetadata: onGetUserMetadata, variant: "full", size: "sm", cachedUser: user, showEmailTooltip: false })) : (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", fw: 500, children: user.name }), _jsx(Text, { size: "xs", c: "dimmed", children: user.email })] })) }, user.id))) })), searchQuery.trim() && !isSearching && searchResults.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No users found" })), _jsx(Button, { size: "xs", variant: "subtle", onClick: onHideSearch, children: "Cancel" })] }) })) : (_jsx(Button, { size: "xs", variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: onShowSearch, disabled: !canSearch, children: "Add Member" }))] }));
+    return (_jsxs("div", { children: [_jsx(Text, { size: "xs", fw: 500, mb: 4, ref: headingRef, tabIndex: -1, children: "Members" }), _jsx(Group, { gap: "xs", mb: "xs", ref: listRef, children: members.length > 0 ? (members.map((userId, index) => (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "light", color: "blue", onRemove: () => {
+                        onRemoveMember(groupId, userId);
+                        focusAfterRemove(index, emptyListFocus);
+                    }, showEmailTooltip: true, revealIdOnFallback: true }, userId)))) : (_jsx(Text, { size: "xs", c: "dimmed", children: "No members" })) }), showUserSearch ? (_jsx(Paper, { withBorder: true, p: "sm", mt: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsx(TextInput, { ref: searchInputRef, placeholder: "Search users by name or email...", value: searchQuery, onChange: (e) => onSearchQueryChange(e.target.value), "aria-label": "Search users by name or email", size: "xs" }), isSearching && _jsx(Loader, { size: "xs" }), searchError && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: searchError })), searchResults.length > 0 && (_jsx(Stack, { gap: 4, children: searchResults.map((user) => (_jsx(Paper, { p: "xs", withBorder: true, style: { cursor: 'pointer' }, onClick: () => handleAddMember(user.id), children: _jsx(UserBadge, { userId: user.id, getUserMetadata: onGetUserMetadata, variant: "full", size: "sm", cachedUser: user, showEmailTooltip: false }) }, user.id))) })), searchQuery.trim() && !isSearching && searchResults.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No users found" })), _jsx(Button, { variant: "subtle", onClick: onHideSearch, children: "Cancel" })] }) })) : (_jsx(Button, { ref: addMemberRef, variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: onShowSearch, disabled: !canSearch, children: "Add member" }))] }));
 };

package/dist/editor/group-manager/hooks/useGroupState.d.ts

@@ -1,13 +1,18 @@
 import type { InternalGroup, CanopyGroupId, CanopyUserId } from '../types.js';
+export declare const isTempGroupId: (id: CanopyGroupId) => boolean;
 export interface UseGroupStateOptions {
     initialGroups: InternalGroup[];
     onSave?: (groups: InternalGroup[]) => Promise<void>;
 }
 export interface UseGroupStateResult {
     groups: InternalGroup[];
+    /** Listed groups that are new or differ from the last loaded or saved state. */
+    unsavedGroupIds: ReadonlySet<CanopyGroupId>;
     isDirty: boolean;
     isSaving: boolean;
     error: string | null;
+    /** The error is a version conflict (`SettingsChangedError`), shown yellow. */
+    errorIsConflict: boolean;
     setError: (error: string | null) => void;
     createGroup: (name: string, description: string) => void;
     updateGroup: (groupId: CanopyGroupId, name: string, description: string) => void;

package/dist/editor/group-manager/hooks/useGroupState.js

@@ -1,15 +1,33 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { SettingsChangedError } from '../../settings-conflict.js';
 const TEMP_GROUP_ID_PREFIX = 'temp-';
-const isTempGroupId = (id) => id.startsWith(TEMP_GROUP_ID_PREFIX);
+export const isTempGroupId = (id) => id.startsWith(TEMP_GROUP_ID_PREFIX);
+const sameMembers = (a = [], b = []) => a.length === b.length && [...a].sort().join('\n') === [...b].sort().join('\n');
+const sameGroup = (a, b) => a.name === b.name &&
+    (a.description ?? '') === (b.description ?? '') &&
+    sameMembers(a.members, b.members);
 export function useGroupState({ initialGroups, onSave, }) {
     const [groups, setGroups] = useState(initialGroups);
     const [isDirty, setIsDirty] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
-    const [error, setError] = useState(null);
+    const [failure, setFailure] = useState(null);
+    const setError = useCallback((message) => setFailure(message === null ? null : { message, conflict: false }), []);
     useEffect(() => {
         setGroups(initialGroups);
         setIsDirty(false);
     }, [initialGroups]);
+    // Only while dirty: after a save whose reload failed, initialGroups is stale.
+    const unsavedGroupIds = useMemo(() => {
+        if (!isDirty)
+            return new Set();
+        const initialById = new Map(initialGroups.map((g) => [g.id, g]));
+        return new Set(groups
+            .filter((g) => {
+            const initial = initialById.get(g.id);
+            return !initial || !sameGroup(g, initial);
+        })
+            .map((g) => g.id));
+    }, [groups, initialGroups, isDirty]);
     const createGroup = useCallback((name, description) => {
         const newGroup = {
             id: `${TEMP_GROUP_ID_PREFIX}${crypto.randomUUID()}`,
@@ -66,22 +84,27 @@ export function useGroupState({ initialGroups, onSave, }) {
             setIsDirty(false);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to save groups');
+            setFailure({
+                message: err instanceof Error ? err.message : 'Failed to save groups',
+                conflict: err instanceof SettingsChangedError,
+            });
         }
         finally {
             setIsSaving(false);
         }
-    }, [onSave, groups]);
+    }, [onSave, groups, setError]);
     const discard = useCallback(() => {
         setGroups(initialGroups);
         setIsDirty(false);
         setError(null);
-    }, [initialGroups]);
+    }, [initialGroups, setError]);
     return {
         groups,
+        unsavedGroupIds,
         isDirty,
         isSaving,
-        error,
+        error: failure?.message ?? null,
+        errorIsConflict: failure?.conflict ?? false,
         setError,
         createGroup,
         updateGroup,

package/dist/editor/group-manager/index.js

@@ -1,22 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
-import { Alert, Button, Group, Loader, Stack, Tabs, Text } from '@mantine/core';
+import { Alert, Group, Loader, Stack, Tabs, Text } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
-import { useGroupState } from './hooks/useGroupState.js';
+import { isTempGroupId, useGroupState } from './hooks/useGroupState.js';
 import { useUserSearch } from './hooks/useUserSearch.js';
 import { useExternalGroupSearch } from './hooks/useExternalGroupSearch.js';
 import { InternalGroupsTab } from './InternalGroupsTab.js';
 import { ExternalGroupsTab } from './ExternalGroupsTab.js';
 import { GroupForm } from './GroupForm.js';
-export const GroupManager = ({ internalGroups: initialInternalGroups, loading = false, canEdit, onSave, onSearchUsers, onGetUserMetadata, onSearchExternalGroups, onClose: _, }) => {
-    const { groups, isDirty, isSaving, error, setError, createGroup, updateGroup, deleteGroup, addMember, removeMember, save, discard, } = useGroupState({
+import { openConfirm } from '../utils/confirm-modal.js';
+import { StagedChangesDrawer, useOpeningKey } from '../components/StagedChangesDrawer.js';
+export const GroupManager = (props) => {
+    const { key, onExited } = useOpeningKey();
+    return _jsx(GroupManagerDrawer, { ...props, onExited: onExited }, key);
+};
+const GroupManagerDrawer = ({ opened, onClose, onExited, returnFocusTo, internalGroups: initialInternalGroups, loading = false, canEdit, onSave, onSearchUsers, onGetUserMetadata, onSearchExternalGroups, }) => {
+    const { groups, unsavedGroupIds, isDirty, isSaving, error, errorIsConflict, setError, createGroup, updateGroup, deleteGroup, addMember, removeMember, save, discard, } = useGroupState({
         initialGroups: initialInternalGroups,
         onSave,
     });
     const userSearch = useUserSearch({ onSearchUsers });
     const externalGroupSearch = useExternalGroupSearch({ onSearchExternalGroups });
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
     const [editingGroup, setEditingGroup] = useState(null);
     const [formData, setFormData] = useState({
         name: '',
@@ -27,6 +34,28 @@ export const GroupManager = ({ internalGroups: initialInternalGroups, loading =
         setFormData({ name: '', description: '' });
         setIsModalOpen(true);
     }, []);
+    // Save groups applies a delete with no further look; a group not yet saved has nothing to lose.
+    const confirmDeleteGroup = useCallback((groupId) => {
+        if (isTempGroupId(groupId)) {
+            deleteGroup(groupId);
+            return;
+        }
+        const group = groups.find((g) => g.id === groupId);
+        const memberCount = group?.members?.length ?? 0;
+        const consequence = memberCount === 0
+            ? 'It is deleted when you save.'
+            : `Its ${memberCount} ${memberCount === 1 ? 'member loses' : 'members lose'} the access it grants when you save.`;
+        setDeleteConfirmOpen(true);
+        openConfirm({
+            title: 'Delete group',
+            children: _jsx(Text, { size: "sm", children: `Delete "${group?.name ?? groupId}"? ${consequence}` }),
+            labels: { confirm: 'Delete group', cancel: 'Cancel' },
+            confirmProps: { color: 'red' },
+            onConfirm: () => deleteGroup(groupId),
+            // Deferred: Mantine runs onClose, for every exit, inside its reducer during render.
+            onClose: () => queueMicrotask(() => setDeleteConfirmOpen(false)),
+        });
+    }, [groups, deleteGroup]);
     const handleEditGroup = useCallback((group) => {
         setEditingGroup(group);
         setFormData({ name: group.name, description: group.description || '' });
@@ -53,7 +82,7 @@ export const GroupManager = ({ internalGroups: initialInternalGroups, loading =
         addMember(groupId, userId);
         userSearch.hideSearch();
     }, [addMember, userSearch]);
-    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to manage groups." })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", mb: "sm", title: "Error", withCloseButton: true, onClose: () => setError(null), children: error })), loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading groups..." })] })) : (_jsxs(Tabs, { defaultValue: "internal", style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "internal", children: "Internal Groups" }), _jsx(Tabs.Tab, { value: "external", children: "External Groups" })] }), _jsx(Tabs.Panel, { value: "internal", style: { flex: 1, overflow: 'auto' }, children: _jsx(InternalGroupsTab, { groups: groups, canEdit: canEdit, onCreateGroup: handleCreateGroup, onEditGroup: handleEditGroup, onDeleteGroup: deleteGroup, onAddMember: handleAddMember, onRemoveMember: removeMember, onGetUserMetadata: onGetUserMetadata, activeSearchGroupId: userSearch.activeGroupId, searchQuery: userSearch.searchQuery, searchResults: userSearch.searchResults, isSearching: userSearch.isSearching, searchError: userSearch.searchError, onSearchQueryChange: userSearch.setSearchQuery, onShowSearch: userSearch.showSearch, onHideSearch: userSearch.hideSearch, canSearch: !!onSearchUsers }) }), _jsx(Tabs.Panel, { value: "external", style: { flex: 1, overflow: 'auto' }, children: _jsx(ExternalGroupsTab, { canEdit: canEdit, searchQuery: externalGroupSearch.searchQuery, searchResults: externalGroupSearch.searchResults, isSearching: externalGroupSearch.isSearching, searchError: externalGroupSearch.searchError, onSearchQueryChange: externalGroupSearch.setSearchQuery, canSearch: !!onSearchExternalGroups }) })] })), canEdit && isDirty && (_jsxs(Group, { justify: "flex-end", py: "sm", gap: "sm", style: { borderTop: '1px solid var(--mantine-color-gray-3)' }, children: [_jsx(Button, { variant: "subtle", color: "neutral", onClick: discard, disabled: isSaving, children: "Discard Changes" }), _jsx(Button, { onClick: save, loading: isSaving, disabled: isSaving, children: "Save Groups" })] })), _jsx(GroupForm, { isOpen: isModalOpen, editingGroup: editingGroup, formData: formData, onFormChange: handleFormChange, onSave: handleSaveModal, onClose: () => setIsModalOpen(false) })] }));
+    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Groups", description: "Manage groups and organizations", size: 600, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save groups", onSave: save, onDiscard: discard, childModalOpen: isModalOpen || deleteConfirmOpen, onExited: onExited, returnFocusTo: returnFocusTo, children: _jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to manage groups." })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: errorIsConflict ? 'yellow' : 'red', mb: "sm", title: errorIsConflict ? 'Not saved' : 'Error', withCloseButton: true, onClose: () => setError(null), children: error })), loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading groups..." })] })) : (_jsxs(Tabs, { defaultValue: "internal", style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "internal", children: "Internal groups" }), _jsx(Tabs.Tab, { value: "external", children: "External groups" })] }), _jsx(Tabs.Panel, { value: "internal", style: { flex: 1, overflow: 'auto' }, children: _jsx(InternalGroupsTab, { groups: groups, unsavedGroupIds: unsavedGroupIds, canEdit: canEdit, onCreateGroup: handleCreateGroup, onEditGroup: handleEditGroup, onDeleteGroup: confirmDeleteGroup, onAddMember: handleAddMember, onRemoveMember: removeMember, onGetUserMetadata: onGetUserMetadata, activeSearchGroupId: userSearch.activeGroupId, searchQuery: userSearch.searchQuery, searchResults: userSearch.searchResults, isSearching: userSearch.isSearching, searchError: userSearch.searchError, onSearchQueryChange: userSearch.setSearchQuery, onShowSearch: userSearch.showSearch, onHideSearch: userSearch.hideSearch, canSearch: !!onSearchUsers }) }), _jsx(Tabs.Panel, { value: "external", style: { flex: 1, overflow: 'auto' }, children: _jsx(ExternalGroupsTab, { canEdit: canEdit, searchQuery: externalGroupSearch.searchQuery, searchResults: externalGroupSearch.searchResults, isSearching: externalGroupSearch.isSearching, searchError: externalGroupSearch.searchError, onSearchQueryChange: externalGroupSearch.setSearchQuery, canSearch: !!onSearchExternalGroups }) })] })), _jsx(GroupForm, { isOpen: isModalOpen, editingGroup: editingGroup, formData: formData, onFormChange: handleFormChange, onSave: handleSaveModal, onClose: () => setIsModalOpen(false) })] }) }));
 };
 export { useGroupState } from './hooks/useGroupState.js';
 export { useUserSearch } from './hooks/useUserSearch.js';

package/dist/editor/group-manager/types.d.ts

@@ -5,14 +5,17 @@ import type { ExternalGroup } from '../../api/groups.js';
 export type { UserSearchResult, InternalGroup, ExternalGroup };
 export type { CanopyGroupId, CanopyUserId };
 export interface GroupManagerProps {
+    opened: boolean;
+    /** Closes the drawer; while there are unsaved changes it runs only after the user confirms discarding them. */
+    onClose: () => void;
+    returnFocusTo?: () => HTMLElement | null;
     internalGroups: InternalGroup[];
     loading?: boolean;
     canEdit: boolean;
     onSave?: (groups: InternalGroup[]) => Promise<void>;
     onSearchUsers?: (query: string, limit?: number) => Promise<UserSearchResult[]>;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     onSearchExternalGroups?: (query: string) => Promise<ExternalGroup[]>;
-    onClose?: () => void;
 }
 export interface GroupFormData {
     name: string;

package/dist/editor/hooks/create-branch-request.d.ts

@@ -0,0 +1,20 @@
+import type { BranchListItem, CreateBranchBody } from '../../api/branch.js';
+import { type CanopyApiClient } from '../../api/client.js';
+/** @internal Exported for tests. Past the 60 s a Lambda behind CloudFront gets, so its 504 lands first. */
+export declare const CREATE_BRANCH_DEADLINE_MS = 90000;
+/** @internal Exported for tests. */
+export declare const CREATE_TIMED_OUT_MESSAGE = "Creating the branch didn't finish (the server timed out). It's safe to try again.";
+export type CreateBranchOutcome = {
+    kind: 'created';
+    branch: BranchListItem | undefined;
+} | {
+    kind: 'failed';
+    message: string;
+};
+/**
+ * Create a branch. Past the deadline, after an error page from in front of the API, or after a
+ * busy 503 the branch may exist anyway, so the branch list decides; retrying is safe because a
+ * create publishes the whole branch or nothing. `userId` is the current user, the only creator
+ * whose listed branch can be this create's result.
+ */
+export declare function requestBranchCreate(apiClient: Pick<CanopyApiClient, 'branches'>, body: CreateBranchBody, userId: string | undefined, deadlineMs?: number): Promise<CreateBranchOutcome>;

package/dist/editor/hooks/create-branch-request.js

@@ -0,0 +1,54 @@
+import { isCreatorsRecentBranch } from '../../api/branch-create-window.js';
+import { isApiTimeoutError, isNonApiResponse } from '../../api/client.js';
+import { sanitizeBranchName } from '../../paths/branch-name.js';
+/** @internal Exported for tests. Past the 60 s a Lambda behind CloudFront gets, so its 504 lands first. */
+export const CREATE_BRANCH_DEADLINE_MS = 90_000;
+/** @internal Exported for tests. */
+export const CREATE_TIMED_OUT_MESSAGE = "Creating the branch didn't finish (the server timed out). It's safe to try again.";
+/**
+ * Create a branch. Past the deadline, after an error page from in front of the API, or after a
+ * busy 503 the branch may exist anyway, so the branch list decides; retrying is safe because a
+ * create publishes the whole branch or nothing. `userId` is the current user, the only creator
+ * whose listed branch can be this create's result.
+ */
+export async function requestBranchCreate(apiClient, body, userId, deadlineMs = CREATE_BRANCH_DEADLINE_MS) {
+    let result;
+    try {
+        result = await apiClient.branches.create(body, { timeoutMs: deadlineMs });
+    }
+    catch (err) {
+        if (isApiTimeoutError(err)) {
+            return settle(apiClient, body.branch, userId, CREATE_TIMED_OUT_MESSAGE);
+        }
+        throw err;
+    }
+    if (result.ok)
+        return { kind: 'created', branch: result.data?.branch };
+    if (isNonApiResponse(result))
+        return settle(apiClient, body.branch, userId, CREATE_TIMED_OUT_MESSAGE);
+    const message = result.error || 'Failed to create branch';
+    return result.status === 503
+        ? settle(apiClient, body.branch, userId, message)
+        : { kind: 'failed', message };
+}
+/** A same-named branch the server would not answer this create with is a name conflict. */
+async function settle(apiClient, requested, userId, message) {
+    const listed = await findListedBranch(apiClient, requested);
+    if (!listed)
+        return { kind: 'failed', message };
+    if (isCreatorsRecentBranch(listed, userId))
+        return { kind: 'created', branch: listed };
+    return { kind: 'failed', message: `A branch named "${listed.name}" already exists` };
+}
+async function findListedBranch(apiClient, requested) {
+    const name = sanitizeBranchName(requested);
+    try {
+        const listing = await apiClient.branches.list();
+        if (!listing.ok)
+            return undefined;
+        return listing.data?.branches.find((branch) => sanitizeBranchName(branch.name) === name);
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/editor/hooks/save-all.d.ts

@@ -0,0 +1,68 @@
+import type { LogicalPath } from '../../paths/types.js';
+/**
+ * Why one entry of a Save all was not saved. `unanswered` and `conflict` lose nothing yet, so
+ * they warn (yellow); the rest are errors (red).
+ */
+export type SaveAllFailureKind = 'unanswered' | 'conflict' | 'invalid' | 'blocked' | 'error';
+export interface SaveAllFailure {
+    contentId: string;
+    label: string;
+    path: LogicalPath;
+    kind: SaveAllFailureKind;
+    /** A full sentence for the result's list, after the entry's name. */
+    reason: string;
+    /** "Save as new entry", for an entry deleted since its edits started. */
+    recreate?: () => void;
+    /** Refused for now only, so the result's "Try again" can pass it. */
+    retryable?: true;
+}
+export interface SaveAllResult {
+    branch: string;
+    /** The entries Save all set out to save. */
+    total: number;
+    saved: Array<{
+        contentId: string;
+        label: string;
+        path: LogicalPath;
+    }>;
+    failed: SaveAllFailure[];
+}
+export interface SaveAllProgress {
+    /** Entries settled so far, saved or not. */
+    done: number;
+    total: number;
+}
+/** One result toast at a time: a new run replaces it, and leaving its branch takes a partly failed one down. */
+export declare const SAVE_ALL_RESULT_TOAST_ID = "canopy-save-all-result";
+export declare const SAVE_ALL_REASONS: {
+    readonly unanswered: "Saving it may have gone through even though the server didn't answer. Open it and choose \"Refresh from server\" to check before saving again.";
+    readonly earlierUnanswered: "An earlier save of it may have gone through even though the server didn't answer. Open it and choose \"Refresh from server\" to check before saving again.";
+    readonly staleBase: "It changed on the server since your edits started, so saving would overwrite someone else's changes. Open it and choose \"Refresh from server\" to see the latest version (your unsaved edits will be lost).";
+    readonly unknownBase: "Its unsaved changes come from an older version of the editor. Open it and save it on its own to confirm the overwrite.";
+    readonly unavailable: "Its entry type isn't available in this version of the site, so it can't be saved.";
+    readonly noEditAccess: "You don't have edit access to it.";
+    readonly forbidden: "You don't have permission to save it. Ask a CanopyCMS admin for access.";
+    readonly loadFailed: "It couldn't be loaded from the server, so it wasn't saved. Try Save all again.";
+    readonly renamed: "It was renamed since your edits started, so it wasn't saved. Your changes moved with it: save again.";
+    readonly deleted: "It was deleted since your edits started, so it wasn't saved. Choose \"Save as new entry\" to keep your changes.";
+    readonly goneUnchecked: "It was deleted or renamed since your edits started, so it wasn't saved, and the editor couldn't check which. Choose \"Refresh branch\" in the branch menu: if it was renamed, your changes moved with it.";
+    readonly failed: "Save failed. Try again.";
+};
+export declare const invalidReason: (count: number) => string;
+/**
+ * Classifies a refused or unanswered save the way `handleSave` does, minus its toasts: Save all
+ * reports every entry in one result. `ENTRY_GONE`, a may-have-landed 409 and an unanswered write
+ * need the caller's follow-up, so they come back as `gone`, `landed?` and `unanswered`.
+ */
+export declare function classifySaveAllError(err: unknown, retryOfUnanswered: boolean): {
+    kind: 'gone';
+} | {
+    kind: 'landed?';
+} | {
+    kind: 'unanswered';
+} | {
+    kind: Exclude<SaveAllFailureKind, 'unanswered'>;
+    reason: string;
+    fieldErrors?: boolean;
+    retryable?: true;
+};

package/dist/editor/hooks/save-all.js

@@ -0,0 +1,61 @@
+import { ENTRY_CHANGED_MESSAGE } from '../../api/entries-constants.js';
+import { SCHEMA_UNAVAILABLE_CODE } from '../unavailable-entry-type.js';
+import { isUnanswered } from '../unanswered.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { SaveApiError } from './useEntryManager.js';
+/** One result toast at a time: a new run replaces it, and leaving its branch takes a partly failed one down. */
+export const SAVE_ALL_RESULT_TOAST_ID = 'canopy-save-all-result';
+const ENTRY_GONE_CODE = 'ENTRY_GONE';
+const BRANCH_SYNCING_CODE = 'BRANCH_SYNCING';
+export const SAVE_ALL_REASONS = {
+    unanswered: `Saving it may have gone through even though the server didn't answer. Open it and choose "${EDITOR_ACTIONS.refreshFromServer}" to check before saving again.`,
+    earlierUnanswered: `An earlier save of it may have gone through even though the server didn't answer. Open it and choose "${EDITOR_ACTIONS.refreshFromServer}" to check before saving again.`,
+    staleBase: `It changed on the server since your edits started, so saving would overwrite someone else's changes. Open it and choose "${EDITOR_ACTIONS.refreshFromServer}" to see the latest version (your unsaved edits will be lost).`,
+    unknownBase: 'Its unsaved changes come from an older version of the editor. Open it and save it on its own to confirm the overwrite.',
+    unavailable: "Its entry type isn't available in this version of the site, so it can't be saved.",
+    noEditAccess: "You don't have edit access to it.",
+    forbidden: "You don't have permission to save it. Ask a CanopyCMS admin for access.",
+    loadFailed: "It couldn't be loaded from the server, so it wasn't saved. Try Save all again.",
+    renamed: "It was renamed since your edits started, so it wasn't saved. Your changes moved with it: save again.",
+    deleted: 'It was deleted since your edits started, so it wasn\'t saved. Choose "Save as new entry" to keep your changes.',
+    goneUnchecked: 'It was deleted or renamed since your edits started, so it wasn\'t saved, and the editor couldn\'t check which. Choose "Refresh branch" in the branch menu: if it was renamed, your changes moved with it.',
+    failed: 'Save failed. Try again.',
+};
+export const invalidReason = (count) => `${count} ${count === 1 ? 'field needs' : 'fields need'} fixing. Open it to see which.`;
+/**
+ * Classifies a refused or unanswered save the way `handleSave` does, minus its toasts: Save all
+ * reports every entry in one result. `ENTRY_GONE`, a may-have-landed 409 and an unanswered write
+ * need the caller's follow-up, so they come back as `gone`, `landed?` and `unanswered`.
+ */
+export function classifySaveAllError(err, retryOfUnanswered) {
+    if (isUnanswered(err))
+        return { kind: 'unanswered' };
+    if (!(err instanceof SaveApiError))
+        return { kind: 'error', reason: SAVE_ALL_REASONS.failed };
+    if (err.status === 409) {
+        if (err.code === ENTRY_GONE_CODE)
+            return { kind: 'gone' };
+        // The retry of a save that got no answer, refused as changed, most likely bounced off itself.
+        if (err.code === 'WRITE_OUTCOME_UNKNOWN' ||
+            (retryOfUnanswered && err.serverMessage === ENTRY_CHANGED_MESSAGE)) {
+            return { kind: 'landed?' };
+        }
+        if (err.code === BRANCH_SYNCING_CODE) {
+            return { kind: 'conflict', reason: err.message, retryable: true };
+        }
+        // The version check's own wording names the single-entry recovery, so Save all says it its way.
+        const changed = !err.serverMessage || err.serverMessage === ENTRY_CHANGED_MESSAGE;
+        return { kind: 'conflict', reason: changed ? SAVE_ALL_REASONS.staleBase : err.serverMessage };
+    }
+    if (err.code === SCHEMA_UNAVAILABLE_CODE)
+        return { kind: 'blocked', reason: err.message };
+    if (err.status === 422) {
+        return { kind: 'invalid', reason: err.message, fieldErrors: !!err.fieldErrors?.length };
+    }
+    // A path rule's refusal says only "Forbidden"; the guards' own refusals explain themselves.
+    if (err.status === 403) {
+        const bare = !err.serverMessage || err.serverMessage === 'Forbidden';
+        return { kind: 'blocked', reason: bare ? SAVE_ALL_REASONS.forbidden : err.serverMessage };
+    }
+    return { kind: 'error', reason: SAVE_ALL_REASONS.failed };
+}

package/dist/editor/hooks/useBranchActions.d.ts

@@ -1,21 +1,31 @@
 import type { BranchListItem } from '../../api/branch.js';
+import type { UnsavedSummary } from './useDraftManager.js';
 export interface UseBranchActionsOptions {
     branchName: string;
     setBranchName: (name: string) => void;
-    isAnyDirty: () => boolean;
+    /** From useDraftManager's `resolveUnsaved`: what a branch-level action would leave behind. */
+    getUnsaved: () => Promise<UnsavedSummary>;
     onReloadBranches: () => Promise<void>;
     /** Receives the branch the server just created, so it can be shown before any listing includes it. */
     onBranchCreated: (branch: BranchListItem) => void;
     onBranchSwitch?: (branch: string) => void;
+    /** The current user; a create the server never answered adopts only a listed branch they made. */
+    userId?: string;
 }
 export interface UseBranchActionsReturn {
     handleBranchChange: (branch: string | null) => Promise<void>;
+    /** True when nothing is unsaved or the user accepted the warning. Run before any in-flight UI. */
+    confirmCreate: () => Promise<boolean>;
     handleCreateBranch: (branch: {
         name: string;
         title?: string;
         description?: string;
     }) => Promise<boolean>;
+    /** True while the unsaved-changes confirm is on screen. */
+    confirmOpen: boolean;
 }
+/** 'Unsaved changes in: "A", "B".' */
+export declare const describeUnsaved: ({ labels }: UnsavedSummary) => string;
 /**
  * Custom hook for branch navigation actions with dirty check support.
  */