zudoku 0.0.0-f9d5b02 → 0.0.0-fb7d300

package/src/lib/components/Bootstrap.tsx

@@ -4,7 +4,7 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode, useMemo } from "react";
+import { StrictMode } from "react";
 import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   type createStaticRouter,
@@ -13,29 +13,36 @@ import {
 } from "react-router-dom/server.js";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
 const Bootstrap = ({
   router,
   hydrate = false,
 }: {
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => {
-  const queryClient = useMemo(() => new QueryClient(), []);
-
-  return (
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-          <HelmetProvider>
-            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-              <RouterProvider router={router} />
-            </StaggeredRenderContext.Provider>
-          </HelmetProvider>
-        </HydrationBoundary>
-      </QueryClientProvider>
-    </StrictMode>
-  );
-};
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+        <HelmetProvider>
+          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+            <RouterProvider
+              router={router}
+              future={{ v7_startTransition: true }}
+            />
+          </StaggeredRenderContext.Provider>
+        </HelmetProvider>
+      </HydrationBoundary>
+    </QueryClientProvider>
+  </StrictMode>
+);
 
 const BootstrapStatic = ({
   router,

package/src/lib/components/Header.tsx

@@ -41,7 +41,12 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
     </DropdownMenuSub>
   ) : (
     <Link to={item.path ?? ""}>
-      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+      <DropdownMenuItem key={item.label} className="flex gap-2">
+        {item.icon && (
+          <item.icon size={16} strokeWidth={1} absoluteStrokeWidth />
+        )}
+        {item.label}
+      </DropdownMenuItem>
     </Link>
   );
 };
@@ -55,7 +60,7 @@ export const Header = memo(function HeaderInner() {
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
-    .map((i) => <RecursiveMenu key={i.label} item={i} />);
+    .sort((i) => i.weight ?? 0);
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
@@ -82,7 +87,6 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                     <img
-                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
@@ -93,7 +97,7 @@ export const Header = memo(function HeaderInner() {
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10"
+                      className="h-10 hidden dark:block"
                       loading="lazy"
                     />
                   </>
@@ -121,17 +125,46 @@ export const Header = memo(function HeaderInner() {
                       Login
                     </Button>
                   ) : (
-                    accountItems.length > 0 && (
+                    Object.values(accountItems).length > 0 && (
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.email ? `${profile.email}` : "My Account"}
+                            {profile?.name ? `${profile.name}` : "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
-                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                          <DropdownMenuSeparator />
-                          {accountItems}
+                          <DropdownMenuLabel>
+                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.email && (
+                              <div className="font-normal text-muted-foreground">
+                                {profile.email}
+                              </div>
+                            )}
+                          </DropdownMenuLabel>
+                          {accountItems.filter((i) => i.category === "top")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "top")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter(
+                            (i) => !i.category || i.category === "middle",
+                          ).length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter(
+                              (i) => !i.category || i.category === "middle",
+                            )
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter((i) => i.category === "bottom")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "bottom")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
                         </DropdownMenuContent>
                       </DropdownMenu>
                     )

package/src/lib/components/Layout.tsx

@@ -1,7 +1,8 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
 import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigation } from "react-router-dom";
+import { useSpinDelay } from "spin-delay";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
@@ -13,6 +14,12 @@ import { Sidebar } from "./navigation/Sidebar.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
+const LoadingFallback = () => (
+  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+    <Spinner />
+  </main>
+);
+
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
@@ -25,7 +32,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   useEffect(() => {
     // Initialize the authentication plugin
-    authentication?.pageLoad?.();
+    authentication?.onPageLoad?.();
   }, [authentication]);
 
   useEffect(() => {
@@ -36,6 +43,13 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     previousLocationPath.current = location.pathname;
   }, [location.pathname, setActiveAnchor]);
 
+  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
+  const isNavigating = Boolean(useNavigation().location);
+  const showSpinner = useSpinDelay(isNavigating, {
+    delay: 300,
+    minDuration: 500,
+  });
+
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -52,41 +66,39 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
-        <Suspense
-          fallback={
-            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
-              <Spinner />
-            </main>
-          }
-        >
-          <Drawer direction="left">
-            <Sidebar />
-            <div
-              className={cn(
-                "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                "peer-data-[navigation=false]:hidden",
-              )}
-            >
-              <DrawerTrigger className="flex items-center gap-2">
-                <PanelLeftIcon size={16} strokeWidth={1.5} />
-                <span className="text-sm">Menu</span>
-              </DrawerTrigger>
-            </div>
-            <main
-              className={cn(
-                "h-full dark:border-white/10 translate-x-0",
-                "lg:overflow-visible",
-                // This works in tandem with the `SidebarWrapper` component
-                "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-              )}
-            >
-              <Slotlet name="zudoku-before-content" />
-              {children ?? <Outlet />}
-              <Slotlet name="zudoku-after-content" />
-            </main>
-          </Drawer>
-        </Suspense>
+        {showSpinner ? (
+          <LoadingFallback />
+        ) : (
+          <Suspense fallback={<LoadingFallback />}>
+            <Drawer direction="left">
+              <Sidebar />
+              <div
+                className={cn(
+                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
+                  "peer-data-[navigation=false]:hidden",
+                )}
+              >
+                <DrawerTrigger className="flex items-center gap-2">
+                  <PanelLeftIcon size={16} strokeWidth={1.5} />
+                  <span className="text-sm">Menu</span>
+                </DrawerTrigger>
+              </div>
+              <main
+                className={cn(
+                  "h-full dark:border-white/10 translate-x-0",
+                  "lg:overflow-visible",
+                  // This works in tandem with the `SidebarWrapper` component
+                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
+                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
+                )}
+              >
+                <Slotlet name="zudoku-before-content" />
+                {children ?? <Outlet />}
+                <Slotlet name="zudoku-after-content" />
+              </main>
+            </Drawer>
+          </Suspense>
+        )}
       </div>
     </>
   );

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,11 +1,9 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cx } from "class-variance-authority";
 import { MenuIcon } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { useState } from "react";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerTitle,
   DrawerTrigger,
@@ -13,14 +11,19 @@ import {
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem } from "./TopNavigation.js";
+import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   return (
-    <Drawer direction="right">
+    <Drawer
+      direction="right"
+      open={drawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
       <div className="flex lg:hidden justify-self-end">
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
@@ -42,19 +45,9 @@ export const MobileTopNavigation = () => {
           </li>
           {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
-              <NavLink
-                className={({ isActive }) =>
-                  cx(
-                    "block font-medium border-b-2",
-                    isActive
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                  )
-                }
-                to={item.id}
-              >
-                <DrawerClose>{item.label}</DrawerClose>
-              </NavLink>
+              <button onClick={() => setDrawerOpen(false)}>
+                <TopNavItem {...item} />
+              </button>
             </li>
           ))}
         </ul>

package/src/lib/components/SyntaxHighlight.tsx

@@ -56,14 +56,15 @@ export const SyntaxHighlight = ({
   language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
-  const highlightTheme = theme === "dark" ? themes.vsDark : themes.github;
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
 
   // hardcoded values from the themes to avoid color flash in SSR
   const themeColorClasses =

package/src/lib/components/ThemeSwitch.tsx

@@ -4,18 +4,20 @@ import { Button } from "zudoku/ui/Button.js";
 import { ClientOnly } from "./ClientOnly.js";
 
 export const ThemeSwitch = () => {
-  const { theme, setTheme } = useTheme();
-  const ThemeIcon = theme === "dark" ? MoonStarIcon : SunIcon;
+  const { resolvedTheme, setTheme } = useTheme();
+  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
     <ClientOnly>
       <Button
         variant="ghost"
         aria-label={
-          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+          resolvedTheme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
         }
         className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       >
         <ThemeIcon size={18} />
       </Button>

package/src/lib/components/TopNavigation.tsx

@@ -1,8 +1,9 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
-import { Link } from "react-router-dom";
+import { NavLink, useNavigation } from "react-router-dom";
 import { TopNavigationItem } from "../../config/validators/validate.js";
 import { useAuth } from "../authentication/hook.js";
+import { ZudokuError } from "../util/invariant.js";
 import { joinPath } from "../util/joinPath.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
@@ -42,10 +43,16 @@ export const TopNavigation = () => {
   );
 };
 
-const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+export const TopNavItem = ({
+  id,
+  label,
+  default: defaultLink,
+}: TopNavigationItem) => {
   const { sidebars } = useZudoku();
-  const nav = useCurrentNavigation();
   const currentSidebar = sidebars[id];
+  const currentNav = useCurrentNavigation();
+  const isNavigating = Boolean(useNavigation().location);
+  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
 
   // TODO: This is a bit of a hack to get the first link in the sidebar
   // We should really process this when we load the config so we can validate
@@ -60,25 +67,26 @@ const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
       : joinPath(id));
 
   if (!first) {
-    throw new Error(
-      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
-    );
+    throw new ZudokuError("Page not found.", {
+      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
+    });
   }
 
-  // Manually set the active sidebar based on our logic of what is active
-  const isActive = nav.topNavItem?.id === id;
-
   return (
-    <Link
-      className={cx(
-        "block py-3.5 font-medium -mb-px border-b-2",
-        isActive
-          ? "border-primary text-foreground"
-          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-      )}
+    // We don't use isActive here because it has to be inside the sidebar,
+    // the top nav id doesn't necessarily start with the sidebar id
+    <NavLink
+      className={({ isPending }) =>
+        cx(
+          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          isActive || isPending
+            ? "border-primary text-foreground"
+            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+        )
+      }
       to={first}
     >
       {label}
-    </Link>
+    </NavLink>
   );
 };

package/src/lib/core/plugins.ts

@@ -1,3 +1,4 @@
+import type { LucideProps } from "lucide-react";
 import { type ReactElement } from "react";
 import { type RouteObject } from "react-router-dom";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
@@ -36,7 +37,14 @@ export interface ProfileMenuPlugin {
 export type ProfileNavigationItem = {
   label: string;
   path?: string;
+  weight?: number;
+  category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
+  icon?: React.ComponentType<
+    LucideProps & {
+      [key: string]: any;
+    }
+  >;
 };
 
 export interface CommonPlugin {

package/src/lib/plugins/api-keys/index.tsx

@@ -1,3 +1,4 @@
+import { FileKey2Icon } from "lucide-react";
 import { type RouteObject } from "react-router-dom";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import {
@@ -105,6 +106,8 @@ export const apiKeyPlugin = (
       {
         label: "API Keys",
         path: "/settings/api-keys",
+        category: "middle",
+        icon: FileKey2Icon,
       },
     ],
     getIdentities: async (context) => {

package/src/lib/plugins/openapi/ColorizedParam.tsx

@@ -6,10 +6,10 @@ import { pastellize } from "../../util/pastellize.js";
 export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   return pastellize(
     name,
-    theme === "light" ? { saturation: 85, lightness: 50 } : undefined,
+    resolvedTheme === "light" ? { saturation: 85, lightness: 50 } : undefined,
   );
 };
 

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -73,7 +73,7 @@ export const SchemaView = ({
     ) {
       return (
         <Card className="p-4 flex gap-2 items-center">
-          {"name" in schema && <>{schema.name}</>}
+          {"name" in schema && <>{schema.name as string}</>}
           <span className="text-sm text-muted-foreground">object</span>
           {schema.description && (
             <Markdown

package/lib/AuthenticationPlugin-DeGDVa1r.js

@@ -1,56 +0,0 @@
-import { j as i } from "./jsx-runtime-B6kdoens.js";
-import { useEffect as o } from "react";
-import { u as a } from "./index-Yn8c3UWE.js";
-import { u as s } from "./utils-DcpDOncX.js";
-import { a as u } from "./index-Czzd9rjU.js";
-const r = () => {
-  const t = s(), [n] = a();
-  return o(() => {
-    var e;
-    (e = t.authentication) == null || e.signIn({
-      redirectTo: n.get("redirect") ?? void 0
-    });
-  }, [t.authentication, n]), null;
-}, c = () => {
-  const t = s(), n = u();
-  return o(() => {
-    var e;
-    (e = t.authentication) == null || e.signOut().then(() => n("/"));
-  }, [n, t.authentication]), null;
-}, g = () => {
-  const t = s();
-  return o(() => {
-    var n, e;
-    ((n = t.authentication) == null ? void 0 : n.signUp()) ?? ((e = t.authentication) == null || e.signIn());
-  }, [t.authentication]), null;
-};
-class f {
-  getRoutes() {
-    return [
-      {
-        path: "/signout",
-        element: /* @__PURE__ */ i.jsx(c, {})
-      },
-      {
-        path: "/signin",
-        element: /* @__PURE__ */ i.jsx(r, {})
-      },
-      {
-        path: "/signup",
-        element: /* @__PURE__ */ i.jsx(g, {})
-      }
-    ];
-  }
-  getProfileMenuItems() {
-    return [
-      {
-        label: "Logout",
-        path: "/signout"
-      }
-    ];
-  }
-}
-export {
-  f as A
-};
-//# sourceMappingURL=AuthenticationPlugin-DeGDVa1r.js.map

package/lib/AuthenticationPlugin-DeGDVa1r.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthenticationPlugin-DeGDVa1r.js","sources":["../src/lib/authentication/components/SignIn.tsx","../src/lib/authentication/components/SignOut.tsx","../src/lib/authentication/components/SignUp.tsx","../src/lib/authentication/AuthenticationPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignIn = () => {\n  const context = useZudoku();\n  const [search] = useSearchParams();\n  useEffect(() => {\n    void context.authentication?.signIn({\n      redirectTo: search.get(\"redirect\") ?? undefined,\n    });\n  }, [context.authentication, search]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignOut = () => {\n  const context = useZudoku();\n  const navigate = useNavigate();\n  useEffect(() => {\n    void context.authentication?.signOut().then(() => navigate(\"/\"));\n  }, [navigate, context.authentication]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignUp = () => {\n  const context = useZudoku();\n  useEffect(() => {\n    void (context.authentication?.signUp() ?? context.authentication?.signIn());\n  }, [context.authentication]);\n\n  return null;\n};\n","import {\n  CommonPlugin,\n  NavigationPlugin,\n  ProfileMenuPlugin,\n} from \"../core/plugins.js\";\nimport { SignIn } from \"./components/SignIn.js\";\nimport { SignOut } from \"./components/SignOut.js\";\nimport { SignUp } from \"./components/SignUp.js\";\n\ntype PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;\n\nexport class AuthenticationPlugin implements PluginInterface {\n  getRoutes() {\n    return [\n      {\n        path: \"/signout\",\n        element: <SignOut />,\n      },\n      {\n        path: \"/signin\",\n        element: <SignIn />,\n      },\n      {\n        path: \"/signup\",\n        element: <SignUp />,\n      },\n    ];\n  }\n\n  getProfileMenuItems() {\n    return [\n      {\n        label: \"Logout\",\n        path: \"/signout\",\n      },\n    ];\n  }\n}\n"],"names":["SignIn","context","useZudoku","search","useSearchParams","useEffect","_a","SignOut","navigate","useNavigate","SignUp","_b","AuthenticationPlugin"],"mappings":";;;;;AAIO,MAAMA,IAAS,MAAM;AAC1B,QAAMC,IAAUC,KACV,CAACC,CAAM,IAAIC;AACjB,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,OAAO;AAAA,MAClC,YAAYH,EAAO,IAAI,UAAU,KAAK;AAAA,IAAA;AAAA,EAEvC,GAAA,CAACF,EAAQ,gBAAgBE,CAAM,CAAC,GAE5B;AACT,GCVaI,IAAU,MAAM;AAC3B,QAAMN,IAAUC,KACVM,IAAWC;AACjB,SAAAJ,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,UAAU,KAAK,MAAME,EAAS,GAAG;AAAA,EAC7D,GAAA,CAACA,GAAUP,EAAQ,cAAc,CAAC,GAE9B;AACT,GCTaS,IAAS,MAAM;AAC1B,QAAMT,IAAUC;AAChB,SAAAG,EAAU,MAAM;;AACd,MAAMC,IAAAL,EAAQ,mBAAR,gBAAAK,EAAwB,eAAYK,IAAAV,EAAQ,mBAAR,QAAAU,EAAwB;AAAA,EAAO,GACxE,CAACV,EAAQ,cAAc,CAAC,GAEpB;AACT;ACCO,MAAMW,EAAgD;AAAA,EAC3D,YAAY;AACH,WAAA;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,+BAAUL,GAAQ,EAAA;AAAA,MACpB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUP,GAAO,EAAA;AAAA,MACnB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUU,GAAO,EAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,sBAAsB;AACb,WAAA;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACF;"}