@mdxui/auth 1.1.0 → 1.4.0

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;
@@ -182,56 +197,121 @@ function AuthGate({
   }
 }
 
+// src/providers/vault-provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var VaultContext = createContext(null);
+var defaultFields = [
+  { key: "api_key", label: "API Key", type: "password", required: true }
+];
+function VaultProvider({
+  children,
+  client,
+  initialItems = []
+}) {
+  const contextValue = useMemo(() => {
+    const getIntegrationFields = (integrationId) => {
+      if (client?.getIntegrationFields) {
+        return client.getIntegrationFields(integrationId);
+      }
+      return defaultFields;
+    };
+    return {
+      client: client ?? null,
+      items: initialItems,
+      loading: false,
+      error: null,
+      reload: async () => {
+        if (!client) {
+          console.warn("VaultProvider: No client provided, cannot reload");
+          return;
+        }
+        await client.list();
+      },
+      createItem: async (integrationId, credentials) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.create(integrationId, credentials);
+      },
+      rotateItem: async (id, credentials) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.rotate(id, credentials);
+      },
+      deleteItem: async (id) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.delete(id);
+      },
+      getIntegrationFields
+    };
+  }, [client, initialItems]);
+  return /* @__PURE__ */ jsx4(VaultContext.Provider, { value: contextValue, children });
+}
+function useVaultContext() {
+  const context = useContext(VaultContext);
+  if (!context) {
+    throw new Error("useVaultContext must be used within a VaultProvider");
+  }
+  return context;
+}
+function useVaultContextOptional() {
+  return useContext(VaultContext);
+}
+
 // src/widgets/user-profile.tsx
 import { UserProfile as WorkOSUserProfile } from "@workos-inc/widgets";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function UserProfile({ authToken, className }) {
-  return /* @__PURE__ */ jsx4("div", { className, children: /* @__PURE__ */ jsx4(WorkOSUserProfile, { authToken }) });
+  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUserProfile, { authToken }) });
 }
 
 // src/widgets/user-security.tsx
 import { UserSecurity as WorkOSUserSecurity } from "@workos-inc/widgets";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function UserSecurity({ authToken, className }) {
-  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUserSecurity, { authToken }) });
+  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSUserSecurity, { authToken }) });
 }
 
 // src/widgets/user-sessions.tsx
 import { UserSessions as WorkOSUserSessions } from "@workos-inc/widgets";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function UserSessions(props) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSUserSessions, { ...rest }) });
+  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(WorkOSUserSessions, { ...rest }) });
 }
 
 // src/widgets/api-keys.tsx
 import { ApiKeys as WorkOSApiKeys } from "@workos-inc/widgets";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ApiKeys({ authToken, className }) {
-  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(WorkOSApiKeys, { authToken }) });
+  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(WorkOSApiKeys, { authToken }) });
 }
 
 // src/widgets/users-management.tsx
 import { UsersManagement as WorkOSUsersManagement } from "@workos-inc/widgets";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function UsersManagement({
   authToken,
   organizationId: _organizationId,
   className
 }) {
-  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(WorkOSUsersManagement, { authToken }) });
+  return /* @__PURE__ */ jsx9("div", { className, children: /* @__PURE__ */ jsx9(WorkOSUsersManagement, { authToken }) });
 }
 
 // src/widgets/pipes.tsx
 import { Pipes as WorkOSPipes } from "@workos-inc/widgets";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Pipes({ authToken, className }) {
-  return /* @__PURE__ */ jsx9("div", { className, children: /* @__PURE__ */ jsx9(WorkOSPipes, { authToken }) });
+  return /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(WorkOSPipes, { authToken }) });
 }
 
 // src/widgets/organization-switcher.tsx
 import { OrganizationSwitcher as WorkOSOrganizationSwitcher } from "@workos-inc/widgets";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function OrganizationSwitcher({
   authToken,
   switchToOrganization,
@@ -240,7 +320,7 @@ function OrganizationSwitcher({
   truncateBehavior,
   className
 }) {
-  return /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { className, children: /* @__PURE__ */ jsx11(
     WorkOSOrganizationSwitcher,
     {
       authToken,
@@ -252,9 +332,692 @@ function OrganizationSwitcher({
   ) });
 }
 
+// src/vault/secrets-manager/secrets-manager.tsx
+import {
+  Badge,
+  Button as Button2,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input as Input2,
+  Select as Select2,
+  SelectContent as SelectContent2,
+  SelectItem as SelectItem2,
+  SelectTrigger as SelectTrigger2,
+  SelectValue as SelectValue2,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@mdxui/primitives";
+import { cn } from "@mdxui/primitives/lib/utils";
+import {
+  Copy,
+  Edit,
+  Eye,
+  EyeOff,
+  Filter,
+  Plus,
+  Search,
+  Trash2
+} from "lucide-react";
+import * as React2 from "react";
+import { toast } from "sonner";
+
+// src/vault/secrets-manager/secret-form.tsx
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "@mdxui/primitives";
+import * as React from "react";
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+function SecretForm({
+  secret,
+  environment: defaultEnvironment,
+  environments,
+  onSubmit,
+  onCancel
+}) {
+  const [key, setKey] = React.useState(secret?.key || "");
+  const [value, setValue] = React.useState(secret?.value || "");
+  const [description, setDescription] = React.useState(
+    secret?.description || ""
+  );
+  const [environment, setEnvironment] = React.useState(
+    secret?.environment || defaultEnvironment
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!key.trim() || !value.trim()) return;
+    onSubmit({
+      key: key.trim(),
+      value: value.trim(),
+      description: description.trim() || void 0,
+      environment
+    });
+  };
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "key", children: "Key *" }),
+      /* @__PURE__ */ jsx12(
+        Input,
+        {
+          id: "key",
+          placeholder: "DATABASE_URL",
+          value: key,
+          onChange: (e) => setKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
+          required: true,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: "Use UPPER_CASE with underscores (e.g., API_KEY, DATABASE_URL)" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "value", children: "Value *" }),
+      /* @__PURE__ */ jsx12(
+        Textarea,
+        {
+          id: "value",
+          placeholder: "Enter secret value",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          rows: 3,
+          required: true,
+          className: "font-mono"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "environment", children: "Environment *" }),
+      /* @__PURE__ */ jsxs2(Select, { value: environment, onValueChange: setEnvironment, children: [
+        /* @__PURE__ */ jsx12(SelectTrigger, { id: "environment", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+        /* @__PURE__ */ jsx12(SelectContent, { children: environments.map((env) => /* @__PURE__ */ jsx12(SelectItem, { value: env, children: env.charAt(0).toUpperCase() + env.slice(1) }, env)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "description", children: "Description" }),
+      /* @__PURE__ */ jsx12(
+        Textarea,
+        {
+          id: "description",
+          placeholder: "Optional description of this secret",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          rows: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx12(Button, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxs2(Button, { type: "submit", disabled: !key.trim() || !value.trim(), children: [
+        secret ? "Update" : "Create",
+        " Secret"
+      ] })
+    ] })
+  ] });
+}
+
+// src/vault/secrets-manager/secrets-manager.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+function SecretsManager({
+  secrets: externalSecrets = [],
+  environments = ["development", "staging", "production"],
+  currentEnvironment = "development",
+  onEnvironmentChange,
+  onCreate,
+  onUpdate,
+  onDelete,
+  hideValues: initialHideValues = true,
+  editable = true,
+  className
+}) {
+  const [localSecrets, setLocalSecrets] = React2.useState([]);
+  const [hideValues, setHideValues] = React2.useState(initialHideValues);
+  const [searchQuery, setSearchQuery] = React2.useState("");
+  const [environment, setEnvironment] = React2.useState(currentEnvironment);
+  const [visibleSecrets, setVisibleSecrets] = React2.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [editingSecret, setEditingSecret] = React2.useState(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = React2.useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = React2.useState(false);
+  const secrets = externalSecrets.length > 0 ? externalSecrets : localSecrets;
+  React2.useEffect(() => {
+    setEnvironment(currentEnvironment);
+  }, [currentEnvironment]);
+  const filteredSecrets = React2.useMemo(() => {
+    return secrets.filter((secret) => {
+      const matchesSearch = searchQuery ? secret.key.toLowerCase().includes(searchQuery.toLowerCase()) || secret.description?.toLowerCase().includes(searchQuery.toLowerCase()) : true;
+      const matchesEnvironment = environment === "all" || secret.environment === environment;
+      return matchesSearch && matchesEnvironment;
+    });
+  }, [secrets, searchQuery, environment]);
+  const handleEnvironmentChange = (newEnvironment) => {
+    setEnvironment(newEnvironment);
+    onEnvironmentChange?.(newEnvironment);
+  };
+  const handleCreate = async (secretData) => {
+    const newSecret = {
+      ...secretData,
+      id: crypto.randomUUID(),
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date()
+    };
+    try {
+      await onCreate?.(secretData);
+      if (externalSecrets.length === 0) {
+        setLocalSecrets((prev) => [...prev, newSecret]);
+      }
+      setIsCreateDialogOpen(false);
+      toast.success("Secret created successfully");
+    } catch (error) {
+      toast.error("Failed to create secret");
+    }
+  };
+  const handleUpdate = async (id, updates) => {
+    try {
+      await onUpdate?.(id, { ...updates, updatedAt: /* @__PURE__ */ new Date() });
+      if (externalSecrets.length === 0) {
+        setLocalSecrets(
+          (prev) => prev.map(
+            (secret) => secret.id === id ? { ...secret, ...updates, updatedAt: /* @__PURE__ */ new Date() } : secret
+          )
+        );
+      }
+      setIsEditDialogOpen(false);
+      setEditingSecret(null);
+      toast.success("Secret updated successfully");
+    } catch (error) {
+      toast.error("Failed to update secret");
+    }
+  };
+  const handleDelete = async (id) => {
+    if (!confirm("Are you sure you want to delete this secret?")) return;
+    try {
+      await onDelete?.(id);
+      if (externalSecrets.length === 0) {
+        setLocalSecrets((prev) => prev.filter((secret) => secret.id !== id));
+      }
+      toast.success("Secret deleted");
+    } catch (error) {
+      toast.error("Failed to delete secret");
+    }
+  };
+  const handleCopy = (value) => {
+    navigator.clipboard.writeText(value);
+    toast.success("Value copied to clipboard");
+  };
+  const toggleSecretVisibility = (id) => {
+    setVisibleSecrets((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  const toggleAllVisibility = () => {
+    setHideValues(!hideValues);
+    if (!hideValues) {
+      setVisibleSecrets(/* @__PURE__ */ new Set());
+    }
+  };
+  const isSecretVisible = (id) => {
+    return hideValues ? visibleSecrets.has(id) : true;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs3(Card, { children: [
+      /* @__PURE__ */ jsx13(CardHeader, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx13(CardTitle, { children: "Environment Variables" }),
+          /* @__PURE__ */ jsx13(CardDescription, { children: "Manage your application secrets and configuration" })
+        ] }),
+        editable && /* @__PURE__ */ jsxs3(
+          Dialog,
+          {
+            open: isCreateDialogOpen,
+            onOpenChange: setIsCreateDialogOpen,
+            children: [
+              /* @__PURE__ */ jsx13(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button2, { children: [
+                /* @__PURE__ */ jsx13(Plus, { className: "mr-2 size-4" }),
+                "Add Secret"
+              ] }) }),
+              /* @__PURE__ */ jsxs3(DialogContent, { children: [
+                /* @__PURE__ */ jsx13(DialogHeader, { children: /* @__PURE__ */ jsx13(DialogTitle, { children: "Create New Secret" }) }),
+                /* @__PURE__ */ jsx13(
+                  SecretForm,
+                  {
+                    environment,
+                    environments,
+                    onSubmit: handleCreate,
+                    onCancel: () => setIsCreateDialogOpen(false)
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs3(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx13(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx13(
+              Input2,
+              {
+                placeholder: "Search secrets...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "pl-9"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3(Select2, { value: environment, onValueChange: handleEnvironmentChange, children: [
+            /* @__PURE__ */ jsxs3(SelectTrigger2, { className: "w-[180px]", children: [
+              /* @__PURE__ */ jsx13(Filter, { className: "mr-2 size-4" }),
+              /* @__PURE__ */ jsx13(SelectValue2, {})
+            ] }),
+            /* @__PURE__ */ jsxs3(SelectContent2, { children: [
+              /* @__PURE__ */ jsx13(SelectItem2, { value: "all", children: "All Environments" }),
+              environments.map((env) => /* @__PURE__ */ jsx13(SelectItem2, { value: env, children: env.charAt(0).toUpperCase() + env.slice(1) }, env))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx13(Button2, { variant: "outline", size: "icon", onClick: toggleAllVisibility, children: hideValues ? /* @__PURE__ */ jsx13(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx13(EyeOff, { className: "size-4" }) })
+        ] }),
+        filteredSecrets.length > 0 ? /* @__PURE__ */ jsx13("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs3(Table, { children: [
+          /* @__PURE__ */ jsx13(TableHeader, { children: /* @__PURE__ */ jsxs3(TableRow, { children: [
+            /* @__PURE__ */ jsx13(TableHead, { children: "Key" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Value" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Environment" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Description" }),
+            /* @__PURE__ */ jsx13(TableHead, { className: "w-[100px]", children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx13(TableBody, { children: filteredSecrets.map((secret) => /* @__PURE__ */ jsxs3(TableRow, { children: [
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13("code", { className: "rounded bg-muted px-2 py-1 font-mono text-sm", children: secret.key }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx13("code", { className: "flex-1 rounded bg-muted px-2 py-1 font-mono text-sm", children: isSecretVisible(secret.id) ? secret.value : "\u2022".repeat(Math.min(secret.value.length, 20)) }),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => toggleSecretVisibility(secret.id),
+                  children: isSecretVisible(secret.id) ? /* @__PURE__ */ jsx13(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx13(Eye, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => handleCopy(secret.value),
+                  children: /* @__PURE__ */ jsx13(Copy, { className: "size-4" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: secret.environment }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13("span", { className: "text-sm text-muted-foreground", children: secret.description || "-" }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: editable && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => {
+                    setEditingSecret(secret);
+                    setIsEditDialogOpen(true);
+                  },
+                  children: /* @__PURE__ */ jsx13(Edit, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => handleDelete(secret.id),
+                  children: /* @__PURE__ */ jsx13(Trash2, { className: "size-4 text-destructive" })
+                }
+              )
+            ] }) })
+          ] }, secret.id)) })
+        ] }) }) : /* @__PURE__ */ jsx13("div", { className: "flex h-32 items-center justify-center rounded-md border-2 border-dashed", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: searchQuery ? "No secrets found matching your search" : "No secrets yet. Add your first secret to get started." }) })
+      ] })
+    ] }),
+    editingSecret && /* @__PURE__ */ jsx13(Dialog, { open: isEditDialogOpen, onOpenChange: setIsEditDialogOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { children: [
+      /* @__PURE__ */ jsx13(DialogHeader, { children: /* @__PURE__ */ jsx13(DialogTitle, { children: "Edit Secret" }) }),
+      /* @__PURE__ */ jsx13(
+        SecretForm,
+        {
+          secret: editingSecret,
+          environment,
+          environments,
+          onSubmit: (data) => handleUpdate(editingSecret.id, data),
+          onCancel: () => {
+            setIsEditDialogOpen(false);
+            setEditingSecret(null);
+          }
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/vault/vault-delete-dialog.tsx
+import {
+  Button as Button3,
+  Dialog as Dialog2,
+  DialogContent as DialogContent2,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader as DialogHeader2,
+  DialogTitle as DialogTitle2
+} from "@mdxui/primitives";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+function VaultDeleteDialog({ isOpen, onClose, itemName, onConfirm }) {
+  return /* @__PURE__ */ jsx14(Dialog2, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs4(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs4(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx14(DialogTitle2, { children: "Delete Credentials" }),
+      /* @__PURE__ */ jsxs4(DialogDescription, { children: [
+        "Are you sure you want to delete credentials for ",
+        itemName,
+        "? This action cannot be undone."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+      /* @__PURE__ */ jsx14(Button3, { variant: "outline", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx14(Button3, { variant: "destructive", onClick: onConfirm, children: "Delete" })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-empty-state.tsx
+import { Button as Button4 } from "@mdxui/primitives";
+import { Lock } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+function VaultEmptyState({ onAddCredential }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center rounded-md border border-dashed py-24 px-4 text-center", children: [
+    /* @__PURE__ */ jsx15("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-4", children: /* @__PURE__ */ jsx15(Lock, { className: "h-6 w-6 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold mb-2", children: "No saved credentials" }),
+    /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground mb-6 max-w-md", children: "Add API keys and account credentials for your agents to use securely." }),
+    /* @__PURE__ */ jsx15(Button4, { onClick: onAddCredential, children: "Add Credential" })
+  ] });
+}
+
+// src/vault/vault-input-modal.tsx
+import {
+  Button as Button5,
+  Dialog as Dialog3,
+  DialogContent as DialogContent3,
+  DialogFooter as DialogFooter2,
+  DialogHeader as DialogHeader3,
+  DialogTitle as DialogTitle3,
+  Input as Input3,
+  Label as Label2
+} from "@mdxui/primitives";
+import { Key } from "lucide-react";
+import { useState as useState4 } from "react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function VaultInputModal({
+  isOpen,
+  onClose,
+  mode,
+  integration,
+  onSave
+}) {
+  const [values, setValues] = useState4({});
+  const [loading, setLoading] = useState4(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await onSave(values);
+      setValues({});
+      onClose();
+    } catch (error) {
+      console.error("Failed to save credentials:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleClose = () => {
+    setValues({});
+    onClose();
+  };
+  if (!integration) return null;
+  const isValid = integration.fields.filter((f) => f.required).every((f) => values[f.key]?.trim());
+  return /* @__PURE__ */ jsx16(Dialog3, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs6(DialogContent3, { children: [
+    /* @__PURE__ */ jsx16(DialogHeader3, { children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx16("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-white overflow-hidden p-1 border border-border", children: integration.logoUrl ? /* @__PURE__ */ jsx16(
+        "img",
+        {
+          src: integration.logoUrl,
+          alt: integration.name,
+          width: 32,
+          height: 32,
+          className: "h-full w-full object-contain rounded-sm"
+        }
+      ) : /* @__PURE__ */ jsx16(Key, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs6(DialogTitle3, { children: [
+        mode === "create" ? "Add" : "Rotate",
+        " ",
+        integration.name,
+        " Credentials"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx16("div", { className: "grid gap-4 py-4", children: integration.fields.map((field) => /* @__PURE__ */ jsxs6("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsxs6(Label2, { htmlFor: field.key, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx16("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx16(
+          Input3,
+          {
+            id: field.key,
+            type: field.type,
+            placeholder: field.placeholder,
+            value: values[field.key] || "",
+            onChange: (e) => setValues((prev) => ({
+              ...prev,
+              [field.key]: e.target.value
+            })),
+            required: field.required
+          }
+        )
+      ] }, field.key)) }),
+      /* @__PURE__ */ jsxs6(DialogFooter2, { children: [
+        /* @__PURE__ */ jsx16(Button5, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx16(Button5, { type: "submit", disabled: loading || !isValid, children: loading ? "Saving..." : "Save" })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-item-card.tsx
+import {
+  Button as Button6,
+  Card as Card2,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@mdxui/primitives";
+import { Key as Key2, MoreVertical } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function formatDate(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function VaultItemCard({
+  id,
+  name,
+  logoUrl,
+  createdAt,
+  updatedAt,
+  onRotate,
+  onDelete
+}) {
+  const wasRotated = updatedAt.getTime() !== createdAt.getTime();
+  return /* @__PURE__ */ jsx17(Card2, { noPadding: true, className: "p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-white overflow-hidden p-1 border border-border", children: logoUrl ? /* @__PURE__ */ jsx17(
+        "img",
+        {
+          src: logoUrl,
+          alt: name,
+          width: 32,
+          height: 32,
+          className: "h-full w-full object-contain rounded-sm"
+        }
+      ) : /* @__PURE__ */ jsx17(Key2, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx17("h4", { className: "text-sm font-medium", children: name }),
+        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: wasRotated ? `Rotated: ${formatDate(updatedAt)}` : `Created: ${formatDate(createdAt)}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(Button6, { variant: "ghost", size: "icon-sm", children: [
+        /* @__PURE__ */ jsx17(MoreVertical, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Open menu" })
+      ] }) }),
+      /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsx17(DropdownMenuItem, { onClick: () => onRotate(id), children: "Rotate" }),
+        /* @__PURE__ */ jsx17(
+          DropdownMenuItem,
+          {
+            className: "text-destructive focus:text-destructive",
+            onClick: () => onDelete(id),
+            children: "Delete"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-list.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultFields2 = [
+  { key: "api_key", label: "API Key", type: "password", required: true }
+];
+function VaultList({
+  items,
+  onRotate,
+  onDelete,
+  onOpenAddModal,
+  getIntegrationFields
+}) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState5(false);
+  const [inputModalOpen, setInputModalOpen] = useState5(false);
+  const [selectedItem, setSelectedItem] = useState5(null);
+  const [modalMode, setModalMode] = useState5("create");
+  const handleRotate = (id) => {
+    const item = items.find((i) => i.id === id);
+    if (!item) return;
+    setSelectedItem(item);
+    setModalMode("rotate");
+    setInputModalOpen(true);
+  };
+  const handleDeleteClick = (id) => {
+    const item = items.find((i) => i.id === id);
+    if (!item) return;
+    setSelectedItem(item);
+    setDeleteDialogOpen(true);
+  };
+  const handleConfirmDelete = async () => {
+    if (!selectedItem) return;
+    await onDelete(selectedItem.id);
+    setDeleteDialogOpen(false);
+    setSelectedItem(null);
+  };
+  const handleSave = async (credentials) => {
+    if (modalMode === "rotate" && selectedItem) {
+      await onRotate(selectedItem.id, credentials);
+    }
+    setInputModalOpen(false);
+    setSelectedItem(null);
+  };
+  const getIntegrationForModal = () => {
+    if (!selectedItem) return void 0;
+    const fields = getIntegrationFields ? getIntegrationFields(selectedItem.integrationId) : defaultFields2;
+    return {
+      id: selectedItem.integrationId,
+      name: selectedItem.name,
+      logoUrl: selectedItem.logoUrl,
+      fields
+    };
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx18(VaultEmptyState, { onAddCredential: onOpenAddModal });
+  }
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: items.map((item) => /* @__PURE__ */ jsx18(
+      VaultItemCard,
+      {
+        id: item.id,
+        name: item.name,
+        logoUrl: item.logoUrl,
+        createdAt: item.createdAt,
+        updatedAt: item.updatedAt,
+        onRotate: handleRotate,
+        onDelete: handleDeleteClick
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ jsx18(
+      VaultDeleteDialog,
+      {
+        isOpen: deleteDialogOpen,
+        onClose: () => {
+          setDeleteDialogOpen(false);
+          setSelectedItem(null);
+        },
+        itemName: selectedItem?.name || "",
+        onConfirm: handleConfirmDelete
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      VaultInputModal,
+      {
+        isOpen: inputModalOpen,
+        onClose: () => {
+          setInputModalOpen(false);
+          setSelectedItem(null);
+        },
+        mode: modalMode,
+        integration: getIntegrationForModal(),
+        onSave: handleSave
+      }
+    )
+  ] });
+}
+
 // src/components/sign-in-button.tsx
 import { useAuth as useAuth2 } from "@workos-inc/authkit-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SignInButton({
   children = "Sign In",
   onSignIn,
@@ -267,7 +1030,7 @@ function SignInButton({
     onSignIn?.();
     signIn();
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -282,7 +1045,7 @@ function SignInButton({
 
 // src/components/sign-out-button.tsx
 import { useAuth as useAuth3 } from "@workos-inc/authkit-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function SignOutButton({
   children = "Sign Out",
   onSignOut,
@@ -295,7 +1058,7 @@ function SignOutButton({
     onSignOut?.();
     signOut();
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       type: "button",
@@ -310,7 +1073,7 @@ function SignOutButton({
 
 // src/components/user-menu.tsx
 import { useAuth as useAuth4 } from "@workos-inc/authkit-react";
-import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function getInitials(name) {
   if (!name) return "?";
   const parts = name.trim().split(/\s+/);
@@ -320,7 +1083,7 @@ function getInitials(name) {
 function UserMenu({ renderTrigger, renderMenu, className }) {
   const { user, signOut, isLoading } = useAuth4();
   if (isLoading) {
-    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
+    return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
   }
   if (!user) {
     return null;
@@ -332,8 +1095,8 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
   const triggerProps = { user, displayName, initials };
   const menuProps = { user, displayName, initials, signOut };
   if (!renderTrigger && !renderMenu) {
-    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 p-2", children: [
-      /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 p-2", children: [
+      /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx21(
         "img",
         {
           src: user.profilePictureUrl,
@@ -341,11 +1104,11 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
           className: "h-full w-full rounded-full object-cover"
         }
       ) : initials }),
-      /* @__PURE__ */ jsxs2("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsx13("p", { className: "font-medium", children: displayName }),
-        /* @__PURE__ */ jsx13("p", { className: "text-muted-foreground text-xs", children: user.email })
+      /* @__PURE__ */ jsxs9("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx21("p", { className: "font-medium", children: displayName }),
+        /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground text-xs", children: user.email })
       ] }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx21(
         "button",
         {
           type: "button",
@@ -356,7 +1119,7 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
       )
     ] }) });
   }
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
     renderTrigger?.(triggerProps),
     renderMenu?.(menuProps)
   ] });
@@ -365,7 +1128,7 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
 // src/components/team-switcher.tsx
 import { useAuth as useAuth5 } from "@workos-inc/authkit-react";
 import { OrganizationSwitcher as OrganizationSwitcher2 } from "@workos-inc/widgets";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function TeamSwitcher({
   renderWrapper,
   renderNoOrganization,
@@ -380,7 +1143,7 @@ function TeamSwitcher({
   }) => {
     return switchToOrganization({ organizationId: organizationId2 });
   };
-  const widget = /* @__PURE__ */ jsx14("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx14(
+  const widget = /* @__PURE__ */ jsx22("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx22(
     OrganizationSwitcher2,
     {
       authToken: getAccessToken,
@@ -394,15 +1157,15 @@ function TeamSwitcher({
 import { useAuth as useAuth6 } from "@workos-inc/authkit-react";
 
 // src/hooks/use-widget-token.ts
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState6 } from "react";
 function useWidgetToken({
   widget,
   organizationId,
   endpoint = "/api/workos/widget-token"
 }) {
-  const [token, setToken] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [error, setError] = useState2(null);
+  const [token, setToken] = useState6(null);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6(null);
   const fetchToken = useCallback(async () => {
     try {
       setLoading(true);
@@ -423,12 +1186,77 @@ function useWidgetToken({
       setLoading(false);
     }
   }, [widget, organizationId, endpoint]);
-  useEffect2(() => {
+  useEffect4(() => {
     fetchToken();
   }, [fetchToken]);
   return { token, loading, error, refetch: fetchToken };
 }
 
+// src/hooks/use-vault.ts
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+function useVault() {
+  const context = useVaultContext();
+  const findItem = useCallback2(
+    (id) => {
+      return context.items.find((item) => item.id === id);
+    },
+    [context.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context.items.filter((item) => item.integrationId === integrationId);
+    },
+    [context.items]
+  );
+  return useMemo3(
+    () => ({
+      items: context.items,
+      loading: context.loading,
+      error: context.error,
+      isConnected: context.client !== null,
+      reload: context.reload,
+      create: context.createItem,
+      rotate: context.rotateItem,
+      remove: context.deleteItem,
+      getIntegrationFields: context.getIntegrationFields,
+      findItem,
+      findByIntegration
+    }),
+    [context, findItem, findByIntegration]
+  );
+}
+function useVaultOptional() {
+  const context = useVaultContextOptional();
+  const findItem = useCallback2(
+    (id) => {
+      return context?.items.find((item) => item.id === id);
+    },
+    [context?.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context?.items.filter((item) => item.integrationId === integrationId) ?? [];
+    },
+    [context?.items]
+  );
+  if (!context) {
+    return null;
+  }
+  return {
+    items: context.items,
+    loading: context.loading,
+    error: context.error,
+    isConnected: context.client !== null,
+    reload: context.reload,
+    create: context.createItem,
+    rotate: context.rotateItem,
+    remove: context.deleteItem,
+    getIntegrationFields: context.getIntegrationFields,
+    findItem,
+    findByIntegration
+  };
+}
+
 // src/schemas/auth-user.ts
 import { z } from "zod";
 import { UserIdentitySchema } from "mdxui/zod";
@@ -495,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"),
@@ -553,27 +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,
@@ -583,10 +2174,34 @@ export {
   UserSecurity,
   UserSessions,
   UsersManagement,
+  VaultDeleteDialog,
+  VaultEmptyState,
+  VaultInputModal,
+  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,
+  useVaultContextOptional,
+  useVaultOptional,
   useWidgetToken
 };
 //# sourceMappingURL=index.js.map