@mdxui/cockpit 0.2.0 → 6.0.1

package/dist/index.js

@@ -1,73 +1,17 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
 // src/developer/index.ts
-import { useAuth as useAuth10 } from "@workos-inc/authkit-react";
-
-// src/developer/themes/index.ts
-var themes_exports = {};
-__reExport(themes_exports, themes_star);
-import * as themes_star from "@mdxui/themes";
+import { useAuth as useAuth9 } from "@mdxui/auth";
+import {
+  themePresets,
+  themeNames,
+  isThemePreset,
+  useThemeStore,
+  applyThemeToElement as applyThemeToElement3,
+  getThemeCSS,
+  themeCSS,
+  ThemeScript,
+  getThemeScriptContent,
+  getResolvedMode
+} from "@mdxui/themes";
 
 // src/developer/components/dashboard/activity-feed.tsx
 import { Avatar, AvatarFallback, AvatarImage } from "@mdxui/primitives/avatar";
@@ -188,7 +132,7 @@ function AreaChart({
         }
       ),
       /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-      yAxisKeys.map((key, index) => /* @__PURE__ */ jsx2(
+      yAxisKeys.map((key) => /* @__PURE__ */ jsx2(
         Area,
         {
           type: "monotone",
@@ -469,7 +413,6 @@ function DataTable({
   className,
   emptyMessage = "No results found."
 }) {
-  var _a, _b, _c;
   const [sorting, setSorting] = useState2([]);
   const [columnFilters, setColumnFilters] = useState2([]);
   const [columnVisibility, setColumnVisibility] = useState2({});
@@ -502,11 +445,8 @@ function DataTable({
       Input,
       {
         placeholder: searchPlaceholder,
-        value: (_b = (_a = table.getColumn(searchColumn)) == null ? void 0 : _a.getFilterValue()) != null ? _b : "",
-        onChange: (event) => {
-          var _a2;
-          return (_a2 = table.getColumn(searchColumn)) == null ? void 0 : _a2.setFilterValue(event.target.value);
-        },
+        value: table.getColumn(searchColumn)?.getFilterValue() ?? "",
+        onChange: (event) => table.getColumn(searchColumn)?.setFilterValue(event.target.value),
         className: "max-w-sm"
       }
     ) }),
@@ -514,7 +454,7 @@ function DataTable({
       /* @__PURE__ */ jsx6(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx6(TableRow, { children: headerGroup.headers.map((header) => {
         return /* @__PURE__ */ jsx6(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx6(TableBody, { children: ((_c = table.getRowModel().rows) == null ? void 0 : _c.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx6(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx6(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx6(TableRow, { children: /* @__PURE__ */ jsx6(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: emptyMessage }) }) })
+      /* @__PURE__ */ jsx6(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx6(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx6(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx6(TableRow, { children: /* @__PURE__ */ jsx6(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: emptyMessage }) }) })
     ] }) }),
     paginated && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsx6("div", { className: "flex-1 text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs5("span", { children: [
@@ -729,8 +669,8 @@ function LineChart({
 }
 
 // src/developer/components/layout/dashboard-layout.tsx
+import { useAuth as useAuth2 } from "@mdxui/auth";
 import { DashboardShell } from "@mdxui/primitives/dashboard-shell";
-import { useAuth as useAuth2 } from "@workos-inc/authkit-react";
 import {
   Activity,
   BarChart3,
@@ -751,6 +691,7 @@ import { createContext, useContext, useMemo } from "react";
 // src/developer/hooks/use-theme-loader.ts
 import { useTheme } from "next-themes";
 import { useEffect as useEffect2, useRef } from "react";
+import { applyThemeToElement } from "@mdxui/themes";
 function useThemeLoader(preset) {
   const { resolvedTheme } = useTheme();
   const currentPresetRef = useRef(void 0);
@@ -759,7 +700,7 @@ function useThemeLoader(preset) {
     if (!preset || !resolvedTheme) return;
     if (preset === currentPresetRef.current && resolvedTheme === currentModeRef.current) return;
     const mode = resolvedTheme === "dark" ? "dark" : "light";
-    (0, themes_exports.applyThemeToElement)(document.documentElement, preset, mode);
+    applyThemeToElement(document.documentElement, preset, mode);
     currentPresetRef.current = preset;
     currentModeRef.current = resolvedTheme;
   }, [preset, resolvedTheme]);
@@ -813,6 +754,7 @@ var defaultConfig = {
     logo: void 0
   },
   routes: defaultRoutes,
+  customRoutes: [],
   theme: {
     preset: "cyan",
     mode: "system",
@@ -825,15 +767,19 @@ import { jsx as jsx9 } from "react/jsx-runtime";
 var DashboardContext = createContext(null);
 function DashboardProvider({ config, children }) {
   const value = useMemo(() => {
-    const mergedConfig = __spreadProps(__spreadValues(__spreadValues({}, defaultConfig), config), {
-      branding: __spreadValues(__spreadValues({}, defaultConfig.branding), config.branding),
-      routes: __spreadValues(__spreadValues({}, defaultRoutes), config.routes),
-      theme: __spreadValues(__spreadValues({}, defaultConfig.theme), config.theme),
-      identity: __spreadValues(__spreadValues({}, defaultIdentity), config.identity)
-    });
+    const mergedConfig = {
+      ...defaultConfig,
+      ...config,
+      branding: { ...defaultConfig.branding, ...config.branding },
+      routes: { ...defaultRoutes, ...config.routes },
+      customRoutes: config.customRoutes ?? [],
+      theme: { ...defaultConfig.theme, ...config.theme },
+      identity: { ...defaultIdentity, ...config.identity }
+    };
     return {
       config: mergedConfig,
       routes: mergedConfig.routes,
+      customRoutes: mergedConfig.customRoutes,
       basePath: mergedConfig.basePath
     };
   }, [config]);
@@ -852,6 +798,10 @@ function useRoutes() {
   const { routes } = useDashboard();
   return routes;
 }
+function useCustomRoutes() {
+  const { customRoutes } = useDashboard();
+  return customRoutes;
+}
 
 // src/developer/components/ui/sidebar-ad.tsx
 import { useSidebar } from "@mdxui/primitives/sidebar";
@@ -866,7 +816,7 @@ function SidebarAd({ headline, description, ctaText, ctaHref, onCtaClick, dismis
   if (state === "collapsed") return null;
   const handleDismiss = () => {
     setIsDismissed(true);
-    onDismiss == null ? void 0 : onDismiss();
+    onDismiss?.();
   };
   const handleCtaClick = () => {
     if (onCtaClick) {
@@ -905,9 +855,8 @@ function SidebarAd({ headline, description, ctaText, ctaHref, onCtaClick, dismis
 }
 
 // src/developer/components/widgets/team-switcher.tsx
+import { OrganizationSwitcher, useAuth } from "@mdxui/auth";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@mdxui/primitives/sidebar";
-import { useAuth } from "@workos-inc/authkit-react";
-import { OrganizationSwitcher } from "@workos-inc/widgets";
 import { Building2 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function TeamSwitcher() {
@@ -915,7 +864,16 @@ function TeamSwitcher() {
   if (!organizationId) {
     return /* @__PURE__ */ jsx11(TeamSwitcherNone, {});
   }
-  return /* @__PURE__ */ jsx11(SidebarMenu, { children: /* @__PURE__ */ jsx11(SidebarMenuItem, { children: /* @__PURE__ */ jsx11("div", { className: "organization-switcher-wrapper", children: /* @__PURE__ */ jsx11(OrganizationSwitcher, { authToken: getAccessToken, switchToOrganization }) }) }) });
+  const handleSwitchOrganization = ({ organizationId: organizationId2 }) => {
+    return switchToOrganization({ organizationId: organizationId2 });
+  };
+  return /* @__PURE__ */ jsx11(SidebarMenu, { children: /* @__PURE__ */ jsx11(SidebarMenuItem, { children: /* @__PURE__ */ jsx11("div", { className: "organization-switcher-wrapper", children: /* @__PURE__ */ jsx11(
+    OrganizationSwitcher,
+    {
+      authToken: getAccessToken,
+      switchToOrganization: handleSwitchOrganization
+    }
+  ) }) }) });
 }
 function TeamSwitcherNone() {
   return /* @__PURE__ */ jsx11(SidebarMenu, { children: /* @__PURE__ */ jsx11(SidebarMenuItem, { children: /* @__PURE__ */ jsxs9(SidebarMenuButton, { size: "lg", className: "pointer-events-none", children: [
@@ -971,8 +929,19 @@ function NavUser({ user, onSignOut }) {
 // src/developer/components/layout/dashboard-layout.tsx
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function useNavItems() {
-  const { routes } = useDashboard();
+  const { routes, customRoutes } = useDashboard();
   const items = [];
+  const customRouteToNavItem = (route) => ({
+    title: route.label,
+    url: route.path.startsWith("/") ? route.path : `/${route.path}`,
+    icon: route.icon
+  });
+  const sortedCustomRoutes = [...customRoutes].sort((a, b) => {
+    return (a.order ?? 100) - (b.order ?? 100);
+  });
+  const mainRoutes = sortedCustomRoutes.filter((r) => r.group === "main" || r.group === void 0);
+  const secondaryRoutes = sortedCustomRoutes.filter((r) => r.group === "secondary");
+  const adminRoutes = sortedCustomRoutes.filter((r) => r.group === "admin");
   if (routes.overview) {
     items.push({
       title: "Overview",
@@ -1012,7 +981,13 @@ function useNavItems() {
     items.push({
       title: "Webhooks",
       url: "/webhooks",
-      icon: Webhook
+      icon: Webhook,
+      items: [
+        { title: "Endpoints", url: "/webhooks/endpoints" },
+        { title: "Activity", url: "/webhooks/activity" },
+        { title: "Logs", url: "/webhooks/logs" },
+        { title: "Event Catalog", url: "/webhooks/event-catalog" }
+      ]
     });
   }
   if (routes.database) {
@@ -1036,24 +1011,37 @@ function useNavItems() {
       icon: Lock
     });
   }
+  for (const route of mainRoutes) {
+    items.push(customRouteToNavItem(route));
+  }
+  for (const route of secondaryRoutes) {
+    items.push(customRouteToNavItem(route));
+  }
   if (routes.settings) {
     items.push({
       title: "Settings",
       url: "/settings",
-      icon: Settings
+      icon: Settings,
+      items: [
+        { title: "Profile", url: "/settings/profile" },
+        { title: "Security", url: "/settings/security" },
+        { title: "Sessions", url: "/settings/sessions" }
+      ]
     });
   }
+  for (const route of adminRoutes) {
+    items.push(customRouteToNavItem(route));
+  }
   return items;
 }
 function DashboardLayout() {
-  var _a;
   const { user, signOut } = useAuth2();
   const navItems = useNavItems();
   const navUser = user ? {
     id: user.id,
     name: user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.email,
     email: user.email,
-    avatar: (_a = user.profilePictureUrl) != null ? _a : void 0
+    avatar: user.profilePictureUrl ?? void 0
   } : null;
   return /* @__PURE__ */ jsx14(
     DashboardShell,
@@ -1079,8 +1067,8 @@ function DashboardLayout() {
 }
 
 // src/developer/components/layout/landing-page.tsx
+import { useAuth as useAuth3 } from "@mdxui/auth";
 import { Button as Button2 } from "@mdxui/primitives/button";
-import { useAuth as useAuth3 } from "@workos-inc/authkit-react";
 import { ArrowRight, BarChart3 as BarChart32, Key as Key2, Shield, Users as Users2 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function FeatureCard({ icon, title, description }) {
@@ -1091,14 +1079,13 @@ function FeatureCard({ icon, title, description }) {
   ] });
 }
 function LandingPage() {
-  var _a, _b, _c;
   const { signIn } = useAuth3();
   const { config } = useDashboard();
-  const brandName = (_b = (_a = config.branding) == null ? void 0 : _a.name) != null ? _b : "Dashboard";
+  const brandName = config.branding?.name ?? "Dashboard";
   return /* @__PURE__ */ jsxs11("div", { className: "min-h-screen bg-background flex flex-col", children: [
     /* @__PURE__ */ jsx15("header", { className: "border-b", children: /* @__PURE__ */ jsxs11("div", { className: "container mx-auto px-4 h-16 flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-        (_c = config.branding) == null ? void 0 : _c.logo,
+        config.branding?.logo,
         /* @__PURE__ */ jsx15("span", { className: "font-semibold text-lg", children: brandName })
       ] }),
       /* @__PURE__ */ jsxs11(Button2, { onClick: () => signIn(), children: [
@@ -1182,11 +1169,11 @@ function JsonViewer({ data, className }) {
       theme
     }).then(setHtml);
   }, [jsonString, resolvedTheme]);
-  const handleCopy = () => __async(null, null, function* () {
-    yield navigator.clipboard.writeText(jsonString);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(jsonString);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
-  });
+  };
   return /* @__PURE__ */ jsxs12("div", { className: cn5("relative rounded-md border bg-muted", className), children: [
     /* @__PURE__ */ jsx16(
       "button",
@@ -1322,11 +1309,11 @@ function VaultInputModal({
 }) {
   const [values, setValues] = useState5({});
   const [loading, setLoading] = useState5(false);
-  const handleSubmit = (e) => __async(null, null, function* () {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
     try {
-      yield onSave(values);
+      await onSave(values);
       setValues({});
       onClose();
     } catch (error) {
@@ -1334,16 +1321,13 @@ function VaultInputModal({
     } finally {
       setLoading(false);
     }
-  });
+  };
   const handleClose = () => {
     setValues({});
     onClose();
   };
   if (!integration) return null;
-  const isValid = integration.fields.filter((f) => f.required).every((f) => {
-    var _a;
-    return (_a = values[f.key]) == null ? void 0 : _a.trim();
-  });
+  const isValid = integration.fields.filter((f) => f.required).every((f) => values[f.key]?.trim());
   return /* @__PURE__ */ jsx20(Dialog3, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs16(DialogContent3, { children: [
     /* @__PURE__ */ jsx20(DialogHeader2, { children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx20("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__ */ jsx20(
@@ -1376,7 +1360,8 @@ function VaultInputModal({
             type: field.type,
             placeholder: field.placeholder,
             value: values[field.key] || "",
-            onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+            onChange: (e) => setValues((prev) => ({
+              ...prev,
               [field.key]: e.target.value
             })),
             required: field.required
@@ -1557,19 +1542,19 @@ function VaultList({ items, onRotate, onDelete, onOpenAddModal }) {
     setSelectedItem(item);
     setDeleteDialogOpen(true);
   };
-  const handleConfirmDelete = () => __async(null, null, function* () {
+  const handleConfirmDelete = async () => {
     if (!selectedItem) return;
-    yield onDelete(selectedItem.id);
+    await onDelete(selectedItem.id);
     setDeleteDialogOpen(false);
     setSelectedItem(null);
-  });
-  const handleSave = (credentials) => __async(null, null, function* () {
+  };
+  const handleSave = async (credentials) => {
     if (modalMode === "rotate" && selectedItem) {
-      yield onRotate(selectedItem.id, credentials);
+      await onRotate(selectedItem.id, credentials);
     }
     setInputModalOpen(false);
     setSelectedItem(null);
-  });
+  };
   const getIntegrationForModal = () => {
     if (!selectedItem) return void 0;
     const fields = integrationFields[selectedItem.integrationId] || integrationFields.default;
@@ -1605,7 +1590,7 @@ function VaultList({ items, onRotate, onDelete, onOpenAddModal }) {
           setDeleteDialogOpen(false);
           setSelectedItem(null);
         },
-        itemName: (selectedItem == null ? void 0 : selectedItem.name) || "",
+        itemName: selectedItem?.name || "",
         onConfirm: handleConfirmDelete
       }
     ),
@@ -1636,9 +1621,9 @@ import { Table as Table2, TableBody as TableBody2, TableCell as TableCell2, Tabl
 import { Mail, MoreHorizontal, Plus, Shield as Shield2, User } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var mockUsers = [
-  { id: "1", name: "John Doe", email: "john@example.com", role: "Admin", avatar: "", status: "Active" },
-  { id: "2", name: "Jane Smith", email: "jane@example.com", role: "Member", avatar: "", status: "Active" },
-  { id: "3", name: "Bob Johnson", email: "bob@example.com", role: "Member", avatar: "", status: "Pending" }
+  { id: "1", name: "John Doe", email: "john@example.com.ai", role: "Admin", avatar: "", status: "Active" },
+  { id: "2", name: "Jane Smith", email: "jane@example.com.ai", role: "Member", avatar: "", status: "Active" },
+  { id: "3", name: "Bob Johnson", email: "bob@example.com.ai", role: "Member", avatar: "", status: "Pending" }
 ];
 var mockSessions = [
   { id: "1", device: "Chrome on macOS", location: "San Francisco, CA", lastActive: "Now", current: true },
@@ -1712,7 +1697,7 @@ function MockUserProfile() {
         ] }),
         /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx23(Label2, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ jsx23(Input3, { id: "email", type: "email", defaultValue: "john@example.com", disabled: true })
+          /* @__PURE__ */ jsx23(Input3, { id: "email", type: "email", defaultValue: "john@example.com.ai", disabled: true })
         ] }),
         /* @__PURE__ */ jsx23(Button7, { children: "Save Changes" })
       ] })
@@ -1837,20 +1822,14 @@ function SettingsPage({ sections, children }) {
     ] }),
     /* @__PURE__ */ jsx24(Separator, {}),
     /* @__PURE__ */ jsxs20(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "space-y-6", children: [
-      /* @__PURE__ */ jsx24(TabsList, { className: "grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-2", children: activeSections.map((section) => {
-        var _a;
-        return /* @__PURE__ */ jsx24(TabsTrigger, { value: section, children: ((_a = sectionMeta[section]) == null ? void 0 : _a.title) || section }, section);
-      }) }),
-      activeSections.map((section, index) => {
-        var _a, _b;
-        return /* @__PURE__ */ jsx24(TabsContent, { value: section, className: "space-y-6", children: /* @__PURE__ */ jsxs20(Card8, { children: [
-          /* @__PURE__ */ jsxs20(CardHeader7, { children: [
-            /* @__PURE__ */ jsx24(CardTitle7, { children: ((_a = sectionMeta[section]) == null ? void 0 : _a.title) || section }),
-            /* @__PURE__ */ jsx24(CardDescription6, { children: ((_b = sectionMeta[section]) == null ? void 0 : _b.description) || `Manage your ${section} settings` })
-          ] }),
-          /* @__PURE__ */ jsx24(CardContent7, { children: React.Children.toArray(children)[index] || /* @__PURE__ */ jsx24("div", { className: "text-center text-sm text-muted-foreground py-8", children: "No content provided for this section" }) })
-        ] }) }, section);
-      })
+      /* @__PURE__ */ jsx24(TabsList, { className: "grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-2", children: activeSections.map((section) => /* @__PURE__ */ jsx24(TabsTrigger, { value: section, children: sectionMeta[section]?.title || section }, section)) }),
+      activeSections.map((section, index) => /* @__PURE__ */ jsx24(TabsContent, { value: section, className: "space-y-6", children: /* @__PURE__ */ jsxs20(Card8, { children: [
+        /* @__PURE__ */ jsxs20(CardHeader7, { children: [
+          /* @__PURE__ */ jsx24(CardTitle7, { children: sectionMeta[section]?.title || section }),
+          /* @__PURE__ */ jsx24(CardDescription6, { children: sectionMeta[section]?.description || `Manage your ${section} settings` })
+        ] }),
+        /* @__PURE__ */ jsx24(CardContent7, { children: React.Children.toArray(children)[index] || /* @__PURE__ */ jsx24("div", { className: "text-center text-sm text-muted-foreground py-8", children: "No content provided for this section" }) })
+      ] }) }, section))
     ] })
   ] });
 }
@@ -1865,19 +1844,18 @@ import { Label as Label3 } from "@mdxui/primitives/label";
 import { User as User2, Mail as Mail2, Upload } from "lucide-react";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function UserProfile({ user, onUpdate, readonly = false }) {
-  var _a, _b;
   const [formData, setFormData] = React2.useState({
-    firstName: (user == null ? void 0 : user.firstName) || ((_a = user == null ? void 0 : user.name) == null ? void 0 : _a.split(" ")[0]) || "",
-    lastName: (user == null ? void 0 : user.lastName) || ((_b = user == null ? void 0 : user.name) == null ? void 0 : _b.split(" ").slice(1).join(" ")) || "",
-    email: (user == null ? void 0 : user.email) || "",
-    avatar: (user == null ? void 0 : user.avatar) || ""
+    firstName: user?.firstName || user?.name?.split(" ")[0] || "",
+    lastName: user?.lastName || user?.name?.split(" ").slice(1).join(" ") || "",
+    email: user?.email || "",
+    avatar: user?.avatar || ""
   });
   const handleSubmit = (e) => {
     e.preventDefault();
-    onUpdate == null ? void 0 : onUpdate(formData);
+    onUpdate?.(formData);
   };
   const handleChange = (field, value) => {
-    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: value }));
+    setFormData((prev) => ({ ...prev, [field]: value }));
   };
   const getInitials = () => {
     const first = formData.firstName[0] || "";
@@ -1946,7 +1924,7 @@ function UserProfile({ user, onUpdate, readonly = false }) {
             type: "email",
             value: formData.email,
             onChange: (e) => handleChange("email", e.target.value),
-            placeholder: "john@example.com",
+            placeholder: "john@example.com.ai",
             disabled: true
           }
         ),
@@ -2030,14 +2008,14 @@ function APIKeyManager({
       return next;
     });
   };
-  const copyToClipboard = (text, label) => __async(null, null, function* () {
+  const copyToClipboard = async (text, label) => {
     try {
-      yield navigator.clipboard.writeText(text);
+      await navigator.clipboard.writeText(text);
       toast.success(`${label} copied to clipboard`);
     } catch (err) {
       toast.error("Failed to copy to clipboard");
     }
-  });
+  };
   const handleCreateKey = () => {
     if (!newKeyName.trim()) {
       toast.error("Please enter a key name");
@@ -2067,7 +2045,7 @@ function APIKeyManager({
       year: "numeric"
     }).format(date);
   };
-  const maskKey2 = (key, prefix) => {
+  const maskKey2 = (_key, prefix) => {
     return `${prefix}${"\u2022".repeat(20)}`;
   };
   return /* @__PURE__ */ jsx26("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs22(Card10, { children: [
@@ -2249,7 +2227,7 @@ function TeamManager({
       {
         id: "1",
         name: "John Doe",
-        email: "john@example.com",
+        email: "john@example.com.ai",
         role: "owner",
         avatar: "",
         status: "active",
@@ -2258,7 +2236,7 @@ function TeamManager({
       {
         id: "2",
         name: "Jane Smith",
-        email: "jane@example.com",
+        email: "jane@example.com.ai",
         role: "admin",
         avatar: "",
         status: "active",
@@ -2267,7 +2245,7 @@ function TeamManager({
       {
         id: "3",
         name: "Bob Johnson",
-        email: "bob@example.com",
+        email: "bob@example.com.ai",
         role: "member",
         avatar: "",
         status: "pending",
@@ -2300,14 +2278,14 @@ function TeamManager({
   const handleRoleChange = (memberId, newRole) => {
     setMembers(
       members.map(
-        (m) => m.id === memberId ? __spreadProps(__spreadValues({}, m), { role: newRole }) : m
+        (m) => m.id === memberId ? { ...m, role: newRole } : m
       )
     );
     toast2.success("Member role updated");
   };
   const handleRemoveMember = (memberId) => {
     const member = members.find((m) => m.id === memberId);
-    if ((member == null ? void 0 : member.role) === "owner") {
+    if (member?.role === "owner") {
       toast2.error("Cannot remove the workspace owner");
       return;
     }
@@ -2376,7 +2354,7 @@ function TeamManager({
                   type: "email",
                   value: inviteEmail,
                   onChange: (e) => setInviteEmail(e.target.value),
-                  placeholder: "colleague@example.com"
+                  placeholder: "colleague@example.com.ai"
                 }
               )
             ] }),
@@ -2597,7 +2575,7 @@ function Billing({
   };
   const handleRemovePaymentMethod = (methodId) => {
     const method = paymentMethods.find((pm) => pm.id === methodId);
-    if (method == null ? void 0 : method.isDefault) {
+    if (method?.isDefault) {
       toast3.error("Cannot remove default payment method");
       return;
     }
@@ -2606,7 +2584,8 @@ function Billing({
   };
   const handleSetDefaultPaymentMethod = (methodId) => {
     setPaymentMethods(
-      paymentMethods.map((pm) => __spreadProps(__spreadValues({}, pm), {
+      paymentMethods.map((pm) => ({
+        ...pm,
         isDefault: pm.id === methodId
       }))
     );
@@ -2822,9 +2801,32 @@ function Billing({
   ] });
 }
 
+// src/developer/lib/icons.ts
+import * as LucideIcons from "lucide-react";
+function getIconByName(name) {
+  const icons = LucideIcons;
+  const icon = icons[name];
+  if (icon && typeof icon === "function") {
+    return icon;
+  }
+  return void 0;
+}
+var dashboardIcons = {
+  overview: "BarChart3",
+  requests: "Activity",
+  keys: "Key",
+  team: "Users",
+  billing: "CreditCard",
+  settings: "Settings",
+  webhooks: "Webhook",
+  database: "Database",
+  integrations: "Puzzle",
+  vault: "Lock"
+};
+
 // src/developer/providers/app-providers.tsx
 import { ThemeProvider } from "next-themes";
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // src/developer/lib/platform.ts
 import { createSDK } from "platform.do";
@@ -2891,7 +2893,6 @@ function clearAuth() {
 }
 var apiBaseUrl = "/api";
 function getDebugStatus() {
-  var _a;
   const effectiveToken = getEffectiveToken();
   return {
     isAuthenticated: currentToken !== null,
@@ -2899,30 +2900,28 @@ function getDebugStatus() {
     hasEffectiveToken: effectiveToken !== null,
     hasSDK: sdkInstance !== null,
     tokenSource: currentToken ? "auth" : devToken ? "dev" : "none",
-    tokenLength: (_a = effectiveToken == null ? void 0 : effectiveToken.length) != null ? _a : 0,
+    tokenLength: effectiveToken?.length ?? 0,
     tokenPreview: effectiveToken ? `${effectiveToken.slice(0, 20)}...${effectiveToken.slice(-10)}` : null,
     debugMode,
     apiBaseUrl
   };
 }
-function testSDKConnection() {
-  return __async(this, null, function* () {
-    const status = getDebugStatus();
-    console.log("[Platform SDK] Testing connection...", status);
-    if (!sdkInstance) {
-      console.error("[Platform SDK] No SDK instance - not authenticated and no dev token");
-      return { success: false, error: "No SDK instance", status };
-    }
-    try {
-      console.log("[Platform SDK] Calling api.APIKeys.list()...");
-      const result = yield sdkInstance.api.APIKeys.list();
-      console.log("[Platform SDK] Connection successful!", { result });
-      return { success: true, result, status };
-    } catch (error) {
-      console.error("[Platform SDK] Connection failed:", error);
-      return { success: false, error, status };
-    }
-  });
+async function testSDKConnection() {
+  const status = getDebugStatus();
+  console.log("[Platform SDK] Testing connection...", status);
+  if (!sdkInstance) {
+    console.error("[Platform SDK] No SDK instance - not authenticated and no dev token");
+    return { success: false, error: "No SDK instance", status };
+  }
+  try {
+    console.log("[Platform SDK] Calling api.APIKeys.list()...");
+    const result = await sdkInstance.api.APIKeys.list();
+    console.log("[Platform SDK] Connection successful!", { result });
+    return { success: true, result, status };
+  } catch (error) {
+    console.error("[Platform SDK] Connection failed:", error);
+    return { success: false, error, status };
+  }
 }
 if (typeof window !== "undefined") {
   ;
@@ -2939,56 +2938,12 @@ if (typeof window !== "undefined") {
 }
 
 // src/developer/providers/identity-provider.tsx
-import { AuthKitProvider } from "@workos-inc/authkit-react";
-import { WorkOsWidgets } from "@workos-inc/widgets";
-import { useEffect as useEffect4, useState as useState12 } from "react";
+import { IdentityProvider as AuthIdentityProvider, WidgetsProvider } from "@mdxui/auth";
 import { jsx as jsx29 } from "react/jsx-runtime";
-function IdentityWidgetsWrapper({ children }) {
-  const [mounted, setMounted] = useState12(false);
-  const [isDark, setIsDark] = useState12(false);
-  useEffect4(() => {
-    setMounted(true);
-    const checkDarkMode = () => {
-      const isDarkClass = document.documentElement.classList.contains("dark");
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      setIsDark(isDarkClass || !document.documentElement.classList.contains("light") && prefersDark);
-    };
-    checkDarkMode();
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    mediaQuery.addEventListener("change", checkDarkMode);
-    return () => {
-      observer.disconnect();
-      mediaQuery.removeEventListener("change", checkDarkMode);
-    };
-  }, []);
-  const appearance = mounted ? isDark ? "dark" : "light" : "inherit";
-  return /* @__PURE__ */ jsx29(
-    WorkOsWidgets,
-    {
-      theme: {
-        appearance,
-        radius: "medium",
-        scaling: "100%"
-      },
-      elements: {
-        primaryButton: {
-          variant: "solid"
-        },
-        secondaryButton: {
-          variant: "outline"
-        }
-      },
-      children
-    }
-  );
-}
 function IdentityProvider({ children }) {
-  var _a, _b;
   const { config } = useDashboard();
   const { identity } = config;
-  const redirectUri = (_b = identity.redirectUri) != null ? _b : typeof window !== "undefined" ? `${window.location.origin}${(_a = config.basePath) != null ? _a : "/"}` : void 0;
+  const redirectUri = identity.redirectUri ?? (typeof window !== "undefined" ? `${window.location.origin}${config.basePath ?? "/"}` : void 0);
   const onRedirectCallback = () => {
     if (typeof window !== "undefined") {
       const url = new URL(window.location.href);
@@ -2998,23 +2953,23 @@ function IdentityProvider({ children }) {
     }
   };
   return /* @__PURE__ */ jsx29(
-    AuthKitProvider,
+    AuthIdentityProvider,
     {
       clientId: identity.clientId,
       apiHostname: identity.apiHostname,
       devMode: identity.devMode,
       redirectUri,
       onRedirectCallback,
-      children: /* @__PURE__ */ jsx29(IdentityWidgetsWrapper, { children })
+      children
     }
   );
 }
 
 // src/developer/providers/query-provider.tsx
+import { useAuth as useAuth4 } from "@mdxui/auth";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useAuth as useAuth4 } from "@workos-inc/authkit-react";
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect4 } from "react";
 
 // src/developer/lib/query-client.ts
 import { QueryClient } from "@tanstack/react-query";
@@ -3035,21 +2990,19 @@ var queryClient = new QueryClient({
 import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function AuthSync({ children }) {
   const { user, getAccessToken } = useAuth4();
-  useEffect5(() => {
-    function syncToken() {
-      return __async(this, null, function* () {
-        if (user) {
-          try {
-            const token = yield getAccessToken();
-            setAuthToken(token);
-          } catch (e) {
-            clearAuth();
-          }
-        } else {
+  useEffect4(() => {
+    async function syncToken() {
+      if (user) {
+        try {
+          const token = await getAccessToken();
+          setAuthToken(token);
+        } catch {
           clearAuth();
-          queryClient.clear();
         }
-      });
+      } else {
+        clearAuth();
+        queryClient.clear();
+      }
     }
     syncToken();
   }, [user, getAccessToken]);
@@ -3065,7 +3018,7 @@ function QueryProvider({ children }) {
 // src/developer/providers/app-providers.tsx
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function SDKInitializer({ config }) {
-  useEffect6(() => {
+  useEffect5(() => {
     if (config.debug) {
       setDebugMode(true);
     }
@@ -3076,8 +3029,7 @@ function SDKInitializer({ config }) {
   return null;
 }
 function AppProviders({ config, children }) {
-  var _a, _b;
-  const themeMode = (_b = (_a = config.theme) == null ? void 0 : _a.mode) != null ? _b : "system";
+  const themeMode = config.theme?.mode ?? "system";
   return /* @__PURE__ */ jsx31(
     ThemeProvider,
     {
@@ -3094,43 +3046,25 @@ function AppProviders({ config, children }) {
 }
 
 // src/developer/providers/auth-gate.tsx
-import { useAuth as useAuth5 } from "@workos-inc/authkit-react";
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { AuthGate as AuthAuthGate } from "@mdxui/auth";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function AuthGate({ children }) {
-  var _a, _b;
   const { config } = useDashboard();
-  const { user, isLoading } = useAuth5();
   const { identity } = config;
-  const required = (_a = identity.required) != null ? _a : true;
-  const onUnauthenticated = (_b = identity.onUnauthenticated) != null ? _b : "landing";
-  if (!required) {
-    return /* @__PURE__ */ jsx32(Fragment6, { children });
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx32("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-4", children: [
-      /* @__PURE__ */ jsx32("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
-      /* @__PURE__ */ jsx32("p", { className: "text-sm text-muted-foreground", children: "Loading..." })
-    ] }) });
-  }
-  if (user) {
-    return /* @__PURE__ */ jsx32(Fragment6, { children });
-  }
-  switch (onUnauthenticated) {
-    case "redirect":
-      if (identity.unauthenticatedRedirectUrl && typeof window !== "undefined") {
-        window.location.href = identity.unauthenticatedRedirectUrl;
-        return /* @__PURE__ */ jsx32("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsx32("p", { className: "text-sm text-muted-foreground", children: "Redirecting..." }) });
-      }
-      return identity.landingComponent ? identity.landingComponent : /* @__PURE__ */ jsx32(LandingPage, {});
-    case "allow":
-      return /* @__PURE__ */ jsx32(Fragment6, { children });
-    case "landing":
-      return identity.landingComponent ? identity.landingComponent : /* @__PURE__ */ jsx32(LandingPage, {});
-  }
+  return /* @__PURE__ */ jsx32(
+    AuthAuthGate,
+    {
+      required: identity.required ?? true,
+      onUnauthenticated: identity.onUnauthenticated ?? "landing",
+      redirectUrl: identity.unauthenticatedRedirectUrl,
+      landingComponent: identity.landingComponent ?? /* @__PURE__ */ jsx32(LandingPage, {}),
+      children
+    }
+  );
 }
 
 // src/developer/router.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useLocation as useLocation2 } from "react-router-dom";
 
 // src/developer/pages/billing.tsx
@@ -3145,7 +3079,7 @@ import { SidebarTrigger } from "@mdxui/primitives/sidebar";
 import { Switch } from "@mdxui/primitives/switch";
 import { Table as Table6, TableBody as TableBody6, TableCell as TableCell6, TableHead as TableHead6, TableHeader as TableHeader6, TableRow as TableRow6 } from "@mdxui/primitives/table";
 import { Bell, Check as Check2, CreditCard as CreditCard3, Download as Download2, FileText as FileText2, Receipt } from "lucide-react";
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import { toast as toast4 } from "sonner";
 
 // src/developer/lib/mock-data.ts
@@ -3715,7 +3649,7 @@ var mockWebhookActivity = {
 };
 
 // src/developer/pages/billing.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function formatRelativeDate(dateString) {
   const date = new Date(dateString);
   return date.toLocaleDateString("en-US", {
@@ -3738,95 +3672,145 @@ function getUsageColor(percentage) {
   if (percentage >= 75) return "bg-yellow-500";
   return "";
 }
-function BillingPage() {
-  const [alertsEnabled, setAlertsEnabled] = useState13(mockBillingData.billingAlerts.enabled);
-  const handleDownloadInvoice = (invoiceNumber) => {
-    toast4.success("Invoice downloaded", {
-      description: `${invoiceNumber} has been downloaded.`
-    });
+function BillingPage({
+  billingData: initialBillingData,
+  onManagePlan,
+  onUpdatePaymentMethod,
+  onDownloadInvoice,
+  onToggleAlerts,
+  hideHeader = false,
+  className
+} = {}) {
+  const billingData = initialBillingData ?? mockBillingData;
+  const [alertsEnabled, setAlertsEnabled] = useState12(billingData.billingAlerts.enabled);
+  const handleManagePlan = async () => {
+    if (onManagePlan) {
+      try {
+        await onManagePlan();
+      } catch {
+        toast4.error("Failed to open plan management");
+      }
+    } else {
+      toast4.info("Plan management would open here");
+    }
   };
-  const handleAlertsToggle = (enabled) => {
+  const handleUpdatePaymentMethod = async () => {
+    if (onUpdatePaymentMethod) {
+      try {
+        await onUpdatePaymentMethod();
+      } catch {
+        toast4.error("Failed to update payment method");
+      }
+    } else {
+      toast4.info("Payment method update would open here");
+    }
+  };
+  const handleDownloadInvoice = async (invoiceId, invoiceNumber) => {
+    if (onDownloadInvoice) {
+      try {
+        await onDownloadInvoice(invoiceId);
+        toast4.success("Invoice downloaded", {
+          description: `${invoiceNumber} has been downloaded.`
+        });
+      } catch {
+        toast4.error("Failed to download invoice");
+      }
+    } else {
+      toast4.success("Invoice downloaded", {
+        description: `${invoiceNumber} has been downloaded.`
+      });
+    }
+  };
+  const handleAlertsToggle = async (enabled) => {
+    if (onToggleAlerts) {
+      try {
+        await onToggleAlerts(enabled);
+      } catch {
+        toast4.error("Failed to update alert settings");
+        return;
+      }
+    }
     setAlertsEnabled(enabled);
     toast4.success(enabled ? "Billing alerts enabled" : "Billing alerts disabled", {
-      description: enabled ? `You'll be notified when usage reaches ${mockBillingData.billingAlerts.threshold}%.` : "You won't receive usage alerts."
+      description: enabled ? `You'll be notified when usage reaches ${billingData.billingAlerts.threshold}%.` : "You won't receive usage alerts."
     });
   };
-  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
-    /* @__PURE__ */ jsx33("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs27(Fragment6, { children: [
+    !hideHeader && /* @__PURE__ */ jsx33("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx33(SidebarTrigger, { className: "-ml-1" }),
       /* @__PURE__ */ jsx33(Separator3, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx33(Breadcrumb, { children: /* @__PURE__ */ jsx33(BreadcrumbList, { children: /* @__PURE__ */ jsx33(BreadcrumbItem, { children: /* @__PURE__ */ jsx33(BreadcrumbPage, { children: "Billing" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs28("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs28("div", { children: [
+    /* @__PURE__ */ jsxs27("div", { className: `flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs27("div", { children: [
         /* @__PURE__ */ jsx33("h1", { className: "text-2xl font-bold", children: "Billing" }),
         /* @__PURE__ */ jsx33("p", { className: "text-muted-foreground", children: "Manage your subscription and billing information." })
       ] }) }),
-      /* @__PURE__ */ jsxs28("div", { className: "grid gap-4 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs28(Card13, { children: [
-          /* @__PURE__ */ jsxs28(CardHeader12, { children: [
-            /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs27(Card13, { children: [
+          /* @__PURE__ */ jsxs27(CardHeader12, { children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsx33(CardTitle12, { children: "Current Plan" }),
-              /* @__PURE__ */ jsx33(Badge6, { variant: mockBillingData.status === "active" ? "default" : "secondary", children: mockBillingData.status })
+              /* @__PURE__ */ jsx33(Badge6, { variant: billingData.status === "active" ? "default" : "secondary", children: billingData.status })
             ] }),
-            /* @__PURE__ */ jsxs28(CardDescription11, { children: [
+            /* @__PURE__ */ jsxs27(CardDescription11, { children: [
               "Renews",
               " ",
-              new Date(mockBillingData.renewalDate).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+              new Date(billingData.renewalDate).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs28(CardContent12, { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs28("div", { className: "flex items-baseline gap-2", children: [
-              /* @__PURE__ */ jsx33("p", { className: "text-3xl font-bold", children: mockBillingData.plan }),
-              /* @__PURE__ */ jsxs28("p", { className: "text-lg text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs27(CardContent12, { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsx33("p", { className: "text-3xl font-bold", children: billingData.plan }),
+              /* @__PURE__ */ jsxs27("p", { className: "text-lg text-muted-foreground", children: [
                 "$",
-                mockBillingData.planPrice.toFixed(0),
+                billingData.planPrice.toFixed(0),
                 "/mo"
               ] })
             ] }),
-            /* @__PURE__ */ jsx33("div", { className: "space-y-2", children: mockBillingData.planFeatures.map((feature) => /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx33("div", { className: "space-y-2", children: billingData.planFeatures.map((feature) => /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
               /* @__PURE__ */ jsx33(Check2, { className: "h-4 w-4 text-primary" }),
               feature
             ] }, feature)) }),
-            /* @__PURE__ */ jsx33(Button12, { variant: "outline", size: "sm", className: "w-full", children: "Manage Plan" })
+            /* @__PURE__ */ jsx33(Button12, { variant: "outline", size: "sm", className: "w-full", onClick: handleManagePlan, children: "Manage Plan" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs28(Card13, { children: [
+        /* @__PURE__ */ jsxs27(Card13, { children: [
           /* @__PURE__ */ jsx33(CardHeader12, { children: /* @__PURE__ */ jsx33(CardTitle12, { children: "Total Spend" }) }),
-          /* @__PURE__ */ jsxs28(CardContent12, { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxs28("p", { className: "text-3xl font-bold", children: [
+          /* @__PURE__ */ jsxs27(CardContent12, { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs27("p", { className: "text-3xl font-bold", children: [
               "$",
-              mockBillingData.totalSpend.toFixed(2)
+              billingData.totalSpend.toFixed(2)
             ] }),
             /* @__PURE__ */ jsx33("p", { className: "text-sm text-muted-foreground", children: "This billing period" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "grid gap-4 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs28(Card13, { className: "md:row-span-2", children: [
-          /* @__PURE__ */ jsxs28(CardHeader12, { children: [
+      /* @__PURE__ */ jsxs27("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs27(Card13, { className: "md:row-span-2", children: [
+          /* @__PURE__ */ jsxs27(CardHeader12, { children: [
             /* @__PURE__ */ jsx33(CardTitle12, { children: "Usage Breakdown" }),
             /* @__PURE__ */ jsx33(CardDescription11, { children: "Resource usage for the current billing period" })
           ] }),
-          /* @__PURE__ */ jsx33(CardContent12, { className: "space-y-6", children: mockBillingData.usageBreakdown.map((item) => {
+          /* @__PURE__ */ jsx33(CardContent12, { className: "space-y-6", children: billingData.usageBreakdown.map((item) => {
             const percentage = getUsagePercentage(item.usage, item.limit);
             const colorClass = getUsageColor(percentage);
-            return /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs28("div", { children: [
+            return /* @__PURE__ */ jsxs27("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs27("div", { children: [
                   /* @__PURE__ */ jsx33("p", { className: "font-medium", children: item.resource }),
-                  /* @__PURE__ */ jsxs28("p", { className: "text-sm text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs27("p", { className: "text-sm text-muted-foreground", children: [
                     formatUsage(item.usage, item.unit),
                     " of ",
                     formatUsage(item.limit, item.unit)
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs28("div", { className: "text-right", children: [
-                  /* @__PURE__ */ jsxs28("p", { className: "font-medium", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "text-right", children: [
+                  /* @__PURE__ */ jsxs27("p", { className: "font-medium", children: [
                     "$",
                     item.cost.toFixed(2)
                   ] }),
-                  /* @__PURE__ */ jsxs28("p", { className: "text-sm text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs27("p", { className: "text-sm text-muted-foreground", children: [
                     percentage.toFixed(0),
                     "% used"
                   ] })
@@ -3836,44 +3820,44 @@ function BillingPage() {
             ] }, item.resource);
           }) })
         ] }),
-        /* @__PURE__ */ jsxs28(Card13, { children: [
-          /* @__PURE__ */ jsx33(CardHeader12, { className: "pb-3", children: /* @__PURE__ */ jsxs28(CardTitle12, { className: "flex items-center gap-2 text-base", children: [
+        /* @__PURE__ */ jsxs27(Card13, { children: [
+          /* @__PURE__ */ jsx33(CardHeader12, { className: "pb-3", children: /* @__PURE__ */ jsxs27(CardTitle12, { className: "flex items-center gap-2 text-base", children: [
             /* @__PURE__ */ jsx33(CreditCard3, { className: "h-4 w-4" }),
             "Payment Method"
           ] }) }),
-          /* @__PURE__ */ jsxs28(CardContent12, { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between p-3 border rounded-md", children: [
-              /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx33("div", { className: "h-8 w-12 bg-muted rounded flex items-center justify-center text-xs font-medium", children: mockBillingData.paymentMethod.brand }),
-                /* @__PURE__ */ jsxs28("div", { children: [
-                  /* @__PURE__ */ jsxs28("p", { className: "font-medium text-sm", children: [
+          /* @__PURE__ */ jsxs27(CardContent12, { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between p-3 border rounded-md", children: [
+              /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx33("div", { className: "h-8 w-12 bg-muted rounded flex items-center justify-center text-xs font-medium", children: billingData.paymentMethod.brand }),
+                /* @__PURE__ */ jsxs27("div", { children: [
+                  /* @__PURE__ */ jsxs27("p", { className: "font-medium text-sm", children: [
                     "\u2022\u2022\u2022\u2022 ",
-                    mockBillingData.paymentMethod.last4
+                    billingData.paymentMethod.last4
                   ] }),
-                  /* @__PURE__ */ jsxs28("p", { className: "text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs27("p", { className: "text-xs text-muted-foreground", children: [
                     "Expires ",
-                    mockBillingData.paymentMethod.expiryMonth,
+                    billingData.paymentMethod.expiryMonth,
                     "/",
-                    mockBillingData.paymentMethod.expiryYear
+                    billingData.paymentMethod.expiryYear
                   ] })
                 ] })
               ] }),
               /* @__PURE__ */ jsx33(Badge6, { variant: "secondary", className: "text-xs", children: "Default" })
             ] }),
-            /* @__PURE__ */ jsx33(Button12, { variant: "outline", size: "sm", className: "w-full", children: "Update" })
+            /* @__PURE__ */ jsx33(Button12, { variant: "outline", size: "sm", className: "w-full", onClick: handleUpdatePaymentMethod, children: "Update" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs28(Card13, { children: [
-          /* @__PURE__ */ jsx33(CardHeader12, { className: "pb-3", children: /* @__PURE__ */ jsxs28(CardTitle12, { className: "flex items-center gap-2 text-base", children: [
+        /* @__PURE__ */ jsxs27(Card13, { children: [
+          /* @__PURE__ */ jsx33(CardHeader12, { className: "pb-3", children: /* @__PURE__ */ jsxs27(CardTitle12, { className: "flex items-center gap-2 text-base", children: [
             /* @__PURE__ */ jsx33(Bell, { className: "h-4 w-4" }),
             "Billing Alerts"
           ] }) }),
-          /* @__PURE__ */ jsx33(CardContent12, { children: /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs28("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx33(CardContent12, { children: /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx33(Label7, { htmlFor: "alerts", className: "text-sm", children: "Usage alerts" }),
-              /* @__PURE__ */ jsxs28("p", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs27("p", { className: "text-xs text-muted-foreground", children: [
                 "Notify at ",
-                mockBillingData.billingAlerts.threshold,
+                billingData.billingAlerts.threshold,
                 "% usage"
               ] })
             ] }),
@@ -3881,32 +3865,32 @@ function BillingPage() {
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs28(Card13, { children: [
-        /* @__PURE__ */ jsx33(CardHeader12, { children: /* @__PURE__ */ jsxs28(CardTitle12, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs27(Card13, { children: [
+        /* @__PURE__ */ jsx33(CardHeader12, { children: /* @__PURE__ */ jsxs27(CardTitle12, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx33(Receipt, { className: "h-5 w-5" }),
           "Invoice History"
         ] }) }),
-        /* @__PURE__ */ jsx33(CardContent12, { children: mockBillingData.invoices.length > 0 ? /* @__PURE__ */ jsxs28(Table6, { children: [
-          /* @__PURE__ */ jsx33(TableHeader6, { children: /* @__PURE__ */ jsxs28(TableRow6, { children: [
+        /* @__PURE__ */ jsx33(CardContent12, { children: billingData.invoices.length > 0 ? /* @__PURE__ */ jsxs27(Table6, { children: [
+          /* @__PURE__ */ jsx33(TableHeader6, { children: /* @__PURE__ */ jsxs27(TableRow6, { children: [
             /* @__PURE__ */ jsx33(TableHead6, { className: "pl-4", children: "Invoice" }),
             /* @__PURE__ */ jsx33(TableHead6, { children: "Date" }),
             /* @__PURE__ */ jsx33(TableHead6, { children: "Amount" }),
             /* @__PURE__ */ jsx33(TableHead6, { children: "Status" }),
             /* @__PURE__ */ jsx33(TableHead6, { className: "w-[80px]" })
           ] }) }),
-          /* @__PURE__ */ jsx33(TableBody6, { children: mockBillingData.invoices.map((invoice) => /* @__PURE__ */ jsxs28(TableRow6, { children: [
+          /* @__PURE__ */ jsx33(TableBody6, { children: billingData.invoices.map((invoice) => /* @__PURE__ */ jsxs27(TableRow6, { children: [
             /* @__PURE__ */ jsx33(TableCell6, { className: "py-4 pl-4 font-mono text-sm", children: invoice.invoiceNumber }),
             /* @__PURE__ */ jsx33(TableCell6, { className: "py-4", children: formatRelativeDate(invoice.date) }),
-            /* @__PURE__ */ jsxs28(TableCell6, { className: "py-4 font-medium", children: [
+            /* @__PURE__ */ jsxs27(TableCell6, { className: "py-4 font-medium", children: [
               "$",
               invoice.amount.toFixed(2)
             ] }),
             /* @__PURE__ */ jsx33(TableCell6, { className: "py-4", children: /* @__PURE__ */ jsx33(Badge6, { variant: invoice.status === "paid" ? "default" : "secondary", children: invoice.status }) }),
-            /* @__PURE__ */ jsx33(TableCell6, { className: "py-4 pr-4", children: /* @__PURE__ */ jsx33(Button12, { variant: "ghost", size: "icon", onClick: () => handleDownloadInvoice(invoice.invoiceNumber), children: /* @__PURE__ */ jsx33(Download2, { className: "h-4 w-4" }) }) })
+            /* @__PURE__ */ jsx33(TableCell6, { className: "py-4 pr-4", children: /* @__PURE__ */ jsx33(Button12, { variant: "ghost", size: "icon", onClick: () => handleDownloadInvoice(invoice.id, invoice.invoiceNumber), children: /* @__PURE__ */ jsx33(Download2, { className: "h-4 w-4" }) }) })
           ] }, invoice.id)) })
-        ] }) : /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center gap-4 py-16 text-center", children: [
+        ] }) : /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-4 py-16 text-center", children: [
           /* @__PURE__ */ jsx33("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx33(FileText2, { className: "h-8 w-8 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsxs28("div", { children: [
+          /* @__PURE__ */ jsxs27("div", { children: [
             /* @__PURE__ */ jsx33("p", { className: "font-medium", children: "No invoices yet" }),
             /* @__PURE__ */ jsx33("p", { className: "text-sm text-muted-foreground mt-1", children: "Your invoices will appear here after your first billing cycle." })
           ] })
@@ -3922,22 +3906,22 @@ import { Card as Card14, CardContent as CardContent13 } from "@mdxui/primitives/
 import { Separator as Separator4 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger2 } from "@mdxui/primitives/sidebar";
 import { Database as Database2 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 function DatabasePage() {
-  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
-    /* @__PURE__ */ jsx34("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    /* @__PURE__ */ jsx34("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx34(SidebarTrigger2, { className: "-ml-1" }),
       /* @__PURE__ */ jsx34(Separator4, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx34(Breadcrumb2, { children: /* @__PURE__ */ jsx34(BreadcrumbList2, { children: /* @__PURE__ */ jsx34(BreadcrumbItem2, { children: /* @__PURE__ */ jsx34(BreadcrumbPage2, { children: "Database" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs29("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs29("div", { children: [
+    /* @__PURE__ */ jsxs28("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs28("div", { children: [
         /* @__PURE__ */ jsx34("h1", { className: "text-2xl font-bold", children: "Database" }),
         /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground", children: "Browse and manage your database." })
       ] }),
-      /* @__PURE__ */ jsx34(Card14, { children: /* @__PURE__ */ jsx34(CardContent13, { className: "py-16", children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+      /* @__PURE__ */ jsx34(Card14, { children: /* @__PURE__ */ jsx34(CardContent13, { className: "py-16", children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
         /* @__PURE__ */ jsx34("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx34(Database2, { className: "h-8 w-8 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxs29("div", { children: [
+        /* @__PURE__ */ jsxs28("div", { children: [
           /* @__PURE__ */ jsx34("p", { className: "font-medium", children: "Coming soon" }),
           /* @__PURE__ */ jsx34("p", { className: "text-sm text-muted-foreground mt-1", children: "Database management tools will be available here." })
         ] })
@@ -3951,22 +3935,28 @@ import { Breadcrumb as Breadcrumb3, BreadcrumbItem as BreadcrumbItem3, Breadcrum
 import { Separator as Separator5 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger3 } from "@mdxui/primitives/sidebar";
 import { Plug as Plug2 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function IntegrationsPage() {
-  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    /* @__PURE__ */ jsx35("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    /* @__PURE__ */ jsx35("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx35(SidebarTrigger3, { className: "-ml-1" }),
-      /* @__PURE__ */ jsx35(Separator5, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
+      /* @__PURE__ */ jsx35(
+        Separator5,
+        {
+          orientation: "vertical",
+          className: "mr-2 data-[orientation=vertical]:h-4"
+        }
+      ),
       /* @__PURE__ */ jsx35(Breadcrumb3, { children: /* @__PURE__ */ jsx35(BreadcrumbList3, { children: /* @__PURE__ */ jsx35(BreadcrumbItem3, { children: /* @__PURE__ */ jsx35(BreadcrumbPage3, { children: "Integrations" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs29("div", { children: [
         /* @__PURE__ */ jsx35("h1", { className: "text-2xl font-bold", children: "Integrations" }),
         /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground", children: "Connect third-party services." })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center justify-center rounded-md border border-dashed py-24 gap-4", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center justify-center rounded-md border border-dashed py-24 gap-4", children: [
         /* @__PURE__ */ jsx35("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx35(Plug2, { className: "h-8 w-8 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "text-center", children: [
           /* @__PURE__ */ jsx35("p", { className: "font-medium", children: "Coming Soon" }),
           /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground text-sm max-w-md mt-1", children: "Connect services like GitHub, Slack, Google, Salesforce, and more." })
         ] })
@@ -3986,9 +3976,9 @@ import { Separator as Separator6 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger4 } from "@mdxui/primitives/sidebar";
 import { Table as Table7, TableBody as TableBody7, TableCell as TableCell7, TableHead as TableHead7, TableHeader as TableHeader7, TableRow as TableRow7 } from "@mdxui/primitives/table";
 import { AlertTriangle, BarChart3 as BarChart33, Check as Check3, Copy as Copy3, Key as Key6, MoreHorizontal as MoreHorizontal4, Pencil, Plus as Plus5, Trash2 as Trash24 } from "lucide-react";
-import { useState as useState14 } from "react";
+import { useState as useState13 } from "react";
 import { toast as toast5 } from "sonner";
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function maskKey(key) {
   const prefix = key.substring(0, 8);
   return `${prefix}${"\u2022".repeat(16)}`;
@@ -4022,40 +4012,76 @@ function StatusIndicator({ status }) {
     }
   };
   const { color, label } = config[status];
-  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx36("span", { className: `h-2 w-2 rounded-full ${color}` }),
     /* @__PURE__ */ jsx36("span", { className: "text-sm", children: label })
   ] });
 }
-function KeysPage() {
-  const [keys, setKeys] = useState14(mockApiKeys);
-  const [newKeyName, setNewKeyName] = useState14("");
-  const [newlyCreatedKey, setNewlyCreatedKey] = useState14(null);
-  const [createDialogOpen, setCreateDialogOpen] = useState14(false);
-  const [revokeDialogOpen, setRevokeDialogOpen] = useState14(false);
-  const [renameDialogOpen, setRenameDialogOpen] = useState14(false);
-  const [keyToRevoke, setKeyToRevoke] = useState14(null);
-  const [keyToRename, setKeyToRename] = useState14(null);
-  const [renameValue, setRenameValue] = useState14("");
-  const [copiedKeyId, setCopiedKeyId] = useState14(null);
-  const [newKeyCopied, setNewKeyCopied] = useState14(false);
-  const handleCreateKey = () => {
-    const newKey = {
-      id: String(Date.now()),
-      name: newKeyName || "Untitled Key",
-      key: `sk_live_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`,
-      created: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-      lastUsed: null,
-      status: "never_used"
-    };
-    setKeys([...keys, newKey]);
-    setNewlyCreatedKey(newKey.key);
+function KeysPage({
+  keys: initialKeys,
+  onCreateKey,
+  onRevokeKey,
+  onRenameKey,
+  hideHeader = false,
+  className
+} = {}) {
+  const [keys, setKeys] = useState13(initialKeys ?? mockApiKeys);
+  const [newKeyName, setNewKeyName] = useState13("");
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState13(null);
+  const [createDialogOpen, setCreateDialogOpen] = useState13(false);
+  const [revokeDialogOpen, setRevokeDialogOpen] = useState13(false);
+  const [renameDialogOpen, setRenameDialogOpen] = useState13(false);
+  const [keyToRevoke, setKeyToRevoke] = useState13(null);
+  const [keyToRename, setKeyToRename] = useState13(null);
+  const [renameValue, setRenameValue] = useState13("");
+  const [copiedKeyId, setCopiedKeyId] = useState13(null);
+  const [newKeyCopied, setNewKeyCopied] = useState13(false);
+  const handleCreateKey = async () => {
+    const name = newKeyName || "Untitled Key";
+    if (onCreateKey) {
+      try {
+        const result = await onCreateKey(name);
+        const newKey = {
+          id: result.id,
+          name,
+          key: result.key,
+          created: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+          lastUsed: null,
+          status: "never_used"
+        };
+        setKeys([...keys, newKey]);
+        setNewlyCreatedKey(result.key);
+      } catch {
+        toast5.error("Failed to create API key");
+        return;
+      }
+    } else {
+      const newKey = {
+        id: String(Date.now()),
+        name,
+        key: `sk_live_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`,
+        created: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+        lastUsed: null,
+        status: "never_used"
+      };
+      setKeys([...keys, newKey]);
+      setNewlyCreatedKey(newKey.key);
+    }
     setNewKeyName("");
   };
-  const handleRevokeKey = () => {
+  const handleRevokeKey = async () => {
     if (keyToRevoke) {
       const keyName = keyToRevoke.name;
-      setKeys(keys.filter((k) => k.id !== keyToRevoke.id));
+      const keyId = keyToRevoke.id;
+      if (onRevokeKey) {
+        try {
+          await onRevokeKey(keyId);
+        } catch {
+          toast5.error("Failed to revoke API key");
+          return;
+        }
+      }
+      setKeys(keys.filter((k) => k.id !== keyId));
       setKeyToRevoke(null);
       setRevokeDialogOpen(false);
       toast5.success("API key revoked", {
@@ -4063,10 +4089,19 @@ function KeysPage() {
       });
     }
   };
-  const handleRenameKey = () => {
+  const handleRenameKey = async () => {
     if (keyToRename && renameValue.trim()) {
       const newName = renameValue.trim();
-      setKeys(keys.map((k) => k.id === keyToRename.id ? __spreadProps(__spreadValues({}, k), { name: newName }) : k));
+      const keyId = keyToRename.id;
+      if (onRenameKey) {
+        try {
+          await onRenameKey(keyId, newName);
+        } catch {
+          toast5.error("Failed to rename API key");
+          return;
+        }
+      }
+      setKeys(keys.map((k) => k.id === keyId ? { ...k, name: newName } : k));
       setKeyToRename(null);
       setRenameDialogOpen(false);
       setRenameValue("");
@@ -4075,15 +4110,15 @@ function KeysPage() {
       });
     }
   };
-  const handleCopyNewKey = () => __async(null, null, function* () {
+  const handleCopyNewKey = async () => {
     if (newlyCreatedKey) {
-      yield navigator.clipboard.writeText(newlyCreatedKey);
+      await navigator.clipboard.writeText(newlyCreatedKey);
       setNewKeyCopied(true);
       setCopiedKeyId("new");
       setTimeout(() => setCopiedKeyId(null), 2e3);
       toast5.success("API key copied to clipboard");
     }
-  });
+  };
   const closeCreateDialog = () => {
     setCreateDialogOpen(false);
     setNewlyCreatedKey(null);
@@ -4099,52 +4134,52 @@ function KeysPage() {
     setKeyToRevoke(apiKey);
     setRevokeDialogOpen(true);
   };
-  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
-    /* @__PURE__ */ jsx36("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    !hideHeader && /* @__PURE__ */ jsx36("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx36(SidebarTrigger4, { className: "-ml-1" }),
       /* @__PURE__ */ jsx36(Separator6, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx36(Breadcrumb4, { children: /* @__PURE__ */ jsx36(BreadcrumbList4, { children: /* @__PURE__ */ jsx36(BreadcrumbItem4, { children: /* @__PURE__ */ jsx36(BreadcrumbPage4, { children: "API Keys" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs31("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs31("div", { children: [
+    /* @__PURE__ */ jsxs30("div", { className: `flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs30("div", { children: [
           /* @__PURE__ */ jsx36("h1", { className: "text-2xl font-bold", children: "API Keys" }),
           /* @__PURE__ */ jsx36("p", { className: "text-muted-foreground", children: "Manage your API keys for accessing the API." })
         ] }),
-        /* @__PURE__ */ jsxs31(Dialog7, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, children: [
-          /* @__PURE__ */ jsx36(DialogTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs31(Button13, { children: [
+        /* @__PURE__ */ jsxs30(Dialog7, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, children: [
+          /* @__PURE__ */ jsx36(DialogTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs30(Button13, { children: [
             /* @__PURE__ */ jsx36(Plus5, { className: "h-4 w-4" }),
             "Create Key"
           ] }) }),
-          /* @__PURE__ */ jsx36(DialogContent7, { children: newlyCreatedKey ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
-            /* @__PURE__ */ jsxs31(DialogHeader6, { children: [
+          /* @__PURE__ */ jsx36(DialogContent7, { children: newlyCreatedKey ? /* @__PURE__ */ jsxs30(Fragment9, { children: [
+            /* @__PURE__ */ jsxs30(DialogHeader6, { children: [
               /* @__PURE__ */ jsx36(DialogTitle6, { children: "API Key Created" }),
               /* @__PURE__ */ jsx36(DialogDescription5, { children: "Your new API key has been created successfully." })
             ] }),
-            /* @__PURE__ */ jsxs31(Alert, { variant: "warning", children: [
+            /* @__PURE__ */ jsxs30(Alert, { variant: "warning", children: [
               /* @__PURE__ */ jsx36(AlertTriangle, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx36(AlertDescription, { children: "Copy your API key now. You won't be able to see it again." })
             ] }),
-            /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx36(Input8, { value: newlyCreatedKey, readOnly: true, className: "font-mono text-sm" }),
               /* @__PURE__ */ jsx36(Button13, { variant: "outline", size: "icon", onClick: handleCopyNewKey, children: copiedKeyId === "new" ? /* @__PURE__ */ jsx36(Check3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx36(Copy3, { className: "h-4 w-4" }) })
             ] }),
             /* @__PURE__ */ jsx36(DialogFooter6, { children: /* @__PURE__ */ jsx36(Button13, { onClick: closeCreateDialog, disabled: !newKeyCopied, children: "Done" }) })
-          ] }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
-            /* @__PURE__ */ jsxs31(DialogHeader6, { children: [
+          ] }) : /* @__PURE__ */ jsxs30(Fragment9, { children: [
+            /* @__PURE__ */ jsxs30(DialogHeader6, { children: [
               /* @__PURE__ */ jsx36(DialogTitle6, { children: "Create API Key" }),
               /* @__PURE__ */ jsx36(DialogDescription5, { children: "Give your API key a name to help you identify it later." })
             ] }),
             /* @__PURE__ */ jsx36(Input8, { placeholder: "Key name (optional)", value: newKeyName, onChange: (e) => setNewKeyName(e.target.value) }),
-            /* @__PURE__ */ jsxs31(DialogFooter6, { children: [
+            /* @__PURE__ */ jsxs30(DialogFooter6, { children: [
               /* @__PURE__ */ jsx36(Button13, { variant: "outline", onClick: closeCreateDialog, children: "Cancel" }),
               /* @__PURE__ */ jsx36(Button13, { onClick: handleCreateKey, children: "Create" })
             ] })
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx36("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs31(Table7, { children: [
-        /* @__PURE__ */ jsx36(TableHeader7, { children: /* @__PURE__ */ jsxs31(TableRow7, { children: [
+      /* @__PURE__ */ jsx36("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs30(Table7, { children: [
+        /* @__PURE__ */ jsx36(TableHeader7, { children: /* @__PURE__ */ jsxs30(TableRow7, { children: [
           /* @__PURE__ */ jsx36(TableHead7, { className: "pl-4", children: "Name" }),
           /* @__PURE__ */ jsx36(TableHead7, { children: "Key" }),
           /* @__PURE__ */ jsx36(TableHead7, { children: "Status" }),
@@ -4152,39 +4187,39 @@ function KeysPage() {
           /* @__PURE__ */ jsx36(TableHead7, { children: "Last Used" }),
           /* @__PURE__ */ jsx36(TableHead7, { className: "w-[60px]" })
         ] }) }),
-        /* @__PURE__ */ jsxs31(TableBody7, { children: [
-          keys.map((apiKey) => /* @__PURE__ */ jsxs31(TableRow7, { children: [
+        /* @__PURE__ */ jsxs30(TableBody7, { children: [
+          keys.map((apiKey) => /* @__PURE__ */ jsxs30(TableRow7, { children: [
             /* @__PURE__ */ jsx36(TableCell7, { className: "py-4 pl-4 font-medium", children: apiKey.name }),
             /* @__PURE__ */ jsx36(TableCell7, { className: "py-4 font-mono text-sm text-muted-foreground", children: maskKey(apiKey.key) }),
             /* @__PURE__ */ jsx36(TableCell7, { className: "py-4", children: /* @__PURE__ */ jsx36(StatusIndicator, { status: apiKey.status }) }),
             /* @__PURE__ */ jsx36(TableCell7, { className: "py-4", children: apiKey.created }),
             /* @__PURE__ */ jsx36(TableCell7, { className: "py-4 text-muted-foreground", children: getRelativeTime(apiKey.lastUsed) }),
-            /* @__PURE__ */ jsx36(TableCell7, { className: "py-4 pr-4", children: /* @__PURE__ */ jsxs31(DropdownMenu4, { children: [
+            /* @__PURE__ */ jsx36(TableCell7, { className: "py-4 pr-4", children: /* @__PURE__ */ jsxs30(DropdownMenu4, { children: [
               /* @__PURE__ */ jsx36(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsx36(Button13, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsx36(MoreHorizontal4, { className: "h-4 w-4" }) }) }),
-              /* @__PURE__ */ jsxs31(DropdownMenuContent4, { align: "end", children: [
-                /* @__PURE__ */ jsxs31(DropdownMenuItem4, { onClick: () => openRenameDialog(apiKey), children: [
+              /* @__PURE__ */ jsxs30(DropdownMenuContent4, { align: "end", children: [
+                /* @__PURE__ */ jsxs30(DropdownMenuItem4, { onClick: () => openRenameDialog(apiKey), children: [
                   /* @__PURE__ */ jsx36(Pencil, { className: "h-4 w-4" }),
                   "Rename"
                 ] }),
-                /* @__PURE__ */ jsxs31(DropdownMenuItem4, { children: [
+                /* @__PURE__ */ jsxs30(DropdownMenuItem4, { children: [
                   /* @__PURE__ */ jsx36(BarChart33, { className: "h-4 w-4" }),
                   "View Usage"
                 ] }),
                 /* @__PURE__ */ jsx36(DropdownMenuSeparator2, {}),
-                /* @__PURE__ */ jsxs31(DropdownMenuItem4, { className: "text-destructive focus:text-destructive", onClick: () => openRevokeDialog(apiKey), children: [
+                /* @__PURE__ */ jsxs30(DropdownMenuItem4, { className: "text-destructive focus:text-destructive", onClick: () => openRevokeDialog(apiKey), children: [
                   /* @__PURE__ */ jsx36(Trash24, { className: "h-4 w-4" }),
                   "Revoke"
                 ] })
               ] })
             ] }) })
           ] }, apiKey.id)),
-          keys.length === 0 && /* @__PURE__ */ jsx36(TableRow7, { children: /* @__PURE__ */ jsx36(TableCell7, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+          keys.length === 0 && /* @__PURE__ */ jsx36(TableRow7, { children: /* @__PURE__ */ jsx36(TableCell7, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
             /* @__PURE__ */ jsx36("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx36(Key6, { className: "h-8 w-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs31("div", { children: [
+            /* @__PURE__ */ jsxs30("div", { children: [
               /* @__PURE__ */ jsx36("p", { className: "font-medium", children: "No API keys yet" }),
               /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted-foreground mt-1", children: "Create your first API key to start making requests." })
             ] }),
-            /* @__PURE__ */ jsxs31(Button13, { onClick: () => setCreateDialogOpen(true), className: "mt-2", children: [
+            /* @__PURE__ */ jsxs30(Button13, { onClick: () => setCreateDialogOpen(true), className: "mt-2", children: [
               /* @__PURE__ */ jsx36(Plus5, { className: "h-4 w-4" }),
               "Create Your First Key"
             ] })
@@ -4192,13 +4227,13 @@ function KeysPage() {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx36(Dialog7, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxs31(DialogContent7, { children: [
-      /* @__PURE__ */ jsxs31(DialogHeader6, { children: [
+    /* @__PURE__ */ jsx36(Dialog7, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxs30(DialogContent7, { children: [
+      /* @__PURE__ */ jsxs30(DialogHeader6, { children: [
         /* @__PURE__ */ jsx36(DialogTitle6, { children: "Rename API Key" }),
         /* @__PURE__ */ jsx36(DialogDescription5, { children: "Enter a new name for this API key." })
       ] }),
       /* @__PURE__ */ jsx36(Input8, { placeholder: "Key name", value: renameValue, onChange: (e) => setRenameValue(e.target.value) }),
-      /* @__PURE__ */ jsxs31(DialogFooter6, { children: [
+      /* @__PURE__ */ jsxs30(DialogFooter6, { children: [
         /* @__PURE__ */ jsx36(
           Button13,
           {
@@ -4214,16 +4249,16 @@ function KeysPage() {
         /* @__PURE__ */ jsx36(Button13, { onClick: handleRenameKey, disabled: !renameValue.trim(), children: "Rename" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx36(Dialog7, { open: revokeDialogOpen, onOpenChange: setRevokeDialogOpen, children: /* @__PURE__ */ jsxs31(DialogContent7, { children: [
-      /* @__PURE__ */ jsxs31(DialogHeader6, { children: [
+    /* @__PURE__ */ jsx36(Dialog7, { open: revokeDialogOpen, onOpenChange: setRevokeDialogOpen, children: /* @__PURE__ */ jsxs30(DialogContent7, { children: [
+      /* @__PURE__ */ jsxs30(DialogHeader6, { children: [
         /* @__PURE__ */ jsx36(DialogTitle6, { children: "Revoke API Key" }),
-        /* @__PURE__ */ jsxs31(DialogDescription5, { children: [
+        /* @__PURE__ */ jsxs30(DialogDescription5, { children: [
           'Are you sure you want to revoke "',
-          keyToRevoke == null ? void 0 : keyToRevoke.name,
+          keyToRevoke?.name,
           '"? This action cannot be undone.'
         ] })
       ] }),
-      /* @__PURE__ */ jsxs31(DialogFooter6, { children: [
+      /* @__PURE__ */ jsxs30(DialogFooter6, { children: [
         /* @__PURE__ */ jsx36(
           Button13,
           {
@@ -4251,10 +4286,10 @@ import { Separator as Separator7 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger5 } from "@mdxui/primitives/sidebar";
 import { Skeleton } from "@mdxui/primitives/skeleton";
 import { Activity as Activity2, AlertTriangle as AlertTriangle2, BarChart3 as BarChart34, ChevronDown, DollarSign as DollarSign2 } from "lucide-react";
-import { useEffect as useEffect7, useState as useState15 } from "react";
+import { useEffect as useEffect6, useState as useState14 } from "react";
 import { Link as Link3 } from "react-router-dom";
 import { Area as Area3, AreaChart as AreaChart3, Bar as Bar2, BarChart as BarChart2, ReferenceLine as ReferenceLine2, XAxis as XAxis4, YAxis as YAxis4 } from "recharts";
-import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 var chartConfig = {
   requests: {
     label: "Requests",
@@ -4265,12 +4300,12 @@ function Sparkline({ data, color }) {
   return /* @__PURE__ */ jsx37("div", { className: "h-8 w-20", children: /* @__PURE__ */ jsx37(AreaChart3, { data, width: 80, height: 32, margin: { top: 2, right: 0, bottom: 0, left: 0 }, children: /* @__PURE__ */ jsx37(Area3, { type: "monotone", dataKey: "value", stroke: color, fill: color, fillOpacity: 0.2, strokeWidth: 1.5 }) }) });
 }
 function StatCardSkeleton() {
-  return /* @__PURE__ */ jsxs32(Card15, { children: [
-    /* @__PURE__ */ jsxs32(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+  return /* @__PURE__ */ jsxs31(Card15, { children: [
+    /* @__PURE__ */ jsxs31(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
       /* @__PURE__ */ jsx37(Skeleton, { className: "h-4 w-24" }),
       /* @__PURE__ */ jsx37(Skeleton, { className: "h-4 w-4" })
     ] }),
-    /* @__PURE__ */ jsxs32(CardContent14, { children: [
+    /* @__PURE__ */ jsxs31(CardContent14, { children: [
       /* @__PURE__ */ jsx37(Skeleton, { className: "h-8 w-20 mb-1" }),
       /* @__PURE__ */ jsx37(Skeleton, { className: "h-3 w-32" })
     ] })
@@ -4281,19 +4316,18 @@ function ChartSkeleton() {
   return /* @__PURE__ */ jsx37("div", { className: "h-[500px] w-full flex items-end justify-around gap-2 px-8", children: SKELETON_HEIGHTS.map((height, i) => /* @__PURE__ */ jsx37(Skeleton, { className: "w-full", style: { height: `${height}%` } }, i.toString())) });
 }
 function EmptyState() {
-  return /* @__PURE__ */ jsxs32("div", { className: "h-[500px] w-full flex flex-col items-center justify-center text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "h-[500px] w-full flex flex-col items-center justify-center text-muted-foreground", children: [
     /* @__PURE__ */ jsx37(BarChart34, { className: "h-12 w-12 mb-4 opacity-50" }),
     /* @__PURE__ */ jsx37("p", { className: "text-lg font-medium", children: "No data available" }),
     /* @__PURE__ */ jsx37("p", { className: "text-sm", children: "There's no usage data for this time period." })
   ] });
 }
 function OverviewPage() {
-  var _a, _b, _c, _d;
-  const [selectedPeriod, setSelectedPeriod] = useState15("30d");
-  const [isLoading, setIsLoading] = useState15(true);
-  const [stats, setStats] = useState15(null);
-  const [usageData, setUsageData] = useState15([]);
-  useEffect7(() => {
+  const [selectedPeriod, setSelectedPeriod] = useState14("30d");
+  const [isLoading, setIsLoading] = useState14(true);
+  const [stats, setStats] = useState14(null);
+  const [usageData, setUsageData] = useState14([]);
+  useEffect6(() => {
     let cancelled = false;
     const timer = setTimeout(() => {
       if (!cancelled) {
@@ -4311,66 +4345,66 @@ function OverviewPage() {
     setIsLoading(true);
     setSelectedPeriod(period);
   };
-  const selectedLabel = (_a = timePeriodOptions.find((opt) => opt.value === selectedPeriod)) == null ? void 0 : _a.label;
-  return /* @__PURE__ */ jsxs32(Fragment11, { children: [
-    /* @__PURE__ */ jsx37("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 px-4", children: [
+  const selectedLabel = timePeriodOptions.find((opt) => opt.value === selectedPeriod)?.label;
+  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+    /* @__PURE__ */ jsx37("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx37(SidebarTrigger5, { className: "-ml-1" }),
       /* @__PURE__ */ jsx37(Separator7, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx37(Breadcrumb5, { children: /* @__PURE__ */ jsx37(BreadcrumbList5, { children: /* @__PURE__ */ jsx37(BreadcrumbItem5, { children: /* @__PURE__ */ jsx37(BreadcrumbPage5, { children: "Overview" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex flex-1 flex-col gap-4 px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex flex-1 flex-col gap-4 px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx37("h1", { className: "text-2xl font-semibold", children: "Usage" }),
-        /* @__PURE__ */ jsxs32(DropdownMenu5, { children: [
-          /* @__PURE__ */ jsx37(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs32(Button14, { variant: "outline", className: "w-[140px] justify-between", children: [
+        /* @__PURE__ */ jsxs31(DropdownMenu5, { children: [
+          /* @__PURE__ */ jsx37(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs31(Button14, { variant: "outline", className: "w-[140px] justify-between", children: [
             selectedLabel,
             /* @__PURE__ */ jsx37(ChevronDown, { className: "h-4 w-4 opacity-50" })
           ] }) }),
           /* @__PURE__ */ jsx37(DropdownMenuContent5, { align: "end", className: "w-[140px]", children: timePeriodOptions.map((option) => /* @__PURE__ */ jsx37(DropdownMenuItem5, { onClick: () => handlePeriodChange(option.value), children: option.label }, option.value)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "grid auto-rows-min gap-4 md:grid-cols-3", children: isLoading ? /* @__PURE__ */ jsxs32(Fragment11, { children: [
+      /* @__PURE__ */ jsx37("div", { className: "grid auto-rows-min gap-4 md:grid-cols-3", children: isLoading ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
         /* @__PURE__ */ jsx37(StatCardSkeleton, {}),
         /* @__PURE__ */ jsx37(StatCardSkeleton, {}),
         /* @__PURE__ */ jsx37(StatCardSkeleton, {})
-      ] }) : /* @__PURE__ */ jsxs32(Fragment11, { children: [
-        /* @__PURE__ */ jsx37(Link3, { to: "/requests", className: "block", children: /* @__PURE__ */ jsxs32(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
-          /* @__PURE__ */ jsxs32(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      ] }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
+        /* @__PURE__ */ jsx37(Link3, { to: "/requests", className: "block", children: /* @__PURE__ */ jsxs31(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
+          /* @__PURE__ */ jsxs31(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
             /* @__PURE__ */ jsx37(CardTitle13, { className: "text-sm font-medium", children: "Total Requests" }),
             /* @__PURE__ */ jsx37(Activity2, { className: "h-4 w-4 text-muted-foreground" })
           ] }),
-          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs32("div", { className: "flex items-end justify-between", children: [
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx37("div", { className: "text-2xl font-bold", children: (_b = stats == null ? void 0 : stats.totalRequests.toLocaleString()) != null ? _b : "\u2014" }),
+          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs31("div", { className: "flex items-end justify-between", children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
+              /* @__PURE__ */ jsx37("div", { className: "text-2xl font-bold", children: stats?.totalRequests.toLocaleString() ?? "\u2014" }),
               /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground", children: selectedLabel })
             ] }),
             /* @__PURE__ */ jsx37(Sparkline, { data: usageData.slice(-7).map((d) => ({ value: d.requests })), color: "var(--chart-1)" })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx37(Link3, { to: "/requests", className: "block", children: /* @__PURE__ */ jsxs32(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
-          /* @__PURE__ */ jsxs32(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+        /* @__PURE__ */ jsx37(Link3, { to: "/requests", className: "block", children: /* @__PURE__ */ jsxs31(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
+          /* @__PURE__ */ jsxs31(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
             /* @__PURE__ */ jsx37(CardTitle13, { className: "text-sm font-medium", children: "Total Cost" }),
             /* @__PURE__ */ jsx37(DollarSign2, { className: "h-4 w-4 text-muted-foreground" })
           ] }),
-          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs32("div", { className: "flex items-end justify-between", children: [
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsxs32("div", { className: "text-2xl font-bold", children: [
+          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs31("div", { className: "flex items-end justify-between", children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
+              /* @__PURE__ */ jsxs31("div", { className: "text-2xl font-bold", children: [
                 "$",
-                (_c = stats == null ? void 0 : stats.totalCost.toFixed(2)) != null ? _c : "\u2014"
+                stats?.totalCost.toFixed(2) ?? "\u2014"
               ] }),
               /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground", children: selectedLabel })
             ] }),
             /* @__PURE__ */ jsx37(Sparkline, { data: usageData.slice(-7).map((d) => ({ value: d.requests * 0.02 })), color: "var(--chart-2)" })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx37(Link3, { to: "/requests?status=error", className: "block", children: /* @__PURE__ */ jsxs32(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
-          /* @__PURE__ */ jsxs32(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+        /* @__PURE__ */ jsx37(Link3, { to: "/requests?status=error", className: "block", children: /* @__PURE__ */ jsxs31(Card15, { className: "transition-colors hover:bg-muted/50 cursor-pointer", children: [
+          /* @__PURE__ */ jsxs31(CardHeader13, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
             /* @__PURE__ */ jsx37(CardTitle13, { className: "text-sm font-medium", children: "Error Count" }),
             /* @__PURE__ */ jsx37(AlertTriangle2, { className: "h-4 w-4 text-muted-foreground" })
           ] }),
-          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs32("div", { className: "flex items-end justify-between", children: [
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx37("div", { className: "text-2xl font-bold", children: (_d = stats == null ? void 0 : stats.errorCount) != null ? _d : "\u2014" }),
+          /* @__PURE__ */ jsx37(CardContent14, { children: /* @__PURE__ */ jsxs31("div", { className: "flex items-end justify-between", children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
+              /* @__PURE__ */ jsx37("div", { className: "text-2xl font-bold", children: stats?.errorCount ?? "\u2014" }),
               /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground", children: "Failed requests" })
             ] }),
             /* @__PURE__ */ jsx37(
@@ -4385,13 +4419,13 @@ function OverviewPage() {
           ] }) })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsxs32(Card15, { className: "flex-1", children: [
-        /* @__PURE__ */ jsx37(CardHeader13, { children: /* @__PURE__ */ jsxs32(CardTitle13, { children: [
+      /* @__PURE__ */ jsxs31(Card15, { className: "flex-1", children: [
+        /* @__PURE__ */ jsx37(CardHeader13, { children: /* @__PURE__ */ jsxs31(CardTitle13, { children: [
           "API Usage (",
           selectedLabel,
           ")"
         ] }) }),
-        /* @__PURE__ */ jsx37(CardContent14, { children: isLoading ? /* @__PURE__ */ jsx37(ChartSkeleton, {}) : usageData.length === 0 ? /* @__PURE__ */ jsx37(EmptyState, {}) : /* @__PURE__ */ jsx37(ChartContainer4, { config: chartConfig, className: "h-[500px] w-full", children: /* @__PURE__ */ jsxs32(BarChart2, { data: usageData, children: [
+        /* @__PURE__ */ jsx37(CardContent14, { children: isLoading ? /* @__PURE__ */ jsx37(ChartSkeleton, {}) : usageData.length === 0 ? /* @__PURE__ */ jsx37(EmptyState, {}) : /* @__PURE__ */ jsx37(ChartContainer4, { config: chartConfig, className: "h-[500px] w-full", children: /* @__PURE__ */ jsxs31(BarChart2, { data: usageData, children: [
           /* @__PURE__ */ jsx37(
             XAxis4,
             {
@@ -4441,8 +4475,8 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "
 import { SidebarTrigger as SidebarTrigger6 } from "@mdxui/primitives/sidebar";
 import { Table as Table8, TableBody as TableBody8, TableCell as TableCell8, TableHead as TableHead8, TableHeader as TableHeader8, TableRow as TableRow8 } from "@mdxui/primitives/table";
 import { Activity as Activity3, ChevronDown as ChevronDown2 } from "lucide-react";
-import { useState as useState16 } from "react";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 var statusFilterOptions = [
   { value: "all", label: "All Status" },
   { value: "success", label: "Success (2xx)" },
@@ -4476,10 +4510,9 @@ function formatCost(cost) {
   return `$${cost.toFixed(3)}`;
 }
 function RequestsPage() {
-  var _a;
-  const [statusFilter, setStatusFilter] = useState16("all");
-  const [selectedRequest, setSelectedRequest] = useState16(null);
-  const [sheetOpen, setSheetOpen] = useState16(false);
+  const [statusFilter, setStatusFilter] = useState15("all");
+  const [selectedRequest, setSelectedRequest] = useState15(null);
+  const [sheetOpen, setSheetOpen] = useState15(false);
   const filteredRequests = mockRequests.filter((request) => {
     if (statusFilter === "all") return true;
     if (statusFilter === "success") return request.statusCode >= 200 && request.statusCode < 300;
@@ -4491,28 +4524,28 @@ function RequestsPage() {
     setSelectedRequest(request);
     setSheetOpen(true);
   };
-  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
-    /* @__PURE__ */ jsx38("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs32(Fragment11, { children: [
+    /* @__PURE__ */ jsx38("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx38(SidebarTrigger6, { className: "-ml-1" }),
       /* @__PURE__ */ jsx38(Separator8, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx38(Breadcrumb6, { children: /* @__PURE__ */ jsx38(BreadcrumbList6, { children: /* @__PURE__ */ jsx38(BreadcrumbItem6, { children: /* @__PURE__ */ jsx38(BreadcrumbPage6, { children: "Requests" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs32("div", { children: [
           /* @__PURE__ */ jsx38("h1", { className: "text-2xl font-bold", children: "Requests" }),
           /* @__PURE__ */ jsx38("p", { className: "text-muted-foreground", children: "Monitor and debug your API request logs." })
         ] }),
-        /* @__PURE__ */ jsxs33(DropdownMenu6, { children: [
-          /* @__PURE__ */ jsx38(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsxs33(Button15, { variant: "outline", className: "w-[160px] justify-between", children: [
-            (_a = statusFilterOptions.find((o) => o.value === statusFilter)) == null ? void 0 : _a.label,
+        /* @__PURE__ */ jsxs32(DropdownMenu6, { children: [
+          /* @__PURE__ */ jsx38(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsxs32(Button15, { variant: "outline", className: "w-[160px] justify-between", children: [
+            statusFilterOptions.find((o) => o.value === statusFilter)?.label,
             /* @__PURE__ */ jsx38(ChevronDown2, { className: "h-4 w-4 opacity-50" })
           ] }) }),
           /* @__PURE__ */ jsx38(DropdownMenuContent6, { align: "end", className: "w-[160px]", children: statusFilterOptions.map((option) => /* @__PURE__ */ jsx38(DropdownMenuItem6, { onClick: () => setStatusFilter(option.value), children: option.label }, option.value)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx38("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs33(Table8, { children: [
-        /* @__PURE__ */ jsx38(TableHeader8, { children: /* @__PURE__ */ jsxs33(TableRow8, { children: [
+      /* @__PURE__ */ jsx38("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs32(Table8, { children: [
+        /* @__PURE__ */ jsx38(TableHeader8, { children: /* @__PURE__ */ jsxs32(TableRow8, { children: [
           /* @__PURE__ */ jsx38(TableHead8, { className: "pl-4", children: "Timestamp" }),
           /* @__PURE__ */ jsx38(TableHead8, { children: "Method" }),
           /* @__PURE__ */ jsx38(TableHead8, { children: "Endpoint" }),
@@ -4520,8 +4553,8 @@ function RequestsPage() {
           /* @__PURE__ */ jsx38(TableHead8, { children: "Latency" }),
           /* @__PURE__ */ jsx38(TableHead8, { children: "Cost" })
         ] }) }),
-        /* @__PURE__ */ jsxs33(TableBody8, { children: [
-          filteredRequests.map((request) => /* @__PURE__ */ jsxs33(TableRow8, { className: "cursor-pointer hover:bg-muted/50", onClick: () => handleRowClick(request), children: [
+        /* @__PURE__ */ jsxs32(TableBody8, { children: [
+          filteredRequests.map((request) => /* @__PURE__ */ jsxs32(TableRow8, { className: "cursor-pointer hover:bg-muted/50", onClick: () => handleRowClick(request), children: [
             /* @__PURE__ */ jsx38(TableCell8, { className: "py-3 pl-4 text-muted-foreground", children: formatTimestamp(request.timestamp) }),
             /* @__PURE__ */ jsx38(TableCell8, { className: "py-3", children: /* @__PURE__ */ jsx38("span", { className: `font-mono text-sm font-medium ${methodColors[request.method] || ""}`, children: request.method }) }),
             /* @__PURE__ */ jsx38(TableCell8, { className: "py-3 font-mono text-sm", children: request.endpoint }),
@@ -4529,9 +4562,9 @@ function RequestsPage() {
             /* @__PURE__ */ jsx38(TableCell8, { className: "py-3 text-muted-foreground", children: formatLatency(request.latency) }),
             /* @__PURE__ */ jsx38(TableCell8, { className: "py-3 text-muted-foreground", children: formatCost(request.cost) })
           ] }, request.id)),
-          filteredRequests.length === 0 && /* @__PURE__ */ jsx38(TableRow8, { children: /* @__PURE__ */ jsx38(TableCell8, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+          filteredRequests.length === 0 && /* @__PURE__ */ jsx38(TableRow8, { children: /* @__PURE__ */ jsx38(TableCell8, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
             /* @__PURE__ */ jsx38("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx38(Activity3, { className: "h-8 w-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs33("div", { children: [
+            /* @__PURE__ */ jsxs32("div", { children: [
               /* @__PURE__ */ jsx38("p", { className: "font-medium", children: "No requests found" }),
               /* @__PURE__ */ jsx38("p", { className: "text-sm text-muted-foreground mt-1", children: "No requests match the current filter." })
             ] })
@@ -4539,17 +4572,17 @@ function RequestsPage() {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx38(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx38(SheetContent, { className: "w-full sm:max-w-lg overflow-y-auto", children: selectedRequest && /* @__PURE__ */ jsxs33(Fragment12, { children: [
-      /* @__PURE__ */ jsxs33(SheetHeader, { children: [
-        /* @__PURE__ */ jsxs33(SheetTitle, { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx38(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx38(SheetContent, { className: "w-full sm:max-w-lg overflow-y-auto", children: selectedRequest && /* @__PURE__ */ jsxs32(Fragment11, { children: [
+      /* @__PURE__ */ jsxs32(SheetHeader, { children: [
+        /* @__PURE__ */ jsxs32(SheetTitle, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx38("span", { className: `font-mono ${methodColors[selectedRequest.method] || ""}`, children: selectedRequest.method }),
           /* @__PURE__ */ jsx38("span", { className: "font-mono text-muted-foreground font-normal", children: selectedRequest.endpoint })
         ] }),
-        /* @__PURE__ */ jsxs33(SheetDescription, { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsxs32(SheetDescription, { className: "flex items-center gap-2 text-sm", children: [
           /* @__PURE__ */ jsx38(StatusBadge, { status: selectedRequest.statusCode }),
           /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground", children: "\u2022" }),
           /* @__PURE__ */ jsx38("span", { children: formatLatency(selectedRequest.latency) }),
-          selectedRequest.cost > 0 && /* @__PURE__ */ jsxs33(Fragment12, { children: [
+          selectedRequest.cost > 0 && /* @__PURE__ */ jsxs32(Fragment11, { children: [
             /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground", children: "\u2022" }),
             /* @__PURE__ */ jsx38("span", { children: formatCost(selectedRequest.cost) })
           ] }),
@@ -4557,12 +4590,12 @@ function RequestsPage() {
           /* @__PURE__ */ jsx38("span", { children: formatTimestamp(selectedRequest.timestamp) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "mt-6 space-y-6 px-4", children: [
-        /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs32("div", { className: "mt-6 space-y-6 px-4", children: [
+        /* @__PURE__ */ jsxs32("div", { children: [
           /* @__PURE__ */ jsx38("h4", { className: "text-sm font-semibold mb-2", children: "Request" }),
           /* @__PURE__ */ jsx38(JsonViewer, { data: selectedRequest.requestPayload })
         ] }),
-        /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsxs32("div", { children: [
           /* @__PURE__ */ jsx38("h4", { className: "text-sm font-semibold mb-2", children: "Response" }),
           /* @__PURE__ */ jsx38(JsonViewer, { data: selectedRequest.responsePayload })
         ] })
@@ -4572,30 +4605,28 @@ function RequestsPage() {
 }
 
 // src/developer/pages/settings/profile.tsx
+import { useAuth as useAuth5, UserProfile as UserProfile2 } from "@mdxui/auth";
 import { Breadcrumb as Breadcrumb7, BreadcrumbItem as BreadcrumbItem7, BreadcrumbLink, BreadcrumbList as BreadcrumbList7, BreadcrumbPage as BreadcrumbPage7, BreadcrumbSeparator } from "@mdxui/primitives/breadcrumb";
 import { Separator as Separator9 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger7 } from "@mdxui/primitives/sidebar";
-import { useAuth as useAuth6 } from "@workos-inc/authkit-react";
-import { UserProfile as UserProfile2 } from "@workos-inc/widgets";
 import { Link as Link4 } from "react-router-dom";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function SettingsProfilePage() {
-  var _a, _b;
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
-  const { user, getAccessToken, isLoading } = useAuth6();
-  return /* @__PURE__ */ jsxs34(Fragment13, { children: [
-    /* @__PURE__ */ jsx39("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 px-4", children: [
+  const useMockWidgets = config.identity?.useMockWidgets ?? false;
+  const { user, getAccessToken, isLoading } = useAuth5();
+  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+    /* @__PURE__ */ jsx39("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx39(SidebarTrigger7, { className: "-ml-1" }),
       /* @__PURE__ */ jsx39(Separator9, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx39(Breadcrumb7, { children: /* @__PURE__ */ jsxs34(BreadcrumbList7, { children: [
+      /* @__PURE__ */ jsx39(Breadcrumb7, { children: /* @__PURE__ */ jsxs33(BreadcrumbList7, { children: [
         /* @__PURE__ */ jsx39(BreadcrumbItem7, { className: "hidden md:block", children: /* @__PURE__ */ jsx39(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx39(Link4, { to: "/settings/profile", children: "Settings" }) }) }),
         /* @__PURE__ */ jsx39(BreadcrumbSeparator, { className: "hidden md:block" }),
         /* @__PURE__ */ jsx39(BreadcrumbItem7, { children: /* @__PURE__ */ jsx39(BreadcrumbPage7, { children: "Profile" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs34("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs34("div", { children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
         /* @__PURE__ */ jsx39("h1", { className: "text-2xl font-bold", children: "Profile" }),
         /* @__PURE__ */ jsx39("p", { className: "text-muted-foreground", children: "Manage your personal information and preferences." })
       ] }),
@@ -4605,27 +4636,24 @@ function SettingsProfilePage() {
 }
 
 // src/developer/pages/settings/security.tsx
+import { useAuth as useAuth6, UserSecurity } from "@mdxui/auth";
 import { Breadcrumb as Breadcrumb8, BreadcrumbItem as BreadcrumbItem8, BreadcrumbLink as BreadcrumbLink2, BreadcrumbList as BreadcrumbList8, BreadcrumbPage as BreadcrumbPage8, BreadcrumbSeparator as BreadcrumbSeparator2 } from "@mdxui/primitives/breadcrumb";
 import { Separator as Separator10 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger8 } from "@mdxui/primitives/sidebar";
-import { useAuth as useAuth7 } from "@workos-inc/authkit-react";
-import { UserSecurity } from "@workos-inc/widgets";
-import { useEffect as useEffect8, useRef as useRef2, useState as useState17 } from "react";
+import { useEffect as useEffect7, useRef as useRef2, useState as useState16 } from "react";
 import { Link as Link5 } from "react-router-dom";
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function SettingsSecurityPage() {
-  var _a, _b;
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
-  const { user, getAccessToken, isLoading } = useAuth7();
-  const [isEmpty, setIsEmpty] = useState17(false);
+  const useMockWidgets = config.identity?.useMockWidgets ?? false;
+  const { user, getAccessToken, isLoading } = useAuth6();
+  const [isEmpty, setIsEmpty] = useState16(false);
   const containerRef = useRef2(null);
-  useEffect8(() => {
+  useEffect7(() => {
     if (useMockWidgets || isLoading || !user) return;
     const timer = setTimeout(() => {
-      var _a2;
       if (containerRef.current) {
-        const content = (_a2 = containerRef.current.textContent) == null ? void 0 : _a2.trim();
+        const content = containerRef.current.textContent?.trim();
         const hasVisibleContent = containerRef.current.querySelector('button, input, [role="button"]');
         if (!content && !hasVisibleContent) {
           setIsEmpty(true);
@@ -4634,18 +4662,18 @@ function SettingsSecurityPage() {
     }, 1e3);
     return () => clearTimeout(timer);
   }, [isLoading, user, useMockWidgets]);
-  return /* @__PURE__ */ jsxs35(Fragment14, { children: [
-    /* @__PURE__ */ jsx40("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs34(Fragment13, { children: [
+    /* @__PURE__ */ jsx40("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx40(SidebarTrigger8, { className: "-ml-1" }),
       /* @__PURE__ */ jsx40(Separator10, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx40(Breadcrumb8, { children: /* @__PURE__ */ jsxs35(BreadcrumbList8, { children: [
+      /* @__PURE__ */ jsx40(Breadcrumb8, { children: /* @__PURE__ */ jsxs34(BreadcrumbList8, { children: [
         /* @__PURE__ */ jsx40(BreadcrumbItem8, { className: "hidden md:block", children: /* @__PURE__ */ jsx40(BreadcrumbLink2, { asChild: true, children: /* @__PURE__ */ jsx40(Link5, { to: "/settings/profile", children: "Settings" }) }) }),
         /* @__PURE__ */ jsx40(BreadcrumbSeparator2, { className: "hidden md:block" }),
         /* @__PURE__ */ jsx40(BreadcrumbItem8, { children: /* @__PURE__ */ jsx40(BreadcrumbPage8, { children: "Security" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs35("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs35("div", { children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx40("h1", { className: "text-2xl font-bold", children: "Security" }),
         /* @__PURE__ */ jsx40("p", { className: "text-muted-foreground", children: "Manage your password, two-factor authentication, and recovery codes." })
       ] }),
@@ -4655,30 +4683,28 @@ function SettingsSecurityPage() {
 }
 
 // src/developer/pages/settings/sessions.tsx
+import { useAuth as useAuth7, UserSessions } from "@mdxui/auth";
 import { Breadcrumb as Breadcrumb9, BreadcrumbItem as BreadcrumbItem9, BreadcrumbLink as BreadcrumbLink3, BreadcrumbList as BreadcrumbList9, BreadcrumbPage as BreadcrumbPage9, BreadcrumbSeparator as BreadcrumbSeparator3 } from "@mdxui/primitives/breadcrumb";
 import { Separator as Separator11 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger9 } from "@mdxui/primitives/sidebar";
-import { useAuth as useAuth8 } from "@workos-inc/authkit-react";
-import { UserSessions } from "@workos-inc/widgets";
 import { Link as Link6 } from "react-router-dom";
-import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function SettingsSessionsPage() {
-  var _a, _b;
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
-  const { user, getAccessToken, isLoading } = useAuth8();
-  return /* @__PURE__ */ jsxs36(Fragment15, { children: [
-    /* @__PURE__ */ jsx41("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 px-4", children: [
+  const useMockWidgets = config.identity?.useMockWidgets ?? false;
+  const { user, getAccessToken, isLoading } = useAuth7();
+  return /* @__PURE__ */ jsxs35(Fragment14, { children: [
+    /* @__PURE__ */ jsx41("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx41(SidebarTrigger9, { className: "-ml-1" }),
       /* @__PURE__ */ jsx41(Separator11, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx41(Breadcrumb9, { children: /* @__PURE__ */ jsxs36(BreadcrumbList9, { children: [
+      /* @__PURE__ */ jsx41(Breadcrumb9, { children: /* @__PURE__ */ jsxs35(BreadcrumbList9, { children: [
         /* @__PURE__ */ jsx41(BreadcrumbItem9, { className: "hidden md:block", children: /* @__PURE__ */ jsx41(BreadcrumbLink3, { asChild: true, children: /* @__PURE__ */ jsx41(Link6, { to: "/settings/profile", children: "Settings" }) }) }),
         /* @__PURE__ */ jsx41(BreadcrumbSeparator3, { className: "hidden md:block" }),
         /* @__PURE__ */ jsx41(BreadcrumbItem9, { children: /* @__PURE__ */ jsx41(BreadcrumbPage9, { children: "Sessions" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs36("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs36("div", { children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs35("div", { children: [
         /* @__PURE__ */ jsx41("h1", { className: "text-2xl font-bold", children: "Sessions" }),
         /* @__PURE__ */ jsx41("p", { className: "text-muted-foreground", children: "View and manage your active sessions across devices." })
       ] }),
@@ -4688,35 +4714,72 @@ function SettingsSessionsPage() {
 }
 
 // src/developer/pages/team.tsx
-import { Breadcrumb as Breadcrumb10, BreadcrumbItem as BreadcrumbItem10, BreadcrumbList as BreadcrumbList10, BreadcrumbPage as BreadcrumbPage10 } from "@mdxui/primitives/breadcrumb";
+import { UsersManagement, useAuth as useAuth8 } from "@mdxui/auth";
+import {
+  Breadcrumb as Breadcrumb10,
+  BreadcrumbItem as BreadcrumbItem10,
+  BreadcrumbList as BreadcrumbList10,
+  BreadcrumbPage as BreadcrumbPage10
+} from "@mdxui/primitives/breadcrumb";
 import { Separator as Separator12 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger10 } from "@mdxui/primitives/sidebar";
-import { useAuth as useAuth9 } from "@workos-inc/authkit-react";
-import { UsersManagement } from "@workos-inc/widgets";
-import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
-function TeamPage() {
-  var _a, _b;
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function TeamPage({
+  useMockWidgets: useMockWidgetsProp,
+  hideHeader = false,
+  className
+} = {}) {
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
-  const { user, getAccessToken, isLoading, organizationId, permissions } = useAuth9();
-  const hasOrganization = !!organizationId;
-  const canManageTeam = hasOrganization && (permissions == null ? void 0 : permissions.includes("widgets:users-table:manage"));
-  const loading = !useMockWidgets && isLoading;
-  return /* @__PURE__ */ jsxs37(Fragment16, { children: [
-    /* @__PURE__ */ jsx42("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 px-4", children: [
+  const useMockWidgets = config.identity?.useMockWidgets ?? useMockWidgetsProp ?? false;
+  return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+    !hideHeader && /* @__PURE__ */ jsx42("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx42(SidebarTrigger10, { className: "-ml-1" }),
-      /* @__PURE__ */ jsx42(Separator12, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
+      /* @__PURE__ */ jsx42(
+        Separator12,
+        {
+          orientation: "vertical",
+          className: "mr-2 data-[orientation=vertical]:h-4"
+        }
+      ),
       /* @__PURE__ */ jsx42(Breadcrumb10, { children: /* @__PURE__ */ jsx42(BreadcrumbList10, { children: /* @__PURE__ */ jsx42(BreadcrumbItem10, { children: /* @__PURE__ */ jsx42(BreadcrumbPage10, { children: "Team" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs37("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs37("div", { children: [
-        /* @__PURE__ */ jsx42("h1", { className: "text-2xl font-bold", children: "Team" }),
-        /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground", children: "Manage your team members and their permissions." })
-      ] }),
-      useMockWidgets ? /* @__PURE__ */ jsx42(MockUsersManagement, {}) : loading ? /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." }) : !user ? /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your team." }) }) : !hasOrganization ? /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "You need to be part of an organization to manage team members." }) }) : !canManageTeam ? /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "You need admin permissions to manage team members." }) }) : /* @__PURE__ */ jsx42(UsersManagement, { authToken: getAccessToken })
-    ] })
+    /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        className: `flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`,
+        children: [
+          /* @__PURE__ */ jsxs36("div", { children: [
+            /* @__PURE__ */ jsx42("h1", { className: "text-2xl font-bold", children: "Team" }),
+            /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground", children: "Manage your team members and their permissions." })
+          ] }),
+          /* @__PURE__ */ jsx42(TeamPageContent, { useMockWidgets })
+        ]
+      }
+    )
   ] });
 }
+function TeamPageContent({ useMockWidgets }) {
+  const { user, getAccessToken, isLoading, organizationId, permissions } = useAuth8();
+  const hasOrganization = !!organizationId;
+  const canManageTeam = hasOrganization && permissions?.includes("widgets:users-table:manage");
+  const loading = !useMockWidgets && isLoading;
+  if (loading) {
+    return /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: "Loading..." });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "Please sign in to manage your team." }) });
+  }
+  if (!hasOrganization) {
+    return /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "You need to be part of an organization to manage team members." }) });
+  }
+  if (!canManageTeam) {
+    return /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center rounded-md border border-dashed py-24", children: /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm", children: "You need admin permissions to manage team members." }) });
+  }
+  if (useMockWidgets) {
+    return /* @__PURE__ */ jsx42(MockUsersManagement, {});
+  }
+  return /* @__PURE__ */ jsx42(UsersManagement, { authToken: getAccessToken });
+}
 
 // src/developer/pages/vault.tsx
 import { Breadcrumb as Breadcrumb11, BreadcrumbItem as BreadcrumbItem11, BreadcrumbList as BreadcrumbList11, BreadcrumbPage as BreadcrumbPage11 } from "@mdxui/primitives/breadcrumb";
@@ -4724,9 +4787,9 @@ import { Button as Button16 } from "@mdxui/primitives/button";
 import { Separator as Separator13 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger11 } from "@mdxui/primitives/sidebar";
 import { Plus as Plus6 } from "lucide-react";
-import { useState as useState18 } from "react";
+import { useState as useState17 } from "react";
 import { toast as toast6 } from "sonner";
-import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 var pendingCredentialRequest = {
   id: "stripe",
   name: "Stripe",
@@ -4737,14 +4800,14 @@ var pendingCredentialRequest = {
   ]
 };
 function VaultPage() {
-  const [items, setItems] = useState18(mockVaultItems);
-  const [addModalOpen, setAddModalOpen] = useState18(false);
-  const [pendingIntegration, setPendingIntegration] = useState18(null);
+  const [items, setItems] = useState17(mockVaultItems);
+  const [addModalOpen, setAddModalOpen] = useState17(false);
+  const [pendingIntegration, setPendingIntegration] = useState17(null);
   const handleOpenAddModal = () => {
     setPendingIntegration(pendingCredentialRequest);
     setAddModalOpen(true);
   };
-  const handleAdd = (credentials) => __async(null, null, function* () {
+  const handleAdd = async (_credentials) => {
     if (!pendingIntegration) return;
     const newItem = {
       id: Date.now().toString(),
@@ -4756,34 +4819,34 @@ function VaultPage() {
     };
     setItems((prev) => [...prev, newItem]);
     toast6.success(`${pendingIntegration.name} credentials added successfully`);
-  });
+  };
   const handleCloseAddModal = () => {
     setAddModalOpen(false);
     setPendingIntegration(null);
   };
-  const handleRotate = (id, credentials) => __async(null, null, function* () {
+  const handleRotate = async (id, _credentials) => {
     const item = items.find((i) => i.id === id);
-    setItems((prev) => prev.map((i) => i.id === id ? __spreadProps(__spreadValues({}, i), { updatedAt: /* @__PURE__ */ new Date() }) : i));
-    toast6.success(`${(item == null ? void 0 : item.name) || "Credentials"} rotated successfully`);
-  });
-  const handleDelete = (id) => __async(null, null, function* () {
+    setItems((prev) => prev.map((i) => i.id === id ? { ...i, updatedAt: /* @__PURE__ */ new Date() } : i));
+    toast6.success(`${item?.name || "Credentials"} rotated successfully`);
+  };
+  const handleDelete = async (id) => {
     const item = items.find((i) => i.id === id);
     setItems((prev) => prev.filter((i) => i.id !== id));
-    toast6.success(`${(item == null ? void 0 : item.name) || "Credentials"} deleted successfully`);
-  });
-  return /* @__PURE__ */ jsxs38(Fragment17, { children: [
-    /* @__PURE__ */ jsx43("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2 px-4", children: [
+    toast6.success(`${item?.name || "Credentials"} deleted successfully`);
+  };
+  return /* @__PURE__ */ jsxs37(Fragment16, { children: [
+    /* @__PURE__ */ jsx43("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx43(SidebarTrigger11, { className: "-ml-1" }),
       /* @__PURE__ */ jsx43(Separator13, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx43(Breadcrumb11, { children: /* @__PURE__ */ jsx43(BreadcrumbList11, { children: /* @__PURE__ */ jsx43(BreadcrumbItem11, { children: /* @__PURE__ */ jsx43(BreadcrumbPage11, { children: "Vault" }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs38("div", { children: [
+    /* @__PURE__ */ jsxs37("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs37("div", { children: [
           /* @__PURE__ */ jsx43("h1", { className: "text-2xl font-bold", children: "Vault" }),
           /* @__PURE__ */ jsx43("p", { className: "text-muted-foreground", children: "Securely stored credentials for your agents." })
         ] }),
-        items.length > 0 && /* @__PURE__ */ jsxs38(Button16, { onClick: handleOpenAddModal, children: [
+        items.length > 0 && /* @__PURE__ */ jsxs37(Button16, { onClick: handleOpenAddModal, children: [
           /* @__PURE__ */ jsx43(Plus6, { className: "h-4 w-4" }),
           "Add Credential"
         ] })
@@ -4833,9 +4896,9 @@ import { Progress as Progress2 } from "@mdxui/primitives/progress";
 import { Separator as Separator14 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger12 } from "@mdxui/primitives/sidebar";
 import { Activity as Activity4, AlertTriangle as AlertTriangle3, CheckCircle2 as CheckCircle22, ChevronDown as ChevronDown3, Clock, XCircle } from "lucide-react";
-import { useState as useState19 } from "react";
+import { useState as useState18 } from "react";
 import { Link as Link7 } from "react-router-dom";
-import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var periodOptions = [
   { value: "7d", label: "Last 7 days" },
   { value: "24h", label: "Last 24 hours" },
@@ -4847,93 +4910,93 @@ var periodMultipliers = {
   "30d": 30
 };
 function WebhooksActivityPage() {
-  var _a;
-  const [period, setPeriod] = useState19("7d");
+  const [period, setPeriod] = useState18("7d");
   const multiplier = periodMultipliers[period];
   const activity = {
     delivered: Math.round(mockWebhookActivity.delivered * multiplier),
     failed: Math.round(mockWebhookActivity.failed * multiplier),
     pending: mockWebhookActivity.pending,
     successRate: mockWebhookActivity.successRate,
-    endpointsWithIssues: mockWebhookActivity.endpointsWithIssues.map((ep) => __spreadProps(__spreadValues({}, ep), {
+    endpointsWithIssues: mockWebhookActivity.endpointsWithIssues.map((ep) => ({
+      ...ep,
       failures: Math.round(ep.failures * multiplier)
     }))
   };
   const total = activity.delivered + activity.failed + activity.pending;
-  return /* @__PURE__ */ jsxs39(Fragment18, { children: [
-    /* @__PURE__ */ jsx44("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs38(Fragment17, { children: [
+    /* @__PURE__ */ jsx44("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx44(SidebarTrigger12, { className: "-ml-1" }),
       /* @__PURE__ */ jsx44(Separator14, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx44(Breadcrumb12, { children: /* @__PURE__ */ jsxs39(BreadcrumbList12, { children: [
+      /* @__PURE__ */ jsx44(Breadcrumb12, { children: /* @__PURE__ */ jsxs38(BreadcrumbList12, { children: [
         /* @__PURE__ */ jsx44(BreadcrumbItem12, { children: /* @__PURE__ */ jsx44(BreadcrumbLink4, { asChild: true, children: /* @__PURE__ */ jsx44(Link7, { to: "/webhooks", children: "Webhooks" }) }) }),
         /* @__PURE__ */ jsx44(BreadcrumbSeparator4, {}),
         /* @__PURE__ */ jsx44(BreadcrumbItem12, { children: /* @__PURE__ */ jsx44(BreadcrumbPage12, { children: "Activity" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs39("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs39("div", { children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs38("div", { children: [
           /* @__PURE__ */ jsx44("h1", { className: "text-2xl font-bold", children: "Webhook Activity" }),
           /* @__PURE__ */ jsx44("p", { className: "text-muted-foreground", children: "Monitor webhook health and delivery status." })
         ] }),
-        /* @__PURE__ */ jsxs39(DropdownMenu7, { children: [
-          /* @__PURE__ */ jsx44(DropdownMenuTrigger7, { asChild: true, children: /* @__PURE__ */ jsxs39(Button17, { variant: "outline", className: "w-[160px] justify-between", children: [
-            (_a = periodOptions.find((o) => o.value === period)) == null ? void 0 : _a.label,
+        /* @__PURE__ */ jsxs38(DropdownMenu7, { children: [
+          /* @__PURE__ */ jsx44(DropdownMenuTrigger7, { asChild: true, children: /* @__PURE__ */ jsxs38(Button17, { variant: "outline", className: "w-[160px] justify-between", children: [
+            periodOptions.find((o) => o.value === period)?.label,
             /* @__PURE__ */ jsx44(ChevronDown3, { className: "h-4 w-4 opacity-50" })
           ] }) }),
           /* @__PURE__ */ jsx44(DropdownMenuContent7, { align: "end", className: "w-[160px]", children: periodOptions.map((option) => /* @__PURE__ */ jsx44(DropdownMenuItem7, { onClick: () => setPeriod(option.value), children: option.label }, option.value)) })
         ] })
       ] }),
-      total === 0 ? /* @__PURE__ */ jsx44(Card16, { children: /* @__PURE__ */ jsx44(CardContent15, { className: "py-16", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+      total === 0 ? /* @__PURE__ */ jsx44(Card16, { children: /* @__PURE__ */ jsx44(CardContent15, { className: "py-16", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
         /* @__PURE__ */ jsx44("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx44(Activity4, { className: "h-8 w-8 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxs39("div", { children: [
+        /* @__PURE__ */ jsxs38("div", { children: [
           /* @__PURE__ */ jsx44("p", { className: "font-medium", children: "No activity yet" }),
           /* @__PURE__ */ jsx44("p", { className: "text-sm text-muted-foreground mt-1", children: "Webhook activity will appear here once you start receiving events." })
         ] })
-      ] }) }) }) : /* @__PURE__ */ jsxs39(Fragment18, { children: [
-        /* @__PURE__ */ jsxs39("div", { className: "grid gap-4 md:grid-cols-3", children: [
-          /* @__PURE__ */ jsxs39(Card16, { children: [
-            /* @__PURE__ */ jsxs39(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      ] }) }) }) : /* @__PURE__ */ jsxs38(Fragment17, { children: [
+        /* @__PURE__ */ jsxs38("div", { className: "grid gap-4 md:grid-cols-3", children: [
+          /* @__PURE__ */ jsxs38(Card16, { children: [
+            /* @__PURE__ */ jsxs38(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
               /* @__PURE__ */ jsx44(CardTitle14, { className: "text-sm font-medium", children: "Delivered" }),
               /* @__PURE__ */ jsx44(CheckCircle22, { className: "h-4 w-4 text-success" })
             ] }),
-            /* @__PURE__ */ jsxs39(CardContent15, { children: [
+            /* @__PURE__ */ jsxs38(CardContent15, { children: [
               /* @__PURE__ */ jsx44("div", { className: "text-2xl font-bold", children: activity.delivered.toLocaleString() }),
-              /* @__PURE__ */ jsxs39("p", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs38("p", { className: "text-xs text-muted-foreground", children: [
                 (activity.delivered / total * 100).toFixed(1),
                 "% of total"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs39(Card16, { children: [
-            /* @__PURE__ */ jsxs39(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsxs38(Card16, { children: [
+            /* @__PURE__ */ jsxs38(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
               /* @__PURE__ */ jsx44(CardTitle14, { className: "text-sm font-medium", children: "Failed" }),
               /* @__PURE__ */ jsx44(XCircle, { className: "h-4 w-4 text-destructive" })
             ] }),
-            /* @__PURE__ */ jsxs39(CardContent15, { children: [
+            /* @__PURE__ */ jsxs38(CardContent15, { children: [
               /* @__PURE__ */ jsx44("div", { className: "text-2xl font-bold", children: activity.failed.toLocaleString() }),
-              /* @__PURE__ */ jsxs39("p", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs38("p", { className: "text-xs text-muted-foreground", children: [
                 (activity.failed / total * 100).toFixed(1),
                 "% of total"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs39(Card16, { children: [
-            /* @__PURE__ */ jsxs39(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsxs38(Card16, { children: [
+            /* @__PURE__ */ jsxs38(CardHeader14, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
               /* @__PURE__ */ jsx44(CardTitle14, { className: "text-sm font-medium", children: "Pending" }),
               /* @__PURE__ */ jsx44(Clock, { className: "h-4 w-4 text-warning" })
             ] }),
-            /* @__PURE__ */ jsxs39(CardContent15, { children: [
+            /* @__PURE__ */ jsxs38(CardContent15, { children: [
               /* @__PURE__ */ jsx44("div", { className: "text-2xl font-bold", children: activity.pending.toLocaleString() }),
               /* @__PURE__ */ jsx44("p", { className: "text-xs text-muted-foreground", children: "Waiting for delivery" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs39(Card16, { children: [
+        /* @__PURE__ */ jsxs38(Card16, { children: [
           /* @__PURE__ */ jsx44(CardHeader14, { children: /* @__PURE__ */ jsx44(CardTitle14, { className: "text-sm font-medium", children: "Delivery Success Rate" }) }),
-          /* @__PURE__ */ jsxs39(CardContent15, { children: [
-            /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxs39(
+          /* @__PURE__ */ jsxs38(CardContent15, { children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs38(
                 "div",
                 {
                   className: cn7(
@@ -4957,7 +5020,7 @@ function WebhooksActivityPage() {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsxs39("p", { className: "text-sm text-muted-foreground mt-2", children: [
+            /* @__PURE__ */ jsxs38("p", { className: "text-sm text-muted-foreground mt-2", children: [
               activity.delivered.toLocaleString(),
               " of ",
               total.toLocaleString(),
@@ -4965,19 +5028,19 @@ function WebhooksActivityPage() {
             ] })
           ] })
         ] }),
-        activity.endpointsWithIssues.length > 0 && /* @__PURE__ */ jsxs39(Card16, { children: [
-          /* @__PURE__ */ jsx44(CardHeader14, { children: /* @__PURE__ */ jsxs39(CardTitle14, { className: "text-sm font-medium flex items-center gap-2", children: [
+        activity.endpointsWithIssues.length > 0 && /* @__PURE__ */ jsxs38(Card16, { children: [
+          /* @__PURE__ */ jsx44(CardHeader14, { children: /* @__PURE__ */ jsxs38(CardTitle14, { className: "text-sm font-medium flex items-center gap-2", children: [
             /* @__PURE__ */ jsx44(AlertTriangle3, { className: "h-4 w-4 text-warning" }),
             "Endpoints with Issues"
           ] }) }),
-          /* @__PURE__ */ jsx44(CardContent15, { children: /* @__PURE__ */ jsx44("div", { className: "space-y-3", children: activity.endpointsWithIssues.map((endpoint) => /* @__PURE__ */ jsxs39(
+          /* @__PURE__ */ jsx44(CardContent15, { children: /* @__PURE__ */ jsx44("div", { className: "space-y-3", children: activity.endpointsWithIssues.map((endpoint) => /* @__PURE__ */ jsxs38(
             "div",
             {
               className: "flex items-center justify-between p-3 rounded-md bg-muted/50",
               children: [
                 /* @__PURE__ */ jsx44("span", { className: "font-mono text-sm truncate flex-1", children: endpoint.url }),
-                /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-4 ml-4", children: [
-                  /* @__PURE__ */ jsxs39("span", { className: "text-sm text-destructive font-medium", children: [
+                /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-4 ml-4", children: [
+                  /* @__PURE__ */ jsxs38("span", { className: "text-sm text-destructive font-medium", children: [
                     endpoint.failures,
                     " failures"
                   ] }),
@@ -5014,10 +5077,10 @@ import { Separator as Separator15 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger13 } from "@mdxui/primitives/sidebar";
 import { Switch as Switch2 } from "@mdxui/primitives/switch";
 import { Check as Check4, Circle, Copy as Copy4, Link2 as Link22, MoreHorizontal as MoreHorizontal5, Pencil as Pencil2, Plus as Plus7, RefreshCw, Trash2 as Trash25 } from "lucide-react";
-import { useState as useState20 } from "react";
+import { useState as useState19 } from "react";
 import { Link as Link8 } from "react-router-dom";
 import { toast as toast7 } from "sonner";
-import { Fragment as Fragment19, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function formatRelativeTime(timestamp) {
   if (!timestamp) return "Never";
   const date = new Date(timestamp);
@@ -5038,44 +5101,79 @@ var eventsByCategory = mockWebhookEvents.reduce((acc, event) => {
   acc[event.category].push(event);
   return acc;
 }, {});
-function WebhooksEndpointsPage() {
-  const [endpoints, setEndpoints] = useState20(mockWebhookEndpoints);
-  const [createDialogOpen, setCreateDialogOpen] = useState20(false);
-  const [editDialogOpen, setEditDialogOpen] = useState20(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState20(false);
-  const [selectedEndpoint, setSelectedEndpoint] = useState20(null);
-  const [copiedSecret, setCopiedSecret] = useState20(null);
-  const [formUrl, setFormUrl] = useState20("");
-  const [formEvents, setFormEvents] = useState20([]);
-  const [formEnabled, setFormEnabled] = useState20(true);
+function WebhooksEndpointsPage({
+  endpoints: initialEndpoints,
+  onCreateEndpoint,
+  onUpdateEndpoint,
+  onDeleteEndpoint,
+  hideHeader = false,
+  className
+} = {}) {
+  const [endpoints, setEndpoints] = useState19(initialEndpoints ?? mockWebhookEndpoints);
+  const [createDialogOpen, setCreateDialogOpen] = useState19(false);
+  const [editDialogOpen, setEditDialogOpen] = useState19(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState19(false);
+  const [selectedEndpoint, setSelectedEndpoint] = useState19(null);
+  const [copiedSecret, setCopiedSecret] = useState19(null);
+  const [formUrl, setFormUrl] = useState19("");
+  const [formEvents, setFormEvents] = useState19([]);
+  const [formEnabled, setFormEnabled] = useState19(true);
   const resetForm = () => {
     setFormUrl("");
     setFormEvents([]);
     setFormEnabled(true);
   };
-  const handleCreate = () => {
-    const newEndpoint = {
-      id: `ep_${Date.now()}`,
-      url: formUrl,
-      events: formEvents,
-      lastDelivery: null,
-      status: formEnabled ? "active" : "disabled",
-      secret: `whsec_${Math.random().toString(36).substring(2, 15)}`,
-      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-      failureCount: 0
-    };
-    setEndpoints([...endpoints, newEndpoint]);
+  const handleCreate = async () => {
+    if (onCreateEndpoint) {
+      try {
+        const result = await onCreateEndpoint({ url: formUrl, events: formEvents, enabled: formEnabled });
+        const newEndpoint = {
+          id: result.id,
+          url: formUrl,
+          events: formEvents,
+          lastDelivery: null,
+          status: formEnabled ? "active" : "disabled",
+          secret: result.secret,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          failureCount: 0
+        };
+        setEndpoints([...endpoints, newEndpoint]);
+      } catch {
+        toast7.error("Failed to create endpoint");
+        return;
+      }
+    } else {
+      const newEndpoint = {
+        id: `ep_${Date.now()}`,
+        url: formUrl,
+        events: formEvents,
+        lastDelivery: null,
+        status: formEnabled ? "active" : "disabled",
+        secret: `whsec_${Math.random().toString(36).substring(2, 15)}`,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        failureCount: 0
+      };
+      setEndpoints([...endpoints, newEndpoint]);
+    }
     setCreateDialogOpen(false);
     resetForm();
     toast7.success("Endpoint created", {
       description: "Your webhook endpoint has been created successfully."
     });
   };
-  const handleEdit = () => {
+  const handleEdit = async () => {
     if (!selectedEndpoint) return;
+    if (onUpdateEndpoint) {
+      try {
+        await onUpdateEndpoint(selectedEndpoint.id, { url: formUrl, events: formEvents, enabled: formEnabled });
+      } catch {
+        toast7.error("Failed to update endpoint");
+        return;
+      }
+    }
     setEndpoints(
       endpoints.map(
-        (ep) => ep.id === selectedEndpoint.id ? __spreadProps(__spreadValues({}, ep), { url: formUrl, events: formEvents, status: formEnabled ? "active" : "disabled" }) : ep
+        (ep) => ep.id === selectedEndpoint.id ? { ...ep, url: formUrl, events: formEvents, status: formEnabled ? "active" : "disabled" } : ep
       )
     );
     setEditDialogOpen(false);
@@ -5085,8 +5183,16 @@ function WebhooksEndpointsPage() {
       description: "Your webhook endpoint has been updated successfully."
     });
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!selectedEndpoint) return;
+    if (onDeleteEndpoint) {
+      try {
+        await onDeleteEndpoint(selectedEndpoint.id);
+      } catch {
+        toast7.error("Failed to delete endpoint");
+        return;
+      }
+    }
     setEndpoints(endpoints.filter((ep) => ep.id !== selectedEndpoint.id));
     setDeleteDialogOpen(false);
     setSelectedEndpoint(null);
@@ -5105,12 +5211,12 @@ function WebhooksEndpointsPage() {
     setSelectedEndpoint(endpoint);
     setDeleteDialogOpen(true);
   };
-  const handleCopySecret = (endpoint) => __async(null, null, function* () {
-    yield navigator.clipboard.writeText(endpoint.secret);
+  const handleCopySecret = async (endpoint) => {
+    await navigator.clipboard.writeText(endpoint.secret);
     setCopiedSecret(endpoint.id);
     setTimeout(() => setCopiedSecret(null), 2e3);
     toast7.success("Secret copied to clipboard");
-  });
+  };
   const toggleEvent = (eventName) => {
     if (formEvents.includes(eventName)) {
       setFormEvents(formEvents.filter((e) => e !== eventName));
@@ -5118,55 +5224,55 @@ function WebhooksEndpointsPage() {
       setFormEvents([...formEvents, eventName]);
     }
   };
-  return /* @__PURE__ */ jsxs40(Fragment19, { children: [
-    /* @__PURE__ */ jsx45("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs39(Fragment18, { children: [
+    !hideHeader && /* @__PURE__ */ jsx45("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx45(SidebarTrigger13, { className: "-ml-1" }),
       /* @__PURE__ */ jsx45(Separator15, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx45(Breadcrumb13, { children: /* @__PURE__ */ jsxs40(BreadcrumbList13, { children: [
+      /* @__PURE__ */ jsx45(Breadcrumb13, { children: /* @__PURE__ */ jsxs39(BreadcrumbList13, { children: [
         /* @__PURE__ */ jsx45(BreadcrumbItem13, { children: /* @__PURE__ */ jsx45(BreadcrumbLink5, { asChild: true, children: /* @__PURE__ */ jsx45(Link8, { to: "/webhooks", children: "Webhooks" }) }) }),
         /* @__PURE__ */ jsx45(BreadcrumbSeparator5, {}),
         /* @__PURE__ */ jsx45(BreadcrumbItem13, { children: /* @__PURE__ */ jsx45(BreadcrumbPage13, { children: "Endpoints" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs40("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs40("div", { children: [
+    /* @__PURE__ */ jsxs39("div", { className: `flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs39("div", { children: [
           /* @__PURE__ */ jsx45("h1", { className: "text-2xl font-bold", children: "Endpoints" }),
           /* @__PURE__ */ jsx45("p", { className: "text-muted-foreground", children: "Manage your webhook subscription endpoints." })
         ] }),
-        /* @__PURE__ */ jsxs40(Dialog8, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, children: [
-          /* @__PURE__ */ jsx45(DialogTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs40(Button18, { onClick: resetForm, children: [
+        /* @__PURE__ */ jsxs39(Dialog8, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, children: [
+          /* @__PURE__ */ jsx45(DialogTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs39(Button18, { onClick: resetForm, children: [
             /* @__PURE__ */ jsx45(Plus7, { className: "h-4 w-4" }),
             "Add Endpoint"
           ] }) }),
-          /* @__PURE__ */ jsxs40(DialogContent8, { className: "sm:max-w-xl", children: [
-            /* @__PURE__ */ jsxs40(DialogHeader7, { children: [
+          /* @__PURE__ */ jsxs39(DialogContent8, { className: "sm:max-w-xl", children: [
+            /* @__PURE__ */ jsxs39(DialogHeader7, { children: [
               /* @__PURE__ */ jsx45(DialogTitle7, { children: "Add Webhook Endpoint" }),
               /* @__PURE__ */ jsx45(DialogDescription6, { children: "Configure a new endpoint to receive webhook events." })
             ] }),
-            /* @__PURE__ */ jsxs40("div", { className: "space-y-6", children: [
-              /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxs40("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs39("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsx45(Label8, { htmlFor: "url", children: "Endpoint URL" }),
                   /* @__PURE__ */ jsx45(
                     Input9,
                     {
                       id: "url",
-                      placeholder: "https://api.example.com/webhooks",
+                      placeholder: "https://api.example.com.ai/webhooks",
                       value: formUrl,
                       onChange: (e) => setFormUrl(e.target.value)
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
-                  /* @__PURE__ */ jsxs40("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
+                  /* @__PURE__ */ jsxs39("div", { className: "space-y-0.5", children: [
                     /* @__PURE__ */ jsx45(Label8, { htmlFor: "enabled", className: "text-sm font-medium", children: "Active" }),
                     /* @__PURE__ */ jsx45("p", { className: "text-xs text-muted-foreground", children: "Enable this endpoint to receive events" })
                   ] }),
                   /* @__PURE__ */ jsx45(Switch2, { id: "enabled", checked: formEnabled, onCheckedChange: setFormEnabled })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxs39("div", { className: "space-y-3", children: [
                 /* @__PURE__ */ jsx45(Label8, { children: "Events to subscribe" }),
                 /* @__PURE__ */ jsx45("div", { className: "rounded-lg border divide-y", children: Object.entries(eventsByCategory).map(([category, events]) => {
                   const categoryEvents = events.map((e) => e.name);
@@ -5179,8 +5285,8 @@ function WebhooksEndpointsPage() {
                       setFormEvents([.../* @__PURE__ */ new Set([...formEvents, ...categoryEvents])]);
                     }
                   };
-                  return /* @__PURE__ */ jsxs40("div", { className: "p-3 space-y-2", children: [
-                    /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+                  return /* @__PURE__ */ jsxs39("div", { className: "p-3 space-y-2", children: [
+                    /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx45(
                         Checkbox,
                         {
@@ -5192,7 +5298,7 @@ function WebhooksEndpointsPage() {
                       ),
                       /* @__PURE__ */ jsx45(Label8, { htmlFor: `category-${category}`, className: "text-sm font-medium cursor-pointer", children: category })
                     ] }),
-                    /* @__PURE__ */ jsx45("div", { className: "ml-6 space-y-1.5", children: events.map((event) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx45("div", { className: "ml-6 space-y-1.5", children: events.map((event) => /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx45(
                         Checkbox,
                         {
@@ -5205,7 +5311,7 @@ function WebhooksEndpointsPage() {
                     ] }, event.name)) })
                   ] }, category);
                 }) }),
-                /* @__PURE__ */ jsxs40("p", { className: "text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs39("p", { className: "text-xs text-muted-foreground", children: [
                   formEvents.length,
                   " event",
                   formEvents.length !== 1 ? "s" : "",
@@ -5213,19 +5319,19 @@ function WebhooksEndpointsPage() {
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs40(DialogFooter7, { children: [
+            /* @__PURE__ */ jsxs39(DialogFooter7, { children: [
               /* @__PURE__ */ jsx45(Button18, { variant: "outline", onClick: () => setCreateDialogOpen(false), children: "Cancel" }),
               /* @__PURE__ */ jsx45(Button18, { onClick: handleCreate, disabled: !formUrl || formEvents.length === 0, children: "Create Endpoint" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs39("div", { className: "space-y-3", children: [
         endpoints.map((endpoint) => {
           const hasIssues = endpoint.failureCount > 0;
-          return /* @__PURE__ */ jsx45(Card17, { children: /* @__PURE__ */ jsx45(CardContent16, { className: "p-4 py-0", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-start justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1 space-y-1", children: [
-              /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ jsx45(Card17, { children: /* @__PURE__ */ jsx45(CardContent16, { className: "p-4 py-0", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx45(
                   Circle,
                   {
@@ -5235,20 +5341,20 @@ function WebhooksEndpointsPage() {
                 /* @__PURE__ */ jsx45("span", { className: "font-mono text-sm truncate", children: endpoint.url }),
                 endpoint.status === "disabled" && /* @__PURE__ */ jsx45(Badge7, { variant: "secondary", className: "shrink-0", children: "Disabled" })
               ] }),
-              /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1 text-sm text-muted-foreground ml-4", children: [
-                /* @__PURE__ */ jsxs40("span", { children: [
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-1 text-sm text-muted-foreground ml-4", children: [
+                /* @__PURE__ */ jsxs39("span", { children: [
                   endpoint.events.length,
                   " event",
                   endpoint.events.length !== 1 ? "s" : ""
                 ] }),
                 /* @__PURE__ */ jsx45("span", { children: "\xB7" }),
-                /* @__PURE__ */ jsxs40("span", { children: [
+                /* @__PURE__ */ jsxs39("span", { children: [
                   "Last delivery ",
                   formatRelativeTime(endpoint.lastDelivery).toLowerCase()
                 ] }),
-                endpoint.failureCount > 0 && /* @__PURE__ */ jsxs40(Fragment19, { children: [
+                endpoint.failureCount > 0 && /* @__PURE__ */ jsxs39(Fragment18, { children: [
                   /* @__PURE__ */ jsx45("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsxs40("span", { className: "text-destructive", children: [
+                  /* @__PURE__ */ jsxs39("span", { className: "text-destructive", children: [
                     endpoint.failureCount,
                     " failure",
                     endpoint.failureCount !== 1 ? "s" : ""
@@ -5256,23 +5362,23 @@ function WebhooksEndpointsPage() {
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs40(DropdownMenu8, { children: [
+            /* @__PURE__ */ jsxs39(DropdownMenu8, { children: [
               /* @__PURE__ */ jsx45(DropdownMenuTrigger8, { asChild: true, children: /* @__PURE__ */ jsx45(Button18, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsx45(MoreHorizontal5, { className: "h-4 w-4" }) }) }),
-              /* @__PURE__ */ jsxs40(DropdownMenuContent8, { align: "end", children: [
-                /* @__PURE__ */ jsxs40(DropdownMenuItem8, { onClick: () => openEditDialog(endpoint), children: [
+              /* @__PURE__ */ jsxs39(DropdownMenuContent8, { align: "end", children: [
+                /* @__PURE__ */ jsxs39(DropdownMenuItem8, { onClick: () => openEditDialog(endpoint), children: [
                   /* @__PURE__ */ jsx45(Pencil2, { className: "h-4 w-4" }),
                   "Edit"
                 ] }),
-                /* @__PURE__ */ jsxs40(DropdownMenuItem8, { onClick: () => handleCopySecret(endpoint), children: [
+                /* @__PURE__ */ jsxs39(DropdownMenuItem8, { onClick: () => handleCopySecret(endpoint), children: [
                   copiedSecret === endpoint.id ? /* @__PURE__ */ jsx45(Check4, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx45(Copy4, { className: "h-4 w-4" }),
                   "Copy Secret"
                 ] }),
-                /* @__PURE__ */ jsxs40(DropdownMenuItem8, { children: [
+                /* @__PURE__ */ jsxs39(DropdownMenuItem8, { children: [
                   /* @__PURE__ */ jsx45(RefreshCw, { className: "h-4 w-4" }),
                   "Regenerate Secret"
                 ] }),
                 /* @__PURE__ */ jsx45(DropdownMenuSeparator3, {}),
-                /* @__PURE__ */ jsxs40(DropdownMenuItem8, { className: "text-destructive focus:text-destructive", onClick: () => openDeleteDialog(endpoint), children: [
+                /* @__PURE__ */ jsxs39(DropdownMenuItem8, { className: "text-destructive focus:text-destructive", onClick: () => openDeleteDialog(endpoint), children: [
                   /* @__PURE__ */ jsx45(Trash25, { className: "h-4 w-4" }),
                   "Delete"
                 ] })
@@ -5280,47 +5386,47 @@ function WebhooksEndpointsPage() {
             ] })
           ] }) }) }, endpoint.id);
         }),
-        endpoints.length === 0 && /* @__PURE__ */ jsx45(Card17, { children: /* @__PURE__ */ jsx45(CardContent16, { className: "py-16", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+        endpoints.length === 0 && /* @__PURE__ */ jsx45(Card17, { children: /* @__PURE__ */ jsx45(CardContent16, { className: "py-16", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
           /* @__PURE__ */ jsx45("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx45(Link22, { className: "h-8 w-8 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsxs40("div", { children: [
+          /* @__PURE__ */ jsxs39("div", { children: [
             /* @__PURE__ */ jsx45("p", { className: "font-medium", children: "No endpoints configured" }),
             /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-1", children: "Add your first endpoint to start receiving webhook events." })
           ] }),
-          /* @__PURE__ */ jsxs40(Button18, { onClick: () => setCreateDialogOpen(true), className: "mt-2", children: [
+          /* @__PURE__ */ jsxs39(Button18, { onClick: () => setCreateDialogOpen(true), className: "mt-2", children: [
             /* @__PURE__ */ jsx45(Plus7, { className: "h-4 w-4" }),
             "Add Your First Endpoint"
           ] })
         ] }) }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx45(Dialog8, { open: editDialogOpen, onOpenChange: setEditDialogOpen, children: /* @__PURE__ */ jsxs40(DialogContent8, { className: "sm:max-w-xl", children: [
-      /* @__PURE__ */ jsxs40(DialogHeader7, { children: [
+    /* @__PURE__ */ jsx45(Dialog8, { open: editDialogOpen, onOpenChange: setEditDialogOpen, children: /* @__PURE__ */ jsxs39(DialogContent8, { className: "sm:max-w-xl", children: [
+      /* @__PURE__ */ jsxs39(DialogHeader7, { children: [
         /* @__PURE__ */ jsx45(DialogTitle7, { children: "Edit Endpoint" }),
         /* @__PURE__ */ jsx45(DialogDescription6, { children: "Update your webhook endpoint configuration." })
       ] }),
-      /* @__PURE__ */ jsxs40("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs40("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs39("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx45(Label8, { htmlFor: "edit-url", children: "Endpoint URL" }),
             /* @__PURE__ */ jsx45(
               Input9,
               {
                 id: "edit-url",
-                placeholder: "https://api.example.com/webhooks",
+                placeholder: "https://api.example.com.ai/webhooks",
                 value: formUrl,
                 onChange: (e) => setFormUrl(e.target.value)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
-            /* @__PURE__ */ jsxs40("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "space-y-0.5", children: [
               /* @__PURE__ */ jsx45(Label8, { htmlFor: "edit-enabled", className: "text-sm font-medium", children: "Active" }),
               /* @__PURE__ */ jsx45("p", { className: "text-xs text-muted-foreground", children: "Enable this endpoint to receive events" })
             ] }),
             /* @__PURE__ */ jsx45(Switch2, { id: "edit-enabled", checked: formEnabled, onCheckedChange: setFormEnabled })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx45(Label8, { children: "Events to subscribe" }),
           /* @__PURE__ */ jsx45("div", { className: "rounded-lg border divide-y", children: Object.entries(eventsByCategory).map(([category, events]) => {
             const categoryEvents = events.map((e) => e.name);
@@ -5333,8 +5439,8 @@ function WebhooksEndpointsPage() {
                 setFormEvents([.../* @__PURE__ */ new Set([...formEvents, ...categoryEvents])]);
               }
             };
-            return /* @__PURE__ */ jsxs40("div", { className: "p-3 space-y-2", children: [
-              /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+            return /* @__PURE__ */ jsxs39("div", { className: "p-3 space-y-2", children: [
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx45(
                   Checkbox,
                   {
@@ -5346,7 +5452,7 @@ function WebhooksEndpointsPage() {
                 ),
                 /* @__PURE__ */ jsx45(Label8, { htmlFor: `edit-category-${category}`, className: "text-sm font-medium cursor-pointer", children: category })
               ] }),
-              /* @__PURE__ */ jsx45("div", { className: "ml-6 space-y-1.5", children: events.map((event) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx45("div", { className: "ml-6 space-y-1.5", children: events.map((event) => /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx45(
                   Checkbox,
                   {
@@ -5359,7 +5465,7 @@ function WebhooksEndpointsPage() {
               ] }, event.name)) })
             ] }, category);
           }) }),
-          /* @__PURE__ */ jsxs40("p", { className: "text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs39("p", { className: "text-xs text-muted-foreground", children: [
             formEvents.length,
             " event",
             formEvents.length !== 1 ? "s" : "",
@@ -5367,18 +5473,18 @@ function WebhooksEndpointsPage() {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs40(DialogFooter7, { children: [
+      /* @__PURE__ */ jsxs39(DialogFooter7, { children: [
         /* @__PURE__ */ jsx45(Button18, { variant: "outline", onClick: () => setEditDialogOpen(false), children: "Cancel" }),
         /* @__PURE__ */ jsx45(Button18, { onClick: handleEdit, disabled: !formUrl || formEvents.length === 0, children: "Save Changes" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Dialog8, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs40(DialogContent8, { children: [
-      /* @__PURE__ */ jsxs40(DialogHeader7, { children: [
+    /* @__PURE__ */ jsx45(Dialog8, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs39(DialogContent8, { children: [
+      /* @__PURE__ */ jsxs39(DialogHeader7, { children: [
         /* @__PURE__ */ jsx45(DialogTitle7, { children: "Delete Endpoint" }),
         /* @__PURE__ */ jsx45(DialogDescription6, { children: "Are you sure you want to delete this endpoint? This action cannot be undone." })
       ] }),
       selectedEndpoint && /* @__PURE__ */ jsx45("div", { className: "rounded-md bg-muted p-3", children: /* @__PURE__ */ jsx45("p", { className: "font-mono text-sm truncate", children: selectedEndpoint.url }) }),
-      /* @__PURE__ */ jsxs40(DialogFooter7, { children: [
+      /* @__PURE__ */ jsxs39(DialogFooter7, { children: [
         /* @__PURE__ */ jsx45(Button18, { variant: "outline", onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
         /* @__PURE__ */ jsx45(Button18, { variant: "destructive", onClick: handleDelete, children: "Delete" })
       ] })
@@ -5394,12 +5500,12 @@ import { Input as Input10 } from "@mdxui/primitives/input";
 import { Separator as Separator16 } from "@mdxui/primitives/separator";
 import { SidebarTrigger as SidebarTrigger14 } from "@mdxui/primitives/sidebar";
 import { BookOpen, ChevronRight as ChevronRight2, Search as Search2 } from "lucide-react";
-import { useState as useState21 } from "react";
+import { useState as useState20 } from "react";
 import { Link as Link9 } from "react-router-dom";
-import { Fragment as Fragment20, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 function WebhooksEventCatalogPage() {
-  const [searchQuery, setSearchQuery] = useState21("");
-  const [expandedEvents, setExpandedEvents] = useState21(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState20("");
+  const [expandedEvents, setExpandedEvents] = useState20(/* @__PURE__ */ new Set());
   const filteredEvents = mockWebhookEvents.filter(
     (event) => event.name.toLowerCase().includes(searchQuery.toLowerCase()) || event.description.toLowerCase().includes(searchQuery.toLowerCase()) || event.category.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -5419,23 +5525,23 @@ function WebhooksEventCatalogPage() {
     }
     setExpandedEvents(newExpanded);
   };
-  return /* @__PURE__ */ jsxs41(Fragment20, { children: [
-    /* @__PURE__ */ jsx46("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs40(Fragment19, { children: [
+    /* @__PURE__ */ jsx46("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx46(SidebarTrigger14, { className: "-ml-1" }),
       /* @__PURE__ */ jsx46(Separator16, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx46(Breadcrumb14, { children: /* @__PURE__ */ jsxs41(BreadcrumbList14, { children: [
+      /* @__PURE__ */ jsx46(Breadcrumb14, { children: /* @__PURE__ */ jsxs40(BreadcrumbList14, { children: [
         /* @__PURE__ */ jsx46(BreadcrumbItem14, { children: /* @__PURE__ */ jsx46(BreadcrumbLink6, { asChild: true, children: /* @__PURE__ */ jsx46(Link9, { to: "/webhooks", children: "Webhooks" }) }) }),
         /* @__PURE__ */ jsx46(BreadcrumbSeparator6, {}),
         /* @__PURE__ */ jsx46(BreadcrumbItem14, { children: /* @__PURE__ */ jsx46(BreadcrumbPage14, { children: "Event Catalog" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs41("div", { children: [
+    /* @__PURE__ */ jsxs40("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs40("div", { children: [
           /* @__PURE__ */ jsx46("h1", { className: "text-2xl font-bold", children: "Event Catalog" }),
           /* @__PURE__ */ jsx46("p", { className: "text-muted-foreground", children: "Browse and search available webhook events." })
         ] }),
-        /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs40("div", { className: "relative", children: [
           /* @__PURE__ */ jsx46(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ jsx46(
             Input10,
@@ -5448,18 +5554,18 @@ function WebhooksEventCatalogPage() {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "space-y-6", children: [
-        Object.entries(groupedEvents).map(([category, events]) => /* @__PURE__ */ jsxs41("div", { children: [
+      /* @__PURE__ */ jsxs40("div", { className: "space-y-6", children: [
+        Object.entries(groupedEvents).map(([category, events]) => /* @__PURE__ */ jsxs40("div", { children: [
           /* @__PURE__ */ jsx46("h2", { className: "text-sm font-semibold text-muted-foreground mb-3 pt-2", children: category }),
-          /* @__PURE__ */ jsx46("div", { className: "space-y-2", children: events.map((event) => /* @__PURE__ */ jsx46(Card18, { noPadding: true, children: /* @__PURE__ */ jsxs41(Collapsible, { open: expandedEvents.has(event.id), onOpenChange: () => toggleEvent(event.id), children: [
-            /* @__PURE__ */ jsx46(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(CardContent17, { className: "p-4 cursor-pointer hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx46("div", { className: "space-y-2", children: events.map((event) => /* @__PURE__ */ jsx46(Card18, { noPadding: true, children: /* @__PURE__ */ jsxs40(Collapsible, { open: expandedEvents.has(event.id), onOpenChange: () => toggleEvent(event.id), children: [
+            /* @__PURE__ */ jsx46(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(CardContent17, { className: "p-4 cursor-pointer hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsx46(
                 ChevronRight2,
                 {
                   className: `h-4 w-4 text-muted-foreground transition-transform ${expandedEvents.has(event.id) ? "rotate-90" : ""}`
                 }
               ),
-              /* @__PURE__ */ jsxs41("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs40("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsx46("p", { className: "font-mono text-sm font-medium", children: event.name }),
                 /* @__PURE__ */ jsx46("p", { className: "text-sm text-muted-foreground truncate", children: event.description })
               ] })
@@ -5467,9 +5573,9 @@ function WebhooksEventCatalogPage() {
             /* @__PURE__ */ jsx46(CollapsibleContent, { children: /* @__PURE__ */ jsx46("div", { className: "px-4 pb-4 ml-7 mr-7", children: /* @__PURE__ */ jsx46(JsonViewer, { data: event.payloadSchema }) }) })
           ] }) }, event.id)) })
         ] }, category)),
-        Object.keys(groupedEvents).length === 0 && /* @__PURE__ */ jsx46(Card18, { children: /* @__PURE__ */ jsx46(CardContent17, { className: "py-16", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+        Object.keys(groupedEvents).length === 0 && /* @__PURE__ */ jsx46(Card18, { children: /* @__PURE__ */ jsx46(CardContent17, { className: "py-16", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
           /* @__PURE__ */ jsx46("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx46(BookOpen, { className: "h-8 w-8 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsxs41("div", { children: [
+          /* @__PURE__ */ jsxs40("div", { children: [
             /* @__PURE__ */ jsx46("p", { className: "font-medium", children: "No events found" }),
             /* @__PURE__ */ jsx46("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your search query." })
           ] })
@@ -5488,10 +5594,10 @@ import { Sheet as Sheet2, SheetContent as SheetContent2, SheetDescription as She
 import { SidebarTrigger as SidebarTrigger15 } from "@mdxui/primitives/sidebar";
 import { Table as Table9, TableBody as TableBody9, TableCell as TableCell9, TableHead as TableHead9, TableHeader as TableHeader9, TableRow as TableRow9 } from "@mdxui/primitives/table";
 import { Check as Check5, ChevronDown as ChevronDown4, Copy as Copy5, RefreshCw as RefreshCw2, ScrollText } from "lucide-react";
-import { useState as useState22 } from "react";
+import { useState as useState21 } from "react";
 import { Link as Link10 } from "react-router-dom";
 import { toast as toast8 } from "sonner";
-import { Fragment as Fragment21, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 var statusFilterOptions2 = [
   { value: "all", label: "All Status" },
   { value: "success", label: "Success" },
@@ -5524,11 +5630,10 @@ function formatLatency2(ms) {
   return `${ms}ms`;
 }
 function WebhooksLogsPage() {
-  var _a;
-  const [statusFilter, setStatusFilter] = useState22("all");
-  const [selectedLog, setSelectedLog] = useState22(null);
-  const [sheetOpen, setSheetOpen] = useState22(false);
-  const [copiedUrl, setCopiedUrl] = useState22(false);
+  const [statusFilter, setStatusFilter] = useState21("all");
+  const [selectedLog, setSelectedLog] = useState21(null);
+  const [sheetOpen, setSheetOpen] = useState21(false);
+  const [copiedUrl, setCopiedUrl] = useState21(false);
   const filteredLogs = mockWebhookLogs.filter((log) => {
     if (statusFilter === "all") return true;
     if (statusFilter === "success") return log.statusCode >= 200 && log.statusCode < 300;
@@ -5539,43 +5644,43 @@ function WebhooksLogsPage() {
     setSheetOpen(true);
     setCopiedUrl(false);
   };
-  const handleCopyUrl = (url) => __async(null, null, function* () {
-    yield navigator.clipboard.writeText(url);
+  const handleCopyUrl = async (url) => {
+    await navigator.clipboard.writeText(url);
     setCopiedUrl(true);
     setTimeout(() => setCopiedUrl(false), 2e3);
-  });
+  };
   const handleRetry = () => {
     toast8.success("Webhook retry triggered", {
       description: "The webhook delivery will be retried shortly."
     });
     setSheetOpen(false);
   };
-  return /* @__PURE__ */ jsxs42(Fragment21, { children: [
-    /* @__PURE__ */ jsx47("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2 px-4", children: [
+  return /* @__PURE__ */ jsxs41(Fragment20, { children: [
+    /* @__PURE__ */ jsx47("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx47(SidebarTrigger15, { className: "-ml-1" }),
       /* @__PURE__ */ jsx47(Separator17, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
-      /* @__PURE__ */ jsx47(Breadcrumb15, { children: /* @__PURE__ */ jsxs42(BreadcrumbList15, { children: [
+      /* @__PURE__ */ jsx47(Breadcrumb15, { children: /* @__PURE__ */ jsxs41(BreadcrumbList15, { children: [
         /* @__PURE__ */ jsx47(BreadcrumbItem15, { children: /* @__PURE__ */ jsx47(BreadcrumbLink7, { asChild: true, children: /* @__PURE__ */ jsx47(Link10, { to: "/webhooks", children: "Webhooks" }) }) }),
         /* @__PURE__ */ jsx47(BreadcrumbSeparator7, {}),
         /* @__PURE__ */ jsx47(BreadcrumbItem15, { children: /* @__PURE__ */ jsx47(BreadcrumbPage15, { children: "Logs" }) })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs42("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
-      /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs42("div", { children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 pt-0", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs41("div", { children: [
           /* @__PURE__ */ jsx47("h1", { className: "text-2xl font-bold", children: "Webhook Logs" }),
           /* @__PURE__ */ jsx47("p", { className: "text-muted-foreground", children: "View webhook delivery history and debug issues." })
         ] }),
-        /* @__PURE__ */ jsxs42(DropdownMenu9, { children: [
-          /* @__PURE__ */ jsx47(DropdownMenuTrigger9, { asChild: true, children: /* @__PURE__ */ jsxs42(Button19, { variant: "outline", className: "w-[140px] justify-between", children: [
-            (_a = statusFilterOptions2.find((o) => o.value === statusFilter)) == null ? void 0 : _a.label,
+        /* @__PURE__ */ jsxs41(DropdownMenu9, { children: [
+          /* @__PURE__ */ jsx47(DropdownMenuTrigger9, { asChild: true, children: /* @__PURE__ */ jsxs41(Button19, { variant: "outline", className: "w-[140px] justify-between", children: [
+            statusFilterOptions2.find((o) => o.value === statusFilter)?.label,
             /* @__PURE__ */ jsx47(ChevronDown4, { className: "h-4 w-4 opacity-50" })
           ] }) }),
           /* @__PURE__ */ jsx47(DropdownMenuContent9, { align: "end", className: "w-[140px]", children: statusFilterOptions2.map((option) => /* @__PURE__ */ jsx47(DropdownMenuItem9, { onClick: () => setStatusFilter(option.value), children: option.label }, option.value)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx47("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs42(Table9, { children: [
-        /* @__PURE__ */ jsx47(TableHeader9, { children: /* @__PURE__ */ jsxs42(TableRow9, { children: [
+      /* @__PURE__ */ jsx47("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs41(Table9, { children: [
+        /* @__PURE__ */ jsx47(TableHeader9, { children: /* @__PURE__ */ jsxs41(TableRow9, { children: [
           /* @__PURE__ */ jsx47(TableHead9, { className: "w-[40px] pl-4" }),
           /* @__PURE__ */ jsx47(TableHead9, { children: "Timestamp" }),
           /* @__PURE__ */ jsx47(TableHead9, { children: "Event" }),
@@ -5583,8 +5688,8 @@ function WebhooksLogsPage() {
           /* @__PURE__ */ jsx47(TableHead9, { children: "Status" }),
           /* @__PURE__ */ jsx47(TableHead9, { children: "Latency" })
         ] }) }),
-        /* @__PURE__ */ jsxs42(TableBody9, { children: [
-          filteredLogs.map((log) => /* @__PURE__ */ jsxs42(TableRow9, { className: "cursor-pointer hover:bg-muted/50", onClick: () => handleRowClick(log), children: [
+        /* @__PURE__ */ jsxs41(TableBody9, { children: [
+          filteredLogs.map((log) => /* @__PURE__ */ jsxs41(TableRow9, { className: "cursor-pointer hover:bg-muted/50", onClick: () => handleRowClick(log), children: [
             /* @__PURE__ */ jsx47(TableCell9, { className: "py-3 pl-4", children: /* @__PURE__ */ jsx47(StatusDot, { status: log.statusCode }) }),
             /* @__PURE__ */ jsx47(TableCell9, { className: "py-3 text-muted-foreground", children: formatTimestamp2(log.timestamp) }),
             /* @__PURE__ */ jsx47(TableCell9, { className: "py-3 font-mono text-sm", children: log.eventName }),
@@ -5592,9 +5697,9 @@ function WebhooksLogsPage() {
             /* @__PURE__ */ jsx47(TableCell9, { className: "py-3", children: /* @__PURE__ */ jsx47(StatusBadge, { status: log.statusCode }) }),
             /* @__PURE__ */ jsx47(TableCell9, { className: "py-3 text-muted-foreground", children: formatLatency2(log.latency) })
           ] }, log.id)),
-          filteredLogs.length === 0 && /* @__PURE__ */ jsx47(TableRow9, { children: /* @__PURE__ */ jsx47(TableCell9, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
+          filteredLogs.length === 0 && /* @__PURE__ */ jsx47(TableRow9, { children: /* @__PURE__ */ jsx47(TableCell9, { colSpan: 6, className: "py-16", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center justify-center gap-4 text-center", children: [
             /* @__PURE__ */ jsx47("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx47(ScrollText, { className: "h-8 w-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs42("div", { children: [
+            /* @__PURE__ */ jsxs41("div", { children: [
               /* @__PURE__ */ jsx47("p", { className: "font-medium", children: "No logs found" }),
               /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-1", children: "No webhook deliveries match the current filter." })
             ] })
@@ -5602,19 +5707,19 @@ function WebhooksLogsPage() {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx47(Sheet2, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx47(SheetContent2, { className: "w-full sm:max-w-lg overflow-y-auto", children: selectedLog && /* @__PURE__ */ jsxs42(Fragment21, { children: [
-      /* @__PURE__ */ jsxs42(SheetHeader2, { children: [
+    /* @__PURE__ */ jsx47(Sheet2, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx47(SheetContent2, { className: "w-full sm:max-w-lg overflow-y-auto", children: selectedLog && /* @__PURE__ */ jsxs41(Fragment20, { children: [
+      /* @__PURE__ */ jsxs41(SheetHeader2, { children: [
         /* @__PURE__ */ jsx47(SheetTitle2, { className: "font-mono text-sm", children: selectedLog.eventName }),
-        /* @__PURE__ */ jsxs42(SheetDescription2, { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsxs41(SheetDescription2, { className: "flex items-center gap-2 text-sm", children: [
           /* @__PURE__ */ jsx47(StatusBadge, { status: selectedLog.statusCode }),
           /* @__PURE__ */ jsx47("span", { children: "\u2022" }),
           /* @__PURE__ */ jsx47("span", { children: formatLatency2(selectedLog.latency) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs42("div", { className: "mt-6 space-y-6 px-4", children: [
-        /* @__PURE__ */ jsxs42("div", { className: "space-y-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "mt-6 space-y-6 px-4", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "space-y-1 text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx47("p", { children: formatFullTimestamp(selectedLog.timestamp) }),
-          /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsxs41(
             "button",
             {
               type: "button",
@@ -5627,15 +5732,15 @@ function WebhooksLogsPage() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs42("div", { children: [
+        /* @__PURE__ */ jsxs41("div", { children: [
           /* @__PURE__ */ jsx47("h4", { className: "text-sm font-semibold mb-2", children: "Request Payload" }),
           /* @__PURE__ */ jsx47(JsonViewer, { data: selectedLog.requestPayload })
         ] }),
-        /* @__PURE__ */ jsxs42("div", { children: [
+        /* @__PURE__ */ jsxs41("div", { children: [
           /* @__PURE__ */ jsx47("h4", { className: "text-sm font-semibold mb-2", children: "Response" }),
           selectedLog.responseBody ? /* @__PURE__ */ jsx47("div", { className: "rounded-md border bg-muted p-4 text-sm font-mono", children: selectedLog.responseBody }) : /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground", children: "No response received" })
         ] }),
-        selectedLog.statusCode >= 400 && /* @__PURE__ */ jsxs42(Button19, { onClick: handleRetry, children: [
+        selectedLog.statusCode >= 400 && /* @__PURE__ */ jsxs41(Button19, { onClick: handleRetry, children: [
           /* @__PURE__ */ jsx47(RefreshCw2, { className: "h-4 w-4" }),
           "Retry Delivery"
         ] })
@@ -5645,14 +5750,14 @@ function WebhooksLogsPage() {
 }
 
 // src/developer/router.tsx
-import { Fragment as Fragment22, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
 function isNextJs() {
   if (typeof window === "undefined") return false;
   return "__NEXT_DATA__" in window;
 }
 function UrlSync({ basePath }) {
   const location = useLocation2();
-  useEffect9(() => {
+  useEffect8(() => {
     const normalizedBase = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
     const path = location.pathname === "/" ? "" : location.pathname;
     const fullPath = `${normalizedBase}${path}${location.search}${location.hash}`;
@@ -5676,7 +5781,7 @@ function DashboardRouter({ basePath = "/", children }) {
   const useMemoryRouter = isNextJs();
   const initialPath = getInitialPathFromUrl(basePath);
   if (useMemoryRouter) {
-    return /* @__PURE__ */ jsxs43(MemoryRouter, { initialEntries: [initialPath], children: [
+    return /* @__PURE__ */ jsxs42(MemoryRouter, { initialEntries: [initialPath], children: [
       /* @__PURE__ */ jsx48(UrlSync, { basePath }),
       children
     ] });
@@ -5685,19 +5790,20 @@ function DashboardRouter({ basePath = "/", children }) {
 }
 function DashboardRoutes() {
   const routes = useRoutes();
-  return /* @__PURE__ */ jsx48(Routes, { children: /* @__PURE__ */ jsxs43(Route, { element: /* @__PURE__ */ jsx48(DashboardLayout, {}), children: [
+  const customRoutes = useCustomRoutes();
+  return /* @__PURE__ */ jsx48(Routes, { children: /* @__PURE__ */ jsxs42(Route, { element: /* @__PURE__ */ jsx48(DashboardLayout, {}), children: [
     routes.overview && /* @__PURE__ */ jsx48(Route, { index: true, element: /* @__PURE__ */ jsx48(OverviewPage, {}) }),
     routes.requests && /* @__PURE__ */ jsx48(Route, { path: "requests", element: /* @__PURE__ */ jsx48(RequestsPage, {}) }),
     routes.keys && /* @__PURE__ */ jsx48(Route, { path: "keys", element: /* @__PURE__ */ jsx48(KeysPage, {}) }),
     routes.team && /* @__PURE__ */ jsx48(Route, { path: "team", element: /* @__PURE__ */ jsx48(TeamPage, {}) }),
     routes.billing && /* @__PURE__ */ jsx48(Route, { path: "billing", element: /* @__PURE__ */ jsx48(BillingPage, {}) }),
-    routes.settings && /* @__PURE__ */ jsxs43(Fragment22, { children: [
+    routes.settings && /* @__PURE__ */ jsxs42(Fragment21, { children: [
       /* @__PURE__ */ jsx48(Route, { path: "settings", element: /* @__PURE__ */ jsx48(Navigate, { to: "settings/profile", replace: true }) }),
       /* @__PURE__ */ jsx48(Route, { path: "settings/profile", element: /* @__PURE__ */ jsx48(SettingsProfilePage, {}) }),
       /* @__PURE__ */ jsx48(Route, { path: "settings/security", element: /* @__PURE__ */ jsx48(SettingsSecurityPage, {}) }),
       /* @__PURE__ */ jsx48(Route, { path: "settings/sessions", element: /* @__PURE__ */ jsx48(SettingsSessionsPage, {}) })
     ] }),
-    routes.webhooks && /* @__PURE__ */ jsxs43(Fragment22, { children: [
+    routes.webhooks && /* @__PURE__ */ jsxs42(Fragment21, { children: [
       /* @__PURE__ */ jsx48(Route, { path: "webhooks", element: /* @__PURE__ */ jsx48(Navigate, { to: "webhooks/endpoints", replace: true }) }),
       /* @__PURE__ */ jsx48(Route, { path: "webhooks/endpoints", element: /* @__PURE__ */ jsx48(WebhooksEndpointsPage, {}) }),
       /* @__PURE__ */ jsx48(Route, { path: "webhooks/activity", element: /* @__PURE__ */ jsx48(WebhooksActivityPage, {}) }),
@@ -5707,49 +5813,210 @@ function DashboardRoutes() {
     routes.database && /* @__PURE__ */ jsx48(Route, { path: "database", element: /* @__PURE__ */ jsx48(DatabasePage, {}) }),
     routes.integrations && /* @__PURE__ */ jsx48(Route, { path: "integrations", element: /* @__PURE__ */ jsx48(IntegrationsPage, {}) }),
     routes.vault && /* @__PURE__ */ jsx48(Route, { path: "vault", element: /* @__PURE__ */ jsx48(VaultPage, {}) }),
-    /* @__PURE__ */ jsx48(Route, { path: "*", element: /* @__PURE__ */ jsx48(Navigate, { to: "/", replace: true }) })
+    customRoutes.map((route) => /* @__PURE__ */ jsx48(
+      Route,
+      {
+        path: route.path.startsWith("/") ? route.path.slice(1) : route.path,
+        index: route.index,
+        element: route.element
+      },
+      route.path
+    )),
+    (() => {
+      const indexRoute = customRoutes.find((r) => r.index);
+      const fallbackPath = indexRoute?.path || customRoutes[0]?.path || "/";
+      return /* @__PURE__ */ jsx48(Route, { path: "*", element: /* @__PURE__ */ jsx48(Navigate, { to: fallbackPath, replace: true }) });
+    })()
   ] }) });
 }
 
 // src/developer/developer-dashboard.tsx
 import { jsx as jsx49 } from "react/jsx-runtime";
-function DeveloperDashboard({ config }) {
+function propsToConfig(props) {
+  const routes = {
+    overview: props.routes?.overview ?? true,
+    requests: props.routes?.requests ?? props.showLogs ?? props.showUsage ?? true,
+    keys: props.routes?.keys ?? props.showAPIKeys ?? true,
+    team: props.routes?.team ?? true,
+    billing: props.routes?.billing ?? true,
+    settings: props.routes?.settings ?? true,
+    webhooks: props.routes?.webhooks ?? props.showWebhooks ?? false,
+    database: props.routes?.database ?? false,
+    integrations: props.routes?.integrations ?? false,
+    vault: props.routes?.vault ?? false
+  };
+  const customRoutes = props.customRoutes?.map((route) => ({
+    path: route.path,
+    label: route.label,
+    icon: route.icon ? getIconByName(route.icon) : void 0,
+    element: route.element,
+    group: route.group,
+    order: route.order,
+    index: route.index
+  }));
+  const identity = props.identity ?? {
+    clientId: "demo",
+    useMockWidgets: true,
+    required: false,
+    onUnauthenticated: "allow"
+  };
+  return {
+    basePath: props.basePath ?? "/",
+    branding: props.branding,
+    routes,
+    customRoutes,
+    theme: props.theme,
+    identity,
+    devToken: props.devToken,
+    debug: props.debug
+  };
+}
+function isLegacyConfig(props) {
+  return "config" in props && props.config !== void 0;
+}
+function DeveloperDashboard(props) {
+  const config = isLegacyConfig(props) ? props.config : propsToConfig(props);
   return /* @__PURE__ */ jsx49(AppProviders, { config, children: /* @__PURE__ */ jsx49(AuthGate, { children: /* @__PURE__ */ jsx49(DashboardRouter, { basePath: config.basePath, children: /* @__PURE__ */ jsx49(DashboardRoutes, {}) }) }) });
 }
 
+// src/developer/standalone/provider.tsx
+import { ThemeProvider as ThemeProvider2 } from "next-themes";
+import { applyThemeToElement as applyThemeToElement2 } from "@mdxui/themes";
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+function StandaloneProvider({ config, children }) {
+  const themeMode = config?.theme?.mode ?? "system";
+  const containerRef = useRef3(null);
+  useEffect9(() => {
+    if (containerRef.current && config?.theme?.preset) {
+      const resolvedMode = config.theme.mode === "system" ? "light" : config.theme.mode ?? "light";
+      applyThemeToElement2(containerRef.current, config.theme.preset, resolvedMode);
+    }
+  }, [config?.theme]);
+  return /* @__PURE__ */ jsx50(
+    ThemeProvider2,
+    {
+      attribute: "class",
+      defaultTheme: themeMode,
+      enableSystem: themeMode === "system",
+      disableTransitionOnChange: true,
+      children: /* @__PURE__ */ jsx50("div", { ref: containerRef, className: "standalone-provider", children })
+    }
+  );
+}
+
+// src/developer/standalone/api-keys.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
+function StandaloneAPIKeys({
+  keys,
+  onCreateKey,
+  onRevokeKey,
+  onRenameKey,
+  hideHeader = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx51(
+    KeysPage,
+    {
+      keys,
+      onCreateKey,
+      onRevokeKey,
+      onRenameKey,
+      hideHeader,
+      className
+    }
+  );
+}
+
+// src/developer/standalone/webhooks.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
+function StandaloneWebhooks({
+  endpoints,
+  onCreateEndpoint,
+  onUpdateEndpoint,
+  onDeleteEndpoint,
+  hideHeader = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx52(
+    WebhooksEndpointsPage,
+    {
+      endpoints,
+      onCreateEndpoint,
+      onUpdateEndpoint,
+      onDeleteEndpoint,
+      hideHeader,
+      className
+    }
+  );
+}
+
+// src/developer/standalone/billing.tsx
+import { jsx as jsx53 } from "react/jsx-runtime";
+function StandaloneBilling({
+  billingData,
+  onManagePlan,
+  onUpdatePaymentMethod,
+  onDownloadInvoice,
+  onToggleAlerts,
+  hideHeader = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx53(
+    BillingPage,
+    {
+      billingData,
+      onManagePlan,
+      onUpdatePaymentMethod,
+      onDownloadInvoice,
+      onToggleAlerts,
+      hideHeader,
+      className
+    }
+  );
+}
+
+// src/developer/standalone/team.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+function StandaloneTeam({
+  useMockWidgets,
+  hideHeader = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx54(
+    TeamPage,
+    {
+      useMockWidgets,
+      hideHeader,
+      className
+    }
+  );
+}
+
 // src/auth/auth-layout.tsx
 import { cn as cn8 } from "@mdxui/primitives/lib/utils";
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
-function AuthLayout(_a) {
-  var _b = _a, {
-    className,
-    children,
-    title,
-    subtitle,
-    logo,
-    backgroundImage,
-    showTestimonial = false,
-    testimonial
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "title",
-    "subtitle",
-    "logo",
-    "backgroundImage",
-    "showTestimonial",
-    "testimonial"
-  ]);
-  return /* @__PURE__ */ jsxs44("div", __spreadProps(__spreadValues({ className: cn8("min-h-screen w-full lg:grid lg:grid-cols-2", className) }, props), { children: [
-    /* @__PURE__ */ jsx50("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs44("div", { className: "mx-auto w-full max-w-[400px] space-y-8 px-4", children: [
-      logo && /* @__PURE__ */ jsx50("div", { className: "flex justify-center", children: logo }),
-      (title || subtitle) && /* @__PURE__ */ jsxs44("div", { className: "space-y-2 text-center", children: [
-        title && /* @__PURE__ */ jsx50("h1", { className: "text-3xl font-bold tracking-tight", children: title }),
-        subtitle && /* @__PURE__ */ jsx50("p", { className: "text-muted-foreground text-sm", children: subtitle })
+import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+function AuthLayout({
+  className,
+  children,
+  title,
+  subtitle,
+  logo,
+  backgroundImage,
+  showTestimonial = false,
+  testimonial,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs43("div", { className: cn8("min-h-screen w-full lg:grid lg:grid-cols-2", className), ...props, children: [
+    /* @__PURE__ */ jsx55("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs43("div", { className: "mx-auto w-full max-w-[400px] space-y-8 px-4", children: [
+      logo && /* @__PURE__ */ jsx55("div", { className: "flex justify-center", children: logo }),
+      (title || subtitle) && /* @__PURE__ */ jsxs43("div", { className: "space-y-2 text-center", children: [
+        title && /* @__PURE__ */ jsx55("h1", { className: "text-3xl font-bold tracking-tight", children: title }),
+        subtitle && /* @__PURE__ */ jsx55("p", { className: "text-muted-foreground text-sm", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx50("div", { children })
+      /* @__PURE__ */ jsx55("div", { children })
     ] }) }),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx55(
       "div",
       {
         className: "bg-muted hidden lg:block",
@@ -5758,14 +6025,14 @@ function AuthLayout(_a) {
           backgroundSize: "cover",
           backgroundPosition: "center"
         } : void 0,
-        children: showTestimonial && testimonial && !backgroundImage && /* @__PURE__ */ jsx50("div", { className: "flex h-full items-center justify-center p-12", children: /* @__PURE__ */ jsx50("div", { className: "max-w-md space-y-6", children: /* @__PURE__ */ jsxs44("blockquote", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs44("p", { className: "text-lg font-medium leading-relaxed", children: [
+        children: showTestimonial && testimonial && !backgroundImage && /* @__PURE__ */ jsx55("div", { className: "flex h-full items-center justify-center p-12", children: /* @__PURE__ */ jsx55("div", { className: "max-w-md space-y-6", children: /* @__PURE__ */ jsxs43("blockquote", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs43("p", { className: "text-lg font-medium leading-relaxed", children: [
             '"',
             testimonial.quote,
             '"'
           ] }),
-          /* @__PURE__ */ jsxs44("footer", { className: "flex items-center gap-3", children: [
-            testimonial.avatar && /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsxs43("footer", { className: "flex items-center gap-3", children: [
+            testimonial.avatar && /* @__PURE__ */ jsx55(
               "img",
               {
                 src: testimonial.avatar,
@@ -5773,20 +6040,20 @@ function AuthLayout(_a) {
                 className: "size-10 rounded-full"
               }
             ),
-            /* @__PURE__ */ jsxs44("div", { children: [
-              /* @__PURE__ */ jsx50("div", { className: "font-semibold", children: testimonial.author }),
-              /* @__PURE__ */ jsx50("div", { className: "text-muted-foreground text-sm", children: testimonial.role })
+            /* @__PURE__ */ jsxs43("div", { children: [
+              /* @__PURE__ */ jsx55("div", { className: "font-semibold", children: testimonial.author }),
+              /* @__PURE__ */ jsx55("div", { className: "text-muted-foreground text-sm", children: testimonial.role })
             ] })
           ] })
         ] }) }) })
       }
     )
-  ] }));
+  ] });
 }
 
 // src/auth/login-page.tsx
 import { LoginForm } from "@mdxui/primitives/auth/login-form";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function LoginPage({
   onSubmit,
   onOAuthClick,
@@ -5805,7 +6072,7 @@ function LoginPage({
   showTestimonial = false,
   testimonial
 }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx56(
     AuthLayout,
     {
       logo,
@@ -5814,7 +6081,7 @@ function LoginPage({
       backgroundImage,
       showTestimonial,
       testimonial,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx56(
         LoginForm,
         {
           onSubmit,
@@ -5835,7 +6102,7 @@ function LoginPage({
 
 // src/auth/signup-page.tsx
 import { SignupForm } from "@mdxui/primitives/auth/signup-form";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function SignupPage({
   onSubmit,
   onOAuthClick,
@@ -5852,7 +6119,7 @@ function SignupPage({
   showTestimonial = false,
   testimonial
 }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx57(
     AuthLayout,
     {
       logo,
@@ -5861,7 +6128,7 @@ function SignupPage({
       backgroundImage,
       showTestimonial,
       testimonial,
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx57(
         SignupForm,
         {
           onSubmit,
@@ -5880,7 +6147,7 @@ function SignupPage({
 
 // src/auth/password-reset-page.tsx
 import { PasswordResetForm } from "@mdxui/primitives/auth/password-reset-form";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function PasswordResetPage({
   mode = "request",
   onRequestSubmit,
@@ -5896,14 +6163,14 @@ function PasswordResetPage({
 }) {
   const defaultTitle = mode === "request" ? "Reset your password" : "Create new password";
   const defaultSubtitle = mode === "request" ? "We'll send you a link to reset your password" : "Enter your new password below";
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx58(
     AuthLayout,
     {
       logo,
       title: title || defaultTitle,
       subtitle: subtitle || defaultSubtitle,
       backgroundImage,
-      children: /* @__PURE__ */ jsx53(
+      children: /* @__PURE__ */ jsx58(
         PasswordResetForm,
         {
           mode,
@@ -5921,7 +6188,7 @@ function PasswordResetPage({
 
 // src/auth/otp-page.tsx
 import { OTPInputForm } from "@mdxui/primitives/auth/otp-input";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function OTPPage({
   onSubmit,
   onResend,
@@ -5935,7 +6202,7 @@ function OTPPage({
   description,
   backgroundImage
 }) {
-  return /* @__PURE__ */ jsx54(AuthLayout, { logo, backgroundImage, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx59(AuthLayout, { logo, backgroundImage, children: /* @__PURE__ */ jsx59(
     OTPInputForm,
     {
       onSubmit,
@@ -5953,7 +6220,7 @@ function OTPPage({
 // src/auth/onboarding-page.tsx
 import { OnboardingWizard } from "@mdxui/primitives/auth/onboarding-wizard";
 import { cn as cn9 } from "@mdxui/primitives/lib/utils";
-import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs44 } from "react/jsx-runtime";
 function OnboardingPage({
   steps,
   onComplete,
@@ -5966,9 +6233,9 @@ function OnboardingPage({
   showProgress = true,
   className
 }) {
-  return /* @__PURE__ */ jsx55("div", { className: cn9("flex min-h-screen items-center justify-center p-4", className), children: /* @__PURE__ */ jsxs45("div", { className: "w-full space-y-8", children: [
-    logo && /* @__PURE__ */ jsx55("div", { className: "flex justify-center", children: logo }),
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx60("div", { className: cn9("flex min-h-screen items-center justify-center p-4", className), children: /* @__PURE__ */ jsxs44("div", { className: "w-full space-y-8", children: [
+    logo && /* @__PURE__ */ jsx60("div", { className: "flex justify-center", children: logo }),
+    /* @__PURE__ */ jsx60(
       OnboardingWizard,
       {
         steps,
@@ -5983,16 +6250,20 @@ function OnboardingPage({
     )
   ] }) });
 }
-var export_ThemeScript = themes_exports.ThemeScript;
-var export_applyThemeToElement = themes_exports.applyThemeToElement;
-var export_getResolvedMode = themes_exports.getResolvedMode;
-var export_getThemeCSS = themes_exports.getThemeCSS;
-var export_getThemeScriptContent = themes_exports.getThemeScriptContent;
-var export_isThemePreset = themes_exports.isThemePreset;
-var export_themeCSS = themes_exports.themeCSS;
-var export_themeNames = themes_exports.themeNames;
-var export_themePresets = themes_exports.themePresets;
-var export_useThemeStore = themes_exports.useThemeStore;
+
+// src/index.ts
+var components = {
+  // Layout Components
+  App: DeveloperDashboard,
+  Shell: DashboardLayout,
+  Dashboard: OverviewPage,
+  Settings: SettingsPage,
+  // Pre-built Features
+  DeveloperDashboard,
+  APIKeys: APIKeyManager,
+  Team: TeamManager,
+  Billing
+};
 export {
   APIKeyManager,
   ActivityFeed,
@@ -6034,12 +6305,17 @@ export {
   SidebarAd,
   SignupPage,
   SortableHeader,
+  StandaloneAPIKeys,
+  StandaloneBilling,
+  StandaloneProvider,
+  StandaloneTeam,
+  StandaloneWebhooks,
   StatusBadge,
   StatusDot,
   TeamManager,
   TeamPage,
   TeamSwitcher,
-  export_ThemeScript as ThemeScript,
+  ThemeScript,
   UserProfile,
   VaultDeleteDialog,
   VaultEmptyState,
@@ -6051,27 +6327,31 @@ export {
   WebhooksEndpointsPage,
   WebhooksEventCatalogPage,
   WebhooksLogsPage,
-  export_applyThemeToElement as applyThemeToElement,
+  applyThemeToElement3 as applyThemeToElement,
+  components,
+  dashboardIcons,
   getAuthToken,
   getDebugStatus,
   getEffectiveToken,
-  export_getResolvedMode as getResolvedMode,
+  getIconByName,
+  getResolvedMode,
   getSDK,
-  export_getThemeCSS as getThemeCSS,
-  export_getThemeScriptContent as getThemeScriptContent,
+  getThemeCSS,
+  getThemeScriptContent,
   isAuthenticated,
   isDebugMode,
-  export_isThemePreset as isThemePreset,
+  isThemePreset,
   setDebugMode,
   setDevToken,
   testSDKConnection,
-  export_themeCSS as themeCSS,
-  export_themeNames as themeNames,
-  export_themePresets as themePresets,
-  useAuth10 as useAuth,
+  themeCSS,
+  themeNames,
+  themePresets,
+  useAuth9 as useAuth,
   useCommandPalette,
+  useCustomRoutes,
   useDashboard,
   useRoutes,
-  export_useThemeStore as useThemeStore
+  useThemeStore
 };
 //# sourceMappingURL=index.js.map