@bcrumbs.net/inbox 0.0.60 → 0.0.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bcrumbs.net/inbox",
   "description": "Inbox widget for Bread Crumbs portals",
-  "version": "0.0.60",
+  "version": "0.0.63",
   "keyword": [
     "bcrumbs",
     "bc-ui",
@@ -24,9 +24,9 @@
     "graphql": "15.4.0"
   },
   "dependencies": {
-    "@bcrumbs.net/bc-shared": "^0.0.10",
-    "@bcrumbs.net/bc-ui": "^0.0.15",
-    "@bcrumbs.net/bc-api": "^0.0.47",
+    "@bcrumbs.net/bc-shared": "^0.0.11",
+    "@bcrumbs.net/bc-ui": "^0.0.16",
+    "@bcrumbs.net/bc-api": "^0.0.49",
     "@azure/storage-blob": "^12.25.0"
   },
   "module": "./index.esm.js",

package/playwright.config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;

package/src/app/ai/components/Crumby/CrumbyComposer.d.ts

@@ -1,3 +1,3 @@
-/** Single-line composer for the Crumby floating chat (distinct from the playground Composer). */
+/** Auto-growing composer for the Crumby floating chat (distinct from the playground Composer). */
 declare const CrumbyComposer: () => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CrumbyComposer;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
+    variant?: "outline" | "default" | "ghost" | null | undefined;
     size?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

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

@@ -1,2 +1,6 @@
-declare const ThreadMessages: () => import("@emotion/react/jsx-runtime").JSX.Element;
+type ThreadMessagesProps = {
+    /** Overrides the container padding (defaults to 24px) when the parent already provides some (e.g. Crumby ChatView surface). */
+    padding?: string;
+};
+declare const ThreadMessages: ({ padding }: ThreadMessagesProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ThreadMessages;

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

@@ -5,11 +5,11 @@ export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
     side?: "top" | "bottom" | "left" | "right";
 };
 export declare const TooltipIconButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
+    variant?: "outline" | "default" | "ghost" | null | undefined;
     size?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
     asChild?: boolean | undefined;
 }, "ref"> & {
     tooltip: string;
-    side?: "left" | "right" | "bottom" | "top" | undefined;
+    side?: "bottom" | "left" | "right" | "top" | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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/UserAvatar/AccountSettingsDropdown.d.ts

@@ -1,13 +1,11 @@
-import { DropdownListItemType, DropdownListItemValue } from '@bcrumbs.net/bc-ui';
+import { ActionItem } from '@bcrumbs.net/bc-ui';
 import { PropsWithChildren } from 'react';
 export type AccountSettingsProps = {
     url?: string;
     text?: string;
-    color?: string;
-    itemClicked: (e: DropdownListItemValue) => void;
-    itemsList: DropdownListItemType[];
+    actions: ActionItem[];
     dataTestid?: string;
     userInfo?: any;
     isMobile?: boolean;
 };
-export declare function AccountSettingsDropdown({ url, itemsList, itemClicked, text, color, dataTestid, userInfo, isMobile, }: PropsWithChildren<AccountSettingsProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function AccountSettingsDropdown({ url, actions, text, dataTestid, userInfo, isMobile, }: PropsWithChildren<AccountSettingsProps>): import("@emotion/react/jsx-runtime").JSX.Element;

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/hooks/useRoles.d.ts

@@ -1,4 +1,5 @@
 import { Role } from '@bcrumbs.net/bc-shared';
+/** Reads the workspace role persisted by withMe (no extra me GraphQL query). */
 export declare const useRoles: () => {
     role: Role | undefined;
     has: (checkRole: Role) => boolean;