@orthacms/users-admin 0.0.0-reserve.0

package/dist/lib/presentation/pages/UserPreferencesPage/index.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { AlertTriangle, Check, Monitor, Moon, Sun } from 'lucide-react';
+import { Alert, AlertDescription, Card, CardContent, CardDescription, CardHeader, CardTitle, RadioGroup, RadioGroupItem, cn, toast, useAppearance } from '@orthacms/design-system';
+import { usePreferences } from '../../../application/usePreferences';
+import { useUpdateTheme } from '../../../application/useUpdateTheme';
+import { ThemePreview } from './ThemePreview';
+/** Intl descriptors for {@link UserPreferencesPage}, co-located here. */
+const messages = defineMessages({
+    themeTitle: {
+        id: 'users.preferences.themeTitle',
+        defaultMessage: 'Theme'
+    },
+    themeDescription: {
+        id: 'users.preferences.themeDescription',
+        defaultMessage: 'Choose how Ortha looks. This is personal to your account and applies immediately on every device you sign in on. “System” follows your device’s appearance setting.'
+    },
+    lightLabel: { id: 'users.preferences.lightLabel', defaultMessage: 'Light' },
+    lightHint: {
+        id: 'users.preferences.lightHint',
+        defaultMessage: 'The bright, default canvas.'
+    },
+    darkLabel: { id: 'users.preferences.darkLabel', defaultMessage: 'Dark' },
+    darkHint: {
+        id: 'users.preferences.darkHint',
+        defaultMessage: 'Dimmed surfaces, easier at night.'
+    },
+    systemLabel: {
+        id: 'users.preferences.systemLabel',
+        defaultMessage: 'System'
+    },
+    systemHint: {
+        id: 'users.preferences.systemHint',
+        defaultMessage: 'Match my device automatically.'
+    },
+    systemResolved: {
+        id: 'users.preferences.systemResolved',
+        defaultMessage: 'Your device is currently set to {mode}.'
+    },
+    modeLight: { id: 'users.preferences.modeLight', defaultMessage: 'light' },
+    modeDark: { id: 'users.preferences.modeDark', defaultMessage: 'dark' },
+    groupLabel: {
+        id: 'users.preferences.groupLabel',
+        defaultMessage: 'Colour theme'
+    },
+    saved: { id: 'users.preferences.saved', defaultMessage: 'Theme saved.' },
+    failed: {
+        id: 'users.preferences.failed',
+        defaultMessage: 'Couldn’t save your theme. Please try again.'
+    },
+    loadFailed: {
+        id: 'users.preferences.loadFailed',
+        defaultMessage: 'Couldn’t load your saved theme, so this may not be the one stored on your account. Reload to try again — picking a theme below still saves normally.'
+    }
+});
+const OPTIONS = [
+    {
+        value: 'light',
+        icon: Sun,
+        label: messages.lightLabel,
+        hint: messages.lightHint,
+        preview: 'light'
+    },
+    {
+        value: 'dark',
+        icon: Moon,
+        label: messages.darkLabel,
+        hint: messages.darkHint,
+        preview: 'dark'
+    },
+    {
+        value: 'system',
+        icon: Monitor,
+        label: messages.systemLabel,
+        hint: messages.systemHint,
+        preview: 'system'
+    }
+];
+/**
+ * Stable toast id, so rapid selections (a keyboard user arrowing across the
+ * group selects each option in turn) replace one another in place instead of
+ * stacking a column of "Theme saved."
+ */
+const THEME_TOAST_ID = 'users.preferences.theme';
+/**
+ * The Preferences tab (shown only on your **own** profile): pick the colour
+ * theme (Light / Dark / System). Selection is optimistic — the app re-themes
+ * the instant you choose, via the shared {@link useAppearance} provider — then
+ * persisted to the server; a failed save rolls the choice back and surfaces a
+ * toast. The radio group is the accessible backbone; each option is a full card
+ * with a live preview.
+ */
+export function UserPreferencesPage() {
+    const intl = useIntl();
+    const { theme, resolvedTheme, setTheme } = useAppearance();
+    const preferences = usePreferences();
+    const update = useUpdateTheme();
+    // The user's most recent choice. Selections can overlap (arrow keys fire one
+    // per keypress) and the responses can land out of order, so a save only owns
+    // the rollback if nothing has superseded it — otherwise a slow failure for
+    // an abandoned choice would yank the UI off the choice the user *did* make,
+    // and onto a `previous` that is by then two selections stale.
+    const latest = useRef(null);
+    const select = (next) => {
+        if (next === theme) {
+            return;
+        }
+        const previous = theme;
+        latest.current = next;
+        // Apply immediately so the whole UI re-themes as the user chooses…
+        setTheme(next);
+        // …then persist. On failure, roll the visible choice back.
+        update.mutate(next, {
+            onSuccess: () => {
+                if (latest.current !== next) {
+                    return;
+                }
+                toast.success(intl.formatMessage(messages.saved), {
+                    id: THEME_TOAST_ID
+                });
+            },
+            onError: () => {
+                if (latest.current !== next) {
+                    return;
+                }
+                setTheme(previous);
+                toast.error(intl.formatMessage(messages.failed), {
+                    id: THEME_TOAST_ID
+                });
+            }
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: intl.formatMessage(messages.themeTitle) }), _jsx(CardDescription, { children: intl.formatMessage(messages.themeDescription) })] }), _jsxs(CardContent, { children: [preferences.isError ? (_jsxs(Alert, { variant: "warning", className: "mb-3", children: [_jsx(AlertTriangle, { className: "size-4", "aria-hidden": true }), _jsx(AlertDescription, { children: intl.formatMessage(messages.loadFailed) })] })) : null, _jsx(RadioGroup, { value: theme, onValueChange: (value) => select(value), "aria-label": intl.formatMessage(messages.groupLabel), className: "grid gap-3 sm:grid-cols-3", children: OPTIONS.map((option) => {
+                            const selected = option.value === theme;
+                            const Icon = option.icon;
+                            const inputId = `theme-${option.value}`;
+                            return (_jsxs("label", { htmlFor: inputId, className: cn('group relative flex cursor-pointer flex-col gap-3 rounded-lg border bg-card p-3 text-left transition-colors', 'hover:border-input focus-within:ring-2 focus-within:ring-ring', selected
+                                    ? 'border-primary ring-1 ring-primary'
+                                    : 'border-border'), children: [_jsx(ThemePreview, { variant: option.preview }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: intl.formatMessage(option.label) }), _jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(option.hint) })] }), _jsx(RadioGroupItem, { id: inputId, value: option.value, className: "sr-only" }), _jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors', selected
+                                                    ? 'border-primary bg-primary text-primary-foreground'
+                                                    : 'border-input'), children: selected ? (_jsx(Check, { className: "size-3" })) : null })] })] }, option.value));
+                        }) }), theme === 'system' ? (_jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: intl.formatMessage(messages.systemResolved, {
+                            mode: intl.formatMessage(resolvedTheme === 'dark'
+                                ? messages.modeDark
+                                : messages.modeLight)
+                        }) })) : null] })] }));
+}

package/dist/lib/presentation/pages/UserRolesPage/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The Role tab: pick the member's single global role and apply it behind a
+ * confirm step (with an extra warning when escalating to Admin). The last
+ * active admin can't be re-roled; the picker locks with the reason shown.
+ * Requires `users:update`.
+ */
+export declare function UserRolesPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/UserRolesPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserRolesPage/index.tsx"],"names":[],"mappings":"AA0FA;;;;;GAKG;AACH,wBAAgB,aAAa,gCA2G5B"}

package/dist/lib/presentation/pages/UserRolesPage/index.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Alert, AlertDescription, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, toast } from '@orthacms/design-system';
+import { useAuth, useHasPermission } from '@orthacms/identity-admin';
+import { useUpdateMember } from '../../../application/useUpdateMember';
+import { useUserDetailContext } from '../../userDetailContext';
+import { RolePicker } from '../../components/RolePicker';
+import { ConfirmDialog } from '@orthacms/design-system';
+import { MemberEntity } from '../../../domain/member';
+/** Intl descriptors for {@link UserRolesPage}, co-located with the component. */
+const messages = defineMessages({
+    title: { id: 'users.roles.title', defaultMessage: 'Role' },
+    description: {
+        id: 'users.roles.description',
+        defaultMessage: 'The member’s global role decides what they can do.'
+    },
+    note: {
+        id: 'users.roles.note',
+        defaultMessage: 'Role changes take effect on their next request; existing sessions may keep the old permissions briefly.'
+    },
+    lastAdmin: {
+        id: 'users.roles.lastAdmin',
+        defaultMessage: 'This member is the last remaining admin, so their role can’t change. Promote another member to admin first.'
+    },
+    self: {
+        id: 'users.roles.self',
+        defaultMessage: 'You can’t change your own role. Ask another admin to do it for you.'
+    },
+    customRole: {
+        id: 'users.roles.customRole',
+        defaultMessage: 'This member holds the custom role “{roleName}”, which this picker can’t represent. Changing it here would replace it with a system role.'
+    },
+    apply: { id: 'users.roles.apply', defaultMessage: 'Apply role' },
+    reset: { id: 'users.roles.reset', defaultMessage: 'Reset' },
+    confirmTitle: {
+        id: 'users.roles.confirmTitle',
+        defaultMessage: 'Change {name}’s role?'
+    },
+    confirmBody: {
+        id: 'users.roles.confirmBody',
+        defaultMessage: 'They’ll get the {role} role’s permissions immediately.'
+    },
+    confirmAdminBody: {
+        id: 'users.roles.confirmAdminBody',
+        defaultMessage: 'Admins have full access — they can manage members, roles, workspaces, and content. Continue?'
+    },
+    saved: {
+        id: 'users.roles.saved',
+        defaultMessage: 'Updated {name}’s role.'
+    },
+    failed: {
+        id: 'users.roles.failed',
+        defaultMessage: 'Couldn’t change the role. Please try again.'
+    }
+});
+const ROLE_LABEL = {
+    admin: 'Admin',
+    contributor: 'Contributor',
+    viewer: 'Viewer'
+};
+/** The explanation shown when a guardrail locks the picker. */
+const LOCK_REASON = {
+    self: messages.self,
+    lastAdmin: messages.lastAdmin,
+    customRole: messages.customRole
+};
+/**
+ * The Role tab: pick the member's single global role and apply it behind a
+ * confirm step (with an extra warning when escalating to Admin). The last
+ * active admin can't be re-roled; the picker locks with the reason shown.
+ * Requires `users:update`.
+ */
+export function UserRolesPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const { user } = useAuth();
+    const canManage = useHasPermission('users:update');
+    const update = useUpdateMember();
+    const [selected, setSelected] = useState(member.role);
+    const [confirming, setConfirming] = useState(false);
+    // Mirror every server guardrail the viewer can trip: their own account, the
+    // sole active admin, and a custom role the picker can't represent. Doing it
+    // here means the control explains itself instead of failing on submit with
+    // a generic "please try again" for something that can never succeed.
+    const roleChange = MemberEntity.of(member).canChangeRole(user?.id);
+    const locked = !canManage || !roleChange.ok;
+    const dirty = selected !== member.role;
+    const apply = () => {
+        if (selected === null) {
+            return;
+        }
+        update.mutate({ id: member.id, role: selected }, {
+            onSuccess: (saved) => {
+                setConfirming(false);
+                setSelected(saved.role);
+                toast.success(intl.formatMessage(messages.saved, { name: saved.name }));
+            },
+            onError: () => {
+                setConfirming(false);
+                toast.error(intl.formatMessage(messages.failed));
+            }
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: intl.formatMessage(messages.title) }), _jsx(CardDescription, { children: intl.formatMessage(messages.description) })] }), _jsxs(CardContent, { className: "space-y-4", children: [!roleChange.ok ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: intl.formatMessage(LOCK_REASON[roleChange.reason], { roleName: member.roleName }) }) })) : (_jsx(Alert, { children: _jsx(AlertDescription, { children: intl.formatMessage(messages.note) }) })), _jsx(RolePicker, { value: selected, current: member.role, disabled: locked, onChange: setSelected })] }), canManage ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [_jsx(Button, { variant: "ghost", onClick: () => setSelected(member.role), disabled: !dirty || update.isPending, children: intl.formatMessage(messages.reset) }), _jsx(Button, { onClick: () => setConfirming(true), disabled: locked || !dirty || update.isPending, children: intl.formatMessage(messages.apply) })] })) : null, _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, busy: update.isPending, title: intl.formatMessage(messages.confirmTitle, {
+                    name: member.name
+                }), description: intl.formatMessage(selected === 'admin'
+                    ? messages.confirmAdminBody
+                    : messages.confirmBody, { role: selected ? ROLE_LABEL[selected] : '' }), confirmLabel: intl.formatMessage(messages.apply), onConfirm: apply })] }));
+}

package/dist/lib/presentation/pages/UserSessionsPage/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The Sessions tab: a member's live sessions with a per-device Revoke. Gated on
+ * `users:update` (the rail hides it otherwise); revoking is confirmed and drops
+ * the row on success. The viewer's own session can't be revoked from here.
+ */
+export declare function UserSessionsPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/UserSessionsPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserSessionsPage/index.tsx"],"names":[],"mappings":"AAuEA;;;;GAIG;AACH,wBAAgB,gBAAgB,gCA+H/B"}

package/dist/lib/presentation/pages/UserSessionsPage/index.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Alert, AlertDescription, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, toast } from '@orthacms/design-system';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useUserSessions } from '../../../application/useUserSessions';
+import { useRevokeSession } from '../../../application/useRevokeSession';
+import { useUserDetailContext } from '../../userDetailContext';
+import { ConfirmDialog } from '@orthacms/design-system';
+import { SessionCard } from '../../components/SessionCard';
+/** Intl descriptors for {@link UserSessionsPage}. */
+const messages = defineMessages({
+    title: { id: 'users.sessions.title', defaultMessage: 'Sessions' },
+    description: {
+        id: 'users.sessions.description',
+        defaultMessage: 'Devices currently signed in as this member.'
+    },
+    empty: {
+        id: 'users.sessions.empty',
+        defaultMessage: 'No active sessions.'
+    },
+    error: {
+        id: 'users.sessions.error',
+        defaultMessage: 'Couldn’t load sessions. Please try again.'
+    },
+    retry: { id: 'users.sessions.retry', defaultMessage: 'Retry' },
+    confirmTitle: {
+        id: 'users.sessions.confirmTitle',
+        defaultMessage: 'Revoke the session on {device}?'
+    },
+    confirmBody: {
+        id: 'users.sessions.confirmBody',
+        defaultMessage: 'Last seen {when}{ip}. That device will be signed out immediately and must sign in again.'
+    },
+    confirmBodyIp: {
+        id: 'users.sessions.confirmBodyIp',
+        defaultMessage: ' from {ip}'
+    },
+    unknownDevice: {
+        id: 'users.sessions.confirmUnknownDevice',
+        defaultMessage: 'an unknown device'
+    },
+    confirmRevoke: {
+        id: 'users.sessions.confirmRevoke',
+        defaultMessage: 'Revoke'
+    },
+    revoked: {
+        id: 'users.sessions.revoked',
+        defaultMessage: 'Session revoked.'
+    },
+    failed: {
+        id: 'users.sessions.failed',
+        defaultMessage: 'Couldn’t revoke the session. Please try again.'
+    }
+});
+/**
+ * The Sessions tab: a member's live sessions with a per-device Revoke. Gated on
+ * `users:update` (the rail hides it otherwise); revoking is confirmed and drops
+ * the row on success. The viewer's own session can't be revoked from here.
+ */
+export function UserSessionsPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const canManage = useHasPermission('users:update');
+    const { data: sessions, isPending, isError, refetch } = useUserSessions(member.id, canManage);
+    const revoke = useRevokeSession();
+    const [revoking, setRevoking] = useState(null);
+    const headingRef = useRef(null);
+    /**
+     * The revoked card unmounts, so Radix has no trigger to hand focus back to
+     * and it falls to `<body>` (WCAG 2.4.3). Send it to the section heading
+     * instead — a stable anchor that also re-announces where the user is.
+     */
+    const restoreFocus = () => {
+        requestAnimationFrame(() => {
+            headingRef.current?.focus();
+        });
+    };
+    const onRevoke = () => {
+        if (!revoking) {
+            return;
+        }
+        revoke.mutate({ userId: member.id, sessionId: revoking.id }, {
+            onSuccess: () => {
+                toast.success(intl.formatMessage(messages.revoked));
+                setRevoking(null);
+                restoreFocus();
+            },
+            onError: () => {
+                toast.error(intl.formatMessage(messages.failed));
+                setRevoking(null);
+                restoreFocus();
+            }
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { ref: headingRef, tabIndex: -1, className: "outline-none", children: [_jsx(CardTitle, { children: intl.formatMessage(messages.title) }), _jsx(CardDescription, { children: intl.formatMessage(messages.description) })] }), _jsx(CardContent, { className: "space-y-3", children: isPending ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-16 w-full rounded-xl" }), _jsx(Skeleton, { className: "h-16 w-full rounded-xl" })] })) : isError ? (_jsx(Alert, { variant: "destructive", role: "alert", children: _jsxs(AlertDescription, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("span", { children: intl.formatMessage(messages.error) }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: intl.formatMessage(messages.retry) })] }) })) : sessions.length === 0 ? (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: intl.formatMessage(messages.empty) })) : (sessions.map((session) => (_jsx(SessionCard, { session: session, busy: revoke.isPending && revoking?.id === session.id, onRevoke: setRevoking }, session.id)))) }), _jsx(ConfirmDialog, { open: revoking !== null, onOpenChange: (open) => {
+                    if (!open) {
+                        setRevoking(null);
+                        restoreFocus();
+                    }
+                }, busy: revoke.isPending, 
+                // Name the device: the dialog is the last thing shown before an
+                // irreversible sign-out, and on a member with several sessions
+                // an unnamed one is indistinguishable from the others.
+                title: intl.formatMessage(messages.confirmTitle, {
+                    device: revoking?.userAgent?.trim() ||
+                        intl.formatMessage(messages.unknownDevice)
+                }), description: intl.formatMessage(messages.confirmBody, {
+                    when: revoking
+                        ? intl.formatDate(revoking.lastSeenAt, {
+                            dateStyle: 'medium',
+                            timeStyle: 'short'
+                        })
+                        : '',
+                    ip: revoking?.ipAddress
+                        ? intl.formatMessage(messages.confirmBodyIp, {
+                            ip: revoking.ipAddress
+                        })
+                        : ''
+                }), confirmLabel: intl.formatMessage(messages.confirmRevoke), confirmVariant: "destructive", onConfirm: onRevoke })] }));
+}

package/dist/lib/presentation/pages/UserWorkspacesPage/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The Workspaces tab: the member's workspace memberships, with add (a
+ * multi-select dialog) and per-card remove (confirmed). Memberships come from
+ * the shared detail record; mutations invalidate it so the list refreshes.
+ * Editing requires `users:update`.
+ */
+export declare function UserWorkspacesPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/UserWorkspacesPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserWorkspacesPage/index.tsx"],"names":[],"mappings":"AAiEA;;;;;GAKG;AACH,wBAAgB,kBAAkB,gCAyHjC"}

package/dist/lib/presentation/pages/UserWorkspacesPage/index.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Plus } from 'lucide-react';
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, toast } from '@orthacms/design-system';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useAddWorkspaceMember } from '../../../application/useAddWorkspaceMember';
+import { useRemoveWorkspaceMember } from '../../../application/useRemoveWorkspaceMember';
+import { useUserDetailContext } from '../../userDetailContext';
+import { AddToWorkspacesDialog } from '../../components/AddToWorkspacesDialog';
+import { ConfirmDialog } from '@orthacms/design-system';
+import { WorkspaceMembershipCard } from '../../components/WorkspaceMembershipCard';
+/** Intl descriptors for {@link UserWorkspacesPage}. */
+const messages = defineMessages({
+    title: { id: 'users.workspaces.title', defaultMessage: 'Workspaces' },
+    description: {
+        id: 'users.workspaces.description',
+        defaultMessage: 'The workspaces this member can access.'
+    },
+    add: { id: 'users.workspaces.add', defaultMessage: 'Add to workspace' },
+    empty: {
+        id: 'users.workspaces.empty',
+        defaultMessage: 'This member isn’t in any workspace yet.'
+    },
+    confirmTitle: {
+        id: 'users.workspaces.confirmTitle',
+        defaultMessage: 'Remove from {name}?'
+    },
+    confirmBody: {
+        id: 'users.workspaces.confirmBody',
+        defaultMessage: 'They’ll lose access to this workspace. You can add them back later.'
+    },
+    confirmRemove: {
+        id: 'users.workspaces.confirmRemove',
+        defaultMessage: 'Remove'
+    },
+    added: {
+        id: 'users.workspaces.added',
+        defaultMessage: 'Added to {count, plural, one {# workspace} other {# workspaces}}.'
+    },
+    removed: {
+        id: 'users.workspaces.removed',
+        defaultMessage: 'Removed from {name}.'
+    },
+    addFailed: {
+        id: 'users.workspaces.addFailed',
+        defaultMessage: 'Couldn’t add to the workspaces. Please try again.'
+    },
+    removeFailed: {
+        id: 'users.workspaces.removeFailed',
+        defaultMessage: 'Couldn’t remove from the workspace. Please try again.'
+    }
+});
+/**
+ * The Workspaces tab: the member's workspace memberships, with add (a
+ * multi-select dialog) and per-card remove (confirmed). Memberships come from
+ * the shared detail record; mutations invalidate it so the list refreshes.
+ * Editing requires `users:update`.
+ */
+export function UserWorkspacesPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const canManage = useHasPermission('users:update');
+    const addMember = useAddWorkspaceMember();
+    const removeMember = useRemoveWorkspaceMember();
+    const [adding, setAdding] = useState(false);
+    const [removing, setRemoving] = useState(null);
+    const onAdd = async (workspaceIds) => {
+        // Add each workspace independently so one failure (e.g. a 409 from an
+        // already-member race, or a transient network error) doesn't mask the
+        // ones that did commit. `Promise.all` would reject on the first failure
+        // and report total failure even though some adds succeeded.
+        const results = await Promise.allSettled(workspaceIds.map((workspaceId) => addMember.mutateAsync({ userId: member.id, workspaceId })));
+        const added = results.filter((result) => result.status === 'fulfilled').length;
+        // Close once anything landed (the successful mutations have already
+        // invalidated the detail, so the list reflects them); keep the dialog
+        // open only when every add failed, so the admin can retry.
+        if (added > 0) {
+            setAdding(false);
+            toast.success(intl.formatMessage(messages.added, { count: added }));
+        }
+        if (added < workspaceIds.length) {
+            toast.error(intl.formatMessage(messages.addFailed));
+        }
+    };
+    const onRemove = () => {
+        if (!removing) {
+            return;
+        }
+        removeMember.mutate({ userId: member.id, workspaceId: removing.id }, {
+            onSuccess: () => {
+                toast.success(intl.formatMessage(messages.removed, {
+                    name: removing.name
+                }));
+                setRemoving(null);
+            },
+            onError: () => {
+                toast.error(intl.formatMessage(messages.removeFailed));
+                setRemoving(null);
+            }
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex-row items-start justify-between gap-4 space-y-0", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(CardTitle, { children: intl.formatMessage(messages.title) }), _jsx(CardDescription, { children: intl.formatMessage(messages.description) })] }), canManage ? (_jsxs(Button, { size: "sm", onClick: () => setAdding(true), children: [_jsx(Plus, { "aria-hidden": true, className: "size-4" }), intl.formatMessage(messages.add)] })) : null] }), _jsx(CardContent, { className: "space-y-3", children: member.workspaces.length === 0 ? (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: intl.formatMessage(messages.empty) })) : (member.workspaces.map((workspace) => (_jsx(WorkspaceMembershipCard, { workspace: workspace, onRemove: canManage ? setRemoving : undefined, removing: removeMember.isPending &&
+                        removing?.id === workspace.id }, workspace.id)))) }), _jsx(AddToWorkspacesDialog, { open: adding, onOpenChange: setAdding, existingIds: member.workspaces.map((workspace) => workspace.id), busy: addMember.isPending, onAdd: onAdd }), _jsx(ConfirmDialog, { open: removing !== null, onOpenChange: (open) => {
+                    if (!open) {
+                        setRemoving(null);
+                    }
+                }, busy: removeMember.isPending, title: intl.formatMessage(messages.confirmTitle, {
+                    name: removing?.name ?? ''
+                }), description: intl.formatMessage(messages.confirmBody), confirmLabel: intl.formatMessage(messages.confirmRemove), confirmVariant: "destructive", onConfirm: onRemove })] }));
+}

package/dist/lib/presentation/userDetailContext/index.d.ts

@@ -0,0 +1,13 @@
+import type { Member } from '../../domain/types/member';
+/**
+ * Outlet context shared by the user-detail layout with every tab. The layout
+ * fetches the member once and exposes it here, so the tabs read the same
+ * record instead of each issuing its own request.
+ */
+export type UserDetailContext = {
+    /** The member whose detail page is open. */
+    member: Member;
+};
+/** Reads the current member from the user-detail layout's Outlet context. */
+export declare function useUserDetailContext(): UserDetailContext;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/userDetailContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/presentation/userDetailContext/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC5B,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD"}

package/dist/lib/presentation/userDetailContext/index.js

@@ -0,0 +1,5 @@
+import { useOutletContext } from 'react-router-dom';
+/** Reads the current member from the user-detail layout's Outlet context. */
+export function useUserDetailContext() {
+    return useOutletContext();
+}

package/dist/lib/presentation/usersPlugin/index.d.ts

@@ -0,0 +1,27 @@
+import type { AdminPlugin } from '@orthacms/bootstrap-admin';
+/**
+ * Admin-side users plugin shape. A thin alias of {@link AdminPlugin}, kept
+ * named so future config (sub-routes, slots) has a home.
+ */
+export type UsersAdminPlugin = AdminPlugin;
+/**
+ * Creates the admin-side users plugin. It owns the members feature: the
+ * private `/users` route (the Members page, rendered inside the shell's
+ * authenticated layout) and its toolbar nav entry, contributed to the shell's
+ * {@link NAVBAR_START_SLOT} at `order: 30` (after Workspaces). The page itself
+ * gates on the `users:read` permission.
+ *
+ * @example
+ * ```typescript
+ * createAdmin({
+ *   plugins: [
+ *     IdentityPlugin(),
+ *     ShellPlugin(),
+ *     WorkspacesPlugin(),
+ *     UsersPlugin(),
+ *   ],
+ * });
+ * ```
+ */
+export declare function UsersPlugin(): UsersAdminPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/usersPlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/presentation/usersPlugin/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAgC7D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,IAAI,gBAAgB,CAiF9C"}