zudoku 0.55.1 → 0.57.0

package/lib/zudoku.router.js

@@ -0,0 +1,123 @@
+import { A as s, B as t, F as r, H as o, I as u, a as i, b as n, L as S, c, M as R, d as F, N as E, e as N, f as _, O as A, P as l, R as U, g as d, h, i as m, S as C, j as v, k as P, l as g, m as p, D as y, n as x, E as H, o as L, p as k, q as D, r as b, s as w, t as M, u as O, v as B, V as T, w as I, x as f, y as V, z as W, C as q, G as z, J as G, K, Q as j, T as J, U as Q, W as X, X as Y, Y as Z, Z as $, _ as aa, $ as ea, a0 as sa, a1 as ta, a2 as ra, a3 as oa, a4 as ua, a5 as ia, a6 as na, a7 as Sa, a8 as ca, a9 as Ra, aa as Fa, ab as Ea, ac as Na, ad as _a, ae as Aa, af as la, ag as Ua, ah as da, ai as ha, aj as ma, ak as Ca, al as va, am as Pa, an as ga, ao as pa, ap as ya, aq as xa, ar as Ha, as as La, at as ka, au as Da, av as ba, aw as wa, ax as Ma, ay as Oa, az as Ba, aA as Ta, aB as Ia, aC as fa, aD as Va, aE as Wa, aF as qa, aG as za, aH as Ga, aI as Ka, aJ as ja, aK as Ja, aL as Qa, aM as Xa, aN as Ya, aO as Za, aP as $a, aQ as ae, aR as ee, aS as se, aT as te, aU as re, aV as oe, aW as ue, aX as ie, aY as ne, aZ as Se, a_ as ce, a$ as Re, b0 as Fe } from "./chunk-QMGIS6GS-DqecZ6nq.js";
+export {
+  s as Await,
+  t as BrowserRouter,
+  r as Form,
+  o as HashRouter,
+  u as IDLE_BLOCKER,
+  i as IDLE_FETCHER,
+  n as IDLE_NAVIGATION,
+  S as Link,
+  c as Links,
+  R as MemoryRouter,
+  F as Meta,
+  E as NavLink,
+  N as Navigate,
+  _ as NavigationType,
+  A as Outlet,
+  l as PrefetchPageLinks,
+  U as Route,
+  d as Router,
+  h as RouterProvider,
+  m as Routes,
+  C as Scripts,
+  v as ScrollRestoration,
+  P as ServerRouter,
+  g as StaticRouter,
+  p as StaticRouterProvider,
+  y as UNSAFE_DataRouterContext,
+  x as UNSAFE_DataRouterStateContext,
+  H as UNSAFE_ErrorResponseImpl,
+  L as UNSAFE_FetchersContext,
+  k as UNSAFE_FrameworkContext,
+  D as UNSAFE_LocationContext,
+  b as UNSAFE_NavigationContext,
+  w as UNSAFE_RemixErrorBoundary,
+  M as UNSAFE_RouteContext,
+  O as UNSAFE_ServerMode,
+  B as UNSAFE_SingleFetchRedirectSymbol,
+  T as UNSAFE_ViewTransitionContext,
+  I as UNSAFE_createBrowserHistory,
+  f as UNSAFE_createClientRoutes,
+  V as UNSAFE_createClientRoutesWithHMRRevalidationOptOut,
+  W as UNSAFE_createRouter,
+  q as UNSAFE_decodeViaTurboStream,
+  z as UNSAFE_deserializeErrors,
+  G as UNSAFE_getHydrationData,
+  K as UNSAFE_getPatchRoutesOnNavigationFunction,
+  j as UNSAFE_getTurboStreamSingleFetchDataStrategy,
+  J as UNSAFE_hydrationRouteProperties,
+  Q as UNSAFE_invariant,
+  X as UNSAFE_mapRouteProperties,
+  Y as UNSAFE_shouldHydrateRouteLoader,
+  Z as UNSAFE_useFogOFWarDiscovery,
+  $ as UNSAFE_useScrollRestoration,
+  aa as UNSAFE_withComponentProps,
+  ea as UNSAFE_withErrorBoundaryProps,
+  sa as UNSAFE_withHydrateFallbackProps,
+  ta as createBrowserRouter,
+  ra as createCookie,
+  oa as createCookieSessionStorage,
+  ua as createHashRouter,
+  ia as createMemoryRouter,
+  na as createMemorySessionStorage,
+  Sa as createPath,
+  ca as createRequestHandler,
+  Ra as createRoutesFromChildren,
+  Fa as createRoutesFromElements,
+  Ea as createRoutesStub,
+  Na as createSearchParams,
+  _a as createSession,
+  Aa as createSessionStorage,
+  la as createStaticHandler,
+  Ua as createStaticRouter,
+  da as data,
+  ha as generatePath,
+  ma as href,
+  Ca as isCookie,
+  va as isRouteErrorResponse,
+  Pa as isSession,
+  ga as matchPath,
+  pa as matchRoutes,
+  ya as parsePath,
+  xa as redirect,
+  Ha as redirectDocument,
+  La as renderMatches,
+  ka as replace,
+  Da as resolvePath,
+  ba as unstable_HistoryRouter,
+  wa as unstable_RouterContextProvider,
+  Ma as unstable_createContext,
+  Oa as unstable_setDevServerHooks,
+  Ba as unstable_usePrompt,
+  Ta as useActionData,
+  Ia as useAsyncError,
+  fa as useAsyncValue,
+  Va as useBeforeUnload,
+  Wa as useBlocker,
+  qa as useFetcher,
+  za as useFetchers,
+  Ga as useFormAction,
+  Ka as useHref,
+  ja as useInRouterContext,
+  Ja as useLinkClickHandler,
+  Qa as useLoaderData,
+  Xa as useLocation,
+  Ya as useMatch,
+  Za as useMatches,
+  $a as useNavigate,
+  ae as useNavigation,
+  ee as useNavigationType,
+  se as useOutlet,
+  te as useOutletContext,
+  re as useParams,
+  oe as useResolvedPath,
+  ue as useRevalidator,
+  ie as useRouteError,
+  ne as useRouteLoaderData,
+  Se as useRoutes,
+  ce as useSearchParams,
+  Re as useSubmit,
+  Fe as useViewTransitionState
+};
+//# sourceMappingURL=zudoku.router.js.map

package/lib/zudoku.router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.router.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -103,6 +103,14 @@
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
     },
+    "./__internal": {
+      "import": "./lib/zudoku.__internal.js",
+      "types": "./dist/lib/__internal.d.ts"
+    },
+    "./router": {
+      "import": "./lib/zudoku.router.js",
+      "types": "./dist/lib/core/router.d.ts"
+    },
     "./processors/*": {
       "import": "./lib/processors/*.js",
       "types": "./dist/lib/plugins/openapi/processors/*.d.ts"
@@ -164,10 +172,10 @@
     "@radix-ui/react-visually-hidden": "1.2.3",
     "@scalar/openapi-parser": "0.18.0",
     "@sentry/node": "9.26.0",
-    "@shikijs/langs": "3.8.0",
-    "@shikijs/rehype": "3.8.0",
-    "@shikijs/themes": "3.8.0",
-    "@shikijs/transformers": "3.8.0",
+    "@shikijs/langs": "3.8.1",
+    "@shikijs/rehype": "3.8.1",
+    "@shikijs/themes": "3.8.1",
+    "@shikijs/transformers": "3.8.1",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
     "@tailwindcss/typography": "0.5.16",
@@ -234,7 +242,7 @@
     "remark-rehype": "^11.1.2",
     "rollup": "4.45.0",
     "semver": "7.7.2",
-    "shiki": "3.8.0",
+    "shiki": "3.8.1",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",

package/src/app/demo.tsx

@@ -1,7 +1,7 @@
 import logger from "loglevel";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter } from "react-router";
-import { Bootstrap } from "zudoku/components";
+import { Bootstrap } from "zudoku/__internal";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";

package/src/app/entry.client.tsx

@@ -6,7 +6,7 @@ import {
 } from "react-router";
 import config from "virtual:zudoku-config";
 import "vite/modulepreload-polyfill";
-import { Bootstrap } from "zudoku/components";
+import { Bootstrap } from "zudoku/__internal";
 import { getRoutesByConfig } from "./main.js";
 
 const routes = getRoutesByConfig(config);

package/src/app/entry.server.tsx

@@ -11,7 +11,7 @@ import {
   type RouteObject,
 } from "react-router";
 import "vite/modulepreload-polyfill";
-import { BootstrapStatic, ServerError } from "zudoku/components";
+import { BootstrapStatic, ServerError } from "zudoku/__internal";
 import { NO_DEHYDRATE } from "../lib/components/cache.js";
 import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
 import { getRoutesByConfig } from "./main.js";

package/src/app/main.tsx

@@ -15,11 +15,13 @@ import "virtual:zudoku-theme.css";
 import {
   BuildCheck,
   Layout,
+  Meta,
   RouteGuard,
   RouterError,
   StatusPage,
-  Zudoku,
-} from "zudoku/components";
+} from "zudoku/__internal";
+import { Zudoku } from "zudoku/components";
+import { Outlet } from "zudoku/router";
 import type { ZudokuConfig } from "../config/config.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
@@ -110,17 +112,30 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
             buildId={import.meta.env.ZUPLO_BUILD_ID}
             environmentType={import.meta.env.ZUPLO_ENVIRONMENT_TYPE}
           />
-          <Layout />
+          <Outlet />
         </Zudoku>
       ),
       hydrateFallbackElement: <div>Loading...</div>,
       children: [
         {
-          element: <RouteGuard />,
+          element: (
+            <Meta>
+              <RouteGuard />
+            </Meta>
+          ),
           errorElement: <RouterError />,
-          children: routes,
+          children: routes.map((r) =>
+            r.handle?.layout === "none" ? r : wrapWithLayout(r),
+          ),
         },
       ],
     },
   ];
 };
+
+const wrapWithLayout = (route: RouteObject) => {
+  return {
+    element: <Layout />,
+    children: [route],
+  };
+};

package/src/app/standalone.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter } from "react-router";
-import { Bootstrap } from "zudoku/components";
+import { Bootstrap } from "zudoku/__internal";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
 import "../lib/util/logInit.js";

package/src/lib/components/BuildCheck.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect } from "react";
 import { z } from "zod/v4";
 import { Button } from "../ui/Button.js";
 
@@ -32,6 +33,15 @@ export const BuildCheck = ({
         .then((data) => BuildStatusSchema.parse(data)),
   });
 
+  useEffect(() => {
+    if (
+      buildStatusQuery.data?.status === "success" &&
+      buildStatusQuery.data.buildId
+    ) {
+      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
+    }
+  }, [buildStatusQuery.data]);
+
   if (
     buildStatusQuery.isError ||
     !buildStatusQuery.data ||

package/src/lib/components/Header.tsx

@@ -92,7 +92,7 @@ export const Header = memo(function HeaderInner() {
           <div className="flex">
             <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {site?.logo && (
+                {site?.logo ? (
                   <>
                     <img
                       src={logoLightSrc}
@@ -109,8 +109,9 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                   </>
+                ) : (
+                  <span className="font-semibold text-2xl">{site?.title}</span>
                 )}
-                <span className="font-semibold text-2xl">{site?.title}</span>
               </div>
             </Link>
           </div>

package/src/lib/components/Layout.tsx

@@ -1,8 +1,6 @@
-import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router";
+import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
-import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -19,8 +17,7 @@ const LoadingFallback = () => (
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
-  const { meta, authentication, options } = useZudoku();
-  const location = useLocation();
+  const { authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -32,22 +29,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      <Helmet titleTemplate={meta?.title}>
-        {options.canonicalUrlOrigin && (
-          <link
-            rel="canonical"
-            href={joinUrl(
-              options.canonicalUrlOrigin,
-              options.basePath,
-              location.pathname,
-            )}
-          />
-        )}
-        {meta?.description && (
-          <meta name="description" content={meta.description} />
-        )}
-        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
-      </Helmet>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />

package/src/lib/components/Meta.tsx

@@ -0,0 +1,32 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Meta = ({ children }: PropsWithChildren) => {
+  const { meta, options } = useZudoku();
+  const location = useLocation();
+
+  return (
+    <>
+      <Helmet titleTemplate={meta?.title} defaultTitle={meta?.defaultTitle}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+      </Helmet>
+      {children}
+    </>
+  );
+};

package/src/lib/components/context/ZudokuContext.ts

@@ -39,7 +39,7 @@ const getItemPath = (item: NavigationItem) => {
     case "link":
       return item.to;
     case "custom-page":
-      return item.path;
+      return joinUrl(item.path);
     default:
       return undefined;
   }

package/src/lib/components/index.ts

@@ -3,44 +3,26 @@ import { Helmet } from "@zudoku/react-helmet-async";
 import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
-import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
-import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
-import {
-  Bootstrap as BootstrapImport,
-  BootstrapStatic as BootstrapStaticImport,
-} from "./Bootstrap.js";
-import { BuildCheck as BuildCheckImport } from "./BuildCheck.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
-import { StatusPage as StatusPageImport } from "./StatusPage.js";
 import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const Layout = /*@__PURE__*/ LayoutImport;
-export const RouterError = /*@__PURE__*/ RouterErrorImport;
-export const ServerError = /*@__PURE__*/ ServerErrorImport;
-export const Bootstrap = /*@__PURE__*/ BootstrapImport;
-export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
 export const Head = /*@__PURE__*/ Helmet;
-export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
-export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
 

package/src/lib/components/navigation/NavigationItem.tsx

@@ -114,7 +114,7 @@ export const NavigationItem = ({
       );
     case "link":
     case "custom-page": {
-      const href = item.type === "link" ? item.to : item.path;
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
       return !href.startsWith("http") ? (
         <AnchorLink
           to={{
@@ -124,7 +124,9 @@ export const NavigationItem = ({
           }}
           {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
           className={navigationListItem({
-            isActive: href === [location.pathname, activeAnchor].join("#"),
+            isActive:
+              href ===
+              [location.pathname, activeAnchor].filter(Boolean).join("#"),
           })}
           onClick={onRequestClose}
         >

package/src/lib/components/navigation/utils.ts

@@ -58,18 +58,18 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
   const location = useLocation();
 
   return traverseNavigationItem(category, (item) => {
-    if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinUrl(item.link.path);
-      if (categoryLinkPath === location.pathname) {
-        return true;
-      }
-    }
-
-    if (item.type === "doc") {
-      const docPath = joinUrl(item.path);
-      if (docPath === location.pathname) {
-        return true;
-      }
+    switch (item.type) {
+      case "category":
+        if (!item.link) {
+          return undefined;
+        }
+        return joinUrl(item.link.path) === location.pathname ? true : undefined;
+      case "custom-page":
+      case "doc":
+        return joinUrl(item.path) === location.pathname ? true : undefined;
+      case "link":
+      default:
+        return undefined;
     }
   });
 };

package/src/lib/core/ZudokuContext.ts

@@ -5,9 +5,9 @@ import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
 import type { z } from "zod/v4";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
-import {
-  type ProtectedRoutesInput,
-  ProtectedRoutesSchema,
+import type {
+  CallbackContext,
+  ProtectedRoutesInput,
 } from "../../config/validators/ProtectedRoutesSchema.js";
 import type { FooterSchema } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
@@ -48,6 +48,7 @@ export type ApiKeyCache = "api-keys";
 
 type Metadata = Partial<{
   title: string;
+  defaultTitle?: string;
   description: string;
   logo: string;
   favicon: string;
@@ -105,6 +106,23 @@ export type ZudokuContextOptions = {
   };
 };
 
+export const transformProtectedRoutes = (
+  val: ProtectedRoutesInput,
+): Record<string, (c: CallbackContext) => boolean> | undefined => {
+  if (!val) return undefined;
+
+  if (Array.isArray(val)) {
+    return Object.fromEntries(
+      val.map((route) => [
+        route,
+        (c: CallbackContext) => c.auth.isAuthenticated,
+      ]),
+    );
+  }
+
+  return val;
+};
+
 export class ZudokuContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
   public navigation: Navigation;
@@ -123,13 +141,13 @@ export class ZudokuContext {
         const routes = plugin.getProtectedRoutes?.();
         if (!routes) return [];
 
-        return Object.entries(ProtectedRoutesSchema.parse(routes) ?? {});
+        return Object.entries(transformProtectedRoutes(routes) ?? {});
       }),
     );
 
     const protectedRoutes = {
       ...pluginProtectedRoutes,
-      ...ProtectedRoutesSchema.parse(options.protectedRoutes),
+      ...transformProtectedRoutes(options.protectedRoutes),
     };
 
     this.queryClient = queryClient;

package/src/lib/core/__internal.tsx

@@ -0,0 +1,30 @@
+/**
+ * ⚠️
+ * These are re-exports consumed from the main entry point in `src/app/main.tsx`
+ * This is to ensure that they share the exact same context in React.
+ * ⚠️
+ **/
+
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  Bootstrap as BootstrapImport,
+  BootstrapStatic as BootstrapStaticImport,
+} from "../components/Bootstrap.js";
+import { BuildCheck as BuildCheckImport } from "../components/BuildCheck.js";
+import { Layout as LayoutImport } from "../components/Layout.js";
+import { Meta as MetaImport } from "../components/Meta.js";
+import { StatusPage as StatusPageImport } from "../components/StatusPage.js";
+import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
+import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
+import { RouteGuard as RouteGuardImport } from "./RouteGuard.js";
+
+export const Layout = LayoutImport;
+export const RouterError = RouterErrorImport;
+export const ServerError = ServerErrorImport;
+export const Bootstrap = BootstrapImport;
+export const BootstrapStatic = BootstrapStaticImport;
+export const RouteGuard = RouteGuardImport;
+export const Head = Helmet;
+export const StatusPage = StatusPageImport;
+export const BuildCheck = BuildCheckImport;
+export const Meta = MetaImport;

package/src/lib/core/router.ts

@@ -0,0 +1 @@
+export * from "react-router";

package/src/lib/plugins/custom-pages/index.tsx

@@ -20,6 +20,9 @@ export const customPagesPlugin = (
         customPages.push({
           path: item.path,
           element: item.element,
+          handle: {
+            layout: item.layout ?? "default",
+          },
         });
       }
     });

package/src/lib/ui/CodeBlock.tsx

@@ -28,7 +28,7 @@ const IconToLanguageMap: Record<string, RegExp> = {
   toml: /toml/,
   gnubash: /(shell|bash|sh|zsh)/,
   python: /(py|python)/,
-  dotnet: /(cs|csharp|vb)/,
+  dotnet: /(^cs$|csharp|vb)/,
   rust: /(rs|rust)/,
   ruby: /(rb|ruby)/,
   php: /php/,
@@ -101,7 +101,7 @@ export const CodeBlock = ({
       </div>
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-3 [&>code]:py-2",
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&_code]:p-3 [&_code]:py-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Dialog.tsx

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 
-import { XIcon } from "lucide-react";
+import { CircleIcon, XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
 const Dialog = DialogPrimitive.Root;
@@ -45,8 +45,17 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-3 w-3" strokeWidth={2} />
+        <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <CircleIcon
+            className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
+            strokeWidth={2}
+            fill="currentColor"
+          />
+          <XIcon
+            className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
+            strokeWidth={2}
+            fill="currentColor"
+          />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}