zudoku 0.4.2-dev.1 → 0.4.2-dev.10

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

@@ -1,12 +1,12 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as p, R as g } from "./SlotletProvider-WwEUzQQ3.js";
-import { u as j, a as u, I as k, S as v, b as w, c as b, d as K, e as N, f as y } from "./Input-CBiLCRuK.js";
+import { S as p, R as g } from "./SlotletProvider-Bdzag6MN.js";
+import { u as j, a as u, I as k, S as v, b as w, c as b, d as K, e as N, f as y } from "./Input-BqnnTL7-.js";
 import { e as E, L as x, O as A } from "./index-ChhUJhLT.js";
 import { u as m, t as C, j as S } from "./ZudokuContext-BHNQL3XO.js";
-import { B as l, p as I } from "./Combination-Ce1nWgn5.js";
-import { D as P } from "./DeveloperHint-BQSFXH01.js";
+import { B as l, p as I } from "./Combination-C1wKWZ28.js";
+import { D as P } from "./DeveloperHint-Bv958_pY.js";
 import { useState as h } from "react";
-import { c as d, a as D, C as R, g as q } from "./Markdown-h11bKkQ9.js";
+import { c as d, a as D, C as R, g as q } from "./Markdown-C3hatKS5.js";
 /**
  * @license lucide-react v0.378.0 - ISC
  *

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

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-h11bKkQ9.js";
+import { P as o } from "./Markdown-C3hatKS5.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const u = (t, e) => Object.entries(t).flatMap(([a, r]) => {
   return {
     path: s.at(-1) === "index" ? s.slice(0, -1).join("/") : o,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-AzVbIhda.js"), { default: p, ...c } = await r();
+      const { MdxPage: i } = await import("./MdxPage-BEG8cDoF.js"), { default: p, ...c } = await r();
       return {
         element: /* @__PURE__ */ m.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,11 +1,11 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-D2SS6ne_.js";
+import { o as s } from "./index-ClDFRC39.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-BHNQL3XO.js";
 import "zudoku/openapi-worker";
-import "./Combination-Ce1nWgn5.js";
-import "./ErrorPage-uwQIn-3A.js";
-import "./Markdown-h11bKkQ9.js";
+import "./Combination-C1wKWZ28.js";
+import "./ErrorPage-CcBjrY_g.js";
+import "./Markdown-C3hatKS5.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-BiRCp01d.js";
 import "./index-ChhUJhLT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.4.2-dev.1",
+  "version": "0.4.2-dev.10",
   "type": "module",
   "files": [
     "dist",
@@ -138,7 +138,7 @@
     "semver": "7.6.2",
     "slugify": "1.6.6",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.3.0",
+    "tailwind-merge": "2.5.2",
     "tailwindcss": "3.4.4",
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
@@ -175,7 +175,7 @@
     "react-markdown": "9.0.1",
     "react-router-dom": "6.25.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tsx": "4.16.5",
+    "tsx": "4.18.0",
     "typescript": "5.5.3"
   },
   "peerDependencies": {

package/src/app/main.css

@@ -91,9 +91,12 @@
   }
 
   html,
-  body,
+  body {
+    @apply h-full;
+  }
+
   #root {
-    @apply h-full min-h-screen;
+    @apply min-h-screen grid grid-rows-[var(--header-height)_1fr] w-full;
   }
   * {
     @apply border-border;
@@ -102,11 +105,11 @@
   html {
     scroll-padding-block: var(--scroll-padding);
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    padding-left: var(--scrollbar-width);
+    @apply -mr-[--scrollbar-width];
   }
 
   body {
-    @apply antialiased bg-background text-foreground;
+    @apply antialiased bg-background text-foreground overflow-y-auto overflow-x-clip;
     font-feature-settings:
       "rlig" 1,
       "calt" 1;
@@ -172,6 +175,16 @@
     }
   }
 
+  .scrollbar {
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar:hover {
+    scrollbar-color: hsla(var(--border)) transparent;
+  }
+
   .scrollbar::-webkit-scrollbar {
     padding: 2px;
     width: 12px;

package/src/lib/components/DeveloperHint.tsx

@@ -8,9 +8,7 @@ export const DeveloperHint = ({
   children: ReactNode;
   className?: string;
 }) => {
-  // TODO: figure out a way to do that in consumer dev mode not "internal"
-  //  so this doesn't get stripped out in the build
-  if (!import.meta.env.DEV) return;
+  if (process.env.NODE_ENV !== "development") return;
 
   return (
     <Callout type="caution" title="Developer hint" className={className}>

package/src/lib/components/Header.tsx

@@ -58,8 +58,7 @@ export const Header = memo(function HeaderInner() {
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
-    // padding-left is to prevent layout jumping when scrollbar appears/disappears
-    <header className="fixed top-0 z-10 bg-background/80 backdrop-blur left-0 right-0 pl-[var(--scrollbar-width)]">
+    <header className="sticky top-0 z-10 bg-background/80 backdrop-blur w-full">
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
           <div className="flex">

package/src/lib/components/Layout.tsx

@@ -47,19 +47,20 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Header />
 
-      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
+      <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense
           fallback={
-            <div className="grid h-full place-items-center">
+            <main className="grid h-full place-items-center">
               <Spinner />
-            </div>
+            </main>
           }
         >
           <Sidebar />
           <main
             className={cn(
-              "dark:border-white/10 translate-x-0 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",
             )}

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

@@ -103,10 +103,13 @@ export const SidebarCategory = ({
         <ul className="mt-1 border-l ps-2">
           {category.items.map((item) => (
             <SidebarItem
-              key={item.label}
+              key={
+                ("id" in item ? item.id : "") +
+                ("href" in item ? item.href : "") +
+                item.label
+              }
               level={level + 1}
               item={item}
-              // activeAnchor={activeAnchor}
             />
           ))}
         </ul>

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

@@ -14,7 +14,7 @@ export const SidebarWrapper = forwardRef<
     className={cn(
       "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
       "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+      "w-[--side-nav-width] h-full scroll-pt-2 gap-2",
       className,
     )}
     ref={ref}

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

@@ -89,7 +89,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page

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

@@ -163,7 +163,7 @@ export const openApiPlugin = (
         .filter((tag) => tag.operations.length > 0)
         .map<SidebarItem>((tag) => ({
           type: "category",
-          label: tag.name ?? "",
+          label: tag.name || "Other endpoints",
           collapsible: true,
           collapsed: false,
           items: tag.operations.map((operation) => ({

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

@@ -223,9 +223,13 @@ export const Playground = ({
               </Button>
             </div>
             <Tabs
-              defaultValue={pathParams.length > 0 ? "parameters" : "headers"}
+              defaultValue={
+                queryParams.length + pathParams.length > 0
+                  ? "parameters"
+                  : "headers"
+              }
             >
-              <div className="flex justify-between">
+              <div className="flex flex-wrap gap-1 justify-between">
                 <TabsList>
                   {queryParams.length + pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>
@@ -292,7 +296,7 @@ export const Playground = ({
               </TabsContent>
             </Tabs>
           </div>
-          <div className="flex flex-col gap-4 p-8 bg-muted/70">
+          <div className="p-8 bg-muted/70">
             {queryMutation.error ? (
               <div className="flex flex-col gap-2">
                 {formState.pathParams.some((p) => p.value === "") && (
@@ -325,7 +329,6 @@ export const Playground = ({
                     <div>Size: {queryMutation.data.size} B</div>
                   </div>
                 </div>
-                {/*<UrlDisplay host={host} path={url} />*/}
                 <Tabs defaultValue="response">
                   <TabsList>
                     <TabsTrigger value="response">Response</TabsTrigger>
@@ -343,7 +346,10 @@ export const Playground = ({
                     />
                   </TabsContent>
                   <TabsContent value="headers">
-                    <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                    <Card
+                      // playground dialog has h-5/6 ≈ 83.333vh
+                      className="max-h-[calc(83.333vh-140px)] overflow-y-auto grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4"
+                    >
                       <div className="font-semibold">Key</div>
                       <div className="font-semibold">Value</div>
                       {headerEntries.map(([key, value]) => (

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

@@ -55,7 +55,8 @@ export const ResponseTab = ({
           }
           noBackground
           showLanguageIndicator
-          className="overflow-x-auto p-4 text-xs max-h-[480px]"
+          // playground dialog has h-5/6 ≈ 83.333vh
+          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={view === "raw" ? body : beautifiedBody}
         />
       </Card>

package/lib/DeveloperHint-BQSFXH01.js

@@ -1,10 +0,0 @@
-import "./jsx-runtime-B6kdoens.js";
-const n = ({
-  children: e,
-  className: r
-}) => {
-};
-export {
-  n as D
-};
-//# sourceMappingURL=DeveloperHint-BQSFXH01.js.map

package/lib/DeveloperHint-BQSFXH01.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeveloperHint-BQSFXH01.js","sources":["../src/lib/components/DeveloperHint.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Callout } from \"../ui/Callout.js\";\n\nexport const DeveloperHint = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  // TODO: figure out a way to do that in consumer dev mode not \"internal\"\n  //  so this doesn't get stripped out in the build\n  if (!import.meta.env.DEV) return;\n\n  return (\n    <Callout type=\"caution\" title=\"Developer hint\" className={className}>\n      <div className=\"flex flex-col gap-2\">\n        <div>{children}</div>\n        <small className=\"italic\">\n          Note: This hint is only shown in development mode.\n        </small>\n      </div>\n    </Callout>\n  );\n};\n"],"names":["DeveloperHint","children","className"],"mappings":";AAGO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,WAAAC;AACF,MAGM;AAeN;"}