@orthacms/users-admin 0.0.0-reserve.0

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Ban, MailCheck, ShieldCheck } from 'lucide-react';
+import { Alert, AlertDescription, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, toast } from '@orthacms/design-system';
+import { useAuth } from '@orthacms/identity-admin';
+import { useSetMemberStatus } from '../../../application/useSetMemberStatus';
+import { useUserDetailContext } from '../../userDetailContext';
+import { MemberEntity } from '../../../domain/member';
+import { ConfirmDialog } from '@orthacms/design-system';
+import { PasswordResetCard } from '../../components/PasswordResetCard';
+/** Intl descriptors for {@link UserAccessPage}, co-located with the component. */
+const messages = defineMessages({
+    title: { id: 'users.access.title', defaultMessage: 'Sign-in access' },
+    activeTitle: {
+        id: 'users.access.activeTitle',
+        defaultMessage: 'This member can sign in'
+    },
+    activeBody: {
+        id: 'users.access.activeBody',
+        defaultMessage: 'Suspending blocks sign-in and revokes active sessions. Their workspace memberships and authored content are kept, so reactivating restores access immediately.'
+    },
+    disabledTitle: {
+        id: 'users.access.disabledTitle',
+        defaultMessage: 'This member is suspended'
+    },
+    disabledBody: {
+        id: 'users.access.disabledBody',
+        defaultMessage: 'They can’t sign in. Reactivate to restore access — memberships and content were preserved.'
+    },
+    pendingTitle: {
+        id: 'users.access.pendingTitle',
+        defaultMessage: 'Invite not accepted yet'
+    },
+    pendingBody: {
+        id: 'users.access.pendingBody',
+        defaultMessage: 'This member hasn’t accepted their invite, so there’s no sign-in access to suspend yet.'
+    },
+    suspend: { id: 'users.access.suspend', defaultMessage: 'Suspend member' },
+    reactivate: {
+        id: 'users.access.reactivate',
+        defaultMessage: 'Reactivate member'
+    },
+    confirmSuspendTitle: {
+        id: 'users.access.confirmSuspendTitle',
+        defaultMessage: 'Suspend {name}?'
+    },
+    confirmSuspendBody: {
+        id: 'users.access.confirmSuspendBody',
+        defaultMessage: 'They’ll be signed out everywhere and blocked from signing in until reactivated.'
+    },
+    confirmReactivateTitle: {
+        id: 'users.access.confirmReactivateTitle',
+        defaultMessage: 'Reactivate {name}?'
+    },
+    confirmReactivateBody: {
+        id: 'users.access.confirmReactivateBody',
+        defaultMessage: 'They’ll be able to sign in again right away.'
+    },
+    lastAdmin: {
+        id: 'users.access.lastAdmin',
+        defaultMessage: 'This member is the last remaining admin and can’t be suspended. Promote another member to admin first.'
+    },
+    self: {
+        id: 'users.access.self',
+        defaultMessage: 'You can’t suspend your own account.'
+    },
+    suspended: {
+        id: 'users.access.suspended',
+        defaultMessage: 'Suspended {name}.'
+    },
+    reactivated: {
+        id: 'users.access.reactivated',
+        defaultMessage: 'Reactivated {name}.'
+    },
+    failed: {
+        id: 'users.access.failed',
+        defaultMessage: 'Couldn’t update sign-in access. Please try again.'
+    }
+});
+/**
+ * The Access tab: everything that governs whether — and how — this member gets
+ * into the product. Two cards:
+ *
+ * - **sign-in access** — suspend or reactivate. Mirrors the server's lifecycle:
+ *   only `active` can be suspended, only `disabled` reactivated, and `pending`
+ *   (un-accepted invite) is read-only. The last active admin and your own
+ *   account can't be suspended; the button explains why instead of failing on
+ *   submit.
+ * - **password** — generate a single-use reset link for the member
+ *   ({@link PasswordResetCard}).
+ *
+ * The two belong on one tab because they answer the same question from either
+ * side: this is where an admin goes when someone can't get in, whether the
+ * reason is that they were locked out or that they forgot their password.
+ */
+export function UserAccessPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const auth = useAuth();
+    const setStatus = useSetMemberStatus();
+    const [confirming, setConfirming] = useState(false);
+    const isDisabled = member.status === 'disabled';
+    const isPending = member.status === 'pending';
+    // Mirror the server's guardrails: you can't suspend yourself or the sole
+    // admin. `lastAdmin` only blocks the suspend direction — reactivating a
+    // disabled member is always allowed.
+    const removal = MemberEntity.of(member).canBeRemoved(auth.user?.id);
+    const blockedReason = !removal.ok && removal.reason === 'self'
+        ? messages.self
+        : !removal.ok && removal.reason === 'lastAdmin' && !isDisabled
+            ? messages.lastAdmin
+            : null;
+    const card = isPending
+        ? {
+            icon: MailCheck,
+            title: messages.pendingTitle,
+            body: messages.pendingBody
+        }
+        : isDisabled
+            ? {
+                icon: Ban,
+                title: messages.disabledTitle,
+                body: messages.disabledBody
+            }
+            : {
+                icon: ShieldCheck,
+                title: messages.activeTitle,
+                body: messages.activeBody
+            };
+    const Icon = card.icon;
+    const run = () => {
+        setStatus.mutate({ id: member.id, disabled: !isDisabled }, {
+            onSuccess: (updated) => {
+                setConfirming(false);
+                toast.success(intl.formatMessage(isDisabled
+                    ? messages.reactivated
+                    : messages.suspended, { name: updated.name }));
+            },
+            onError: () => {
+                setConfirming(false);
+                toast.error(intl.formatMessage(messages.failed));
+            }
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Icon, { "aria-hidden": true, className: "size-5 text-muted-foreground" }), intl.formatMessage(card.title)] }), _jsx(CardDescription, { children: intl.formatMessage(card.body) })] }), !isPending ? (_jsxs(CardContent, { className: "space-y-3", children: [blockedReason ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: intl.formatMessage(blockedReason) }) })) : null, _jsx(Button, { variant: isDisabled ? 'default' : 'outline', onClick: () => setConfirming(true), disabled: blockedReason !== null || setStatus.isPending, children: intl.formatMessage(isDisabled
+                                    ? messages.reactivate
+                                    : messages.suspend) })] })) : null, _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, busy: setStatus.isPending, title: intl.formatMessage(isDisabled
+                            ? messages.confirmReactivateTitle
+                            : messages.confirmSuspendTitle, { name: member.name }), description: intl.formatMessage(isDisabled
+                            ? messages.confirmReactivateBody
+                            : messages.confirmSuspendBody), confirmLabel: intl.formatMessage(isDisabled ? messages.reactivate : messages.suspend), confirmVariant: isDisabled ? 'default' : 'destructive', onConfirm: run })] }), _jsx(PasswordResetCard, { member: member })] }));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * The Activity tab: a timeline of audit events whose subject is this member,
+ * reusing the activity plugin's `useActivityLog` with a pinned `subjectId`
+ * filter. Gated on `activity:read` (the rail hides it otherwise). Paginated
+ * with the shared members pagination control.
+ */
+export declare function UserActivityPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserActivityPage/index.tsx"],"names":[],"mappings":"AAgQA;;;;;GAKG;AACH,wBAAgB,gBAAgB,gCA6F/B"}

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

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Activity, Archive, ArchiveRestore, Ban, Building2, CircleCheck, FileText, FolderPlus, Image, KeyRound, LogIn, LogOut, MailX, Pencil, Send, ShieldCheck, Trash2, UserMinus, UserPlus } from 'lucide-react';
+import { Alert, AlertDescription, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, cn } from '@orthacms/design-system';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { formatActivityAction, useActivityLog } from '@orthacms/activity-admin';
+import { MembersPagination } from '../../components/MembersPagination';
+import { useUserDetailContext } from '../../userDetailContext';
+/** Default page size for the per-user activity timeline (a pagination option). */
+const DEFAULT_PAGE_SIZE = 25;
+/** Intl descriptors for {@link UserActivityPage}. */
+const messages = defineMessages({
+    title: { id: 'users.activity.title', defaultMessage: 'Activity' },
+    description: {
+        id: 'users.activity.description',
+        defaultMessage: 'A timeline of changes to this member’s account.'
+    },
+    empty: {
+        id: 'users.activity.empty',
+        defaultMessage: 'No recorded activity yet.'
+    },
+    error: {
+        id: 'users.activity.error',
+        defaultMessage: 'Couldn’t load activity. Please try again.'
+    },
+    retry: { id: 'users.activity.retry', defaultMessage: 'Retry' },
+    system: { id: 'users.activity.system', defaultMessage: 'System' },
+    by: { id: 'users.activity.by', defaultMessage: 'by {actor}' }
+});
+/**
+ * Per-kind **presentation** — an icon and a tinted chip class, so an invite
+ * reads differently from a suspension at a glance. The *label* is not here on
+ * purpose: it comes from `activity-admin`'s `formatActivityAction`, the one
+ * kind→label catalogue in the admin.
+ *
+ * This map used to own labels too, and it knew twelve kinds. The tab's query is
+ * "everything about *or by* this member", so it surfaces every kind the actor
+ * touched — and each of the other nineteen rendered as a raw dotted wire token
+ * (`media.asset.uploaded`, `token.created`, `workspace.content_granted`) in a
+ * member's timeline. A second catalogue is a second thing to forget; a missing
+ * icon here only costs a neutral chip.
+ */
+const KIND_STYLE = {
+    'user.invited': {
+        icon: UserPlus,
+        className: 'bg-blue-500/10 text-blue-600'
+    },
+    'user.invite_resent': {
+        icon: Send,
+        className: 'bg-blue-500/10 text-blue-600'
+    },
+    'user.invite_revoked': {
+        icon: MailX,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'user.activated': {
+        icon: CircleCheck,
+        className: 'bg-emerald-500/10 text-emerald-600'
+    },
+    'user.profile_updated': {
+        icon: Pencil,
+        className: 'bg-indigo-500/10 text-indigo-600'
+    },
+    'user.role_changed': {
+        icon: ShieldCheck,
+        className: 'bg-violet-500/10 text-violet-600'
+    },
+    'user.suspended': {
+        icon: Ban,
+        className: 'bg-amber-500/10 text-amber-600'
+    },
+    'user.reactivated': {
+        icon: CircleCheck,
+        className: 'bg-emerald-500/10 text-emerald-600'
+    },
+    'user.password_changed': {
+        icon: KeyRound,
+        className: 'bg-violet-500/10 text-violet-600'
+    },
+    'user.password_reset_issued': {
+        icon: KeyRound,
+        className: 'bg-amber-500/10 text-amber-600'
+    },
+    'user.signed_in': {
+        icon: LogIn,
+        className: 'bg-slate-500/10 text-slate-600'
+    },
+    'user.signed_out': {
+        icon: LogOut,
+        className: 'bg-slate-500/10 text-slate-600'
+    },
+    'workspace.created': {
+        icon: Building2,
+        className: 'bg-teal-500/10 text-teal-600'
+    },
+    'workspace.updated': {
+        icon: Pencil,
+        className: 'bg-teal-500/10 text-teal-600'
+    },
+    'workspace.archived': {
+        icon: Archive,
+        className: 'bg-amber-500/10 text-amber-600'
+    },
+    'workspace.unarchived': {
+        icon: ArchiveRestore,
+        className: 'bg-emerald-500/10 text-emerald-600'
+    },
+    'workspace.deleted': {
+        icon: Trash2,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'workspace.member_added': {
+        icon: UserPlus,
+        className: 'bg-teal-500/10 text-teal-600'
+    },
+    'workspace.member_removed': {
+        icon: UserMinus,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'workspace.content_granted': {
+        icon: ShieldCheck,
+        className: 'bg-teal-500/10 text-teal-600'
+    },
+    'workspace.content_revoked': {
+        icon: ShieldCheck,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'entry.published': {
+        icon: FileText,
+        className: 'bg-emerald-500/10 text-emerald-600'
+    },
+    'entry.unpublished': {
+        icon: FileText,
+        className: 'bg-amber-500/10 text-amber-600'
+    },
+    'token.created': {
+        icon: KeyRound,
+        className: 'bg-violet-500/10 text-violet-600'
+    },
+    'token.revoked': {
+        icon: KeyRound,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'media.asset.uploaded': {
+        icon: Image,
+        className: 'bg-blue-500/10 text-blue-600'
+    },
+    'media.asset.updated': {
+        icon: Pencil,
+        className: 'bg-indigo-500/10 text-indigo-600'
+    },
+    'media.asset.moved': {
+        icon: FolderPlus,
+        className: 'bg-indigo-500/10 text-indigo-600'
+    },
+    'media.asset.deleted': {
+        icon: Trash2,
+        className: 'bg-rose-500/10 text-rose-600'
+    },
+    'media.folder.created': {
+        icon: FolderPlus,
+        className: 'bg-blue-500/10 text-blue-600'
+    },
+    'media.folder.renamed': {
+        icon: Pencil,
+        className: 'bg-indigo-500/10 text-indigo-600'
+    },
+    'media.folder.deleted': {
+        icon: Trash2,
+        className: 'bg-rose-500/10 text-rose-600'
+    }
+};
+const FALLBACK_STYLE = {
+    icon: Activity,
+    className: 'bg-muted text-muted-foreground'
+};
+/** One timeline entry. */
+function ActivityRow({ event }) {
+    const intl = useIntl();
+    const style = KIND_STYLE[event.kind];
+    const title = formatActivityAction(intl, event.kind);
+    const Icon = style?.icon ?? FALLBACK_STYLE.icon;
+    const chipClassName = style?.className ?? FALLBACK_STYLE.className;
+    const actor = event.actor?.email ?? intl.formatMessage(messages.system);
+    return (_jsxs("li", { className: "flex items-center gap-3 border-b py-3 last:border-b-0", children: [_jsx("span", { "aria-hidden": true, className: cn('flex size-8 shrink-0 items-center justify-center rounded-full', chipClassName), children: _jsx(Icon, { "aria-hidden": true, className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [intl.formatDate(event.at, {
+                                dateStyle: 'medium',
+                                timeStyle: 'short'
+                            }), ' ', intl.formatMessage(messages.by, { actor })] })] })] }));
+}
+/**
+ * The Activity tab: a timeline of audit events whose subject is this member,
+ * reusing the activity plugin's `useActivityLog` with a pinned `subjectId`
+ * filter. Gated on `activity:read` (the rail hides it otherwise). Paginated
+ * with the shared members pagination control.
+ */
+export function UserActivityPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const canRead = useHasPermission('activity:read');
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+    // The member's personal log: events *about* them (`subjectType=user` and
+    // `subjectId=:id` — e.g. they were added/removed from a workspace, their
+    // role changed) OR events they *performed* (`actorId=:id` — e.g. they
+    // created a workspace, signed in). Serialised to the wire filter grammar the
+    // activity endpoint already parses.
+    const filter = useMemo(() => JSON.stringify({
+        or: [
+            {
+                and: [
+                    { field: 'subjectType', op: 'eq', value: 'user' },
+                    { field: 'subjectId', op: 'eq', value: member.id }
+                ]
+            },
+            { field: 'actorId', op: 'eq', value: member.id }
+        ]
+    }), [member.id]);
+    const { data, isPending, isError, refetch } = useActivityLog({ filter, page, pageSize }, canRead);
+    const total = data?.total ?? 0;
+    const effectivePageSize = data?.pageSize ?? pageSize;
+    const pageCount = Math.max(1, Math.ceil(total / effectivePageSize));
+    const events = data?.items ?? [];
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { 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-12 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-12 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-12 w-full rounded-lg" })] })) : 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) })] }) })) : events.length === 0 ? (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: intl.formatMessage(messages.empty) })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: events.map((event) => (_jsx(ActivityRow, { event: event }, event.id))) }), _jsx(MembersPagination, { page: page, pageCount: pageCount, pageSize: effectivePageSize, total: total, onPageChange: setPage, onPageSizeChange: (next) => {
+                                setPageSize(next);
+                                setPage(1);
+                            } })] })) })] }));
+}

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

@@ -0,0 +1,7 @@
+/**
+ * The General tab: edit the member's display name; the email is read-only. The
+ * Save/Discard pair only enables on a real change. Edit controls require
+ * `users:update`; without it the fields render disabled.
+ */
+export declare function UserGeneralPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, InputField, Spinner, toast } from '@orthacms/design-system';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useUpdateMember } from '../../../application/useUpdateMember';
+import { useUserDetailContext } from '../../userDetailContext';
+/** Server-side cap on the display name (mirrors the users plugin). */
+const NAME_MAX_LENGTH = 80;
+/** Intl descriptors for {@link UserGeneralPage}, co-located with the component. */
+const messages = defineMessages({
+    title: { id: 'users.general.title', defaultMessage: 'General' },
+    description: {
+        id: 'users.general.description',
+        defaultMessage: 'The member’s display name and contact email.'
+    },
+    nameLabel: { id: 'users.general.nameLabel', defaultMessage: 'Full name' },
+    nameTooLong: {
+        id: 'users.general.nameTooLong',
+        defaultMessage: 'Keep the name under {max} characters.'
+    },
+    emailLabel: { id: 'users.general.emailLabel', defaultMessage: 'Email' },
+    emailHint: {
+        id: 'users.general.emailHint',
+        defaultMessage: 'Email is the sign-in identifier and can’t be changed here.'
+    },
+    save: { id: 'users.general.save', defaultMessage: 'Save changes' },
+    discard: { id: 'users.general.discard', defaultMessage: 'Discard' },
+    saved: {
+        id: 'users.general.saved',
+        defaultMessage: 'Saved changes to {name}.'
+    },
+    failed: {
+        id: 'users.general.failed',
+        defaultMessage: 'Couldn’t save the changes. Please try again.'
+    }
+});
+/**
+ * The General tab: edit the member's display name; the email is read-only. The
+ * Save/Discard pair only enables on a real change. Edit controls require
+ * `users:update`; without it the fields render disabled.
+ */
+export function UserGeneralPage() {
+    const intl = useIntl();
+    const { member } = useUserDetailContext();
+    const canManage = useHasPermission('users:update');
+    const update = useUpdateMember();
+    const [name, setName] = useState(member.name);
+    const trimmed = name.trim();
+    const tooLong = trimmed.length > NAME_MAX_LENGTH;
+    const dirty = trimmed !== member.name.trim();
+    const canSave = canManage && dirty && trimmed.length > 0 && !tooLong;
+    const save = () => {
+        if (!canSave) {
+            return;
+        }
+        update.mutate({ id: member.id, name: trimmed }, {
+            onSuccess: (saved) => {
+                setName(saved.name);
+                toast.success(intl.formatMessage(messages.saved, { name: saved.name }));
+            },
+            onError: () => {
+                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: [_jsx(InputField, { id: "user-general-name", label: intl.formatMessage(messages.nameLabel), value: name, maxLength: NAME_MAX_LENGTH + 1, disabled: !canManage || update.isPending, onChange: (event) => setName(event.target.value), error: tooLong
+                            ? intl.formatMessage(messages.nameTooLong, {
+                                max: NAME_MAX_LENGTH
+                            })
+                            : undefined }), _jsx(InputField, { id: "user-general-email", label: intl.formatMessage(messages.emailLabel), value: member.email, description: intl.formatMessage(messages.emailHint), readOnly: true, disabled: true })] }), canManage ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [_jsx(Button, { variant: "ghost", onClick: () => setName(member.name), disabled: !dirty || update.isPending, children: intl.formatMessage(messages.discard) }), _jsxs(Button, { onClick: save, disabled: !canSave || update.isPending, children: [update.isPending ? _jsx(Spinner, {}) : null, intl.formatMessage(messages.save)] })] })) : null] }));
+}

package/dist/lib/presentation/pages/UserPreferencesPage/ThemePreview.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A tiny, non-interactive mock of the admin chrome — a dark sidebar rail beside
+ * a content canvas with a couple of placeholder rows — rendered in a **fixed**
+ * light or dark palette (never the app tokens), so each theme card previews the
+ * look it applies regardless of the theme currently in effect. `system` shows
+ * the two halves side by side.
+ */
+export declare function ThemePreview({ variant }: {
+    variant: 'light' | 'dark' | 'system';
+}): import("react").JSX.Element;
+//# sourceMappingURL=ThemePreview.d.ts.map

package/dist/lib/presentation/pages/UserPreferencesPage/ThemePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePreview.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserPreferencesPage/ThemePreview.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EACzB,OAAO,EACV,EAAE;IACC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACxC,+BAkBA"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@orthacms/design-system';
+/**
+ * A tiny, non-interactive mock of the admin chrome — a dark sidebar rail beside
+ * a content canvas with a couple of placeholder rows — rendered in a **fixed**
+ * light or dark palette (never the app tokens), so each theme card previews the
+ * look it applies regardless of the theme currently in effect. `system` shows
+ * the two halves side by side.
+ */
+export function ThemePreview({ variant }) {
+    if (variant === 'system') {
+        return (_jsxs("div", { className: "flex h-16 w-full overflow-hidden rounded-md border border-border", children: [_jsx("div", { className: "w-1/2 overflow-hidden border-r border-border", children: _jsx(Panel, { tone: "light", edge: false }) }), _jsx("div", { className: "w-1/2 overflow-hidden", children: _jsx(Panel, { tone: "dark", edge: false }) })] }));
+    }
+    return (_jsx("div", { className: "h-16 w-full overflow-hidden rounded-md border border-border", children: _jsx(Panel, { tone: variant, edge: true }) }));
+}
+/** One themed panel: a rail + canvas with placeholder bars, in a fixed tone. */
+function Panel({ tone, edge }) {
+    const dark = tone === 'dark';
+    return (_jsxs("div", { className: cn('flex h-full w-full', edge && 'rounded-[3px]', dark ? 'bg-neutral-900' : 'bg-white'), children: [_jsxs("div", { className: "flex w-1/3 flex-col gap-1 bg-neutral-800 p-1.5", children: [_jsx("span", { className: "h-1 w-3/4 rounded-full bg-orange-400/90" }), _jsx("span", { className: "h-1 w-full rounded-full bg-white/25" }), _jsx("span", { className: "h-1 w-2/3 rounded-full bg-white/25" })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5 p-2", children: [_jsx("span", { className: cn('h-1.5 w-1/2 rounded-full', dark ? 'bg-neutral-500' : 'bg-neutral-300') }), _jsx("span", { className: cn('h-4 w-full rounded-sm border', dark
+                            ? 'border-neutral-700 bg-neutral-800'
+                            : 'border-neutral-200 bg-neutral-50') }), _jsx("span", { className: cn('h-4 w-full rounded-sm border', dark
+                            ? 'border-neutral-700 bg-neutral-800'
+                            : 'border-neutral-200 bg-neutral-50') })] })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function UserPreferencesPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserPreferencesPage/index.tsx"],"names":[],"mappings":"AAiHA;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,gCAyIlC"}