zudoku 0.13.1 → 0.13.3

package/lib/zudoku.plugin-api-keys.js

@@ -1,13 +1,13 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-Cb8mGpBO.js";
-import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-QMLhK7Rb.js";
-import { a as N, L as u, O as I } from "./index-BRCiYFaL.js";
-import { u as h, a as E, b as S } from "./ZudokuContext-BEmsYQoq.js";
-import { B as l, n as A } from "./index-g_JJcuFg.js";
-import { D as C } from "./DeveloperHint-CiXPc9Xm.js";
+import { S as x, R as f } from "./SlotletProvider-DmqWiVFt.js";
+import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-a9rLgbP_.js";
+import { a as N, L as u, O as I } from "./index-DFN92YJN.js";
+import { u as h, a as E, b as S } from "./ZudokuContext-MRoel6bS.js";
+import { B as l, n as A } from "./index-_GxJ8hpM.js";
+import { D as C } from "./DeveloperHint-B_QCCafl.js";
 import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
 import { useState as p } from "react";
-import { c as T } from "./cn-BmFQLtkS.js";
+import { a as T } from "./Markdown-Y__eLG0x.js";
 function c(t, s) {
   if (t)
     return;

package/lib/zudoku.plugin-custom-pages.js

@@ -1,18 +1,18 @@
-import { j as s } from "./jsx-runtime-B6kdoens.js";
-import n from "react";
-import { c as a } from "./cn-BmFQLtkS.js";
-import { u as c } from "./useExposedProps-Csw8oAlt.js";
-const u = ({
-  element: e,
-  render: t,
-  prose: o = !0
+import { j as o } from "./jsx-runtime-B6kdoens.js";
+import a from "react";
+import { a as n, P as u } from "./Markdown-Y__eLG0x.js";
+import { u as c } from "./useExposedProps-BWwxa-Hg.js";
+const l = ({
+  element: t,
+  render: s,
+  prose: e = !0
 }) => {
-  const r = c(), m = t ? n.createElement(t, r) : e;
-  return /* @__PURE__ */ s.jsx("div", { className: a(o && "prose max-w-full"), children: m });
-}, f = (e) => ({
-  getRoutes: () => e.map(({ path: t, ...o }) => ({
-    path: t,
-    element: /* @__PURE__ */ s.jsx(u, { ...o })
+  const r = c(), m = s ? a.createElement(s, r) : t;
+  return /* @__PURE__ */ o.jsx("div", { className: n(e && u, "max-w-full"), children: m });
+}, f = (t) => ({
+  getRoutes: () => t.map(({ path: s, ...e }) => ({
+    path: s,
+    element: /* @__PURE__ */ o.jsx(l, { ...e })
   }))
 });
 export {

package/lib/zudoku.plugin-custom-pages.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/CustomPage.tsx","../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../util/cn.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { CustomPageConfig } from \"./index.js\";\n\nexport const CustomPage = ({\n  element,\n  render,\n  prose = true,\n}: Omit<CustomPageConfig, \"path\">) => {\n  const slotletProps = useExposedProps();\n  const content = render ? React.createElement(render, slotletProps) : element;\n\n  return <div className={cn(prose && \"prose max-w-full\")}>{content}</div>;\n};\n","import { type ComponentType, type ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { type ExposedComponentProps } from \"../../components/SlotletProvider.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\nimport { CustomPage } from \"./CustomPage.js\";\n\nexport type CustomPageConfig = {\n  path: string;\n  prose?: boolean;\n  element?: ReactNode;\n  render?: ComponentType<ExposedComponentProps>;\n};\n\nexport const customPagesPlugin = (\n  config: CustomPageConfig[],\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, ...props }) => ({\n        path,\n        element: <CustomPage {...props} />,\n      })),\n  };\n};\n"],"names":["CustomPage","element","render","prose","slotletProps","useExposedProps","content","React","cn","customPagesPlugin","config","path","props","jsx"],"mappings":";;;;AAKO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,MAAsC;AACpC,QAAMC,IAAeC,KACfC,IAAUJ,IAASK,EAAM,cAAcL,GAAQE,CAAY,IAAIH;AAErE,+BAAQ,OAAI,EAAA,WAAWO,EAAGL,KAAS,kBAAkB,GAAI,UAAQG,EAAA,CAAA;AACnE,GCDaG,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,GAAGC,SAAa;AAAA,IAClC,MAAAD;AAAA,IACA,SAASE,gBAAAA,EAAAA,IAACb,GAAY,EAAA,GAAGY,EAAO,CAAA;AAAA,EAAA,EAChC;AAAA;"}
+{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/CustomPage.tsx","../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ProseClasses } from \"../../components/Markdown.js\";\nimport { cn } from \"../../util/cn.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { CustomPageConfig } from \"./index.js\";\n\nexport const CustomPage = ({\n  element,\n  render,\n  prose = true,\n}: Omit<CustomPageConfig, \"path\">) => {\n  const slotletProps = useExposedProps();\n  const content = render ? React.createElement(render, slotletProps) : element;\n\n  return (\n    <div className={cn(prose && ProseClasses, \"max-w-full\")}>{content}</div>\n  );\n};\n","import { type ComponentType, type ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { type ExposedComponentProps } from \"../../components/SlotletProvider.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\nimport { CustomPage } from \"./CustomPage.js\";\n\nexport type CustomPageConfig = {\n  path: string;\n  prose?: boolean;\n  element?: ReactNode;\n  render?: ComponentType<ExposedComponentProps>;\n};\n\nexport const customPagesPlugin = (\n  config: CustomPageConfig[],\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, ...props }) => ({\n        path,\n        element: <CustomPage {...props} />,\n      })),\n  };\n};\n"],"names":["CustomPage","element","render","prose","slotletProps","useExposedProps","content","React","jsx","cn","ProseClasses","customPagesPlugin","config","path","props"],"mappings":";;;;AAMO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,MAAsC;AACpC,QAAMC,IAAeC,KACfC,IAAUJ,IAASK,EAAM,cAAcL,GAAQE,CAAY,IAAIH;AAGnE,SAAAO,gBAAAA,MAAC,SAAI,WAAWC,EAAGN,KAASO,GAAc,YAAY,GAAI,UAAQJ,EAAA,CAAA;AAEtE,GCJaK,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,GAAGC,SAAa;AAAA,IAClC,MAAAD;AAAA,IACA,SAASL,gBAAAA,EAAAA,IAACR,GAAY,EAAA,GAAGc,EAAO,CAAA;AAAA,EAAA,EAChC;AAAA;"}

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const x = (t, e, n) => Object.entries(t).flatMap(([a, p]) => {
   return s ? {
     path: s,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-DBhq6-5F.js"), { default: m, ...l } = await p();
+      const { MdxPage: i } = await import("./MdxPage-B4FcPIi5.js"), { default: m, ...l } = await p();
       return {
         element: /* @__PURE__ */ u.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,15 +1,15 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as u } from "./index-DA74gNq3.js";
-import "./ZudokuContext-BEmsYQoq.js";
+import { o as u } from "./index-dHVZhVNO.js";
+import "./ZudokuContext-MRoel6bS.js";
 import "lucide-react";
 import "zudoku/openapi-worker";
-import "./index-g_JJcuFg.js";
-import "./ErrorPage-B-zoPPVx.js";
-import "./Markdown-D6Nze6qq.js";
+import "./index-_GxJ8hpM.js";
+import "./ErrorPage-DqqAV1dr.js";
+import "./Markdown-Y__eLG0x.js";
 import "./joinPath-B7kNnUX4.js";
 import "./urql-core-KJnLL26g.js";
-import "./router-Oe6YmY6B.js";
-import "./index-BRCiYFaL.js";
+import "./router-BsfSoK2j.js";
+import "./index-DFN92YJN.js";
 export {
   u as openApiPlugin
 };

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./router-Oe6YmY6B.js";
+import { r as o } from "./router-BsfSoK2j.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

package/src/app/main.css

@@ -142,7 +142,6 @@
   .CollapsibleContent {
     --easing: cubic-bezier(0.4, 0, 0.2, 1);
     --slide-offset: -0.75rem;
-    @apply overflow-hidden;
   }
   .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);

package/src/lib/components/MobileTopNavigation.tsx

@@ -22,7 +22,7 @@ export const MobileTopNavigation = () => {
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -24,7 +24,7 @@ export const Sidebar = () => {
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -1,7 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -26,6 +26,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -56,46 +57,54 @@ export const SidebarCategory = ({
 
   return (
     <Collapsible.Root
-      className={cn("flex flex-col", level === 0 && "-mx-[--padding-nav-item]")}
+      className="flex flex-col"
       defaultOpen={isDefaultOpen}
       open={open}
       onOpenChange={() => setOpen(true)}
     >
       <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
         <div
-          className={cn(
-            "text-start",
-            navigationListItem({ isActive: false, isTopLevel: level === 0 }),
-            isCollapsible
-              ? "cursor-pointer"
-              : "cursor-default hover:bg-transparent",
-          )}
+          onClick={() => setHasInteracted(true)}
+          className={navigationListItem({
+            isActive: false,
+            isTopLevel: level === 0,
+            className: [
+              "text-start",
+              isCollapsible
+                ? "cursor-pointer"
+                : "cursor-default hover:bg-transparent",
+            ],
+          })}
         >
           {category.icon && (
             <category.icon
               size={16}
-              className="align-[-0.125em] -translate-x-1"
+              className={cn(
+                "align-[-0.125em] -translate-x-1",
+                isActive && "text-primary",
+              )}
             />
           )}
           {category.link?.type === "doc" ? (
             <NavLink
               to={joinPath(topNavItem?.id, category.link.id)}
               className="flex-1"
-              onClick={() => setHasInteracted(true)}
+              onClick={() => {
+                // if it is the current path and closed then open it because there's no path change to trigger the open
+                if (isActive && !open) {
+                  setOpen(true);
+                }
+              }}
             >
-              {({ isActive }) => (
-                <div
-                  className={cn(
-                    "flex items-center gap-2 justify-between w-full",
-                    isActive
-                      ? "text-primary font-medium"
-                      : "text-foreground/80",
-                  )}
-                >
-                  <div className="truncate">{category.label}</div>
-                  {ToggleButton}
-                </div>
-              )}
+              <div
+                className={cn(
+                  "flex items-center gap-2 justify-between w-full",
+                  isActive ? "text-primary" : "text-foreground/80",
+                )}
+              >
+                <div className="truncate">{category.label}</div>
+                {ToggleButton}
+              </div>
             </NavLink>
           ) : (
             <div className="flex items-center justify-between w-full">
@@ -109,10 +118,9 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "ms-[calc(var(--padding-nav-item)*1.125)]",
         )}
       >
-        <ul className="mt-1 border-l ps-2">
+        <ul className="mt-1 border-l ms-0.5">
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -3,7 +3,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
@@ -16,7 +15,8 @@ export const navigationListItem = cva(
   {
     variants: {
       isTopLevel: {
-        true: "font-semibold",
+        true: "font-medium -mx-[--padding-nav-item]",
+        false: "-mr-[--padding-nav-item] ml-[--padding-nav-item]",
       },
       isActive: {
         true: "text-primary font-medium",
@@ -27,6 +27,9 @@ export const navigationListItem = cva(
         false: "",
       },
     },
+    defaultVariants: {
+      isActive: false,
+    },
   },
 );
 
@@ -58,7 +61,7 @@ export const SidebarItem = ({
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <span className="truncate" title={item.label}>
+              <span className="truncate flex-1" title={item.label}>
                 {item.label}
               </span>
               <SidebarBadge {...item.badge} />
@@ -73,13 +76,11 @@ export const SidebarItem = ({
         <AnchorLink
           to={{ hash: item.href, search: searchParams.toString() }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
-          className={cn(
-            "flex gap-2.5 justify-between",
-            level === 0 && "-mx-[--padding-nav-item]",
-            navigationListItem({
-              isActive: item.href.slice(1) === activeAnchor,
-            }),
-          )}
+          className={navigationListItem({
+            isActive: item.href.slice(1) === activeAnchor,
+            isTopLevel: level === 0,
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
         >
           {item.badge ? (
             <>
@@ -94,7 +95,9 @@ export const SidebarItem = ({
         </AnchorLink>
       ) : !item.href.startsWith("http") ? (
         <NavLink
-          className={cn("flex gap-2.5 justify-between", navigationListItem())}
+          className={navigationListItem({
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
           to={item.href}
         >
           {item.badge ? (
@@ -110,10 +113,7 @@ export const SidebarItem = ({
         </NavLink>
       ) : (
         <a
-          className={cn(
-            navigationListItem({ isTopLevel: level === 0 }),
-            "block",
-          )}
+          className={navigationListItem({ isTopLevel: level === 0 })}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
@@ -121,8 +121,7 @@ export const SidebarItem = ({
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">
-            &nbsp;
-            <ExternalLinkIcon className="inline ml-1" size={12} />
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
           </span>
         </a>
       );

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { ProseClasses } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { useExposedProps } from "../../util/useExposedProps.js";
 import type { CustomPageConfig } from "./index.js";
@@ -11,5 +12,7 @@ export const CustomPage = ({
   const slotletProps = useExposedProps();
   const content = render ? React.createElement(render, slotletProps) : element;
 
-  return <div className={cn(prose && "prose max-w-full")}>{content}</div>;
+  return (
+    <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>
+  );
 };

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -68,14 +68,16 @@ export const MdxPage = ({
           "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header>
-          {category && <CategoryHeading>{category}</CategoryHeading>}
-          {title && (
-            <Heading level={1} id={slugify(title)}>
-              {title}
-            </Heading>
-          )}
-        </header>
+        {(category || title) && (
+          <header>
+            {category && <CategoryHeading>{category}</CategoryHeading>}
+            {title && (
+              <Heading level={1} id={slugify(title)}>
+                {title}
+              </Heading>
+            )}
+          </header>
+        )}
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -129,6 +129,7 @@ export const Playground = ({
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
+        body: data.body ? data.body : undefined,
       });
 
       if (data.identity !== NO_IDENTITY) {

package/lib/ErrorPage-B-zoPPVx.js

@@ -1,15 +0,0 @@
-import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { P as n, C as o, H as i } from "./Markdown-D6Nze6qq.js";
-const c = ({
-  title: r = "An error occurred",
-  message: a,
-  category: s
-}) => /* @__PURE__ */ e.jsxs("div", { className: n + " h-full pt-[--padding-content-top]", children: [
-  s && /* @__PURE__ */ e.jsx(o, { children: s }),
-  r && /* @__PURE__ */ e.jsx(i, { level: 1, className: "flex gap-3.5 items-center", children: r }),
-  /* @__PURE__ */ e.jsx("p", { children: a })
-] });
-export {
-  c as E
-};
-//# sourceMappingURL=ErrorPage-B-zoPPVx.js.map