@bcrumbs.net/inbox 0.0.62 → 0.0.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bcrumbs.net/inbox",
   "description": "Inbox widget for Bread Crumbs portals",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "keyword": [
     "bcrumbs",
     "bc-ui",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@bcrumbs.net/bc-shared": "^0.0.11",
-    "@bcrumbs.net/bc-ui": "^0.0.16",
+    "@bcrumbs.net/bc-ui": "^0.0.17",
     "@bcrumbs.net/bc-api": "^0.0.49",
     "@azure/storage-blob": "^12.25.0"
   },

package/playwright.config.d.ts

@@ -1,7 +1,3 @@
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
 /**
  * See https://playwright.dev/docs/test-configuration.
  */

package/src/app/ai/components/playground/ThreadMessages.d.ts

@@ -1,6 +1,8 @@
 type ThreadMessagesProps = {
     /** Overrides the container padding (defaults to 24px) when the parent already provides some (e.g. Crumby ChatView surface). */
     padding?: string;
+    /** Overrides the message-text size for the compact Crumby chat (e.g. `TextSizeRem.XS`). Unset in the playground. */
+    fontSize?: string;
 };
-declare const ThreadMessages: ({ padding }: ThreadMessagesProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const ThreadMessages: ({ padding, fontSize }: ThreadMessagesProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ThreadMessages;

package/src/app/auth/components/AcceptInvitation.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/app/auth/components/AuthLanguagePicker.d.ts

@@ -0,0 +1,3 @@
+/** Top-corner language control for unauthenticated auth screens. */
+export declare function AuthLanguagePicker(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default AuthLanguagePicker;

package/src/app/auth/components/AuthVisualCarousel.d.ts

@@ -0,0 +1 @@
+export declare const AuthVisualCarousel: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/app/auth/components/ClerkForgetPanel.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Clerk forgot-password flow: sends a reset code email, then routes to the Clerk
+ * reset page where the user enters the code + new password.
+ */
+export declare function ClerkForgetPanel(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ClerkForgetPanel;

package/src/app/auth/components/ClerkResetPasswordPanel.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Completes Clerk's reset_password_email_code flow after ClerkForgetPanel
+ * requested the email code.
+ */
+export declare function ClerkResetPasswordPanel(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ClerkResetPasswordPanel;

package/src/app/auth/components/ClerkSessionBridge.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Keeps localStorage.token in sync with the Clerk session JWT so Apollo handleAuth
+ * and BCRoutesGuard continue to work without per-client changes.
+ *
+ * Clerk session *tokens* stay short-lived (~60s default). The Clerk *session*
+ * (cookie) is configured for 30 days in the Clerk Dashboard. This bridge refreshes
+ * the JWT in place and does not treat JWT expiry as logout.
+ *
+ * Prefer the AspNetUsers id returned by /auth/authorize so the rest of the portal
+ * keeps seeing the same user id shape as legacy login.
+ *
+ * Forwards the PostHog distinct id so auth can alias + emit authoritative
+ * "Signup Success" when JIT-provisioning a new AspNetUsers row.
+ */
+export declare function ClerkSessionBridge(): null;
+export default ClerkSessionBridge;

package/src/app/auth/components/ClerkSignInPanel.d.ts

@@ -0,0 +1,2 @@
+export declare function ClerkSignInPanel(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ClerkSignInPanel;

package/src/app/auth/components/ClerkSignUpPanel.d.ts

@@ -0,0 +1,2 @@
+export declare function ClerkSignUpPanel(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ClerkSignUpPanel;

package/src/app/auth/components/password-page/PasswordFormView.d.ts

@@ -7,16 +7,25 @@ export type PasswordFieldConfig = {
     onChange: (value: string) => void;
     onToggleVisibility: () => void;
 };
+export type TextFieldConfig = {
+    label: string;
+    placeholder: string;
+    value: string;
+    error?: string;
+    onChange: (value: string) => void;
+};
 type PasswordFormViewProps = {
     title: string;
     subtitle: string;
     submitLabel: string;
     passwordField: PasswordFieldConfig;
     confirmPasswordField: PasswordFieldConfig;
+    /** Optional verification code field used by the Clerk reset flow. */
+    codeField?: TextFieldConfig;
     submitDisabled?: boolean;
     loading?: boolean;
     onBack?: () => void;
     onSubmit: () => void;
 };
-export declare function PasswordFormView({ title, subtitle, submitLabel, passwordField, confirmPasswordField, submitDisabled, loading, onBack, onSubmit, }: PasswordFormViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PasswordFormView({ title, subtitle, submitLabel, passwordField, confirmPasswordField, codeField, submitDisabled, loading, onBack, onSubmit, }: PasswordFormViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/app/auth/config/authProvider.d.ts

@@ -0,0 +1,12 @@
+import type { AuthProvider } from '../../../environments/types';
+/**
+ * Selects the frontend auth UI provider. Runtime window._env_ overrides build-time
+ * environment so deployments can flip without a rebuild.
+ */
+export declare function getAuthProvider(): AuthProvider;
+export declare function getClerkPublishableKey(): string | undefined;
+/**
+ * Clerk UI is only mounted when selected and a publishable key is present, matching
+ * the auth service's isClerkEnabled() gate.
+ */
+export declare function isClerkAuthEnabled(): boolean;

package/src/app/auth/config/clerkAppearance.d.ts

@@ -0,0 +1,534 @@
+import { FontFamilyStack } from '@bcrumbs.net/bc-ui';
+/**
+ * Clerk UI theme aligned with legacy auth pages.
+ * Uses --bc-font-stack-poppins so Arabic (lang=ar) swaps to AvenirArabic.
+ */
+export declare const clerkAppearance: {
+    variables: {
+        fontFamily: FontFamilyStack;
+        fontFamilyButtons: FontFamilyStack;
+        fontSize: string;
+        colorPrimary: string;
+        colorTextOnPrimaryBackground: string;
+        borderRadius: string;
+    };
+    elements: {
+        rootBox: {
+            width: string;
+        };
+        cardBox: {
+            boxShadow: string;
+            width: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        card: {
+            boxShadow: string;
+            width: string;
+            fontFamily: FontFamilyStack;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:focus': {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+            };
+            '&:hover': {
+                borderColor: string;
+            };
+        };
+        formFieldInputShowPasswordButton: {
+            color: string;
+        };
+        formButtonPrimary: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            width: string;
+            '&:hover': {
+                backgroundColor: string;
+                opacity: number;
+            };
+            '&:focus': {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+            '&:active': {
+                backgroundColor: string;
+            };
+        };
+        buttonArrowIcon: {
+            display: string;
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:hover': {
+                backgroundColor: string;
+            };
+        };
+        socialButtonsBlockButtonText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        lastAuthenticationStrategyBadge: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            minHeight: string;
+            height: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            boxSizing: string;
+        };
+        footerActionText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+    };
+};
+/**
+ * Hides Clerk's own footer (incl. "Secured by" / built-in account switch row).
+ * Custom login/register/forgot links are rendered below the panel instead.
+ */
+export declare const clerkSignInAppearance: {
+    elements: {
+        footer: {
+            display: string;
+        };
+        footerPages: {
+            display: string;
+        };
+        rootBox: {
+            width: string;
+        };
+        cardBox: {
+            boxShadow: string;
+            width: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        card: {
+            boxShadow: string;
+            width: string;
+            fontFamily: FontFamilyStack;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:focus': {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+            };
+            '&:hover': {
+                borderColor: string;
+            };
+        };
+        formFieldInputShowPasswordButton: {
+            color: string;
+        };
+        formButtonPrimary: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            width: string;
+            '&:hover': {
+                backgroundColor: string;
+                opacity: number;
+            };
+            '&:focus': {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+            '&:active': {
+                backgroundColor: string;
+            };
+        };
+        buttonArrowIcon: {
+            display: string;
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:hover': {
+                backgroundColor: string;
+            };
+        };
+        socialButtonsBlockButtonText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        lastAuthenticationStrategyBadge: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            minHeight: string;
+            height: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            boxSizing: string;
+        };
+        footerActionText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+    };
+    variables: {
+        fontFamily: FontFamilyStack;
+        fontFamilyButtons: FontFamilyStack;
+        fontSize: string;
+        colorPrimary: string;
+        colorTextOnPrimaryBackground: string;
+        borderRadius: string;
+    };
+};
+export declare const clerkSignUpAppearance: {
+    elements: {
+        footer: {
+            display: string;
+        };
+        footerPages: {
+            display: string;
+        };
+        rootBox: {
+            width: string;
+        };
+        cardBox: {
+            boxShadow: string;
+            width: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        card: {
+            boxShadow: string;
+            width: string;
+            fontFamily: FontFamilyStack;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:focus': {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+            };
+            '&:hover': {
+                borderColor: string;
+            };
+        };
+        formFieldInputShowPasswordButton: {
+            color: string;
+        };
+        formButtonPrimary: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            width: string;
+            '&:hover': {
+                backgroundColor: string;
+                opacity: number;
+            };
+            '&:focus': {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+            '&:active': {
+                backgroundColor: string;
+            };
+        };
+        buttonArrowIcon: {
+            display: string;
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            height: string;
+            minHeight: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            '&:hover': {
+                backgroundColor: string;
+            };
+        };
+        socialButtonsBlockButtonText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        lastAuthenticationStrategyBadge: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            minHeight: string;
+            height: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            boxSizing: string;
+        };
+        footerActionText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: FontFamilyStack;
+            fontSize: string;
+        };
+    };
+    variables: {
+        fontFamily: FontFamilyStack;
+        fontFamilyButtons: FontFamilyStack;
+        fontSize: string;
+        colorPrimary: string;
+        colorTextOnPrimaryBackground: string;
+        borderRadius: string;
+    };
+};

package/src/app/auth/config/clerkLocalization.d.ts

@@ -0,0 +1,6 @@
+import type { LocalizationResource } from '@clerk/types';
+/**
+ * Maps portal i18n languages (en / ar / tr) onto Clerk component localizations,
+ * including input placeholders for sign-in / sign-up.
+ */
+export declare function getClerkLocalization(language?: string): LocalizationResource;