@invect/user-auth 0.0.1

package/dist/frontend/components/AuthenticatedInvect.d.ts

@@ -0,0 +1,129 @@
+/**
+ * AuthenticatedInvect — Wraps the Invect component with auth gating.
+ *
+ * Renders InvectShell → AuthProvider → AuthGate around Invect.
+ * The shell establishes the `.invect` CSS scope so all theme tokens
+ * work for both the sign-in page and the Invect editor.
+ *
+ * When the user is not authenticated, shows the sign-in page.
+ * When authenticated, renders the full Invect UI.
+ *
+ * Sign-up is disabled — initial admin users are configured explicitly via
+ * `betterAuthPlugin({ globalAdmins: [...] })`, and subsequent users are
+ * created by the admin through the User Management panel.
+ *
+ * @example
+ * ```tsx
+ * import { AuthenticatedInvect } from '@invect/user-auth/ui';
+ * import { Invect, InvectShell } from '@invect/frontend';
+ * import '@invect/frontend/styles';
+ *
+ * export default function Page() {
+ *   return (
+ *     <AuthenticatedInvect
+ *       apiBaseUrl="/api/invect"
+ *       basePath="/invect"
+ *       InvectComponent={Invect}
+ *       ShellComponent={InvectShell}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import { type ReactNode, type ComponentType, type MemoExoticComponent } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+/**
+ * Accepts both a plain component and a React.memo-wrapped component.
+ * React.memo returns MemoExoticComponent which isn't directly assignable
+ * to ComponentType in TypeScript, but is valid in JSX.
+ */
+type ComponentOrMemo<P> = ComponentType<P> | MemoExoticComponent<ComponentType<P>>;
+/**
+ * Generic over TPlugin so that passing a typed InvectComponent (e.g. one that
+ * expects `plugins?: InvectFrontendPlugin[]`) causes TypeScript to infer the
+ * correct element type for the `plugins` prop on AuthenticatedInvect itself.
+ * Defaults to `unknown` for the no-plugins case.
+ */
+export interface AuthenticatedInvectProps<TPlugin = unknown> {
+    /**
+     * Base URL for the Invect API.
+     * Used for both auth endpoints and the Invect component.
+     * @example '/api/invect' or 'http://localhost:3000/invect'
+     */
+    apiBaseUrl?: string;
+    /**
+     * Base path where Invect is mounted in the browser.
+     * @default '/invect'
+     */
+    basePath?: string;
+    /**
+     * The Invect component to render when authenticated.
+     * Pass this to avoid a direct dependency on @invect/frontend.
+     * Accepts both plain and React.memo-wrapped components.
+     *
+     * @example
+     * ```tsx
+     * import { Invect } from '@invect/frontend';
+     * <AuthenticatedInvect InvectComponent={Invect} />
+     * ```
+     */
+    InvectComponent: ComponentOrMemo<{
+        apiBaseUrl?: string;
+        basePath?: string;
+        reactQueryClient?: QueryClient;
+        plugins?: TPlugin[];
+    }>;
+    /**
+     * The InvectShell component that provides the `.invect` CSS scope.
+     * This ensures theme tokens work for both the sign-in page and the
+     * Invect editor. Import from `@invect/frontend`.
+     *
+     * `children` is typed as `unknown` rather than `ReactNode` to avoid a
+     * structural incompatibility between `@types/react@18` (used here) and
+     * `@types/react@19` (used by `@invect/frontend`) where `ReactPortal`
+     * changed between versions.
+     *
+     * If not provided, the auth UI renders without the Invect CSS scope
+     * and must rely on the host app's styling.
+     *
+     * @example
+     * ```tsx
+     * import { InvectShell } from '@invect/frontend';
+     * <AuthenticatedInvect ShellComponent={InvectShell} />
+     * ```
+     */
+    ShellComponent?: ComponentOrMemo<{
+        children: ReactNode;
+        theme?: 'light' | 'dark' | 'system';
+        className?: string;
+    }>;
+    /**
+     * Optional React Query client. If provided, it's shared between
+     * the auth provider and the Invect component.
+     */
+    reactQueryClient?: QueryClient;
+    /**
+     * Content to display while checking session status.
+     */
+    loading?: ReactNode;
+    /**
+     * Theme for the shell wrapper.
+     * @default 'system'
+     */
+    theme?: 'light' | 'dark' | 'system';
+    /**
+     * Frontend plugins forwarded to InvectComponent.
+     * The element type is inferred from InvectComponent's `plugins` prop type,
+     * so this stays consistent with whatever component you pass.
+     *
+     * @example
+     * ```tsx
+     * import { rbacFrontendPlugin } from '@invect/rbac/ui';
+     * <AuthenticatedInvect plugins={[rbacFrontendPlugin]} />
+     * ```
+     */
+    plugins?: TPlugin[];
+}
+export declare function AuthenticatedInvect<TPlugin = unknown>({ apiBaseUrl, basePath, InvectComponent, ShellComponent, reactQueryClient, loading, theme, plugins, }: AuthenticatedInvectProps<TPlugin>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AuthenticatedInvect.d.ts.map

package/dist/frontend/components/AuthenticatedInvect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthenticatedInvect.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/AuthenticatedInvect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAKzE;;;;GAIG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAMnF;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB,CAAC,OAAO,GAAG,OAAO;IACzD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;OAUG;IACH,eAAe,EAAE,eAAe,CAAC;QAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,WAAW,CAAC;QAC/B,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;KACrB,CAAC,CAAC;IACH;;;;;;;;;;;;;;;;;;OAkBG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;QAC/B,QAAQ,EAAE,SAAS,CAAC;QACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;QACpC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACrB;AAYD,wBAAgB,mBAAmB,CAAC,OAAO,GAAG,OAAO,EAAE,EACrD,UAA2C,EAC3C,QAAoB,EACpB,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,KAAe,EACf,OAAO,GACR,EAAE,wBAAwB,CAAC,OAAO,CAAC,2CAyCnC"}

package/dist/frontend/components/ProfilePage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ProfilePage — Standalone page for the current authenticated user.
+ *
+ * Shows basic account information and provides a sign-out action.
+ */
+export interface ProfilePageProps {
+    basePath: string;
+}
+export declare function ProfilePage({ basePath }: ProfilePageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfilePage.d.ts.map

package/dist/frontend/components/ProfilePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePage.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/ProfilePage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA6FzD"}

package/dist/frontend/components/SidebarUserMenu.d.ts

@@ -0,0 +1,12 @@
+/**
+ * SidebarUserMenu — User avatar link in the sidebar footer.
+ *
+ * Clicking navigates directly to the profile page.
+ * Sign-out is available on the profile page itself.
+ */
+export interface SidebarUserMenuProps {
+    collapsed?: boolean;
+    basePath?: string;
+}
+export declare function SidebarUserMenu({ collapsed, basePath }: SidebarUserMenuProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SidebarUserMenu.d.ts.map

package/dist/frontend/components/SidebarUserMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarUserMenu.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/SidebarUserMenu.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAiB,EAAE,QAAa,EAAE,EAAE,oBAAoB,kDA8CzF"}

package/dist/frontend/components/SignInForm.d.ts

@@ -0,0 +1,14 @@
+/**
+ * SignInForm — Email/password sign-in form component.
+ *
+ * Uses the AuthProvider's signIn action. Styled to match the Invect
+ * design system with grouped fields, clean labels, and themed inputs.
+ */
+export interface SignInFormProps {
+    /** Called after successful sign-in */
+    onSuccess?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare function SignInForm({ onSuccess, className }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignInForm.d.ts.map

package/dist/frontend/components/SignInForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInForm.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/SignInForm.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,eAAe,2CAgFnE"}

package/dist/frontend/components/SignInPage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * SignInPage — Full-page sign-in component with layout.
+ *
+ * Renders the SignInForm centered on the page with a logo, title,
+ * and grouped fields matching the Invect design system.
+ * Sign-up is not offered — new users are created by admins.
+ */
+export interface SignInPageProps {
+    /** Called after successful sign-in */
+    onSuccess?: () => void;
+    /** Called when user clicks "Sign Up" link (optional — hidden if omitted) */
+    onNavigateToSignUp?: () => void;
+    /** Page title */
+    title?: string;
+    /** Page subtitle */
+    subtitle?: string;
+}
+export declare function SignInPage({ onSuccess, onNavigateToSignUp, title, subtitle, }: SignInPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignInPage.d.ts.map

package/dist/frontend/components/SignInPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInPage.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/SignInPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,kBAAkB,EAClB,KAAsB,EACtB,QAAgD,GACjD,EAAE,eAAe,2CAwCjB"}

package/dist/frontend/components/UserButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * UserButton — Compact user avatar + dropdown for the authenticated user.
+ *
+ * Shows the user's avatar/initials when signed in, with a dropdown
+ * containing their name, email, and sign-out button.
+ * Shows a "Sign In" button when not authenticated.
+ */
+export interface UserButtonProps {
+    /** Called when the sign-in button is clicked (unauthenticated state) */
+    onSignInClick?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare function UserButton({ onSignInClick, className }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserButton.d.ts.map

package/dist/frontend/components/UserButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/UserButton.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,eAAe,2CAwFvE"}

package/dist/frontend/components/UserManagement.d.ts

@@ -0,0 +1,19 @@
+/**
+ * UserManagement — Admin panel for managing users.
+ *
+ * Displays a list of users with the ability to:
+ * - Create new users (email/password/role)
+ * - Change user roles
+ * - Delete users
+ *
+ * Only visible to admin users. Uses the auth plugin's
+ * `/plugins/auth/users` endpoints.
+ */
+export interface UserManagementProps {
+    /** Base URL for the Invect API (same as AuthProvider's baseUrl) */
+    apiBaseUrl: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare function UserManagement({ apiBaseUrl, className }: UserManagementProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=UserManagement.d.ts.map

package/dist/frontend/components/UserManagement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserManagement.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/UserManagement.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA8CH,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8HD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDA2W5E"}

package/dist/frontend/components/UserManagementPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * UserManagementPage — Standalone page for user management.
+ *
+ * Wraps the existing UserManagement component in a page layout
+ * consistent with the Access Control page style. Registered as a
+ * plugin route contribution at '/users'.
+ */
+export declare function UserManagementPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserManagementPage.d.ts.map

package/dist/frontend/components/UserManagementPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserManagementPage.d.ts","sourceRoot":"","sources":["../../../src/frontend/components/UserManagementPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,wBAAgB,kBAAkB,4CAoCjC"}