@bcrumbs.net/inbox 0.0.62 → 0.0.63

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.63",
   "keyword": [
     "bcrumbs",
     "bc-ui",

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,12 @@
+/**
+ * Keeps localStorage.token in sync with the Clerk session JWT so Apollo handleAuth
+ * and BCRoutesGuard continue to work without per-client changes.
+ *
+ * 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,430 @@
+/**
+ * Clerk UI theme aligned with legacy auth pages (Poppins + legacy type scale).
+ */
+export declare const clerkAppearance: {
+    variables: {
+        fontFamily: string;
+        fontFamilyButtons: string;
+        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: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        formButtonPrimary: {
+            fontFamily: string;
+            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;
+            };
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: string;
+            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: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        footerActionText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: string;
+            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: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        formButtonPrimary: {
+            fontFamily: string;
+            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;
+            };
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: string;
+            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: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        footerActionText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+    variables: {
+        fontFamily: string;
+        fontFamilyButtons: string;
+        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: string;
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        header: {
+            marginTop: string;
+            paddingTop: string;
+        };
+        headerTitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        headerSubtitle: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+        };
+        formFieldLabel: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        formFieldInput: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        formButtonPrimary: {
+            fontFamily: string;
+            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;
+            };
+        };
+        socialButtons: {
+            gap: string;
+        };
+        socialButtonsBlockButton: {
+            fontFamily: string;
+            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: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+        socialButtonsProviderIcon: {
+            width: string;
+            height: string;
+        };
+        footerActionText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        footerActionLink: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        identityPreviewText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldSuccessText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formFieldErrorText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        dividerText: {
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+    variables: {
+        fontFamily: string;
+        fontFamilyButtons: string;
+        fontSize: string;
+        colorPrimary: string;
+        colorTextOnPrimaryBackground: string;
+        borderRadius: string;
+    };
+};

package/src/app/auth/pages/Auth.style.d.ts

@@ -12,6 +12,20 @@ export declare const AuthFormContent: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Tighter stack so the BC logo sits near Clerk's heading (legacy keeps the 48px gap). */
+export declare const ClerkAuthFormColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+/** Clerk v5 draws the card shadow on .cl-cardBox; force it off inside our auth shell. */
+export declare const ClerkAuthFormContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const SigninForm: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/src/app/auth/pages/CheckAuth.d.ts

@@ -1,10 +1,13 @@
 /**
  * Public entry from marketing pricing CTAs (?planType=...).
  * Verifies the session via currentUser, then:
- * - authenticated + planType in query → upgrade flow (auto Polar/Stripe checkout)
- * - authenticated + no planType → inbox
- * - guest + planType → register with planType preserved
- * - guest + no planType → login
+ * - authenticated + plan intent → upgrade flow (auto Polar/Stripe checkout)
+ * - authenticated + no plan intent → inbox
+ * - guest + plan intent → register with planType preserved
+ * - guest + no plan intent → login
+ *
+ * The plan intent comes from the query when present, otherwise from the value stored earlier
+ * in this tab.
  */
 declare const CheckAuth: () => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CheckAuth;

package/src/app/auth/pages/Forget.d.ts

@@ -6,5 +6,5 @@ export type Props = {
     error: any;
     status: any;
 };
-declare const _default: any;
-export default _default;
+declare const Forget: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Forget;

package/src/app/auth/pages/Login.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const _default: import("react").ComponentClass<{}, any>;
-export default _default;
+declare const Login: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Login;

package/src/app/auth/pages/Password.d.ts

@@ -8,5 +8,5 @@ export type Props = {
     error: any;
     status: any;
 };
-declare const _default: any;
-export default _default;
+declare const Password: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Password;

package/src/app/auth/pages/Register.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const _default: import("react").ComponentClass<{}, any>;
-export default _default;
+declare const Register: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Register;

package/src/app/auth/utils/clerkTracking.d.ts

@@ -0,0 +1,9 @@
+import type { PostHog } from 'posthog-js';
+/** Funnel / UX events captured in the portal for Clerk auth flows. */
+export declare const ClerkTrackingEvents: {
+    readonly SignupStarted: "Signup Started";
+    readonly ForgetPasswordSuccess: "Forget Password Success";
+    readonly ResetPasswordSuccess: "Reset Password Success";
+};
+export declare function captureClerkEvent(posthog: PostHog | null | undefined, eventName: string, properties?: Record<string, string | number | boolean | undefined>): void;
+export declare function identifyClerkUser(posthog: PostHog | null | undefined, userId: string, email?: string): void;

package/src/app/billing/utils/pendingPlanPurchaseStorage.d.ts

@@ -1,10 +1,10 @@
 import { PlanType } from '../../../graphql.billing.autogenerated';
-/** Normalizes landing-page planType query values to billing PlanType. */
-export declare function normalizePendingPlanType(raw: string | null | undefined): PlanType | null;
 export declare function setPendingPlanPurchase(planType: string): void;
 export declare function getPendingPlanPurchase(): PlanType | null;
 export declare function clearPendingPlanPurchase(): void;
-/** True when the URL search string contains a valid paid planType. */
-export declare function hasPlanTypeInSearch(search: string): boolean;
-/** Reads planType from a URL search string and persists it when valid. */
-export declare function capturePendingPlanFromSearch(search: string): PlanType | null;
+/**
+ * Resolves the plan the user intends to buy from the URL first, then from the stored value.
+ * A planType found in the URL is persisted, so later steps of the flow keep working once the
+ * query param is gone.
+ */
+export declare function resolvePendingPlanType(search: string): PlanType | null;

package/src/app/generic/hooks/useOnlineStatus.d.ts

@@ -1,5 +1,5 @@
 export declare function useOnlineStatus(): {
     isOnline: boolean;
-    networkStatus: "online" | "offline" | "checking";
+    networkStatus: "offline" | "online" | "checking";
     isChecking: boolean;
 };

package/src/app/inbox/components/Shared/MobileChatDetailsSlider.d.ts

@@ -8,6 +8,7 @@ type MobileChatDetailsSliderProps = {
 };
 /**
  * Side-by-side chat/details pager with follow-the-finger drag.
+ * Pane order is always [chat | details] in physical LTR space.
  * Edge chevron buttons remain for one-tap navigation.
  */
 export declare const MobileChatDetailsSlider: ({ showDetails, onShowDetailsChange, rtl, chat, details, }: MobileChatDetailsSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/app/inbox/components/Shared/MobileDetailsSwipeHint.d.ts

@@ -5,5 +5,5 @@ type MobileDetailsSwipeHintProps = {
     direction?: 'toDetails' | 'toChat';
 };
 /** Edge affordance for mobile chat ↔ details swipe navigation. */
-export declare const MobileDetailsSwipeHint: ({ rtl, onClick, direction, }: MobileDetailsSwipeHintProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MobileDetailsSwipeHint: ({ onClick, direction, }: MobileDetailsSwipeHintProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/app/resources/components/ListResources/Utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TFunction } from "i18next";
 import { Row, Action } from "@bcrumbs.net/bc-ui";
 import { ResourceDefinition } from "../../config";

package/src/app/subscriptions/utils/estimateUpgradeProration.d.ts

@@ -0,0 +1,19 @@
+import { PlanType, Term } from '../../../graphql.billing.autogenerated';
+export type UpgradeProrationEstimate = {
+    newPlanPrice: number;
+    remainingValue: number;
+    chargeAmount: number;
+    remainingDays: number;
+};
+/**
+ * Estimates Polar-style mid-cycle upgrade charge:
+ * (newPeriodPrice − currentPeriodPrice) × remainingFraction, floored at 0.
+ */
+export declare function estimateUpgradeProration(params: {
+    currentPlanType: PlanType;
+    currentTerm: Term;
+    targetPlanType: PlanType;
+    targetTerm: Term;
+    startDate?: string | null;
+    endDate?: string | null;
+}): UpgradeProrationEstimate | null;