@mdxui/cockpit 0.2.0 → 2.1.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 {
+  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";
@@ -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: [
@@ -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) {
@@ -971,8 +921,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 +973,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 +1003,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,
@@ -1091,14 +1071,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 +1161,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 +1301,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 +1313,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 +1352,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 +1534,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 +1582,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 +1613,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 +1689,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 +1814,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 +1836,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 +1916,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 +2000,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");
@@ -2249,7 +2219,7 @@ function TeamManager({
       {
         id: "1",
         name: "John Doe",
-        email: "john@example.com",
+        email: "john@example.com.ai",
         role: "owner",
         avatar: "",
         status: "active",
@@ -2258,7 +2228,7 @@ function TeamManager({
       {
         id: "2",
         name: "Jane Smith",
-        email: "jane@example.com",
+        email: "jane@example.com.ai",
         role: "admin",
         avatar: "",
         status: "active",
@@ -2267,7 +2237,7 @@ function TeamManager({
       {
         id: "3",
         name: "Bob Johnson",
-        email: "bob@example.com",
+        email: "bob@example.com.ai",
         role: "member",
         avatar: "",
         status: "pending",
@@ -2300,14 +2270,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 +2346,7 @@ function TeamManager({
                   type: "email",
                   value: inviteEmail,
                   onChange: (e) => setInviteEmail(e.target.value),
-                  placeholder: "colleague@example.com"
+                  placeholder: "colleague@example.com.ai"
                 }
               )
             ] }),
@@ -2597,7 +2567,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 +2576,8 @@ function Billing({
   };
   const handleSetDefaultPaymentMethod = (methodId) => {
     setPaymentMethods(
-      paymentMethods.map((pm) => __spreadProps(__spreadValues({}, pm), {
+      paymentMethods.map((pm) => ({
+        ...pm,
         isDefault: pm.id === methodId
       }))
     );
@@ -2822,6 +2793,29 @@ 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";
@@ -2891,7 +2885,6 @@ function clearAuth() {
 }
 var apiBaseUrl = "/api";
 function getDebugStatus() {
-  var _a;
   const effectiveToken = getEffectiveToken();
   return {
     isAuthenticated: currentToken !== null,
@@ -2899,30 +2892,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") {
   ;
@@ -2985,10 +2976,9 @@ function IdentityWidgetsWrapper({ 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);
@@ -3036,20 +3026,18 @@ import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-r
 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 {
+    async function syncToken() {
+      if (user) {
+        try {
+          const token = await getAccessToken();
+          setAuthToken(token);
+        } catch {
           clearAuth();
-          queryClient.clear();
         }
-      });
+      } else {
+        clearAuth();
+        queryClient.clear();
+      }
     }
     syncToken();
   }, [user, getAccessToken]);
@@ -3076,8 +3064,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,
     {
@@ -3097,12 +3084,11 @@ function AppProviders({ config, children }) {
 import { useAuth as useAuth5 } from "@workos-inc/authkit-react";
 import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs27 } 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";
+  const required = identity.required ?? true;
+  const onUnauthenticated = identity.onUnauthenticated ?? "landing";
   if (!required) {
     return /* @__PURE__ */ jsx32(Fragment6, { children });
   }
@@ -3738,26 +3724,76 @@ 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] = useState13(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 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 = (enabled) => {
+  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: [
+    !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__ */ jsxs28("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__ */ jsxs28("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__ */ jsxs28("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." })
@@ -3767,28 +3803,28 @@ function BillingPage() {
           /* @__PURE__ */ jsxs28(CardHeader12, { children: [
             /* @__PURE__ */ jsxs28("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: [
               "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__ */ jsx33("p", { className: "text-3xl font-bold", children: billingData.plan }),
               /* @__PURE__ */ jsxs28("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__ */ jsxs28("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: [
@@ -3796,7 +3832,7 @@ function BillingPage() {
           /* @__PURE__ */ jsxs28(CardContent12, { className: "space-y-1", children: [
             /* @__PURE__ */ jsxs28("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" })
           ] })
@@ -3808,7 +3844,7 @@ function BillingPage() {
             /* @__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: [
@@ -3844,23 +3880,23 @@ function BillingPage() {
           /* @__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__ */ jsx33("div", { className: "h-8 w-12 bg-muted rounded flex items-center justify-center text-xs font-medium", children: billingData.paymentMethod.brand }),
                 /* @__PURE__ */ jsxs28("div", { children: [
                   /* @__PURE__ */ jsxs28("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: [
                     "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: [
@@ -3873,7 +3909,7 @@ function BillingPage() {
               /* @__PURE__ */ jsx33(Label7, { htmlFor: "alerts", className: "text-sm", children: "Usage alerts" }),
               /* @__PURE__ */ jsxs28("p", { className: "text-xs text-muted-foreground", children: [
                 "Notify at ",
-                mockBillingData.billingAlerts.threshold,
+                billingData.billingAlerts.threshold,
                 "% usage"
               ] })
             ] }),
@@ -3886,7 +3922,7 @@ function BillingPage() {
           /* @__PURE__ */ jsx33(Receipt, { className: "h-5 w-5" }),
           "Invoice History"
         ] }) }),
-        /* @__PURE__ */ jsx33(CardContent12, { children: mockBillingData.invoices.length > 0 ? /* @__PURE__ */ jsxs28(Table6, { children: [
+        /* @__PURE__ */ jsx33(CardContent12, { children: billingData.invoices.length > 0 ? /* @__PURE__ */ jsxs28(Table6, { children: [
           /* @__PURE__ */ jsx33(TableHeader6, { children: /* @__PURE__ */ jsxs28(TableRow6, { children: [
             /* @__PURE__ */ jsx33(TableHead6, { className: "pl-4", children: "Invoice" }),
             /* @__PURE__ */ jsx33(TableHead6, { children: "Date" }),
@@ -3894,7 +3930,7 @@ function BillingPage() {
             /* @__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__ */ jsxs28(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: [
@@ -3902,7 +3938,7 @@ function BillingPage() {
               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__ */ jsx33("div", { className: "rounded-full bg-muted p-4", children: /* @__PURE__ */ jsx33(FileText2, { className: "h-8 w-8 text-muted-foreground" }) }),
@@ -4027,8 +4063,15 @@ function StatusIndicator({ status }) {
     /* @__PURE__ */ jsx36("span", { className: "text-sm", children: label })
   ] });
 }
-function KeysPage() {
-  const [keys, setKeys] = useState14(mockApiKeys);
+function KeysPage({
+  keys: initialKeys,
+  onCreateKey,
+  onRevokeKey,
+  onRenameKey,
+  hideHeader = false,
+  className
+} = {}) {
+  const [keys, setKeys] = useState14(initialKeys ?? mockApiKeys);
   const [newKeyName, setNewKeyName] = useState14("");
   const [newlyCreatedKey, setNewlyCreatedKey] = useState14(null);
   const [createDialogOpen, setCreateDialogOpen] = useState14(false);
@@ -4039,23 +4082,52 @@ function KeysPage() {
   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);
+  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 +4135,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 +4156,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);
@@ -4100,12 +4181,12 @@ function KeysPage() {
     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: [
+    !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__ */ jsxs31("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 flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs31("div", { children: [
           /* @__PURE__ */ jsx36("h1", { className: "text-2xl font-bold", children: "API Keys" }),
@@ -4219,7 +4300,7 @@ function KeysPage() {
         /* @__PURE__ */ jsx36(DialogTitle6, { children: "Revoke API Key" }),
         /* @__PURE__ */ jsxs31(DialogDescription5, { children: [
           'Are you sure you want to revoke "',
-          keyToRevoke == null ? void 0 : keyToRevoke.name,
+          keyToRevoke?.name,
           '"? This action cannot be undone.'
         ] })
       ] }),
@@ -4288,7 +4369,6 @@ function EmptyState() {
   ] });
 }
 function OverviewPage() {
-  var _a, _b, _c, _d;
   const [selectedPeriod, setSelectedPeriod] = useState15("30d");
   const [isLoading, setIsLoading] = useState15(true);
   const [stats, setStats] = useState15(null);
@@ -4311,7 +4391,7 @@ function OverviewPage() {
     setIsLoading(true);
     setSelectedPeriod(period);
   };
-  const selectedLabel = (_a = timePeriodOptions.find((opt) => opt.value === selectedPeriod)) == null ? void 0 : _a.label;
+  const selectedLabel = timePeriodOptions.find((opt) => opt.value === selectedPeriod)?.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: [
       /* @__PURE__ */ jsx37(SidebarTrigger5, { className: "-ml-1" }),
@@ -4341,7 +4421,7 @@ function OverviewPage() {
           ] }),
           /* @__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("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)" })
@@ -4356,7 +4436,7 @@ function OverviewPage() {
             /* @__PURE__ */ jsxs32("div", { children: [
               /* @__PURE__ */ jsxs32("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 })
             ] }),
@@ -4370,7 +4450,7 @@ function OverviewPage() {
           ] }),
           /* @__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("div", { className: "text-2xl font-bold", children: stats?.errorCount ?? "\u2014" }),
               /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground", children: "Failed requests" })
             ] }),
             /* @__PURE__ */ jsx37(
@@ -4476,7 +4556,6 @@ 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);
@@ -4505,7 +4584,7 @@ function RequestsPage() {
         ] }),
         /* @__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,
+            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)) })
@@ -4580,9 +4659,8 @@ 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";
 function SettingsProfilePage() {
-  var _a, _b;
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
+  const useMockWidgets = config.identity?.useMockWidgets ?? 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: [
@@ -4614,18 +4692,16 @@ import { useEffect as useEffect8, useRef as useRef2, useState as useState17 } fr
 import { Link as Link5 } from "react-router-dom";
 import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs35 } 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 useMockWidgets = config.identity?.useMockWidgets ?? false;
   const { user, getAccessToken, isLoading } = useAuth7();
   const [isEmpty, setIsEmpty] = useState17(false);
   const containerRef = useRef2(null);
   useEffect8(() => {
     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);
@@ -4663,9 +4739,8 @@ 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";
 function SettingsSessionsPage() {
-  var _a, _b;
   const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
+  const useMockWidgets = config.identity?.useMockWidgets ?? 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: [
@@ -4694,21 +4769,31 @@ 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;
-  const { config } = useDashboard();
-  const useMockWidgets = (_b = (_a = config.identity) == null ? void 0 : _a.useMockWidgets) != null ? _b : false;
+function TeamPage({
+  useMockWidgets: useMockWidgetsProp,
+  hideHeader = false,
+  className
+} = {}) {
+  let useMockWidgets = useMockWidgetsProp;
+  try {
+    const { config } = useDashboard();
+    if (useMockWidgets === void 0) {
+      useMockWidgets = config.identity?.useMockWidgets ?? false;
+    }
+  } catch {
+    useMockWidgets = useMockWidgetsProp ?? 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 canManageTeam = hasOrganization && 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: [
+    !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__ */ jsxs37("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(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", { className: `flex flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, 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." })
@@ -4744,7 +4829,7 @@ function VaultPage() {
     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,21 +4841,21 @@ 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`);
-  });
+    toast6.success(`${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: [
       /* @__PURE__ */ jsx43(SidebarTrigger11, { className: "-ml-1" }),
@@ -4847,7 +4932,6 @@ var periodMultipliers = {
   "30d": 30
 };
 function WebhooksActivityPage() {
-  var _a;
   const [period, setPeriod] = useState19("7d");
   const multiplier = periodMultipliers[period];
   const activity = {
@@ -4855,7 +4939,8 @@ function WebhooksActivityPage() {
     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)
     }))
   };
@@ -4878,7 +4963,7 @@ function WebhooksActivityPage() {
         ] }),
         /* @__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,
+            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)) })
@@ -5038,8 +5123,15 @@ var eventsByCategory = mockWebhookEvents.reduce((acc, event) => {
   acc[event.category].push(event);
   return acc;
 }, {});
-function WebhooksEndpointsPage() {
-  const [endpoints, setEndpoints] = useState20(mockWebhookEndpoints);
+function WebhooksEndpointsPage({
+  endpoints: initialEndpoints,
+  onCreateEndpoint,
+  onUpdateEndpoint,
+  onDeleteEndpoint,
+  hideHeader = false,
+  className
+} = {}) {
+  const [endpoints, setEndpoints] = useState20(initialEndpoints ?? mockWebhookEndpoints);
   const [createDialogOpen, setCreateDialogOpen] = useState20(false);
   const [editDialogOpen, setEditDialogOpen] = useState20(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState20(false);
@@ -5053,29 +5145,57 @@ function WebhooksEndpointsPage() {
     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 +5205,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 +5233,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));
@@ -5119,7 +5247,7 @@ function WebhooksEndpointsPage() {
     }
   };
   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: [
+    !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__ */ jsxs40("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: [
@@ -5128,7 +5256,7 @@ function WebhooksEndpointsPage() {
         /* @__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 flex-1 flex-col gap-4 px-4 sm:px-16 py-4 ${hideHeader ? "" : "pt-0"} ${className ?? ""}`, children: [
       /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs40("div", { children: [
           /* @__PURE__ */ jsx45("h1", { className: "text-2xl font-bold", children: "Endpoints" }),
@@ -5152,7 +5280,7 @@ function WebhooksEndpointsPage() {
                     Input9,
                     {
                       id: "url",
-                      placeholder: "https://api.example.com/webhooks",
+                      placeholder: "https://api.example.com.ai/webhooks",
                       value: formUrl,
                       onChange: (e) => setFormUrl(e.target.value)
                     }
@@ -5306,7 +5434,7 @@ function WebhooksEndpointsPage() {
               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)
               }
@@ -5524,7 +5652,6 @@ 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);
@@ -5539,11 +5666,11 @@ 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."
@@ -5568,7 +5695,7 @@ function WebhooksLogsPage() {
         ] }),
         /* @__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,
+            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)) })
@@ -5685,6 +5812,7 @@ function DashboardRouter({ basePath = "/", children }) {
 }
 function DashboardRoutes() {
   const routes = useRoutes();
+  const customRoutes = useCustomRoutes();
   return /* @__PURE__ */ jsx48(Routes, { children: /* @__PURE__ */ jsxs43(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, {}) }),
@@ -5707,49 +5835,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 useEffect10, 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);
+  useEffect10(() => {
+    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 }),
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+function AuthLayout({
+  className,
+  children,
+  title,
+  subtitle,
+  logo,
+  backgroundImage,
+  showTestimonial = false,
+  testimonial,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs44("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__ */ jsxs44("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__ */ 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 })
+        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 +6047,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: [
+        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__ */ jsxs44("blockquote", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxs44("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(
+            testimonial.avatar && /* @__PURE__ */ jsx55(
               "img",
               {
                 src: testimonial.avatar,
@@ -5774,19 +6063,19 @@ function AuthLayout(_a) {
               }
             ),
             /* @__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__ */ 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 +6094,7 @@ function LoginPage({
   showTestimonial = false,
   testimonial
 }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx56(
     AuthLayout,
     {
       logo,
@@ -5814,7 +6103,7 @@ function LoginPage({
       backgroundImage,
       showTestimonial,
       testimonial,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx56(
         LoginForm,
         {
           onSubmit,
@@ -5835,7 +6124,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 +6141,7 @@ function SignupPage({
   showTestimonial = false,
   testimonial
 }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx57(
     AuthLayout,
     {
       logo,
@@ -5861,7 +6150,7 @@ function SignupPage({
       backgroundImage,
       showTestimonial,
       testimonial,
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx57(
         SignupForm,
         {
           onSubmit,
@@ -5880,7 +6169,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 +6185,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 +6210,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 +6224,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 +6242,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 jsxs45 } from "react/jsx-runtime";
 function OnboardingPage({
   steps,
   onComplete,
@@ -5966,9 +6255,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__ */ jsxs45("div", { className: "w-full space-y-8", children: [
+    logo && /* @__PURE__ */ jsx60("div", { className: "flex justify-center", children: logo }),
+    /* @__PURE__ */ jsx60(
       OnboardingWizard,
       {
         steps,
@@ -5983,16 +6272,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 +6327,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 +6349,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,
+  themeCSS,
+  themeNames,
+  themePresets,
   useAuth10 as useAuth,
   useCommandPalette,
+  useCustomRoutes,
   useDashboard,
   useRoutes,
-  export_useThemeStore as useThemeStore
+  useThemeStore
 };
 //# sourceMappingURL=index.js.map