@mdxui/cockpit 0.2.0 → 6.0.1

package/dist/developer/index.d.ts

@@ -1,4 +1,4 @@
-export { useAuth } from '@workos-inc/authkit-react';
+export { useAuth } from '@mdxui/auth';
 import { Theme } from '@mdxui/themes';
 export { Theme, ThemeMode, ThemePreset, ThemeScript, ThemeState, ThemeStore, applyThemeToElement, getResolvedMode, getThemeCSS, getThemeScriptContent, isThemePreset, themeCSS, themeNames, themePresets, useThemeStore } from '@mdxui/themes';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -7,7 +7,7 @@ import { ChartConfig } from '@mdxui/primitives/chart';
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
-import { SettingsProps, APIKeysProps, TeamProps, BillingProps } from 'mdxui';
+import { SettingsProps, APIKeysProps, TeamProps, BillingProps, DeveloperDashboardProps as DeveloperDashboardProps$1 } from 'mdxui';
 import * as platform_do from 'platform.do';
 import { $Context } from 'platform.do';
 
@@ -480,7 +480,7 @@ interface UserProfileProps {
  * @example
  * ```tsx
  * <UserProfile
- *   user={{ name: 'John Doe', email: 'john@example.com' }}
+ *   user={{ name: 'John Doe', email: 'john@example.com.ai' }}
  *   onUpdate={(data) => console.log(data)}
  * />
  * ```
@@ -541,6 +541,31 @@ declare function TeamManager({ workspace, allowInvite, allowRoleChange, allowRem
  */
 declare function Billing({ customer, showInvoices, showPaymentMethods, showUsage, subscription: initialSubscription, }: BillingProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Custom route definition for extending the dashboard with additional pages.
+ * Allows consumers to add their own pages without modifying the cockpit package.
+ */
+interface CustomRoute {
+    /** URL path (e.g., '/pipeline', '/analytics') */
+    path: string;
+    /** Display label in sidebar navigation */
+    label: string;
+    /** Lucide icon component for sidebar */
+    icon?: LucideIcon;
+    /** React element to render for this route */
+    element: ReactNode;
+    /**
+     * Navigation group placement:
+     * - 'main' (default): Primary navigation section
+     * - 'secondary': Below main nav, before settings
+     * - 'admin': Admin/settings section at bottom
+     */
+    group?: 'main' | 'secondary' | 'admin';
+    /** Sort order within group (lower = higher in list) */
+    order?: number;
+    /** Make this route the index/home page */
+    index?: boolean;
+}
 interface DashboardRoutes {
     overview?: boolean;
     requests?: boolean;
@@ -600,6 +625,11 @@ interface DashboardConfig {
     basePath?: string;
     branding?: DashboardBranding;
     routes?: DashboardRoutes;
+    /**
+     * Custom routes to add to the dashboard.
+     * These will be rendered alongside built-in routes and appear in sidebar navigation.
+     */
+    customRoutes?: CustomRoute[];
     theme?: DashboardTheme;
     /** Identity provider configuration for authentication and user management */
     identity: DashboardIdentity;
@@ -620,14 +650,33 @@ interface DashboardContextValue {
         debug?: boolean;
     };
     routes: Required<DashboardRoutes>;
+    customRoutes: CustomRoute[];
     basePath: string;
 }
 declare function useDashboard(): DashboardContextValue;
 declare function useRoutes(): Required<DashboardRoutes>;
+declare function useCustomRoutes(): CustomRoute[];
 
-interface DeveloperDashboardProps {
+/**
+ * Props for DeveloperDashboard - supports both mdxui interface and legacy config.
+ *
+ * Option 1: mdxui interface (recommended for new code)
+ * ```tsx
+ * <DeveloperDashboard
+ *   identity={{ clientId: 'xxx' }}
+ *   routes={{ webhooks: true, billing: false }}
+ *   customRoutes={[{ path: '/analytics', label: 'Analytics', element: <Analytics /> }]}
+ * />
+ * ```
+ *
+ * Option 2: Legacy config object
+ * ```tsx
+ * <DeveloperDashboard config={{ identity: { clientId: 'xxx' }, routes: {...} }} />
+ * ```
+ */
+type DeveloperDashboardProps = DeveloperDashboardProps$1 | {
     config: DashboardConfig;
-}
+};
 /**
  * Main dashboard component that wraps everything with necessary providers
  * and renders the dashboard routes.
@@ -638,16 +687,129 @@ interface DeveloperDashboardProps {
  * - SDKInitializer - Platform SDK setup
  * - IdentityProvider - WorkOS AuthKit + Widgets
  * - QueryProvider - TanStack Query + Auth sync
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DeveloperDashboard
+ *   identity={{ clientId: 'xxx' }}
+ * />
+ * ```
+ *
+ * @example With custom routes
+ * ```tsx
+ * <DeveloperDashboard
+ *   identity={{ clientId: 'xxx' }}
+ *   routes={{ webhooks: true, billing: false }}
+ *   customRoutes={[
+ *     { path: '/analytics', label: 'Analytics', icon: 'BarChart3', element: <AnalyticsPage /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Hide built-in routes
+ * ```tsx
+ * <DeveloperDashboard
+ *   identity={{ clientId: 'xxx' }}
+ *   routes={{ billing: false, team: false }}
+ * />
+ * ```
  */
-declare function DeveloperDashboard({ config }: DeveloperDashboardProps): react_jsx_runtime.JSX.Element;
+declare function DeveloperDashboard(props: DeveloperDashboardProps): react_jsx_runtime.JSX.Element;
 
-declare function BillingPage(): react_jsx_runtime.JSX.Element;
+declare const mockBillingData: {
+    plan: string;
+    planPrice: number;
+    planFeatures: string[];
+    status: "active";
+    renewalDate: string;
+    totalSpend: number;
+    usageBreakdown: {
+        resource: string;
+        usage: number;
+        limit: number;
+        unit: string;
+        cost: number;
+    }[];
+    invoices: {
+        id: string;
+        invoiceNumber: string;
+        date: string;
+        amount: number;
+        status: "paid";
+    }[];
+    paymentMethod: {
+        type: "card";
+        brand: string;
+        last4: string;
+        expiryMonth: number;
+        expiryYear: number;
+    };
+    billingAlerts: {
+        enabled: boolean;
+        threshold: number;
+    };
+};
+interface WebhookEndpoint {
+    id: string;
+    url: string;
+    events: string[];
+    lastDelivery: string | null;
+    status: "active" | "disabled";
+    secret: string;
+    createdAt: string;
+    failureCount: number;
+}
+
+type BillingData = typeof mockBillingData;
+interface BillingPageProps {
+    /** Billing data - uses mock data if not provided */
+    billingData?: BillingData;
+    /** Callback when "Manage Plan" is clicked */
+    onManagePlan?: () => Promise<void>;
+    /** Callback when "Update" payment method is clicked */
+    onUpdatePaymentMethod?: () => Promise<void>;
+    /** Callback when an invoice is downloaded */
+    onDownloadInvoice?: (invoiceId: string) => Promise<void>;
+    /** Callback when billing alerts are toggled */
+    onToggleAlerts?: (enabled: boolean) => Promise<void>;
+    /** Hide the header with sidebar trigger and breadcrumb */
+    hideHeader?: boolean;
+    /** Additional CSS class for the container */
+    className?: string;
+}
+declare function BillingPage({ billingData: initialBillingData, onManagePlan, onUpdatePaymentMethod, onDownloadInvoice, onToggleAlerts, hideHeader, className, }?: BillingPageProps): react_jsx_runtime.JSX.Element;
 
 declare function DatabasePage(): react_jsx_runtime.JSX.Element;
 
 declare function IntegrationsPage(): react_jsx_runtime.JSX.Element;
 
-declare function KeysPage(): react_jsx_runtime.JSX.Element;
+type ApiKeyStatus = 'active' | 'expiring' | 'never_used';
+type ApiKey = {
+    id: string;
+    name: string;
+    key: string;
+    created: string;
+    lastUsed: string | null;
+    status: ApiKeyStatus;
+};
+interface KeysPageProps {
+    /** Initial keys data - uses mock data if not provided */
+    keys?: ApiKey[];
+    /** Callback when a key is created - if not provided, uses internal mock */
+    onCreateKey?: (name: string) => Promise<{
+        id: string;
+        key: string;
+    }>;
+    /** Callback when a key is revoked - if not provided, uses internal mock */
+    onRevokeKey?: (keyId: string) => Promise<void>;
+    /** Callback when a key is renamed - if not provided, uses internal mock */
+    onRenameKey?: (keyId: string, newName: string) => Promise<void>;
+    /** Hide the header with sidebar trigger and breadcrumb */
+    hideHeader?: boolean;
+    /** Additional CSS class for the container */
+    className?: string;
+}
+declare function KeysPage({ keys: initialKeys, onCreateKey, onRevokeKey, onRenameKey, hideHeader, className, }?: KeysPageProps): react_jsx_runtime.JSX.Element;
 
 declare function OverviewPage(): react_jsx_runtime.JSX.Element;
 
@@ -659,18 +821,370 @@ declare function SettingsSecurityPage(): react_jsx_runtime.JSX.Element;
 
 declare function SettingsSessionsPage(): react_jsx_runtime.JSX.Element;
 
-declare function TeamPage(): react_jsx_runtime.JSX.Element;
+interface TeamPageProps {
+    /** Whether to use mock widgets instead of real WorkOS widgets */
+    useMockWidgets?: boolean;
+    /** Hide the header with sidebar trigger and breadcrumb */
+    hideHeader?: boolean;
+    /** Additional CSS class for the container */
+    className?: string;
+}
+declare function TeamPage({ useMockWidgets: useMockWidgetsProp, hideHeader, className, }?: TeamPageProps): react_jsx_runtime.JSX.Element;
 
 declare function VaultPage(): react_jsx_runtime.JSX.Element;
 
 declare function WebhooksActivityPage(): react_jsx_runtime.JSX.Element;
 
-declare function WebhooksEndpointsPage(): react_jsx_runtime.JSX.Element;
+interface WebhooksEndpointsPageProps {
+    /** Initial endpoints data - uses mock data if not provided */
+    endpoints?: WebhookEndpoint[];
+    /** Callback when an endpoint is created */
+    onCreateEndpoint?: (data: {
+        url: string;
+        events: string[];
+        enabled: boolean;
+    }) => Promise<{
+        id: string;
+        secret: string;
+    }>;
+    /** Callback when an endpoint is updated */
+    onUpdateEndpoint?: (id: string, data: {
+        url: string;
+        events: string[];
+        enabled: boolean;
+    }) => Promise<void>;
+    /** Callback when an endpoint is deleted */
+    onDeleteEndpoint?: (id: string) => Promise<void>;
+    /** Hide the header with sidebar trigger and breadcrumb */
+    hideHeader?: boolean;
+    /** Additional CSS class for the container */
+    className?: string;
+}
+declare function WebhooksEndpointsPage({ endpoints: initialEndpoints, onCreateEndpoint, onUpdateEndpoint, onDeleteEndpoint, hideHeader, className, }?: WebhooksEndpointsPageProps): react_jsx_runtime.JSX.Element;
 
 declare function WebhooksEventCatalogPage(): react_jsx_runtime.JSX.Element;
 
 declare function WebhooksLogsPage(): react_jsx_runtime.JSX.Element;
 
+/**
+ * Configuration for standalone components.
+ * Lighter weight than full DashboardConfig - no auth or routing required.
+ */
+interface StandaloneConfig {
+    /** Theme configuration */
+    theme?: {
+        /** Theme preset name */
+        preset?: Theme;
+        /** Color mode */
+        mode?: 'light' | 'dark' | 'system';
+        /** Custom CSS variable overrides */
+        custom?: Record<string, string>;
+    };
+    /** Base path for internal links (optional) */
+    basePath?: string;
+}
+interface StandaloneProviderProps {
+    /** Configuration options */
+    config?: StandaloneConfig;
+    /** Children components */
+    children: ReactNode;
+}
+/**
+ * Lightweight provider for standalone page components.
+ *
+ * Use this when you want to embed individual cockpit pages
+ * (APIKeys, Webhooks, Billing, etc.) in your own app shell
+ * without the full DeveloperDashboard.
+ *
+ * Does NOT include:
+ * - Authentication (you handle this)
+ * - Routing (you handle this)
+ * - Dashboard layout/sidebar (you provide your own)
+ *
+ * DOES include:
+ * - Theme provider (light/dark mode)
+ * - Theme preset application
+ * - Custom CSS variable support
+ *
+ * @example
+ * ```tsx
+ * import { StandaloneProvider, StandaloneAPIKeys } from '@mdxui/cockpit'
+ *
+ * function MyApp() {
+ *   return (
+ *     <StandaloneProvider config={{ theme: { preset: 'stripe', mode: 'dark' } }}>
+ *       <MyAppShell>
+ *         <StandaloneAPIKeys
+ *           onCreateKey={createKey}
+ *           onRevokeKey={revokeKey}
+ *         />
+ *       </MyAppShell>
+ *     </StandaloneProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function StandaloneProvider({ config, children }: StandaloneProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for standalone API Keys component.
+ */
+interface StandaloneAPIKeysProps {
+    /** Initial API keys data (uses mock data if not provided) */
+    keys?: ApiKey[];
+    /** Callback when a new key is created */
+    onCreateKey?: (name: string) => Promise<{
+        id: string;
+        key: string;
+    }>;
+    /** Callback when a key is revoked */
+    onRevokeKey?: (keyId: string) => Promise<void>;
+    /** Callback when a key is renamed */
+    onRenameKey?: (keyId: string, newName: string) => Promise<void>;
+    /** Hide the page header/breadcrumb (default: true for standalone) */
+    hideHeader?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Standalone API Keys management component.
+ *
+ * Use this component to embed API key management in your own app shell
+ * without requiring the full DeveloperDashboard.
+ *
+ * @example Basic usage (uses mock data)
+ * ```tsx
+ * import { StandaloneProvider, StandaloneAPIKeys } from '@mdxui/cockpit'
+ *
+ * function MySettings() {
+ *   return (
+ *     <StandaloneProvider>
+ *       <StandaloneAPIKeys />
+ *     </StandaloneProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example With real backend integration
+ * ```tsx
+ * <StandaloneAPIKeys
+ *   keys={myKeys}
+ *   onCreateKey={async (name) => {
+ *     const result = await api.createKey(name)
+ *     return { id: result.id, key: result.secretKey }
+ *   }}
+ *   onRevokeKey={async (keyId) => {
+ *     await api.revokeKey(keyId)
+ *   }}
+ *   onRenameKey={async (keyId, newName) => {
+ *     await api.renameKey(keyId, newName)
+ *   }}
+ * />
+ * ```
+ */
+declare function StandaloneAPIKeys({ keys, onCreateKey, onRevokeKey, onRenameKey, hideHeader, className, }: StandaloneAPIKeysProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for standalone Webhooks component.
+ */
+interface StandaloneWebhooksProps {
+    /** Initial endpoints data (uses mock data if not provided) */
+    endpoints?: WebhookEndpoint[];
+    /** Callback when an endpoint is created */
+    onCreateEndpoint?: (data: {
+        url: string;
+        events: string[];
+        enabled: boolean;
+    }) => Promise<{
+        id: string;
+        secret: string;
+    }>;
+    /** Callback when an endpoint is updated */
+    onUpdateEndpoint?: (id: string, data: {
+        url: string;
+        events: string[];
+        enabled: boolean;
+    }) => Promise<void>;
+    /** Callback when an endpoint is deleted */
+    onDeleteEndpoint?: (id: string) => Promise<void>;
+    /** Hide the page header/breadcrumb (default: true for standalone) */
+    hideHeader?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Standalone Webhooks management component.
+ *
+ * Use this component to embed webhook management in your own app shell
+ * without requiring the full DeveloperDashboard.
+ *
+ * @example Basic usage (uses mock data)
+ * ```tsx
+ * import { StandaloneProvider, StandaloneWebhooks } from '@mdxui/cockpit'
+ *
+ * function MySettings() {
+ *   return (
+ *     <StandaloneProvider>
+ *       <StandaloneWebhooks />
+ *     </StandaloneProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example With real backend integration
+ * ```tsx
+ * <StandaloneWebhooks
+ *   endpoints={myEndpoints}
+ *   onCreateEndpoint={async (data) => {
+ *     const result = await api.createWebhook(data)
+ *     return { id: result.id, secret: result.secret }
+ *   }}
+ *   onUpdateEndpoint={async (id, data) => {
+ *     await api.updateWebhook(id, data)
+ *   }}
+ *   onDeleteEndpoint={async (id) => {
+ *     await api.deleteWebhook(id)
+ *   }}
+ * />
+ * ```
+ */
+declare function StandaloneWebhooks({ endpoints, onCreateEndpoint, onUpdateEndpoint, onDeleteEndpoint, hideHeader, className, }: StandaloneWebhooksProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for standalone Billing component.
+ */
+interface StandaloneBillingProps {
+    /** Billing data (uses mock data if not provided) */
+    billingData?: BillingData;
+    /** Callback when "Manage Plan" is clicked */
+    onManagePlan?: () => Promise<void>;
+    /** Callback when "Update" payment method is clicked */
+    onUpdatePaymentMethod?: () => Promise<void>;
+    /** Callback when an invoice is downloaded */
+    onDownloadInvoice?: (invoiceId: string) => Promise<void>;
+    /** Callback when billing alerts are toggled */
+    onToggleAlerts?: (enabled: boolean) => Promise<void>;
+    /** Hide the page header/breadcrumb (default: true for standalone) */
+    hideHeader?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Standalone Billing management component.
+ *
+ * Use this component to embed billing management in your own app shell
+ * without requiring the full DeveloperDashboard.
+ *
+ * @example Basic usage (uses mock data)
+ * ```tsx
+ * import { StandaloneProvider, StandaloneBilling } from '@mdxui/cockpit'
+ *
+ * function MySettings() {
+ *   return (
+ *     <StandaloneProvider>
+ *       <StandaloneBilling />
+ *     </StandaloneProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example With real backend integration
+ * ```tsx
+ * <StandaloneBilling
+ *   billingData={myBillingData}
+ *   onManagePlan={async () => {
+ *     const url = await createBillingPortalSession()
+ *     window.location.href = url
+ *   }}
+ *   onDownloadInvoice={async (invoiceId) => {
+ *     const url = await api.getInvoiceDownloadUrl(invoiceId)
+ *     window.open(url, '_blank')
+ *   }}
+ * />
+ * ```
+ */
+declare function StandaloneBilling({ billingData, onManagePlan, onUpdatePaymentMethod, onDownloadInvoice, onToggleAlerts, hideHeader, className, }: StandaloneBillingProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for standalone Team component.
+ */
+interface StandaloneTeamProps {
+    /** Whether to use mock widgets instead of real WorkOS widgets */
+    useMockWidgets?: boolean;
+    /** Hide the page header/breadcrumb (default: true for standalone) */
+    hideHeader?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Standalone Team management component.
+ *
+ * Use this component to embed team management in your own app shell
+ * without requiring the full DeveloperDashboard.
+ *
+ * NOTE: This component uses WorkOS widgets for team management.
+ * You need to wrap your app with IdentityProvider from @mdxui/auth
+ * for the real widgets to work. Use useMockWidgets={true} for demo/testing.
+ *
+ * @example Basic usage (uses mock widgets)
+ * ```tsx
+ * import { StandaloneProvider, StandaloneTeam } from '@mdxui/cockpit'
+ *
+ * function MySettings() {
+ *   return (
+ *     <StandaloneProvider>
+ *       <StandaloneTeam useMockWidgets />
+ *     </StandaloneProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example With WorkOS integration
+ * ```tsx
+ * import { IdentityProvider } from '@mdxui/auth'
+ * import { StandaloneProvider, StandaloneTeam } from '@mdxui/cockpit'
+ *
+ * function MySettings() {
+ *   return (
+ *     <IdentityProvider clientId="your-client-id">
+ *       <StandaloneProvider>
+ *         <StandaloneTeam />
+ *       </StandaloneProvider>
+ *     </IdentityProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function StandaloneTeam({ useMockWidgets, hideHeader, className, }: StandaloneTeamProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Maps a Lucide icon name string to the actual icon component.
+ * Used to convert mdxui's string-based icon references to LucideIcon components.
+ *
+ * @example
+ * ```ts
+ * const icon = getIconByName('BarChart3') // returns BarChart3 component
+ * const icon = getIconByName('Settings')  // returns Settings component
+ * ```
+ */
+declare function getIconByName(name: string): LucideIcon | undefined;
+/**
+ * Common dashboard icons for quick reference.
+ * These are the icons most commonly used in DeveloperDashboard navigation.
+ */
+declare const dashboardIcons: {
+    readonly overview: "BarChart3";
+    readonly requests: "Activity";
+    readonly keys: "Key";
+    readonly team: "Users";
+    readonly billing: "CreditCard";
+    readonly settings: "Settings";
+    readonly webhooks: "Webhook";
+    readonly database: "Database";
+    readonly integrations: "Puzzle";
+    readonly vault: "Lock";
+};
+
 /**
  * SDK instance type - the $ proxy with all platform methods
  */
@@ -761,4 +1275,4 @@ declare function testSDKConnection(): Promise<{
     result?: undefined;
 }>;
 
-export { APIKeyManager, ActivityFeed, type ActivityFeedProps, type ActivityItem, AreaChart, type AreaChartProps, BarChart, type BarChartProps, Billing, BillingPage, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type DashboardBranding, type DashboardConfig, DashboardGrid, DashboardGridItem, type DashboardGridItemProps, type DashboardGridProps, type DashboardIdentity, DashboardLayout, type DashboardRoutes, type DashboardTheme, DataTable, type DataTableProps, DatabasePage, DeveloperDashboard, IntegrationsPage, JsonViewer, KPICard, type KPICardProps, KeysPage, LandingPage, LineChart, type LineChartProps, MockAuthenticationFactors, MockUserProfile, MockUserSessions, MockUsersManagement, type NavItem, NavMain, NavUser, OverviewPage, RequestsPage, SettingsPage, SettingsProfilePage, SettingsSecurityPage, SettingsSessionsPage, SidebarAd, SortableHeader, StatusBadge, StatusDot, TeamManager, TeamPage, TeamSwitcher, UserProfile, VaultDeleteDialog, VaultEmptyState, VaultInputModal, VaultItemCard, VaultList, VaultPage, WebhooksActivityPage, WebhooksEndpointsPage, WebhooksEventCatalogPage, WebhooksLogsPage, getAuthToken, getDebugStatus, getEffectiveToken, getSDK, isAuthenticated, isDebugMode, setDebugMode, setDevToken, testSDKConnection, useCommandPalette, useDashboard, useRoutes };
+export { APIKeyManager, ActivityFeed, type ActivityFeedProps, type ActivityItem, AreaChart, type AreaChartProps, BarChart, type BarChartProps, Billing, BillingPage, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type CustomRoute, type DashboardBranding, type DashboardConfig, DashboardGrid, DashboardGridItem, type DashboardGridItemProps, type DashboardGridProps, type DashboardIdentity, DashboardLayout, type DashboardRoutes, type DashboardTheme, DataTable, type DataTableProps, DatabasePage, DeveloperDashboard, type DeveloperDashboardProps, IntegrationsPage, JsonViewer, KPICard, type KPICardProps, KeysPage, LandingPage, LineChart, type LineChartProps, MockAuthenticationFactors, MockUserProfile, MockUserSessions, MockUsersManagement, type NavItem, NavMain, NavUser, OverviewPage, RequestsPage, SettingsPage, SettingsProfilePage, SettingsSecurityPage, SettingsSessionsPage, SidebarAd, SortableHeader, StandaloneAPIKeys, type StandaloneAPIKeysProps, StandaloneBilling, type StandaloneBillingProps, type StandaloneConfig, StandaloneProvider, StandaloneTeam, type StandaloneTeamProps, StandaloneWebhooks, type StandaloneWebhooksProps, StatusBadge, StatusDot, TeamManager, TeamPage, TeamSwitcher, UserProfile, VaultDeleteDialog, VaultEmptyState, VaultInputModal, VaultItemCard, VaultList, VaultPage, WebhooksActivityPage, WebhooksEndpointsPage, WebhooksEventCatalogPage, WebhooksLogsPage, dashboardIcons, getAuthToken, getDebugStatus, getEffectiveToken, getIconByName, getSDK, isAuthenticated, isDebugMode, setDebugMode, setDevToken, testSDKConnection, useCommandPalette, useCustomRoutes, useDashboard, useRoutes };