@mdxui/do 2.1.1 → 4.0.0

package/dist/chunk-KT52UU3U.js

@@ -0,0 +1,985 @@
+import { DataGridView, DocumentEditorView, FunctionEditorView, DataBrowserView } from './chunk-7UFINK3Q.js';
+import { useBreadcrumbs, useNamespaces, useTypes } from './chunk-NA652ART.js';
+import { useThings } from './chunk-5SHZZC7L.js';
+import { useDO, useEndpoint, DOProvider, useDOState } from './chunk-WMNT4OIE.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, useMemo, useContext, useState, useEffect } from 'react';
+import { useAuth, AuthKitProvider } from '@workos-inc/authkit-react';
+import { ThemeProvider } from 'next-themes';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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 { 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 DOConfigContext = createContext(null);
+var defaultIdentity = {
+  clientId: "",
+  devMode: false,
+  required: true,
+  onUnauthenticated: "landing"
+};
+var defaultConfig = {
+  basePath: "/",
+  defaultNamespace: "default",
+  branding: { name: "DO Admin" },
+  theme: { mode: "system" },
+  routes: {},
+  customRoutes: []
+};
+function DOConfigProvider({ config, children }) {
+  const value = useMemo(() => {
+    const mergedConfig = {
+      ...defaultConfig,
+      ...config,
+      branding: { ...defaultConfig.branding, ...config.branding },
+      theme: { ...defaultConfig.theme, ...config.theme },
+      identity: { ...defaultIdentity, ...config.identity }
+    };
+    return { config: mergedConfig };
+  }, [config]);
+  return /* @__PURE__ */ jsx(DOConfigContext.Provider, { value, children });
+}
+function useDOConfig() {
+  const context = useContext(DOConfigContext);
+  if (!context) {
+    throw new Error("useDOConfig must be used within a DOConfigProvider");
+  }
+  return context;
+}
+function useDORoutes() {
+  const { config } = useDOConfig();
+  return config.routes ?? {};
+}
+function useDOCustomRoutes() {
+  const { config } = useDOConfig();
+  return config.customRoutes ?? [];
+}
+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 DOIdentityProvider({ children }) {
+  const { config } = useDOConfig();
+  const { identity } = config;
+  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);
+      url.searchParams.delete("code");
+      url.searchParams.delete("state");
+      window.history.replaceState({}, "", url.pathname);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AuthKitProvider,
+    {
+      clientId: identity.clientId,
+      apiHostname: identity.apiHostname,
+      devMode: identity.devMode,
+      redirectUri,
+      onRedirectCallback,
+      children: /* @__PURE__ */ jsx(IdentityWidgetsWrapper, { 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(
+    ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme: themeMode,
+      enableSystem: themeMode === "system",
+      disableTransitionOnChange: true,
+      children: /* @__PURE__ */ jsx(DOConfigProvider, { config, children: /* @__PURE__ */ jsx(DOIdentityProvider, { children: /* @__PURE__ */ jsx(
+        DOProviderWithState,
+        {
+          config: config.do,
+          initialNamespace: config.defaultNamespace,
+          children
+        }
+      ) }) })
+    }
+  );
+}
+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+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function UserMenu({ compact = false }) {
+  const { user, signOut, isLoading } = useAuth();
+  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" }),
+      !compact && /* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" })
+    ] });
+  }
+  if (!user) {
+    return null;
+  }
+  const displayName = user.firstName ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ""}` : user.email;
+  const initials = getInitials(user.firstName ? `${user.firstName} ${user.lastName ?? ""}` : user.email);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: user.profilePictureUrl ?? void 0, alt: displayName }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initials })
+          ] }),
+          !compact && /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: displayName }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-[var(--radius)]",
+        side: "bottom",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: user.profilePictureUrl ?? void 0, alt: displayName }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: displayName }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(User, { className: "mr-2 size-4" }),
+            "Account"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(Settings, { className: "mr-2 size-4" }),
+            "Settings"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => signOut(), children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "mr-2 size-4" }),
+            "Sign Out"
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+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"
+    }
+  ],
+  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: "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"
+    }
+  ],
+  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"
+    }
+  ]
+};
+function DOShellNav({ headerContent, ...props }) {
+  const routerState = useRouterState();
+  const { config } = useDOConfig();
+  const routesConfig = useDORoutes();
+  const branding = config.branding;
+  const pathname = routerState.location.pathname;
+  const isActive = (url) => {
+    if (url === "/") {
+      return pathname === "/" || pathname === "";
+    }
+    return pathname.startsWith(url);
+  };
+  const isRouteEnabled = (routeKey) => {
+    if (!routeKey) return true;
+    if (routesConfig[routeKey] === false) return false;
+    return true;
+  };
+  const filterNavItems = (items) => {
+    return items.filter((item) => isRouteEnabled(item.routeKey));
+  };
+  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(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" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: "Dashboard" })
+        ] })
+      ] }) }) }) }),
+      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(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(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(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(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(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 RouterLink({ href, children, className }) {
+  return /* @__PURE__ */ jsx(Link, { to: href, className, children });
+}
+function DOShell({
+  children,
+  sidebarHeaderContent,
+  headerContent,
+  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: "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.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs, LinkComponent: RouterLink })
+        ] }),
+        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", 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: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: title }),
+      /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: value }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
+    ] })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(Link, { to: href, className: "block", children: content });
+  }
+  return content;
+}
+function QuickAction({ title, description, icon: Icon, href }) {
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      to: href,
+      className: "flex items-center gap-4 rounded-(--radius) border p-4 hover:bg-muted/50 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-(--radius) bg-primary/10", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function OverviewPage() {
+  const { namespace, isConnected } = useDO();
+  const { data: namespaces } = useNamespaces();
+  const { data: types } = useTypes({ ns: namespace });
+  const { data: thingsResult } = useThings({ ns: namespace, limit: 1 });
+  const namespaceCount = namespaces?.length ?? 0;
+  const typeCount = types?.length ?? 0;
+  const thingCount = thingsResult?.total ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Dashboard" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Welcome to DO Admin. Manage your Durable Objects and data." })
+    ] }),
+    !isConnected && /* @__PURE__ */ jsx(Card, { className: "border-destructive", children: /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-destructive", children: "Connection Error" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Unable to connect to the backend. Please check your configuration." })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          title: "Namespaces",
+          value: namespaceCount,
+          description: "Active namespaces",
+          icon: Database,
+          href: "/databases"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          title: "Types",
+          value: typeCount,
+          description: "Defined types",
+          icon: Shapes,
+          href: "/things"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          title: "Things",
+          value: thingCount,
+          description: "Total records",
+          icon: Activity,
+          href: "/things"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          title: "Namespace",
+          value: namespace,
+          description: "Currently selected",
+          icon: Network
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: "Quick Actions" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "Browse Things",
+            description: "View and manage all your Things",
+            icon: Shapes,
+            href: "/things"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "Query Database",
+            description: "Run queries on your data",
+            icon: Database,
+            href: "/databases"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "Run Functions",
+            description: "Execute code against your DO",
+            icon: Code,
+            href: "/functions"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "Manage Customers",
+            description: "View and manage customers",
+            icon: Users,
+            href: "/customers"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "View Subscriptions",
+            description: "Manage billing and subscriptions",
+            icon: CreditCard,
+            href: "/subscriptions"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickAction,
+          {
+            title: "Organizations",
+            description: "Manage organizations and teams",
+            icon: Building,
+            href: "/orgs"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs(CardTitle, { children: [
+        "Current Namespace: ",
+        namespace
+      ] }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        'You are currently working in the "',
+        namespace,
+        '" namespace. Switch namespaces from the Things or Databases view.'
+      ] })
+    ] }) })
+  ] });
+}
+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 params = useParams({ strict: false });
+  const ns = params.ns;
+  const type = params.type;
+  const navigate = useNavigate();
+  const handleOpen = (thing) => {
+    navigate({ to: `/things/${thing.ns}/${thing.type}/${thing.id}` });
+  };
+  return /* @__PURE__ */ jsx(
+    DataBrowserView,
+    {
+      initialNamespace: ns,
+      initialType: type,
+      onOpen: handleOpen,
+      className: "h-full"
+    }
+  );
+}
+function TypedThingsPage({ type }) {
+  const navigate = useNavigate();
+  const handleOpen = (thing) => {
+    navigate({ to: `/things/${thing.ns}/${thing.type}/${thing.id}` });
+  };
+  return /* @__PURE__ */ jsx(
+    DataBrowserView,
+    {
+      initialType: type,
+      onOpen: handleOpen,
+      className: "h-full"
+    }
+  );
+}
+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(
+    EndpointSelector,
+    {
+      endpoint,
+      onEndpointChange: setEndpoint,
+      recentEndpoints,
+      className: "w-full max-w-md"
+    }
+  );
+}
+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
+}) {
+  const basePath = config.basePath ?? "";
+  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,
+    {
+      router
+    }
+  ) });
+}
+var DatabaseRouteParams = z.object({
+  ns: z.string().optional(),
+  type: z.string().optional()
+});
+var ThingsRouteParams = z.object({
+  ns: z.string().optional(),
+  type: z.string().optional()
+});
+var DocumentRouteParams = z.object({
+  ns: z.string(),
+  type: z.string(),
+  id: z.string()
+});
+var TypeFilteredRouteParams = z.object({
+  type: z.string().optional()
+});
+
+// src/app/routes.ts
+var doRoutePaths = {
+  // Main
+  overview: "/",
+  // Development
+  agents: "/agents",
+  functions: "/functions",
+  workflows: "/workflows",
+  databases: "/databases",
+  databaseTable: "/databases/:ns/:type",
+  // Data Model
+  things: "/things",
+  thingsBrowse: "/things/:ns/:type?",
+  document: "/things/:ns/:type/:id",
+  nouns: "/nouns",
+  verbs: "/verbs",
+  actions: "/actions",
+  relationships: "/relationships",
+  events: "/events",
+  // SaaS
+  customers: "/customers",
+  subscriptions: "/subscriptions",
+  integrations: "/integrations",
+  // Admin
+  orgs: "/orgs",
+  roles: "/roles",
+  users: "/users",
+  apiKeys: "/api-keys",
+  settings: "/settings"
+};
+
+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-KT52UU3U.js.map
+//# sourceMappingURL=chunk-KT52UU3U.js.map