@mdxui/auth 1.1.1 → 1.4.1

package/dist/index.js

@@ -125,6 +125,7 @@ function IdentityProviderMinimal({
 }
 
 // src/providers/auth-gate.tsx
+import { useEffect as useEffect2, useRef } from "react";
 import { useAuth } from "@workos-inc/authkit-react";
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function DefaultLoadingComponent() {
@@ -157,7 +158,19 @@ function AuthGate({
   onUnauthenticated = "landing",
   redirectUrl
 }) {
-  const { user, isLoading } = useAuth();
+  const { user, isLoading, signIn } = useAuth();
+  const signInCalled = useRef(false);
+  useEffect2(() => {
+    if (onUnauthenticated === "signIn" && !isLoading && !user && !signInCalled.current) {
+      signInCalled.current = true;
+      signIn();
+    }
+  }, [onUnauthenticated, isLoading, user, signIn]);
+  useEffect2(() => {
+    if (user) {
+      signInCalled.current = false;
+    }
+  }, [user]);
   if (!required) {
     return /* @__PURE__ */ jsx3(Fragment, { children });
   }
@@ -168,6 +181,8 @@ function AuthGate({
     return /* @__PURE__ */ jsx3(Fragment, { children });
   }
   switch (onUnauthenticated) {
+    case "signIn":
+      return /* @__PURE__ */ jsx3(Fragment, { children: loadingComponent ?? /* @__PURE__ */ jsx3(DefaultLoadingComponent, {}) });
     case "redirect":
       if (redirectUrl && typeof window !== "undefined") {
         window.location.href = redirectUrl;
@@ -1142,7 +1157,7 @@ function TeamSwitcher({
 import { useAuth as useAuth6 } from "@workos-inc/authkit-react";
 
 // src/hooks/use-widget-token.ts
-import { useCallback, useEffect as useEffect3, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState6 } from "react";
 function useWidgetToken({
   widget,
   organizationId,
@@ -1171,7 +1186,7 @@ function useWidgetToken({
       setLoading(false);
     }
   }, [widget, organizationId, endpoint]);
-  useEffect3(() => {
+  useEffect4(() => {
     fetchToken();
   }, [fetchToken]);
   return { token, loading, error, refetch: fetchToken };
@@ -1308,7 +1323,7 @@ var IdentityProviderPropsSchema = z4.object({
   redirectUri: z4.string().url().optional().describe("Redirect URI after authentication")
   /** Note: onRedirectCallback and children are React-specific, not in schema */
 });
-var UnauthenticatedActionSchema = z4.enum(["landing", "redirect", "allow"]);
+var UnauthenticatedActionSchema = z4.enum(["landing", "redirect", "allow", "signIn"]);
 var AuthGatePropsSchema = z4.object({
   /** Whether authentication is required (default: true) */
   required: z4.boolean().optional().describe("Whether authentication is required"),
@@ -1366,29 +1381,790 @@ var UseWidgetTokenResultSchema = z5.object({
   error: z5.string().nullable().describe("Error message if fetch failed")
   /** Note: refetch function is React-specific, not in schema */
 });
+
+// src/shell/config-context.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo4 } from "react";
+
+// src/shell/route-presets.ts
+import { Key as Key3, Monitor, Plug, Shield, User, Users } from "lucide-react";
+
+// src/shell/components/breadcrumbs.tsx
+import { WebLink } from "@mdxui/navigation/web";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@mdxui/primitives/breadcrumb";
+import {
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@mdxui/primitives/dropdown-menu";
+import * as React3 from "react";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+function DefaultLink({ href, children, className }) {
+  return /* @__PURE__ */ jsx23(WebLink, { to: href, className, children });
+}
+function Breadcrumbs({
+  items,
+  LinkComponent = DefaultLink,
+  className,
+  maxItems = 4,
+  separator
+}) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const shouldCollapse = items.length > maxItems;
+  const visibleItems = shouldCollapse ? [items[0], ...items.slice(-(maxItems - 1))] : items;
+  const hiddenItems = shouldCollapse ? items.slice(1, -(maxItems - 1)) : [];
+  return /* @__PURE__ */ jsx23(Breadcrumb, { className, children: /* @__PURE__ */ jsx23(BreadcrumbList, { children: visibleItems.map((item, index) => {
+    const isLast = index === visibleItems.length - 1;
+    const isFirst = index === 0;
+    if (shouldCollapse && isFirst) {
+      return /* @__PURE__ */ jsxs10(React3.Fragment, { children: [
+        /* @__PURE__ */ jsx23(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsx23(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx23(LinkComponent, { href: item.href, children: item.label }) }) : /* @__PURE__ */ jsx23(BreadcrumbPage, { children: item.label }) }),
+        /* @__PURE__ */ jsx23(BreadcrumbSeparator, { children: separator }),
+        /* @__PURE__ */ jsx23(BreadcrumbItem, { children: /* @__PURE__ */ jsxs10(DropdownMenu2, { children: [
+          /* @__PURE__ */ jsx23(
+            DropdownMenuTrigger2,
+            {
+              className: "flex items-center gap-1 hover:text-foreground",
+              "aria-label": "Show hidden breadcrumbs",
+              children: /* @__PURE__ */ jsx23(BreadcrumbEllipsis, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx23(DropdownMenuContent2, { align: "start", children: hiddenItems.map((hiddenItem) => /* @__PURE__ */ jsx23(DropdownMenuItem2, { asChild: true, children: /* @__PURE__ */ jsx23(LinkComponent, { href: hiddenItem.href || "#", children: hiddenItem.label }) }, hiddenItem.label)) })
+        ] }) }),
+        /* @__PURE__ */ jsx23(BreadcrumbSeparator, { children: separator })
+      ] }, item.label);
+    }
+    return /* @__PURE__ */ jsxs10(React3.Fragment, { children: [
+      /* @__PURE__ */ jsx23(BreadcrumbItem, { children: isLast ? /* @__PURE__ */ jsx23(BreadcrumbPage, { children: item.label }) : item.href ? /* @__PURE__ */ jsx23(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx23(LinkComponent, { href: item.href, children: item.label }) }) : /* @__PURE__ */ jsx23(BreadcrumbPage, { children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsx23(BreadcrumbSeparator, { children: separator })
+    ] }, item.label);
+  }) }) });
+}
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/shell/components/sidebar-org-switcher.tsx
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+function SidebarOrgSwitcher() {
+  const branding = useAuthShellBranding();
+  return /* @__PURE__ */ jsx24(
+    TeamSwitcher,
+    {
+      renderNoOrganization: () => /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-2", children: [
+        branding.logo && /* @__PURE__ */ jsx24("div", { className: "flex-shrink-0", children: branding.logo }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5 leading-none", children: [
+          /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: branding.name }),
+          branding.tagline && /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: branding.tagline })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/shell/components/widget-error-boundary.tsx
+import { Component } from "react";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+var widgetErrorMessages = {
+  profile: "Your profile is camera shy right now...",
+  security: "Security settings are being extra secure (maybe too secure)...",
+  sessions: "Your sessions are having a session of their own...",
+  "api-keys": "Your API keys are playing hide and seek...",
+  team: "Your team members wandered off for a moment...",
+  integrations: "Your integrations are having connection issues (ironic, we know)..."
+};
+var uppercaseWords = /* @__PURE__ */ new Set(["api", "sso", "mfa", "oauth", "jwt", "url", "id"]);
+function formatWidgetName(widgetName) {
+  return widgetName.split("-").map((word) => {
+    const lower = word.toLowerCase();
+    if (uppercaseWords.has(lower)) {
+      return word.toUpperCase();
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  }).join(" ");
+}
+function getErrorMessage(widgetName) {
+  if (!widgetName) {
+    return "Something went wrong loading this widget.";
+  }
+  const knownMessage = widgetErrorMessages[widgetName];
+  if (knownMessage) {
+    return knownMessage;
+  }
+  return `Something went wrong loading your ${formatWidgetName(widgetName)}...`;
+}
+var WidgetErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[WidgetErrorBoundary] Widget error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      const message = getErrorMessage(this.props.widgetName);
+      return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center gap-2 rounded-[var(--radius-md)] border border-dashed py-12", children: [
+        /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground text-sm", children: message }),
+        /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground/60 text-xs", children: "Try refreshing the page." })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/shell/pages/profile-page.tsx
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+function ProfilePage() {
+  const { user, getAccessToken, isLoading } = useAuth6();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs13("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx26("h1", { className: "text-2xl font-semibold tracking-tight", children: "Profile" }),
+        /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground", children: "Manage your account information" })
+      ] }),
+      /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground text-sm", children: "Please sign in to view your profile." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx26("h1", { className: "text-2xl font-semibold tracking-tight", children: "Profile" }),
+      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground", children: "Manage your account information" })
+    ] }),
+    /* @__PURE__ */ jsx26(WidgetErrorBoundary, { widgetName: "profile", children: /* @__PURE__ */ jsx26(UserProfile, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/pages/security-page.tsx
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function SecurityPage() {
+  const { user, getAccessToken, isLoading } = useAuth6();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs14("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx27("h1", { className: "text-2xl font-semibold tracking-tight", children: "Security" }),
+        /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground", children: "Manage your password and authentication settings" })
+      ] }),
+      /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your security settings." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx27("h1", { className: "text-2xl font-semibold tracking-tight", children: "Security" }),
+      /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground", children: "Manage your password and authentication settings" })
+    ] }),
+    /* @__PURE__ */ jsx27(WidgetErrorBoundary, { widgetName: "security", children: /* @__PURE__ */ jsx27(UserSecurity, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/pages/sessions-page.tsx
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+function SessionsPage() {
+  const { user, getAccessToken, isLoading } = useAuth6();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs15("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx28("h1", { className: "text-2xl font-semibold tracking-tight", children: "Sessions" }),
+        /* @__PURE__ */ jsx28("p", { className: "text-muted-foreground", children: "View and manage your active sessions" })
+      ] }),
+      /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx28("p", { className: "text-muted-foreground text-sm", children: "Please sign in to view your sessions." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs15("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx28("h1", { className: "text-2xl font-semibold tracking-tight", children: "Sessions" }),
+      /* @__PURE__ */ jsx28("p", { className: "text-muted-foreground", children: "View and manage your active sessions" })
+    ] }),
+    /* @__PURE__ */ jsx28(WidgetErrorBoundary, { widgetName: "sessions", children: /* @__PURE__ */ jsx28(UserSessions, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/pages/api-keys-page.tsx
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+function ApiKeysPage() {
+  const { user, getAccessToken, isLoading } = useAuth6();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs16("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx29("h1", { className: "text-2xl font-semibold tracking-tight", children: "API Keys" }),
+        /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: "Create and manage your API keys" })
+      ] }),
+      /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your API keys." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx29("h1", { className: "text-2xl font-semibold tracking-tight", children: "API Keys" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: "Create and manage your API keys" })
+    ] }),
+    /* @__PURE__ */ jsx29(WidgetErrorBoundary, { widgetName: "api-keys", children: /* @__PURE__ */ jsx29(ApiKeys, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/pages/team-page.tsx
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+function TeamPage() {
+  const { user, getAccessToken, isLoading, organizationId, permissions } = useAuth6();
+  const hasOrganization = !!organizationId;
+  const canManageTeam = hasOrganization && permissions?.includes("widgets:users-table:manage");
+  if (isLoading) {
+    return /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs17("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx30("h1", { className: "text-2xl font-semibold tracking-tight", children: "Team" }),
+        /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground", children: "Manage your team members and invitations" })
+      ] }),
+      /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your team." }) })
+    ] });
+  }
+  if (!hasOrganization) {
+    return /* @__PURE__ */ jsxs17("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx30("h1", { className: "text-2xl font-semibold tracking-tight", children: "Team" }),
+        /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground", children: "Manage your team members and invitations" })
+      ] }),
+      /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground text-sm", children: "You need to be part of an organization to manage team members." }) })
+    ] });
+  }
+  if (!canManageTeam) {
+    return /* @__PURE__ */ jsxs17("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx30("h1", { className: "text-2xl font-semibold tracking-tight", children: "Team" }),
+        /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground", children: "Manage your team members and invitations" })
+      ] }),
+      /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground text-sm", children: "You need admin permissions to manage team members." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs17("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx30("h1", { className: "text-2xl font-semibold tracking-tight", children: "Team" }),
+      /* @__PURE__ */ jsx30("p", { className: "text-muted-foreground", children: "Manage your team members and invitations" })
+    ] }),
+    /* @__PURE__ */ jsx30(WidgetErrorBoundary, { widgetName: "team", children: /* @__PURE__ */ jsx30(UsersManagement, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/pages/integrations-page.tsx
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+function IntegrationsPage() {
+  const { user, getAccessToken, isLoading } = useAuth6();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsxs18("div", { className: "container max-w-4xl py-8", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx31("h1", { className: "text-2xl font-semibold tracking-tight", children: "Integrations" }),
+        /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground", children: "Connect and manage third-party services" })
+      ] }),
+      /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center rounded-[var(--radius-md)] border border-dashed py-24", children: /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your integrations." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs18("div", { className: "container max-w-4xl py-8", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx31("h1", { className: "text-2xl font-semibold tracking-tight", children: "Integrations" }),
+      /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground", children: "Connect and manage third-party services" })
+    ] }),
+    /* @__PURE__ */ jsx31(WidgetErrorBoundary, { widgetName: "integrations", children: /* @__PURE__ */ jsx31(Pipes, { authToken: getAccessToken }) })
+  ] });
+}
+
+// src/shell/route-presets.ts
+var defaultGroups = [
+  { id: "main", order: 0 },
+  { id: "account", label: "Account", order: 10 },
+  { id: "developer", label: "Developer", order: 20 },
+  { id: "admin", label: "Admin", order: 30 }
+];
+var accountRoutes = [
+  {
+    key: "profile",
+    path: "/profile",
+    label: "Profile",
+    group: "account",
+    icon: User,
+    component: ProfilePage,
+    enabled: true,
+    public: false
+  },
+  {
+    key: "security",
+    path: "/security",
+    label: "Security",
+    group: "account",
+    icon: Shield,
+    component: SecurityPage,
+    enabled: true,
+    public: false
+  },
+  {
+    key: "sessions",
+    path: "/sessions",
+    label: "Sessions",
+    group: "account",
+    icon: Monitor,
+    component: SessionsPage,
+    enabled: true,
+    public: false
+  }
+];
+var developerRoutes = [
+  {
+    key: "api-keys",
+    path: "/api-keys",
+    label: "API Keys",
+    group: "developer",
+    icon: Key3,
+    component: ApiKeysPage,
+    enabled: true,
+    public: false
+  }
+];
+var adminRoutes = [
+  {
+    key: "team",
+    path: "/team",
+    label: "Team",
+    group: "admin",
+    icon: Users,
+    component: TeamPage,
+    enabled: true,
+    public: false
+  }
+];
+var integrationRoutes = [
+  {
+    key: "integrations",
+    path: "/integrations",
+    label: "Integrations",
+    group: "developer",
+    icon: Plug,
+    component: IntegrationsPage,
+    enabled: true,
+    public: false
+  }
+];
+var defaultRoutes = [
+  ...accountRoutes,
+  ...developerRoutes,
+  ...adminRoutes
+];
+
+// src/shell/config-context.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var AuthShellConfigContext = createContext2(null);
+function AuthShellConfigProvider({ config, children }) {
+  const value = useMemo4(() => {
+    const routes = config.routes ?? defaultRoutes;
+    const enabledRoutes = routes.filter((route) => route.enabled !== false);
+    const groups = [...config.groups ?? defaultGroups].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const routesByGroup = /* @__PURE__ */ new Map();
+    for (const group of groups) {
+      routesByGroup.set(group.id, []);
+    }
+    for (const route of enabledRoutes) {
+      const groupId = route.group ?? "main";
+      const groupRoutes = routesByGroup.get(groupId) ?? [];
+      groupRoutes.push(route);
+      routesByGroup.set(groupId, groupRoutes);
+    }
+    for (const [groupId, routes2] of routesByGroup) {
+      routesByGroup.set(
+        groupId,
+        routes2.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      );
+    }
+    return {
+      config,
+      routes: enabledRoutes,
+      routesByGroup,
+      groups,
+      branding: config.branding,
+      basePath: config.basePath ?? ""
+    };
+  }, [config]);
+  return /* @__PURE__ */ jsx32(AuthShellConfigContext.Provider, { value, children });
+}
+function useAuthShellConfig() {
+  const context = useContext2(AuthShellConfigContext);
+  if (!context) {
+    throw new Error("useAuthShellConfig must be used within AuthShellConfigProvider");
+  }
+  return context;
+}
+function useAuthShellRoutes() {
+  const { routes } = useAuthShellConfig();
+  return routes;
+}
+function useAuthShellRoutesByGroup() {
+  const { routesByGroup, groups } = useAuthShellConfig();
+  return { routesByGroup, groups };
+}
+function useAuthShellBranding() {
+  const { branding } = useAuthShellConfig();
+  return branding;
+}
+function useAuthShellFullPath() {
+  const { basePath } = useAuthShellConfig();
+  return useMemo4(() => {
+    return (path) => {
+      if (!basePath) return path;
+      if (path === "/") return basePath || "/";
+      return `${basePath}${path}`;
+    };
+  }, [basePath]);
+}
+
+// src/shell/auth-shell.tsx
+import { Separator } from "@mdxui/primitives/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger
+} from "@mdxui/primitives/sidebar";
+import { Toaster } from "@mdxui/primitives/sonner";
+
+// src/shell/auth-shell-nav.tsx
+import { useAuth as useAuth7 } from "@workos-inc/authkit-react";
+import { useIsActive, WebLink as WebLink2 } from "@mdxui/navigation/web";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail
+} from "@mdxui/primitives/sidebar";
+import { SidebarUser } from "@mdxui/primitives/sidebar-user";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+function NavItem({ route, getFullPath }) {
+  const fullPath = getFullPath(route.path);
+  const isActive = useIsActive(fullPath, { partial: fullPath !== "/" });
+  const Icon = route.icon;
+  return /* @__PURE__ */ jsx33(SidebarMenuItem, { children: /* @__PURE__ */ jsx33(SidebarMenuButton, { asChild: true, isActive, tooltip: route.label, children: /* @__PURE__ */ jsxs19(WebLink2, { to: fullPath, children: [
+    Icon && /* @__PURE__ */ jsx33(Icon, { className: "size-4" }),
+    /* @__PURE__ */ jsx33("span", { children: route.label })
+  ] }) }) });
+}
+function BrandingHeader({ headerContent }) {
+  const branding = useAuthShellBranding();
+  if (headerContent) {
+    return /* @__PURE__ */ jsx33(Fragment4, { children: headerContent });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 px-2", children: [
+    branding.logo && /* @__PURE__ */ jsx33("div", { className: "flex-shrink-0", children: branding.logo }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-0.5 leading-none", children: [
+      /* @__PURE__ */ jsx33("span", { className: "font-semibold", children: branding.name }),
+      branding.tagline && /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground", children: branding.tagline })
+    ] })
+  ] });
+}
+function DefaultUserMenu() {
+  const { user, signOut } = useAuth7();
+  if (!user) return null;
+  const displayName = user.firstName ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ""}` : user.email ?? "User";
+  return /* @__PURE__ */ jsx33(
+    SidebarUser,
+    {
+      user: {
+        name: displayName,
+        email: user.email ?? "",
+        avatar: user.profilePictureUrl ?? void 0
+      },
+      onSignOut: () => signOut()
+    }
+  );
+}
+function AuthShellNav({ headerContent, userMenu, className }) {
+  const { routesByGroup, groups } = useAuthShellRoutesByGroup();
+  const getFullPath = useAuthShellFullPath();
+  return /* @__PURE__ */ jsxs19(Sidebar, { collapsible: "icon", className, children: [
+    /* @__PURE__ */ jsx33(SidebarHeader, { children: /* @__PURE__ */ jsx33(BrandingHeader, { headerContent }) }),
+    /* @__PURE__ */ jsx33(SidebarContent, { children: groups.map((group) => {
+      const routes = routesByGroup.get(group.id);
+      if (!routes || routes.length === 0) return null;
+      return /* @__PURE__ */ jsxs19(SidebarGroup, { children: [
+        group.label && /* @__PURE__ */ jsx33(SidebarGroupLabel, { children: group.label }),
+        /* @__PURE__ */ jsx33(SidebarGroupContent, { children: /* @__PURE__ */ jsx33(SidebarMenu, { children: routes.map((route) => /* @__PURE__ */ jsx33(NavItem, { route, getFullPath }, route.key)) }) })
+      ] }, group.id);
+    }) }),
+    /* @__PURE__ */ jsx33(SidebarFooter, { children: userMenu ?? /* @__PURE__ */ jsx33(DefaultUserMenu, {}) }),
+    /* @__PURE__ */ jsx33(SidebarRail, {})
+  ] });
+}
+
+// src/shell/auth-shell.tsx
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+function DefaultHeader({
+  breadcrumbs,
+  headerContent
+}) {
+  return /* @__PURE__ */ jsxs20("header", { className: "relative flex h-16 shrink-0 items-center gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "z-10 flex shrink-0 items-center gap-2 bg-background px-4", children: [
+      /* @__PURE__ */ jsx34(SidebarTrigger, { className: "-ml-1" }),
+      /* @__PURE__ */ jsx34(Separator, { orientation: "vertical", className: "mr-2 h-4" }),
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx34(Breadcrumbs, { items: breadcrumbs })
+    ] }),
+    headerContent && /* @__PURE__ */ jsx34("div", { className: "flex flex-1 items-center px-4 xl:absolute xl:inset-0 xl:justify-center", children: /* @__PURE__ */ jsx34("div", { className: "w-full max-w-md", children: headerContent }) })
+  ] });
+}
+function AuthShell({
+  children,
+  sidebarHeaderContent,
+  headerContent,
+  breadcrumbs
+}) {
+  const { config } = useAuthShellConfig();
+  const { identity, auth } = config;
+  return /* @__PURE__ */ jsxs20(
+    AuthGate,
+    {
+      required: identity.required ?? auth?.requireAuth ?? true,
+      onUnauthenticated: identity.onUnauthenticated ?? auth?.onUnauthenticated ?? "landing",
+      loadingComponent: identity.loadingComponent,
+      landingComponent: identity.landingComponent,
+      children: [
+        /* @__PURE__ */ jsxs20(SidebarProvider, { children: [
+          /* @__PURE__ */ jsx34(AuthShellNav, { headerContent: sidebarHeaderContent }),
+          /* @__PURE__ */ jsxs20(SidebarInset, { children: [
+            /* @__PURE__ */ jsx34(DefaultHeader, { breadcrumbs, headerContent }),
+            /* @__PURE__ */ jsx34("main", { className: "flex-1 overflow-auto p-4", children })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx34(Toaster, {})
+      ]
+    }
+  );
+}
+
+// src/shell/auth-app.tsx
+import { useMemo as useMemo5 } from "react";
+import { ThemeProvider } from "next-themes";
+import { createWebRouter, RouterProvider, WebOutlet } from "@mdxui/navigation/web";
+
+// src/shell/env-config.ts
+function getEnvVar(key) {
+  if (typeof import.meta !== "undefined" && import.meta.env) {
+    return import.meta.env[key];
+  }
+  if (typeof process !== "undefined" && process.env) {
+    return process.env[key];
+  }
+  return void 0;
+}
+function getEnvConfig() {
+  const clientId = getEnvVar("VITE_WORKOS_CLIENT_ID");
+  const redirectUri = getEnvVar("VITE_WORKOS_REDIRECT_URI");
+  const apiHostname = getEnvVar("VITE_WORKOS_API_HOSTNAME");
+  const devModeStr = getEnvVar("VITE_WORKOS_DEV_MODE");
+  const appName = getEnvVar("VITE_APP_NAME");
+  const appTagline = getEnvVar("VITE_APP_TAGLINE");
+  const identity = clientId ? {
+    clientId,
+    ...redirectUri && { redirectUri },
+    ...apiHostname && { apiHostname },
+    ...devModeStr && { devMode: devModeStr === "true" }
+  } : void 0;
+  const branding = appName ? {
+    name: appName,
+    ...appTagline && { tagline: appTagline }
+  } : void 0;
+  return {
+    ...identity && { identity },
+    ...branding && { branding }
+  };
+}
+function mergeWithEnvConfig(config) {
+  const envConfig = getEnvConfig();
+  const branding = {
+    name: config?.branding?.name ?? envConfig.branding?.name ?? "App",
+    ...config?.branding?.logo && { logo: config.branding.logo },
+    ...config?.branding?.logoCollapsed && { logoCollapsed: config.branding.logoCollapsed },
+    tagline: config?.branding?.tagline ?? envConfig.branding?.tagline
+  };
+  const envIdentity = envConfig.identity;
+  const configIdentity = config?.identity;
+  if (!envIdentity?.clientId && !configIdentity?.clientId) {
+    throw new Error(
+      "AuthApp: Missing clientId. Either provide config.identity.clientId or set VITE_WORKOS_CLIENT_ID environment variable."
+    );
+  }
+  const identity = {
+    clientId: configIdentity?.clientId ?? envIdentity?.clientId ?? "",
+    ...configIdentity?.redirectUri ?? envIdentity?.redirectUri ? { redirectUri: configIdentity?.redirectUri ?? envIdentity?.redirectUri } : {},
+    ...configIdentity?.apiHostname ?? envIdentity?.apiHostname ? { apiHostname: configIdentity?.apiHostname ?? envIdentity?.apiHostname } : {},
+    ...configIdentity?.devMode ?? envIdentity?.devMode ? { devMode: configIdentity?.devMode ?? envIdentity?.devMode } : {},
+    ...configIdentity?.required !== void 0 ? { required: configIdentity.required } : {},
+    ...configIdentity?.onUnauthenticated ? { onUnauthenticated: configIdentity.onUnauthenticated } : {},
+    ...configIdentity?.landingComponent ? { landingComponent: configIdentity.landingComponent } : {},
+    ...configIdentity?.loadingComponent ? { loadingComponent: configIdentity.loadingComponent } : {}
+  };
+  return {
+    branding,
+    identity,
+    ...config?.basePath && { basePath: config.basePath },
+    ...config?.theme && { theme: config.theme },
+    ...config?.auth && { auth: config.auth },
+    ...config?.groups && { groups: config.groups },
+    ...config?.routes && { routes: config.routes }
+  };
+}
+
+// src/shell/auth-app.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function AuthAppProvider({ config, children }) {
+  const resolvedConfig = useMemo5(() => mergeWithEnvConfig(config), [config]);
+  const { identity, theme } = resolvedConfig;
+  return /* @__PURE__ */ jsx35(
+    ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme: theme?.mode ?? "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      children: /* @__PURE__ */ jsx35(AuthShellConfigProvider, { config: resolvedConfig, children: /* @__PURE__ */ jsx35(
+        IdentityProvider,
+        {
+          clientId: identity.clientId,
+          apiHostname: identity.apiHostname,
+          devMode: identity.devMode,
+          redirectUri: identity.redirectUri,
+          children
+        }
+      ) })
+    }
+  );
+}
+function convertRoutesToConfig(routes, basePath) {
+  const config = {};
+  for (const route of routes) {
+    if (route.enabled === false) continue;
+    const fullPath = basePath ? `${basePath}${route.path}` : route.path;
+    config[route.key] = {
+      path: fullPath,
+      component: route.component,
+      meta: {
+        label: route.label,
+        icon: route.icon,
+        group: route.group,
+        public: route.public,
+        requiredRoles: route.requiredRoles,
+        requiredPermissions: route.requiredPermissions
+      }
+    };
+  }
+  return config;
+}
+function createRootLayout(headerContent, sidebarHeaderContent) {
+  const resolvedSidebarContent = sidebarHeaderContent ?? /* @__PURE__ */ jsx35(SidebarOrgSwitcher, {});
+  return function RootLayout() {
+    return /* @__PURE__ */ jsx35(AuthShell, { headerContent, sidebarHeaderContent: resolvedSidebarContent, children: /* @__PURE__ */ jsx35(WebOutlet, {}) });
+  };
+}
+function AuthApp({ config, headerContent, sidebarHeaderContent }) {
+  const mergedConfig = useMemo5(() => mergeWithEnvConfig(config), [config]);
+  const routes = mergedConfig.routes ?? defaultRoutes;
+  const groups = mergedConfig.groups ?? defaultGroups;
+  const resolvedConfig = useMemo5(
+    () => ({ ...mergedConfig, routes, groups }),
+    [mergedConfig, routes, groups]
+  );
+  const router = useMemo5(() => {
+    const routeConfig = convertRoutesToConfig(routes, mergedConfig.basePath);
+    const RootLayout = createRootLayout(headerContent, sidebarHeaderContent);
+    return createWebRouter(routeConfig, {
+      rootComponent: RootLayout,
+      basepath: mergedConfig.basePath || void 0
+    });
+  }, [routes, mergedConfig.basePath, headerContent, sidebarHeaderContent]);
+  return /* @__PURE__ */ jsx35(AuthAppProvider, { config: resolvedConfig, children: /* @__PURE__ */ jsx35(RouterProvider, { router }) });
+}
+function AuthAppWithChildren({
+  config,
+  headerContent,
+  sidebarHeaderContent,
+  children
+}) {
+  const mergedConfig = useMemo5(() => mergeWithEnvConfig(config), [config]);
+  const routes = mergedConfig.routes ?? defaultRoutes;
+  const groups = mergedConfig.groups ?? defaultGroups;
+  const resolvedConfig = useMemo5(
+    () => ({ ...mergedConfig, routes, groups }),
+    [mergedConfig, routes, groups]
+  );
+  const resolvedSidebarContent = sidebarHeaderContent ?? /* @__PURE__ */ jsx35(SidebarOrgSwitcher, {});
+  return /* @__PURE__ */ jsx35(AuthAppProvider, { config: resolvedConfig, children: /* @__PURE__ */ jsx35(AuthShell, { headerContent, sidebarHeaderContent: resolvedSidebarContent, children }) });
+}
 export {
   ApiKeys,
+  ApiKeysPage,
   AppearanceSchema,
+  AuthApp,
+  AuthAppProvider,
+  AuthAppWithChildren,
   AuthGate,
   AuthGatePropsSchema,
   AuthOrganizationSchema,
   AuthSessionSchema,
+  AuthShell,
+  AuthShellConfigProvider,
+  AuthShellNav,
   AuthTokenSchema,
   AuthUserSchema,
   BaseWidgetPropsSchema,
+  Breadcrumbs,
   IdentityProvider,
   IdentityProviderMinimal,
   IdentityProviderPropsSchema,
   ImpersonatorSchema,
+  IntegrationsPage,
   OrganizationSwitcher,
   OrganizationWidgetPropsSchema,
   Pipes,
+  ProfilePage,
   RadiusSchema,
   ScalingSchema,
   SecretForm,
   SecretsManager,
+  SecurityPage,
+  SessionsPage,
+  SidebarOrgSwitcher,
   SignInButton,
   SignOutButton,
+  TeamPage,
   TeamSwitcher,
   UnauthenticatedActionSchema,
   UseWidgetTokenOptionsSchema,
@@ -1404,9 +2180,23 @@ export {
   VaultItemCard,
   VaultList,
   VaultProvider,
+  WidgetErrorBoundary,
   WidgetsProvider,
   WidgetsProviderPropsSchema,
+  accountRoutes,
+  adminRoutes,
+  defaultGroups,
+  defaultRoutes,
+  developerRoutes,
+  getEnvConfig,
+  integrationRoutes,
+  mergeWithEnvConfig,
   useAuth6 as useAuth,
+  useAuthShellBranding,
+  useAuthShellConfig,
+  useAuthShellFullPath,
+  useAuthShellRoutes,
+  useAuthShellRoutesByGroup,
   useThemeDetection,
   useVault,
   useVaultContext,