@orthacms/users-admin 0.0.0-reserve.0

package/dist/lib/presentation/components/InviteSent/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { CircleCheck } from 'lucide-react';
+import { useUnsavedChanges } from '@orthacms/utils-admin';
+import { Button, CardContent, CardDescription, CardHeader, CardTitle, WizardStepCard } from '@orthacms/design-system';
+import { InviteLinkPanel } from '../InviteLinkPanel';
+/** Intl descriptors for {@link InviteSent}, co-located with the component. */
+const messages = defineMessages({
+    title: {
+        id: 'users.inviteSent.title',
+        defaultMessage: 'Invite created for {email}'
+    },
+    description: {
+        id: 'users.inviteSent.description',
+        defaultMessage: 'Their account exists but is dormant until they accept. Nothing was emailed — this install has no mail server yet — so pass the link below to them yourself.'
+    },
+    nextTitle: {
+        id: 'users.inviteSent.nextTitle',
+        defaultMessage: 'What happens when they open it'
+    },
+    nextOpen: {
+        id: 'users.inviteSent.nextOpen',
+        defaultMessage: 'They land on a page that already knows their name and email — the only thing they choose is a password.'
+    },
+    nextRole: {
+        id: 'users.inviteSent.nextRole',
+        defaultMessage: 'Their account activates with the {role} role and the workspace access you picked. Nothing they type can change either.'
+    },
+    nextSignedIn: {
+        id: 'users.inviteSent.nextSignedIn',
+        defaultMessage: 'They’re signed in immediately, and the link stops working. If it expires first, resend the invite from their row.'
+    },
+    backToMembers: {
+        id: 'users.inviteSent.backToMembers',
+        defaultMessage: 'Back to members'
+    }
+});
+/**
+ * The invite wizard's final step: the invite exists, and here is the link.
+ *
+ * It is a step rather than a toast-then-redirect because the link is shown
+ * **once** — the server keeps only its hash, so navigating away before copying
+ * it means resending the invite. The copy spells out what the invitee will see,
+ * since the admin can't preview the page they're sending someone to.
+ */
+export function InviteSent({ email, link, roleLabel }) {
+    const intl = useIntl();
+    const [copied, setCopied] = useState(false);
+    // Until the link is captured, treat leaving this step as losing unsaved
+    // work — because it is: the token exists only in this component's state and
+    // is never re-fetchable. The app-wide guard covers every exit (links,
+    // programmatic navigation, and reload via `beforeunload`), which is the
+    // only one a component here could not intercept for itself.
+    useUnsavedChanges(!copied, 'users.invite.link');
+    return (_jsxs(WizardStepCard, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { asChild: true, className: "flex items-center gap-2", children: _jsxs("h2", { children: [_jsx(CircleCheck, { "aria-hidden": true, className: "size-5 shrink-0 text-success-soft-foreground" }), intl.formatMessage(messages.title, { email })] }) }), _jsx(CardDescription, { children: intl.formatMessage(messages.description) })] }), _jsxs(CardContent, { className: "flex flex-col gap-8", children: [_jsx(InviteLinkPanel, { link: link, email: email, onCopied: () => setCopied(true) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-sm font-medium", children: intl.formatMessage(messages.nextTitle) }), _jsxs("ul", { className: "flex list-disc flex-col gap-2 pl-5 text-sm text-muted-foreground", children: [_jsx("li", { children: intl.formatMessage(messages.nextOpen) }), _jsx("li", { children: intl.formatMessage(messages.nextRole, {
+                                            role: roleLabel
+                                        }) }), _jsx("li", { children: intl.formatMessage(messages.nextSignedIn) })] })] }), _jsx(Button, { asChild: true, className: "self-start", children: _jsx(Link, { to: "/users", children: intl.formatMessage(messages.backToMembers) }) })] })] }));
+}

package/dist/lib/presentation/components/MemberAvatar/index.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+import { type AvatarColor } from '@orthacms/design-system';
+type MemberAvatarProps = {
+    /** Initials rendered as the avatar content. */
+    initials: string;
+    /** Accent color tinting the avatar background. */
+    color: AvatarColor;
+    /** Extra classes (size, border). */
+    className?: string;
+    /** Extra inline styles (e.g. overlap margin in a stack). */
+    style?: CSSProperties;
+};
+/**
+ * An initials avatar tinted with one of the shared accent colors — members in
+ * the table, and the smaller workspace chips in the Workspaces column, both
+ * sized via `className`. Shape comes from the design-system `Avatar` default
+ * (rounded square). Purely decorative: the member/workspace
+ * name is always rendered as adjacent text (or an `aria-label` on the
+ * enclosing control), so the initials are hidden from assistive tech to avoid
+ * a meaningless "J D A B" reading.
+ */
+export declare function MemberAvatar({ initials, color, className, style }: MemberAvatarProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MemberAvatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/MemberAvatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAKH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,iBAAiB,GAAG;IACrB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,KAAK,EAAE,WAAW,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,KAAK,EACR,EAAE,iBAAiB,+BAYnB"}

package/dist/lib/presentation/components/MemberAvatar/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, avatarColorVar, cn } from '@orthacms/design-system';
+/**
+ * An initials avatar tinted with one of the shared accent colors — members in
+ * the table, and the smaller workspace chips in the Workspaces column, both
+ * sized via `className`. Shape comes from the design-system `Avatar` default
+ * (rounded square). Purely decorative: the member/workspace
+ * name is always rendered as adjacent text (or an `aria-label` on the
+ * enclosing control), so the initials are hidden from assistive tech to avoid
+ * a meaningless "J D A B" reading.
+ */
+export function MemberAvatar({ initials, color, className, style }) {
+    return (_jsx(Avatar, { "aria-hidden": true, className: cn(className), style: { backgroundColor: avatarColorVar(color), ...style }, children: _jsx(AvatarFallback, { className: "rounded-[inherit] bg-transparent font-semibold text-white", children: initials }) }));
+}

package/dist/lib/presentation/components/MembersEmpty/index.d.ts

@@ -0,0 +1,16 @@
+type MembersEmptyProps = {
+    /** Whether a search is currently narrowing the list. */
+    filtered: boolean;
+    /** Clears the search. */
+    onClear: () => void;
+    /** Opens the invite flow. Omitted when the user lacks `users:create`. */
+    onInvite?: () => void;
+};
+/**
+ * The empty state under the toolbar. A search miss offers to clear the
+ * search; a genuinely empty roster invites the first member (when the
+ * signed-in user may invite).
+ */
+export declare function MembersEmpty({ filtered, onClear, onInvite }: MembersEmptyProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersEmpty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/MembersEmpty/index.tsx"],"names":[],"mappings":"AAwCA,KAAK,iBAAiB,GAAG;IACrB,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,QAAQ,EACX,EAAE,iBAAiB,+BAwCnB"}

package/dist/lib/presentation/components/MembersEmpty/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { UserPlus, Users } from 'lucide-react';
+import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@orthacms/design-system';
+/** Intl descriptors for {@link MembersEmpty}, co-located with the component. */
+const messages = defineMessages({
+    filteredTitle: {
+        id: 'users.empty.filtered.title',
+        defaultMessage: 'No members match'
+    },
+    filteredDescription: {
+        id: 'users.empty.filtered.description',
+        defaultMessage: 'Try a different name or email, or clear the search.'
+    },
+    clear: {
+        id: 'users.empty.clear',
+        defaultMessage: 'Clear search'
+    },
+    emptyTitle: {
+        id: 'users.empty.none.title',
+        defaultMessage: 'No members yet'
+    },
+    emptyDescription: {
+        id: 'users.empty.none.description',
+        defaultMessage: 'Invite the first member to give them access.'
+    },
+    invite: {
+        id: 'users.empty.invite',
+        defaultMessage: 'Invite member'
+    }
+});
+/**
+ * The empty state under the toolbar. A search miss offers to clear the
+ * search; a genuinely empty roster invites the first member (when the
+ * signed-in user may invite).
+ */
+export function MembersEmpty({ filtered, onClear, onInvite }) {
+    const intl = useIntl();
+    return (_jsxs(Empty, { className: "border", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Users, {}) }), _jsx(EmptyTitle, { children: intl.formatMessage(filtered ? messages.filteredTitle : messages.emptyTitle) }), _jsx(EmptyDescription, { children: intl.formatMessage(filtered
+                            ? messages.filteredDescription
+                            : messages.emptyDescription) })] }), _jsx(EmptyContent, { children: filtered ? (_jsx(Button, { variant: "outline", className: "shadow-none", onClick: onClear, children: intl.formatMessage(messages.clear) })) : onInvite ? (_jsxs(Button, { onClick: onInvite, children: [_jsx(UserPlus, {}), intl.formatMessage(messages.invite)] })) : null })] }));
+}

package/dist/lib/presentation/components/MembersNoAccess/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shown in place of the Members page when the signed-in user lacks
+ * `users:read` — the route still resolves, but no member data is fetched or
+ * rendered (and the server would refuse it regardless).
+ */
+export declare function MembersNoAccess(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersNoAccess/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/MembersNoAccess/index.tsx"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH,wBAAgB,eAAe,gCAgB9B"}

package/dist/lib/presentation/components/MembersNoAccess/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Lock } from 'lucide-react';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@orthacms/design-system';
+/** Intl descriptors for {@link MembersNoAccess}, co-located with the component. */
+const messages = defineMessages({
+    title: {
+        id: 'users.noAccess.title',
+        defaultMessage: 'You don’t have access to members'
+    },
+    description: {
+        id: 'users.noAccess.description',
+        defaultMessage: 'Viewing members requires the users:read permission. Ask an admin if you think you should have it.'
+    }
+});
+/**
+ * Shown in place of the Members page when the signed-in user lacks
+ * `users:read` — the route still resolves, but no member data is fetched or
+ * rendered (and the server would refuse it regardless).
+ */
+export function MembersNoAccess() {
+    const intl = useIntl();
+    return (_jsx(Empty, { className: "border", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Lock, {}) }), _jsx(EmptyTitle, { children: intl.formatMessage(messages.title) }), _jsx(EmptyDescription, { children: intl.formatMessage(messages.description) })] }) }));
+}

package/dist/lib/presentation/components/MembersPagination/index.d.ts

@@ -0,0 +1,17 @@
+/** The selectable page sizes, smallest first. The server caps at the largest. */
+export declare const PAGE_SIZE_OPTIONS: number[];
+/**
+ * The table's footer bar: a rows-per-page selector and an "{from}–{to} of
+ * {total}" readout, with previous/next controls once there's more than one
+ * page. Real buttons (not link-styled anchors) since page state is client
+ * state, not a URL — they disable cleanly at either end.
+ */
+export declare function MembersPagination({ page, pageCount, pageSize, total, onPageChange, onPageSizeChange }: {
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersPagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/MembersPagination/index.tsx"],"names":[],"mappings":"AAuCA,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,UAAmB,CAAC;AAElD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,gBAAgB,EACnB,EAAE;IACC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,+BAmFA"}

package/dist/lib/presentation/components/MembersPagination/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button, Pagination, PaginationContent, PaginationItem, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@orthacms/design-system';
+/** Intl descriptors for {@link MembersPagination}, co-located with the component. */
+const messages = defineMessages({
+    rowsPerPage: {
+        id: 'users.pagination.rowsPerPage',
+        defaultMessage: 'Rows per page'
+    },
+    range: {
+        id: 'users.pagination.range',
+        defaultMessage: '{from}–{to} of {total}'
+    },
+    previous: {
+        id: 'users.pagination.previous',
+        defaultMessage: 'Previous page'
+    },
+    next: {
+        id: 'users.pagination.next',
+        defaultMessage: 'Next page'
+    },
+    page: {
+        id: 'users.pagination.page',
+        defaultMessage: 'Page {page} of {pageCount}'
+    }
+});
+/** The selectable page sizes, smallest first. The server caps at the largest. */
+export const PAGE_SIZE_OPTIONS = [5, 10, 25, 100];
+/**
+ * The table's footer bar: a rows-per-page selector and an "{from}–{to} of
+ * {total}" readout, with previous/next controls once there's more than one
+ * page. Real buttons (not link-styled anchors) since page state is client
+ * state, not a URL — they disable cleanly at either end.
+ */
+export function MembersPagination({ page, pageCount, pageSize, total, onPageChange, onPageSizeChange }) {
+    const intl = useIntl();
+    const rowsLabel = intl.formatMessage(messages.rowsPerPage);
+    const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+    const to = Math.min(page * pageSize, total);
+    return (_jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: rowsLabel }), _jsxs(Select, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [_jsx(SelectTrigger, { className: "h-8 w-[72px] rounded-lg shadow-none", "aria-label": rowsLabel, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "rounded-lg shadow-none", children: _jsx(SelectGroup, { children: PAGE_SIZE_OPTIONS.map((size) => (_jsx(SelectItem, { value: String(size), children: size }, size))) }) })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages.range, { from, to, total }) }), pageCount > 1 ? (_jsx(Pagination, { className: "mx-0 w-auto", children: _jsxs(PaginationContent, { className: "gap-3", children: [_jsx(PaginationItem, { children: _jsx(Button, { variant: "outline", size: "icon", className: "size-8 shadow-none", disabled: page <= 1, onClick: () => onPageChange(page - 1), "aria-label": intl.formatMessage(messages.previous), children: _jsx(ChevronLeft, {}) }) }), _jsx(PaginationItem, { children: _jsx("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages.page, {
+                                            page,
+                                            pageCount
+                                        }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { variant: "outline", size: "icon", className: "size-8 shadow-none", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), "aria-label": intl.formatMessage(messages.next), children: _jsx(ChevronRight, {}) }) })] }) })) : null] })] }));
+}

package/dist/lib/presentation/components/MembersSkeleton/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Section placeholder shown while {@link useWorkspaceOptions} resolves in the
+ * invite wizard's "assign workspaces" step — two mode tiles over a short list of
+ * option rows. Replaces the inline spinner so the step keeps its shape while the
+ * list loads. Owns a single `role="status"`; the tiles are `aria-hidden`.
+ */
+export declare function WorkspaceOptionsSkeleton({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+/**
+ * The members-table placeholder shown while {@link useMembers} resolves. Built
+ * from the real `Table` primitives so column widths and the header match the
+ * loaded table exactly (no reflow on swap). Drops into the page body in place
+ * of the table (header + toolbar stay live), so it owns the single
+ * `role="status"` announcement; the table itself is `aria-hidden`.
+ */
+export declare function MembersTableSkeleton({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+/**
+ * Full-page placeholder for the lazy-route `Suspense` fallback — before
+ * {@link MembersPage} mounts there is no header or toolbar yet, so this sketches
+ * the whole page (header, search toolbar, table) to hold the layout steady
+ * while the chunk loads. Reuses {@link MembersTableSkeleton} for the body.
+ */
+export declare function MembersPageSkeleton(): import("react").JSX.Element;
+/**
+ * Lazy-route `Suspense` fallback for {@link InviteMemberPage}. Wraps the shared
+ * {@link WizardPageSkeleton} so the `sr-only` status stays localized.
+ */
+export declare function InviteMemberPageSkeleton(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/MembersSkeleton/index.tsx"],"names":[],"mappings":"AAiCA;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA0BvE;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAmEnE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,gCAgClC;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,gCAMvC"}

package/dist/lib/presentation/components/MembersSkeleton/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Container, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, WizardPageSkeleton } from '@orthacms/design-system';
+/** Intl descriptors for the members skeletons, co-located here. */
+const messages = defineMessages({
+    heading: {
+        id: 'users.skeleton.heading',
+        defaultMessage: 'Loading members'
+    },
+    loading: {
+        id: 'users.skeleton.loading',
+        defaultMessage: 'Loading members…'
+    },
+    loadingForm: {
+        id: 'users.skeleton.loadingForm',
+        defaultMessage: 'Loading…'
+    },
+    loadingWorkspaces: {
+        id: 'users.skeleton.loadingWorkspaces',
+        defaultMessage: 'Loading workspaces…'
+    }
+});
+/**
+ * Section placeholder shown while {@link useWorkspaceOptions} resolves in the
+ * invite wizard's "assign workspaces" step — two mode tiles over a short list of
+ * option rows. Replaces the inline spinner so the step keeps its shape while the
+ * list loads. Owns a single `role="status"`; the tiles are `aria-hidden`.
+ */
+export function WorkspaceOptionsSkeleton({ rows = 3 }) {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loadingWorkspaces) }), _jsxs("div", { "aria-hidden": true, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Skeleton, { className: "h-20 w-full rounded-xl" }), _jsx(Skeleton, { className: "h-20 w-full rounded-xl" })] }), Array.from({ length: rows }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border p-3", children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-xl" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "ml-auto size-5 rounded" })] }, index)))] })] }));
+}
+/**
+ * The members-table placeholder shown while {@link useMembers} resolves. Built
+ * from the real `Table` primitives so column widths and the header match the
+ * loaded table exactly (no reflow on swap). Drops into the page body in place
+ * of the table (header + toolbar stay live), so it owns the single
+ * `role="status"` announcement; the table itself is `aria-hidden`.
+ */
+export function MembersTableSkeleton({ rows = 5 }) {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loading) }), _jsx("div", { "aria-hidden": true, className: "rounded-xl border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-16" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-10" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-12" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-12" }) }), _jsx(TableHead, { className: "w-12" })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-28" }), _jsx(Skeleton, { className: "h-3 w-36" })] })] }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-16 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-16 rounded-full" }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex -space-x-2", children: [_jsx(Skeleton, { className: "size-6 rounded-xl" }), _jsx(Skeleton, { className: "size-6 rounded-xl" })] }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { className: "text-right", children: _jsx(Skeleton, { className: "ml-auto size-8 rounded-md" }) })] }, index))) })] }) })] }));
+}
+/**
+ * Full-page placeholder for the lazy-route `Suspense` fallback — before
+ * {@link MembersPage} mounts there is no header or toolbar yet, so this sketches
+ * the whole page (header, search toolbar, table) to hold the layout steady
+ * while the chunk loads. Reuses {@link MembersTableSkeleton} for the body.
+ */
+export function MembersPageSkeleton() {
+    const intl = useIntl();
+    return (_jsxs(Container, { children: [_jsx("h1", { className: "sr-only", children: intl.formatMessage(messages.heading) }), _jsxs("div", { className: "mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-8 w-40" }), _jsx(Skeleton, { className: "h-4 w-64 max-w-full" })] }), _jsx(Skeleton, { className: "h-9 w-36 shrink-0" })] }), _jsx("div", { className: "mb-4 flex flex-wrap items-center gap-3", children: _jsx(Skeleton, { className: "h-9 w-full sm:max-w-[360px]" }) }), _jsx(MembersTableSkeleton, {})] }));
+}
+/**
+ * Lazy-route `Suspense` fallback for {@link InviteMemberPage}. Wraps the shared
+ * {@link WizardPageSkeleton} so the `sr-only` status stays localized.
+ */
+export function InviteMemberPageSkeleton() {
+    const intl = useIntl();
+    return (_jsx(WizardPageSkeleton, { label: intl.formatMessage(messages.loadingForm) }));
+}

package/dist/lib/presentation/components/MembersTable/MemberRoleChip/index.d.ts

@@ -0,0 +1,17 @@
+import type { MemberRole } from '../../../../domain/types/member';
+/**
+ * The Role column's read-only chip: the member's role as a labelled badge.
+ * Changing a role happens through the row's edit action (and the server gates
+ * it on `users:update`), so the column itself carries no inline editor.
+ *
+ * A member holding a **custom** role has `role: null`; the chip then shows the
+ * server's own `roleName` rather than a guessed system role, so the column never
+ * misstates someone's privileges.
+ */
+export declare function MemberRoleChip({ role, roleName }: {
+    /** The member's system role, or `null` for a custom one. */
+    role: MemberRole | null;
+    /** The server's label, shown verbatim when `role` is `null`. */
+    roleName: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersTable/MemberRoleChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/presentation/components/MembersTable/MemberRoleChip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AA2BlE;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACX,EAAE;IACC,4DAA4D;IAC5D,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;CACpB,+BAWA"}

package/dist/lib/presentation/components/MembersTable/MemberRoleChip/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge } from '@orthacms/design-system';
+/** Intl descriptors for {@link MemberRoleChip}, co-located with the component. */
+const messages = defineMessages({
+    admin: {
+        id: 'users.role.admin',
+        defaultMessage: 'Admin'
+    },
+    contributor: {
+        id: 'users.role.contributor',
+        defaultMessage: 'Contributor'
+    },
+    viewer: {
+        id: 'users.role.viewer',
+        defaultMessage: 'Viewer'
+    }
+});
+const ROLE_MESSAGE = {
+    admin: messages.admin,
+    contributor: messages.contributor,
+    viewer: messages.viewer
+};
+/**
+ * The Role column's read-only chip: the member's role as a labelled badge.
+ * Changing a role happens through the row's edit action (and the server gates
+ * it on `users:update`), so the column itself carries no inline editor.
+ *
+ * A member holding a **custom** role has `role: null`; the chip then shows the
+ * server's own `roleName` rather than a guessed system role, so the column never
+ * misstates someone's privileges.
+ */
+export function MemberRoleChip({ role, roleName }) {
+    const intl = useIntl();
+    return (_jsx(Badge, { variant: role === 'admin' ? 'primary-soft' : 'secondary', className: "rounded-xl", children: role === null ? roleName : intl.formatMessage(ROLE_MESSAGE[role]) }));
+}

package/dist/lib/presentation/components/MembersTable/MemberRowActions/index.d.ts

@@ -0,0 +1,16 @@
+import type { Member } from '../../../../domain/types/member';
+/**
+ * The row-end kebab menu. It mirrors the user detail page's side rail: an
+ * **Account** group (General / Role / Workspaces) that every reader sees, then
+ * permission-gated **Audit** (Sessions / Activity) and **Access** (Sign-in
+ * access) groups — each item navigates straight to that tab. Below a separator
+ * sit the status quick actions: a pending invite offers Resend / Revoke, an
+ * active member Disable, a disabled member Enable, each shown only with its
+ * `users:*` permission. The guardrailed Disable (yourself, the sole admin)
+ * stays visible but inert with a tooltip. (Clicking the row itself also opens
+ * the member — see {@link MembersTable}.)
+ */
+export declare function MemberRowActions({ member }: {
+    member: Member;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/MembersTable/MemberRowActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/presentation/components/MembersTable/MemberRowActions/index.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAgH9D;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,+BAiW9D"}