zudoku 0.4.4-dev.9 → 0.4.5-dev.0

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

@@ -1,9 +1,9 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
 import { S as p, R as g } from "./SlotletProvider-CRKX9y2Z.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-DH_IdyOP.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-BtumfhQu.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-BDDQcRSU.js";
+import { B as l, p as I } from "./index-KUt-5Yzq.js";
 import { D as P } from "./DeveloperHint-Dim4dKeY.js";
 import { useState as h } from "react";
 import { c as d, a as D, C as R, g as q } from "./Markdown-Bg4SS0au.js";

package/lib/zudoku.plugin-markdown.js

@@ -4,7 +4,7 @@ const i = (t, e) => Object.entries(t).flatMap(([a, s]) => {
   return o ? {
     path: o,
     lazy: async () => {
-      const { MdxPage: r } = await import("./MdxPage-DBmhggWT.js"), { default: p, ...m } = await s();
+      const { MdxPage: r } = await import("./MdxPage-C3VDc6a7.js"), { default: p, ...m } = await s();
       return {
         element: /* @__PURE__ */ c.jsx(
           r,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-0hAwyzGD.js";
+import { o as s } from "./index-BfLQd6h_.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-BHNQL3XO.js";
 import "zudoku/openapi-worker";
-import "./Combination-BDDQcRSU.js";
+import "./index-KUt-5Yzq.js";
 import "./ErrorPage-XOZWbKDe.js";
 import "./Markdown-Bg4SS0au.js";
 import "./joinPath-B7kNnUX4.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.4.4-dev.9",
+  "version": "0.4.5-dev.0",
   "type": "module",
   "files": [
     "dist",
@@ -147,6 +147,7 @@
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
+    "vaul": "0.9.1",
     "vite": "5.3.3",
     "yaml": "2.5.0",
     "yargs": "17.7.2",

package/src/lib/components/Header.tsx

@@ -19,6 +19,7 @@ import {
 import { cn } from "../util/cn.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { Search } from "./Search.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { TopNavigation } from "./TopNavigation.js";
@@ -58,9 +59,9 @@ export const Header = memo(function HeaderInner() {
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
-    <header className="sticky top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
+        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -88,12 +89,13 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
+          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full justify-center flex">
               <Search />
             </div>
 
-            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+            <MobileTopNavigation />
+            <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />
               {isAuthEnabled && !isAuthenticated ? (
                 <Button variant="ghost" onClick={() => auth.login()}>
@@ -115,7 +117,6 @@ export const Header = memo(function HeaderInner() {
                   </DropdownMenu>
                 )
               )}
-
               <button
                 type="button"
                 aria-label={

package/src/lib/components/Layout.tsx

@@ -1,6 +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 { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -56,20 +58,33 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
             </main>
           }
         >
-          <Sidebar />
-          <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 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

@@ -0,0 +1,52 @@
+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 {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../ui/Drawer.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const MobileTopNavigation = () => {
+  const { topNavigation } = useZudoku();
+  return (
+    <Drawer direction="right">
+      <div className="flex lg:hidden justify-self-end">
+        <DrawerTrigger className="lg:hidden">
+          <MenuIcon size={22} />
+        </DrawerTrigger>
+      </div>
+      <DrawerContent
+        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </VisuallyHidden>
+        <ul className="flex flex-col items-center gap-4 p-4">
+          {topNavigation.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>
+            </li>
+          ))}
+        </ul>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -12,7 +12,7 @@ export const TopNavigation = () => {
   }
 
   return (
-    <nav className="border-b text-sm px-12 h-[--top-nav-height]">
+    <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
       <ul className="flex flex-row items-center gap-8">
         {topNavigation.map((item) => (
           <li key={item.label}>

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

@@ -1,5 +1,7 @@
 import { useRef } from "react";
 
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { useNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
@@ -10,15 +12,28 @@ export const Sidebar = () => {
   const navigation = useNavigation();
 
   return (
-    <SidebarWrapper
-      ref={navRef}
-      pushMainContent={navigation.data.items.length > 0}
-    >
-      <Slotlet name="zudoku-before-navigation" />
-      {navigation.data.items.map((item) => (
-        <SidebarItem key={item.label} item={item} />
-      ))}
-      <Slotlet name="zudoku-after-navigation" />
-    </SidebarWrapper>
+    <>
+      <SidebarWrapper
+        ref={navRef}
+        pushMainContent={navigation.data.items.length > 0}
+      >
+        <Slotlet name="zudoku-before-navigation" />
+        {navigation.data.items.map((item) => (
+          <SidebarItem key={item.label} item={item} />
+        ))}
+        <Slotlet name="zudoku-after-navigation" />
+      </SidebarWrapper>
+      <DrawerContent
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DrawerTitle>Sidebar</DrawerTitle>
+        </VisuallyHidden>
+        {navigation.data.items.map((item) => (
+          <SidebarItem key={item.label} item={item} />
+        ))}
+      </DrawerContent>
+    </>
   );
 };

package/src/lib/oas/graphql/index.ts

@@ -76,7 +76,7 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
     .flatMap((path) => Object.values(path ?? {}))
     .flatMap((operation) =>
       typeof operation === "object" && "tags" in operation
-        ? operation.tags ?? []
+        ? (operation.tags ?? [])
         : [],
     );
 
@@ -422,7 +422,7 @@ const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
 };
 
 const SchemaSource = builder.enumType("SchemaType", {
-  values: ["url", "json", "yaml"] as const,
+  values: ["url", "file"] as const,
 });
 
 builder.queryType({

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

@@ -85,7 +85,7 @@ export const MdxPage = ({
         {!hidePager && (
           <>
             <hr />
-            <div className="not-prose flex flex-wrap items-center justify-between gap-8">
+            <div className="not-prose flex flex-wrap items-center justify-between gap-2 lg:gap-8">
               {prev ? (
                 <Link
                   to={prev.id}

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -155,7 +155,7 @@ export type SchemaTag = {
   operations: Array<OperationItem>;
 };
 
-export type SchemaType = "json" | "url" | "yaml";
+export type SchemaType = "file" | "url";
 
 export type TagItem = {
   __typename?: "TagItem";

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

@@ -68,8 +68,10 @@ const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   head: "gray",
 };
 
+export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+
 export const openApiPlugin = (
-  config: OasPluginConfig & InternalOasPluginConfig,
+  config: OpenApiPluginOptions,
 ): DevPortalPlugin => {
   const basePath = joinPath(config.navigationId ?? "/reference");
 

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,7 +1,4 @@
-type OasSource =
-  | { type: "url"; input: string }
-  | { type: "yaml"; input: string }
-  | { type: "json"; input: object };
+type OasSource = { type: "url"; input: string } | { type: "file"; input: any };
 
 export type OasPluginConfig = {
   server?: string;

package/src/lib/ui/Drawer.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../util/cn.js";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    hideBar?: boolean;
+  }
+>(({ className, children, hideBar = true, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      {!hideBar && (
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      )}
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};