@mdxui/do 3.0.0 → 4.0.1

package/dist/{chunk-NTSEARBC.js → chunk-IQ23B4ME.js}

@@ -1,19 +1,20 @@
-import { DataBrowserView, DataGridView, DocumentEditorView, FunctionEditorView } from './chunk-YGIBMNRH.js';
-import { useNamespaces, useTypes } from './chunk-IESVTECE.js';
-import { useThings } from './chunk-JWKIONEO.js';
-import { DOProvider, useDO } from './chunk-FO3N7SXV.js';
-import { useLocation, NavLink, Outlet, useParams, useNavigate, BrowserRouter, Routes, Route } from 'react-router-dom';
-import { ThemeProvider } from 'next-themes';
+import { DataGridView, DocumentEditorView, FunctionEditorView, DataBrowserView } from './chunk-GYIMQZE7.js';
+import { useBreadcrumbs, useNamespaces, useTypes } from './chunk-XH3LVW7J.js';
+import { useThings } from './chunk-YMQRC6IC.js';
+import { useDO, useEndpoint, DOProvider, useDOState } from './chunk-OHWWWONS.js';
+import { Breadcrumbs, EndpointSelector } from './chunk-3XKYQRXY.js';
+import { createWebRouter, WebOutlet } from '@mdxui/navigation/web';
+import { useRouterState, Link, useParams, useNavigate, RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
-import { createContext, useState, useMemo, useContext, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useAuth, AuthKitProvider } from '@workos-inc/authkit-react';
-import { WorkOsWidgets } from '@workos-inc/widgets';
-import { DropdownMenu, DropdownMenuTrigger, SidebarMenuButton, Avatar, AvatarImage, AvatarFallback, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarFooter, SidebarProvider, SidebarInset, SidebarTrigger, Separator, Toaster, Card, CardHeader, CardTitle, CardDescription, CardContent } from '@mdxui/primitives';
+import { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import { useAuth, IdentityProvider, WidgetsProvider } from '@mdxui/auth';
+import { ThemeProvider } from 'next-themes';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useSidebar, DropdownMenu, DropdownMenuTrigger, SidebarMenuButton, Avatar, AvatarImage, AvatarFallback, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarFooter, SidebarProvider, SidebarInset, SidebarTrigger, Separator, Toaster, Card, CardHeader, CardTitle, CardDescription, CardContent } from '@mdxui/primitives';
 import { ChevronsUpDown, User, Settings, LogOut, Database, Shapes, Activity, Network, Code, Users, CreditCard, Building, Construction, Home, Bot, GitBranch, BookOpen, Zap, Play, Plug, Shield, UserCog, Key } from 'lucide-react';
 import { z } from 'zod';
 
-var DOShellContext = createContext(null);
+var DOConfigContext = createContext(null);
 var defaultIdentity = {
   clientId: "",
   devMode: false,
@@ -28,8 +29,7 @@ var defaultConfig = {
   routes: {},
   customRoutes: []
 };
-function DOShellProvider({ config, children }) {
-  const [namespace, setNamespace] = useState(config.defaultNamespace ?? "default");
+function DOConfigProvider({ config, children }) {
   const value = useMemo(() => {
     const mergedConfig = {
       ...defaultConfig,
@@ -38,69 +38,28 @@ function DOShellProvider({ config, children }) {
       theme: { ...defaultConfig.theme, ...config.theme },
       identity: { ...defaultIdentity, ...config.identity }
     };
-    return {
-      config: mergedConfig,
-      namespace,
-      setNamespace
-    };
-  }, [config, namespace]);
-  return /* @__PURE__ */ jsx(DOShellContext.Provider, { value, children });
+    return { config: mergedConfig };
+  }, [config]);
+  return /* @__PURE__ */ jsx(DOConfigContext.Provider, { value, children });
 }
-function useDOShell() {
-  const context = useContext(DOShellContext);
+function useDOConfig() {
+  const context = useContext(DOConfigContext);
   if (!context) {
-    throw new Error("useDOShell must be used within a DOShellProvider");
+    throw new Error("useDOConfig must be used within a DOConfigProvider");
   }
   return context;
 }
-function useDOShellRoutes() {
-  const { config } = useDOShell();
+function useDORoutes() {
+  const { config } = useDOConfig();
   return config.routes ?? {};
 }
-var useIdentity = useAuth;
-function IdentityWidgetsWrapper({ children }) {
-  const [mounted, setMounted] = useState(false);
-  const [isDark, setIsDark] = useState(false);
-  useEffect(() => {
-    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__ */ jsx(
-    WorkOsWidgets,
-    {
-      theme: {
-        appearance,
-        radius: "medium",
-        scaling: "100%"
-      },
-      elements: {
-        primaryButton: {
-          variant: "solid"
-        },
-        secondaryButton: {
-          variant: "outline"
-        }
-      },
-      children
-    }
-  );
+function useDOCustomRoutes() {
+  const { config } = useDOConfig();
+  return config.customRoutes ?? [];
 }
+var useIdentity = useAuth;
 function DOIdentityProvider({ children }) {
-  const { config } = useDOShell();
+  const { config } = useDOConfig();
   const { identity } = config;
   const redirectUri = identity.redirectUri ?? (typeof window !== "undefined" ? `${window.location.origin}${config.basePath ?? "/"}` : void 0);
   const onRedirectCallback = () => {
@@ -112,17 +71,42 @@ function DOIdentityProvider({ children }) {
     }
   };
   return /* @__PURE__ */ jsx(
-    AuthKitProvider,
+    IdentityProvider,
     {
       clientId: identity.clientId,
       apiHostname: identity.apiHostname,
       devMode: identity.devMode,
       redirectUri,
       onRedirectCallback,
-      children: /* @__PURE__ */ jsx(IdentityWidgetsWrapper, { children })
+      children: /* @__PURE__ */ jsx(WidgetsProvider, { children })
     }
   );
 }
+function DOProviderWithState({
+  config,
+  initialNamespace,
+  children
+}) {
+  const { getAccessToken, user } = useAuth();
+  const [accessToken, setAccessToken] = useState(void 0);
+  const endpoint = useEndpoint(config.apiEndpoint);
+  useEffect(() => {
+    if (user) {
+      getAccessToken().then(setAccessToken).catch(() => setAccessToken(void 0));
+    } else {
+      setAccessToken(void 0);
+    }
+  }, [user, getAccessToken]);
+  const authenticatedConfig = useMemo(() => {
+    const authToken = accessToken ?? config.authToken;
+    return {
+      ...config,
+      apiEndpoint: endpoint,
+      authToken
+    };
+  }, [config, accessToken, endpoint]);
+  return /* @__PURE__ */ jsx(DOProvider, { config: authenticatedConfig, initialNamespace, children });
+}
 function AppProviders({ config, children }) {
   const themeMode = config.theme?.mode ?? "system";
   return /* @__PURE__ */ jsx(
@@ -132,8 +116,8 @@ function AppProviders({ config, children }) {
       defaultTheme: themeMode,
       enableSystem: themeMode === "system",
       disableTransitionOnChange: true,
-      children: /* @__PURE__ */ jsx(DOShellProvider, { config, children: /* @__PURE__ */ jsx(DOIdentityProvider, { children: /* @__PURE__ */ jsx(
-        DOProvider,
+      children: /* @__PURE__ */ jsx(DOConfigProvider, { config, children: /* @__PURE__ */ jsx(DOIdentityProvider, { children: /* @__PURE__ */ jsx(
+        DOProviderWithState,
         {
           config: config.do,
           initialNamespace: config.defaultNamespace,
@@ -143,7 +127,54 @@ function AppProviders({ config, children }) {
     }
   );
 }
-var DOAppProviders = AppProviders;
+function DefaultLandingPage() {
+  const { signIn } = useAuth();
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex flex-col items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight mb-4", children: "DO Admin" }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8", children: "Sign in to access the admin dashboard and manage your Durable Objects." }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => signIn(),
+        className: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6",
+        children: "Sign In"
+      }
+    )
+  ] }) });
+}
+function AuthGate({ children }) {
+  const { config } = useDOConfig();
+  const { user, isLoading } = useAuth();
+  const { identity } = config;
+  const required = identity.required ?? true;
+  const onUnauthenticated = identity.onUnauthenticated ?? "landing";
+  if (!required) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading..." })
+    ] }) });
+  }
+  if (user) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  switch (onUnauthenticated) {
+    case "redirect":
+      if (identity.unauthenticatedRedirectUrl && typeof window !== "undefined") {
+        window.location.href = identity.unauthenticatedRedirectUrl;
+        return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Redirecting..." }) });
+      }
+      return identity.landingComponent ? /* @__PURE__ */ jsx(Fragment, { children: identity.landingComponent }) : /* @__PURE__ */ jsx(DefaultLandingPage, {});
+    case "allow":
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    case "landing":
+    default:
+      return identity.landingComponent ? /* @__PURE__ */ jsx(Fragment, { children: identity.landingComponent }) : /* @__PURE__ */ jsx(DefaultLandingPage, {});
+  }
+}
 function getInitials(name) {
   if (!name) return "?";
   const parts = name.trim().split(/\s+/);
@@ -152,6 +183,7 @@ function getInitials(name) {
 }
 function UserMenu({ compact = false }) {
   const { user, signOut, isLoading } = useAuth();
+  const { isMobile } = useSidebar();
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }),
@@ -185,8 +217,8 @@ function UserMenu({ compact = false }) {
     /* @__PURE__ */ jsxs(
       DropdownMenuContent,
       {
-        className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-[var(--radius)]",
-        side: "bottom",
+        className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded",
+        side: isMobile ? "bottom" : "right",
         align: "end",
         sideOffset: 4,
         children: [
@@ -223,41 +255,82 @@ var navGroups = {
   main: [{ title: "Overview", url: "/", icon: Home, routeKey: "overview" }],
   development: [
     { title: "Agents", url: "/agents", icon: Bot, routeKey: "agents" },
-    { title: "Functions", url: "/functions", icon: Code, routeKey: "functions" },
-    { title: "Workflows", url: "/workflows", icon: GitBranch, routeKey: "workflows" },
-    { title: "Databases", url: "/databases", icon: Database, routeKey: "databases" }
+    {
+      title: "Functions",
+      url: "/functions",
+      icon: Code,
+      routeKey: "functions"
+    },
+    {
+      title: "Workflows",
+      url: "/workflows",
+      icon: GitBranch,
+      routeKey: "workflows"
+    },
+    {
+      title: "Databases",
+      url: "/databases",
+      icon: Database,
+      routeKey: "databases"
+    }
   ],
   dataModel: [
     { title: "Things", url: "/things", icon: Shapes, routeKey: "things" },
     { title: "Nouns", url: "/nouns", icon: BookOpen, routeKey: "nouns" },
     { title: "Verbs", url: "/verbs", icon: Zap, routeKey: "verbs" },
     { title: "Actions", url: "/actions", icon: Play, routeKey: "actions" },
-    { title: "Relationships", url: "/relationships", icon: Network, routeKey: "relationships" },
+    {
+      title: "Relationships",
+      url: "/relationships",
+      icon: Network,
+      routeKey: "relationships"
+    },
     { title: "Events", url: "/events", icon: Activity, routeKey: "events" }
   ],
   saas: [
-    { title: "Customers", url: "/customers", icon: Users, routeKey: "customers" },
-    { title: "Subscriptions", url: "/subscriptions", icon: CreditCard, routeKey: "subscriptions" },
-    { title: "Integrations", url: "/integrations", icon: Plug, routeKey: "integrations" }
+    {
+      title: "Customers",
+      url: "/customers",
+      icon: Users,
+      routeKey: "customers"
+    },
+    {
+      title: "Subscriptions",
+      url: "/subscriptions",
+      icon: CreditCard,
+      routeKey: "subscriptions"
+    },
+    {
+      title: "Integrations",
+      url: "/integrations",
+      icon: Plug,
+      routeKey: "integrations"
+    }
   ],
   admin: [
     { title: "Organizations", url: "/orgs", icon: Building, routeKey: "orgs" },
     { title: "Roles", url: "/roles", icon: Shield, routeKey: "roles" },
     { title: "Users", url: "/users", icon: UserCog, routeKey: "users" },
     { title: "API Keys", url: "/api-keys", icon: Key, routeKey: "apiKeys" },
-    { title: "Settings", url: "/settings", icon: Settings, routeKey: "settings" }
+    {
+      title: "Settings",
+      url: "/settings",
+      icon: Settings,
+      routeKey: "settings"
+    }
   ]
 };
 function DOShellNav({ headerContent, ...props }) {
-  const location = useLocation();
-  const { config } = useDOShell();
-  const routesConfig = useDOShellRoutes();
+  const routerState = useRouterState();
+  const { config } = useDOConfig();
+  const routesConfig = useDORoutes();
   const branding = config.branding;
+  const pathname = routerState.location.pathname;
   const isActive = (url) => {
     if (url === "/") {
-      return location.pathname === "/" || location.pathname === "";
+      return pathname === "/" || pathname === "";
     }
-    return location.pathname.startsWith(url);
+    return pathname.startsWith(url);
   };
   const isRouteEnabled = (routeKey) => {
     if (!routeKey) return true;
@@ -269,7 +342,7 @@ function DOShellNav({ headerContent, ...props }) {
   };
   return /* @__PURE__ */ jsxs(Sidebar, { variant: "inset", ...props, children: [
     /* @__PURE__ */ jsxs(SidebarHeader, { children: [
-      /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs(NavLink, { to: "/", children: [
+      /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs(Link, { to: "/", children: [
         /* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-(--radius)", children: branding?.logo ?? /* @__PURE__ */ jsx(Database, { className: "size-4" }) }),
         /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
           /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: branding?.name ?? "DO Admin" }),
@@ -279,122 +352,149 @@ function DOShellNav({ headerContent, ...props }) {
       headerContent
     ] }),
     /* @__PURE__ */ jsxs(SidebarContent, { children: [
-      /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.main).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: isActive(item.url), tooltip: item.title, children: /* @__PURE__ */ jsxs(NavLink, { to: item.url, children: [
-        /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { children: item.title })
-      ] }) }) }, item.title)) }) }),
+      /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.main).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+        SidebarMenuButton,
+        {
+          asChild: true,
+          isActive: isActive(item.url),
+          tooltip: item.title,
+          children: /* @__PURE__ */ jsxs(Link, { to: item.url, children: [
+            /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { children: item.title })
+          ] })
+        }
+      ) }, item.title)) }) }),
       filterNavItems(navGroups.development).length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
         /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Development" }),
-        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.development).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: isActive(item.url), tooltip: item.title, children: /* @__PURE__ */ jsxs(NavLink, { to: item.url, children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: item.title })
-        ] }) }) }, item.title)) })
+        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.development).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            asChild: true,
+            isActive: isActive(item.url),
+            tooltip: item.title,
+            children: /* @__PURE__ */ jsxs(Link, { to: item.url, children: [
+              /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] })
+          }
+        ) }, item.title)) })
       ] }),
       filterNavItems(navGroups.dataModel).length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
         /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Data Model" }),
-        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.dataModel).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: isActive(item.url), tooltip: item.title, children: /* @__PURE__ */ jsxs(NavLink, { to: item.url, children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: item.title })
-        ] }) }) }, item.title)) })
+        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.dataModel).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            asChild: true,
+            isActive: isActive(item.url),
+            tooltip: item.title,
+            children: /* @__PURE__ */ jsxs(Link, { to: item.url, children: [
+              /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] })
+          }
+        ) }, item.title)) })
       ] }),
       filterNavItems(navGroups.saas).length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
         /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "SaaS" }),
-        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.saas).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: isActive(item.url), tooltip: item.title, children: /* @__PURE__ */ jsxs(NavLink, { to: item.url, children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: item.title })
-        ] }) }) }, item.title)) })
+        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.saas).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            asChild: true,
+            isActive: isActive(item.url),
+            tooltip: item.title,
+            children: /* @__PURE__ */ jsxs(Link, { to: item.url, children: [
+              /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] })
+          }
+        ) }, item.title)) })
       ] }),
       filterNavItems(navGroups.admin).length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
         /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Admin" }),
-        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.admin).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: isActive(item.url), tooltip: item.title, children: /* @__PURE__ */ jsxs(NavLink, { to: item.url, children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: item.title })
-        ] }) }) }, item.title)) })
+        /* @__PURE__ */ jsx(SidebarMenu, { children: filterNavItems(navGroups.admin).map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            asChild: true,
+            isActive: isActive(item.url),
+            tooltip: item.title,
+            children: /* @__PURE__ */ jsxs(Link, { to: item.url, children: [
+              /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] })
+          }
+        ) }, item.title)) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(UserMenu, {}) }) }) })
   ] });
 }
-function DefaultLandingPage() {
-  const { signIn } = useAuth();
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex flex-col items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight mb-4", children: "DO Admin" }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8", children: "Sign in to access the admin dashboard and manage your Durable Objects." }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => signIn(),
-        className: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6",
-        children: "Sign In"
-      }
-    )
-  ] }) });
-}
-function AuthGate({ children }) {
-  const { config } = useDOShell();
-  const { user, isLoading } = useAuth();
-  const { identity } = config;
-  const required = identity.required ?? true;
-  const onUnauthenticated = identity.onUnauthenticated ?? "landing";
-  if (!required) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading..." })
-    ] }) });
-  }
-  if (user) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  switch (onUnauthenticated) {
-    case "redirect":
-      if (identity.unauthenticatedRedirectUrl && typeof window !== "undefined") {
-        window.location.href = identity.unauthenticatedRedirectUrl;
-        return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Redirecting..." }) });
-      }
-      return identity.landingComponent ? /* @__PURE__ */ jsx(Fragment, { children: identity.landingComponent }) : /* @__PURE__ */ jsx(DefaultLandingPage, {});
-    case "allow":
-      return /* @__PURE__ */ jsx(Fragment, { children });
-    case "landing":
-    default:
-      return identity.landingComponent ? /* @__PURE__ */ jsx(Fragment, { children: identity.landingComponent }) : /* @__PURE__ */ jsx(DefaultLandingPage, {});
-  }
+function RouterLink({ href, children, className }) {
+  return /* @__PURE__ */ jsx(Link, { to: href, className, children });
 }
 function DOShell({
   children,
   sidebarHeaderContent,
   headerContent,
-  breadcrumbs
+  breadcrumbs: breadcrumbsProp
 }) {
+  const autoBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = breadcrumbsProp ?? autoBreadcrumbs;
   return /* @__PURE__ */ jsx(AuthGate, { children: /* @__PURE__ */ jsxs(SidebarProvider, { className: "h-svh!", children: [
     /* @__PURE__ */ jsx(DOShellNav, { headerContent: sidebarHeaderContent }),
     /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
+      /* @__PURE__ */ jsxs("header", { className: "relative flex h-16 shrink-0 items-center gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: [
+        /* @__PURE__ */ jsxs("div", { className: "z-10 flex shrink-0 items-center gap-2 bg-background px-4", children: [
           /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
           /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" }),
-          breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
-            crumb.href ? /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: crumb.href,
-                className: "text-muted-foreground hover:text-foreground transition-colors",
-                children: crumb.label
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: "text-foreground", children: crumb.label })
-          ] }, crumb.label)) })
+          breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs, LinkComponent: RouterLink })
         ] }),
-        headerContent && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2 px-4", children: headerContent })
+        headerContent && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center px-4 xl:absolute xl:inset-0 xl:justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: headerContent }) })
       ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto p-4", children: children ?? /* @__PURE__ */ jsx(Outlet, {}) })
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
     ] }),
     /* @__PURE__ */ jsx(Toaster, { closeButton: true, position: "top-right" })
   ] }) });
 }
+function DatabasesPage() {
+  const params = useParams({ strict: false });
+  const ns = params.ns;
+  const type = params.type;
+  return /* @__PURE__ */ jsx(
+    DataGridView,
+    {
+      initialNamespace: ns,
+      initialType: type,
+      className: "h-full"
+    }
+  );
+}
+function DocumentPage() {
+  const params = useParams({ strict: false });
+  const ns = params.ns;
+  const type = params.type;
+  const id = params.id;
+  const navigate = useNavigate();
+  const handleBack = () => {
+    navigate({ to: `/things/${ns}/${type}` });
+  };
+  const handleDelete = () => {
+    navigate({ to: `/things/${ns}/${type}` });
+  };
+  return /* @__PURE__ */ jsx(
+    DocumentEditorView,
+    {
+      initialNamespace: ns,
+      initialType: type,
+      initialId: id,
+      onBack: handleBack,
+      onDelete: handleDelete,
+      className: "h-full"
+    }
+  );
+}
+function FunctionsPage() {
+  return /* @__PURE__ */ jsx(FunctionEditorView, { className: "h-full" });
+}
 function StatCard({ title, value, description, icon: Icon, href }) {
   const content = /* @__PURE__ */ jsxs(Card, { className: "hover:bg-muted/50 transition-colors", children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
@@ -407,13 +507,13 @@ function StatCard({ title, value, description, icon: Icon, href }) {
     ] })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx(NavLink, { to: href, className: "block", children: content });
+    return /* @__PURE__ */ jsx(Link, { to: href, className: "block", children: content });
   }
   return content;
 }
 function QuickAction({ title, description, icon: Icon, href }) {
   return /* @__PURE__ */ jsxs(
-    NavLink,
+    Link,
     {
       to: href,
       className: "flex items-center gap-4 rounded-(--radius) border p-4 hover:bg-muted/50 transition-colors",
@@ -557,11 +657,26 @@ function OverviewPage() {
     ] }) })
   ] });
 }
+function PlaceholderPage({ title, description }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxs(Card, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Construction, { className: "h-8 w-8 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description ?? "This feature is coming soon." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("p", { children: "We're working hard to bring you this functionality." }),
+      /* @__PURE__ */ jsx("p", { children: "Check back soon for updates." })
+    ] })
+  ] }) });
+}
 function ThingsPage() {
-  const { ns, type } = useParams();
+  const params = useParams({ strict: false });
+  const ns = params.ns;
+  const type = params.type;
   const navigate = useNavigate();
   const handleOpen = (thing) => {
-    navigate(`/things/${thing.ns}/${thing.type}/${thing.id}`);
+    navigate({ to: `/things/${thing.ns}/${thing.type}/${thing.id}` });
   };
   return /* @__PURE__ */ jsx(
     DataBrowserView,
@@ -573,94 +688,208 @@ function ThingsPage() {
     }
   );
 }
-function DatabasesPage() {
-  const { ns, type } = useParams();
+function TypedThingsPage({ type }) {
+  const navigate = useNavigate();
+  const handleOpen = (thing) => {
+    navigate({ to: `/things/${thing.ns}/${thing.type}/${thing.id}` });
+  };
   return /* @__PURE__ */ jsx(
-    DataGridView,
+    DataBrowserView,
     {
-      initialNamespace: ns,
       initialType: type,
+      onOpen: handleOpen,
       className: "h-full"
     }
   );
 }
-function DocumentPage() {
-  const { ns, type, id } = useParams();
-  const navigate = useNavigate();
-  const handleBack = () => {
-    navigate(`/things/${ns}/${type}`);
-  };
-  const handleDelete = () => {
-    navigate(`/things/${ns}/${type}`);
-  };
+function NounsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Noun" });
+}
+function VerbsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Verb" });
+}
+function ActionsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Action" });
+}
+function RelationshipsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Relationship" });
+}
+function EventsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Event" });
+}
+function CustomersPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Customer" });
+}
+function SubscriptionsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Subscription" });
+}
+function OrgsPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Org" });
+}
+function RolesPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "Role" });
+}
+function UsersPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "User" });
+}
+function APIKeysPage() {
+  return /* @__PURE__ */ jsx(TypedThingsPage, { type: "APIKey" });
+}
+var doRoutes = {
+  // Main
+  overview: {
+    path: "/",
+    component: OverviewPage
+  },
+  // Development
+  agents: {
+    path: "/agents",
+    component: () => /* @__PURE__ */ jsx(PlaceholderPage, { title: "Agents", description: "Autonomous AI workers" })
+  },
+  functions: {
+    path: "/functions",
+    component: FunctionsPage
+  },
+  workflows: {
+    path: "/workflows",
+    component: FunctionsPage
+    // Uses FunctionEditorView for now
+  },
+  databases: {
+    path: "/databases",
+    component: DatabasesPage
+  },
+  databasesWithParams: {
+    path: "/databases/:ns/:type",
+    component: DatabasesPage
+  },
+  // Data Model
+  things: {
+    path: "/things",
+    component: ThingsPage
+  },
+  thingsWithNs: {
+    path: "/things/:ns",
+    component: ThingsPage
+  },
+  thingsWithType: {
+    path: "/things/:ns/:type",
+    component: ThingsPage
+  },
+  document: {
+    path: "/things/:ns/:type/:id",
+    component: DocumentPage
+  },
+  nouns: {
+    path: "/nouns",
+    component: NounsPage
+  },
+  verbs: {
+    path: "/verbs",
+    component: VerbsPage
+  },
+  actions: {
+    path: "/actions",
+    component: ActionsPage
+  },
+  relationships: {
+    path: "/relationships",
+    component: RelationshipsPage
+  },
+  events: {
+    path: "/events",
+    component: EventsPage
+  },
+  // SaaS
+  customers: {
+    path: "/customers",
+    component: CustomersPage
+  },
+  subscriptions: {
+    path: "/subscriptions",
+    component: SubscriptionsPage
+  },
+  integrations: {
+    path: "/integrations",
+    component: () => /* @__PURE__ */ jsx(
+      PlaceholderPage,
+      {
+        title: "Integrations",
+        description: "External service connections"
+      }
+    )
+  },
+  // Admin
+  orgs: {
+    path: "/orgs",
+    component: OrgsPage
+  },
+  roles: {
+    path: "/roles",
+    component: RolesPage
+  },
+  users: {
+    path: "/users",
+    component: UsersPage
+  },
+  apiKeys: {
+    path: "/api-keys",
+    component: APIKeysPage
+  },
+  settings: {
+    path: "/settings",
+    component: () => /* @__PURE__ */ jsx(PlaceholderPage, { title: "Settings", description: "Application settings" })
+  }
+};
+function DefaultHeaderContent() {
+  const { config } = useDOConfig();
+  const { endpoint, setEndpoint, recentEndpoints } = useDOState({
+    endpoint: config.do.apiEndpoint
+  });
   return /* @__PURE__ */ jsx(
-    DocumentEditorView,
+    EndpointSelector,
     {
-      initialNamespace: ns,
-      initialType: type,
-      initialId: id,
-      onBack: handleBack,
-      onDelete: handleDelete,
-      className: "h-full"
+      endpoint,
+      onEndpointChange: setEndpoint,
+      recentEndpoints,
+      className: "w-full max-w-md"
     }
   );
 }
-function FunctionsPage() {
-  return /* @__PURE__ */ jsx(FunctionEditorView, { className: "h-full" });
-}
-function PlaceholderPage({ title, description }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxs(Card, { className: "max-w-md", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Construction, { className: "h-8 w-8 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsx(CardTitle, { children: title }),
-      /* @__PURE__ */ jsx(CardDescription, { children: description ?? "This feature is coming soon." })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "text-center text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("p", { children: "We're working hard to bring you this functionality." }),
-      /* @__PURE__ */ jsx("p", { children: "Check back soon for updates." })
-    ] })
-  ] }) });
+function createShellComponent(headerContent, sidebarHeaderContent) {
+  return function ShellLayout() {
+    return /* @__PURE__ */ jsx(
+      DOShell,
+      {
+        headerContent: headerContent ?? /* @__PURE__ */ jsx(DefaultHeaderContent, {}),
+        sidebarHeaderContent,
+        children: /* @__PURE__ */ jsx(WebOutlet, {})
+      }
+    );
+  };
 }
-function DOApp({ config, headerContent, sidebarHeaderContent }) {
+function DOApp({
+  config,
+  headerContent,
+  sidebarHeaderContent
+}) {
   const basePath = config.basePath ?? "";
-  return /* @__PURE__ */ jsx(AppProviders, { config, children: /* @__PURE__ */ jsx(BrowserRouter, { basename: basePath, children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(
-    Route,
+  const router = React.useMemo(() => {
+    const ShellComponent = createShellComponent(
+      headerContent,
+      sidebarHeaderContent
+    );
+    return createWebRouter(doRoutes, {
+      rootComponent: ShellComponent,
+      basepath: basePath || void 0
+    });
+  }, [basePath, headerContent, sidebarHeaderContent]);
+  return /* @__PURE__ */ jsx(AppProviders, { config, children: /* @__PURE__ */ jsx(
+    RouterProvider,
     {
-      path: "/",
-      element: /* @__PURE__ */ jsx(
-        DOShell,
-        {
-          headerContent,
-          sidebarHeaderContent
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(OverviewPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "agents", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Agents", description: "Autonomous AI workers" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "functions", element: /* @__PURE__ */ jsx(FunctionsPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "workflows", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Workflows", description: "Business process orchestration" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "databases", element: /* @__PURE__ */ jsx(DatabasesPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "databases/:ns/:type", element: /* @__PURE__ */ jsx(DatabasesPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "things", element: /* @__PURE__ */ jsx(ThingsPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "things/:ns", element: /* @__PURE__ */ jsx(ThingsPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "things/:ns/:type", element: /* @__PURE__ */ jsx(ThingsPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "things/:ns/:type/:id", element: /* @__PURE__ */ jsx(DocumentPage, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "nouns", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Nouns", description: "Semantic entities and concepts" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "verbs", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Verbs", description: "Actions and operations" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "actions", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Actions", description: "Executable operations" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "relationships", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Relationships", description: "Entity connections and graph" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "events", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Events", description: "Operation log and semantic events" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "customers", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Customers", description: "Customer management" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "subscriptions", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Subscriptions", description: "Subscription management" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "integrations", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Integrations", description: "External service connections" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "orgs", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Organizations", description: "Organization management" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "roles", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Roles", description: "Role-based access control" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "users", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Users", description: "User management" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "api-keys", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "API Keys", description: "API key management" }) }),
-        /* @__PURE__ */ jsx(Route, { path: "settings", element: /* @__PURE__ */ jsx(PlaceholderPage, { title: "Settings", description: "Application settings" }) })
-      ]
+      router
     }
-  ) }) }) });
+  ) });
 }
 var DatabaseRouteParams = z.object({
   ns: z.string().optional(),
@@ -710,6 +939,6 @@ var doRoutePaths = {
   settings: "/settings"
 };
 
-export { AppProviders, AuthGate, DOApp, DOAppProviders, DOIdentityProvider, DOShell, DOShellNav, DOShellProvider, DatabaseRouteParams, DatabasesPage, DocumentPage, DocumentRouteParams, FunctionsPage, OverviewPage, PlaceholderPage, ThingsPage, ThingsRouteParams, TypeFilteredRouteParams, UserMenu, doRoutePaths, useDOShell, useDOShellRoutes, useIdentity };
-//# sourceMappingURL=chunk-NTSEARBC.js.map
-//# sourceMappingURL=chunk-NTSEARBC.js.map
+export { AppProviders, AuthGate, DOApp, DOConfigProvider, DOIdentityProvider, DOShell, DOShellNav, DatabaseRouteParams, DatabasesPage, DocumentPage, DocumentRouteParams, FunctionsPage, OverviewPage, PlaceholderPage, ThingsPage, ThingsRouteParams, TypeFilteredRouteParams, UserMenu, doRoutePaths, useDOConfig, useDOCustomRoutes, useDORoutes, useIdentity };
+//# sourceMappingURL=chunk-IQ23B4ME.js.map
+//# sourceMappingURL=chunk-IQ23B4ME.js.map