zudoku 0.26.0 → 0.26.1

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

@@ -1,10 +1,10 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-D3ayHjP-.js";
-import { b as y } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { u as b } from "./ZudokuContext-DeQZEp-x.js";
+import { b as y } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
 import { u as w } from "./state-mM7uaXTW.js";
-import { M as C } from "./Markdown-BrfrjEk_.js";
+import { M as C } from "./Markdown-DFN6p0J-.js";
 import { c as h } from "./cn-qaFjX9_3.js";
 const f = (r, n) => j(`${r}-${n}`), k = ({
   items: r,

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

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { RotateCwIcon as g, TrashIcon as f, EyeOffIcon as j, EyeIcon as v, CheckIcon as w, CopyIcon as b, FileKey2Icon as K } from "lucide-react";
-import { D as k, S as m, R as N } from "./SlotletProvider-DPbx9KdU.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-_3zzX_g_.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-DkOpAG0c.js";
+import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-D3O7wISy.js";
 import { a as P } from "./index.esm-CrSoEshU.js";
-import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-D3ayHjP-.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-DeQZEp-x.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-DUyACbIK.js";
+import { u as F } from "./hook-BRQEDRbn.js";
 import { useState as p } from "react";
 import { c as T } from "./cn-qaFjX9_3.js";
 const L = ({ service: t }) => {

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

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-BrfrjEk_.js";
+import { P as n } from "./Markdown-DFN6p0J-.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-BBHR7aLM.js";
+import { u as p } from "./useExposedProps-CetwhZpP.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-LNZLj_A5.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-D9c4z09Q.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
 import "./jsx-runtime-Bdg6XQ1m.js";
-import "./chunk-SYFQ2XB5-KWlHsT7t.js";
-import { o as a } from "./index-CaILD1AV.js";
-import "./ZudokuContext-D3ayHjP-.js";
+import "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { o as a } from "./index-CXRrqOIl.js";
+import "./ZudokuContext-DeQZEp-x.js";
 import "lucide-react";
-import "./hook-DUyACbIK.js";
+import "./hook-BRQEDRbn.js";
 import "./ui/Button.js";
 export {
   a as openApiPlugin

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { r as o } from "./chunk-SYFQ2XB5-BF5IDYrB.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.26.0",
+  "version": "0.26.1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

package/src/app/main.css

@@ -238,57 +238,57 @@
   }
 
   /* Theme */
-  
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 95%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.75rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 240 10% 3.9%;
+      --card: 0 0% 100%;
+      --card-foreground: 240 10% 3.9%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 240 10% 3.9%;
+      --primary: 240 5.9% 10%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 240 5.9% 10%;
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 240 5.9% 10%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 5.9% 95%;
+      --input: 240 5.9% 90%;
+      --ring: 240 5.9% 10%;
+      --radius: 0.75rem;
+      --chart-1: 12 76% 61%;
+      --chart-2: 173 58% 39%;
+      --chart-3: 197 37% 24%;
+      --chart-4: 43 74% 66%;
+      --chart-5: 27 87% 67%;
+    }
+
+    .dark {
+      --background: 240 10% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 240 10% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 240 10% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 240 5.9% 10%;
+      --secondary: 240 3.7% 15.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 240 3.7% 15.9%;
+      --muted-foreground: 240 5% 64.9%;
+      --accent: 240 3.7% 15.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 3.7% 15.9%;
+      --input: 240 3.7% 15.9%;
+      --ring: 240 4.9% 83.9%;
+      --chart-1: 220 70% 50%;
       --chart-2: 160 60% 45%;
       --chart-3: 30 80% 55%;
       --chart-4: 280 65% 60%;

package/src/lib/authentication/providers/auth0.tsx

@@ -35,10 +35,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       providerData: null,
     });
 
-    const redirectUrl = new URL(
-      window.location.origin + this.logoutRedirectUrlPath,
-    );
-
+    const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0

package/src/lib/authentication/providers/openid.tsx

@@ -2,6 +2,7 @@ import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
@@ -49,8 +50,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected callbackUrlPath = "/oauth/callback";
-  protected logoutRedirectUrlPath = "/";
+  protected callbackUrlPath: string;
+  protected logoutRedirectUrlPath: string;
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
@@ -67,6 +68,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -74,9 +76,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
+    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+
+    const root = joinUrl(basePath, "/");
+
+    this.logoutRedirectUrlPath = root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
   }
 
   protected async getAuthServer() {

package/src/lib/components/Autocomplete.tsx

@@ -0,0 +1,111 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useCommandState } from "cmdk";
+import { useRef, useState, type Ref } from "react";
+import {
+  Command,
+  CommandInlineInput,
+  CommandItem,
+  CommandList,
+} from "zudoku/ui/Command.js";
+import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
+import { cn } from "../util/cn.js";
+
+type AutocompleteProps = {
+  value: string;
+  options: readonly string[];
+  onChange: (e: string) => void;
+  className?: string;
+  placeholder?: string;
+  onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  ref?: Ref<HTMLInputElement>;
+};
+
+const AutocompletePopover = ({
+  value,
+  options,
+  onChange,
+  className,
+  placeholder = "Enter value",
+  onEnterPress,
+  ref,
+}: AutocompleteProps) => {
+  const [open, setOpen] = useState(false);
+  const [dontClose, setDontClose] = useState(false);
+  const count = useCommandState((state) => state.filtered.count);
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <Popover open={open}>
+      <PopoverAnchor>
+        <CommandInlineInput
+          ref={(el) => {
+            inputRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          value={value}
+          placeholder={placeholder}
+          className={cn("h-9 bg-transparent", className)}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            if (dontClose) {
+              return;
+            }
+            setOpen(false);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              setOpen(false);
+              inputRef.current?.blur();
+              onEnterPress?.(e);
+            }
+          }}
+          onValueChange={(e) => onChange(e)}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        onMouseEnter={() => setDontClose(true)}
+        onMouseLeave={() => setDontClose(false)}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+          "border-0": count === 0,
+        })}
+        align="start"
+        side="bottom"
+        onWheel={(e) => {
+          // See: https://github.com/radix-ui/primitives/issues/1159
+          e.stopPropagation();
+        }}
+        onTouchMove={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <CommandList className="max-h-[140px]">
+          {options.map((enumValue) => (
+            <CommandItem
+              key={enumValue}
+              value={enumValue}
+              onSelect={(selected) => {
+                onChange(selected);
+                setOpen(false);
+              }}
+              className="cursor-pointer"
+            >
+              {enumValue}
+            </CommandItem>
+          ))}
+        </CommandList>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const Autocomplete = (props: AutocompleteProps) => {
+  return (
+    <Command className="bg-transparent">
+      <AutocompletePopover {...props} />
+    </Command>
+  );
+};

package/src/lib/components/Header.tsx

@@ -16,7 +16,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -76,7 +76,7 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.light)
                           ? page.logo.src.light
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.light,
                             )
@@ -90,7 +90,7 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.dark,
                             )

package/src/lib/components/index.ts

@@ -6,14 +6,14 @@ 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 { Spinner as SpinnerImport } from "./Spinner.js";
-import { Markdown as MarkdownImport } from "./Markdown.js";
 import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
 } from "./Bootstrap.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { Layout as LayoutImport } from "./Layout.js";
+import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Spinner as SpinnerImport } from "./Spinner.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -2,7 +2,7 @@ import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren, useEffect } from "react";
-import { Link } from "react-router";
+import { Link, useHref } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
@@ -51,6 +51,13 @@ export const MdxPage = ({
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
+  let canonicalUrl = null;
+  const path = useHref("");
+  if (typeof window !== "undefined") {
+    const domain = window.location.origin;
+    canonicalUrl = `${domain}${path}`;
+  }
+
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
@@ -87,6 +94,7 @@ export const MdxPage = ({
       <Helmet>
         <title>{pageTitle}</title>
         {excerpt && <meta name="description" content={excerpt} />}
+        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       </Helmet>
       <div
         className={cn(

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

@@ -1,20 +1,24 @@
 import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
+import { Content } from "./SidecarExamples.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
   servers,
   operation,
+  examples,
 }: {
   server: string;
   servers?: string[];
   operation: OperationListItemResult;
+  examples?: Content;
 }) => {
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .map((p) => ({
       name: p.name,
       defaultValue: p.examples?.find((x) => x.value)?.value ?? "",
+      defaultActive: false,
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
@@ -39,6 +43,7 @@ export const PlaygroundDialogWrapper = ({
       headers={headers}
       queryParams={queryParams}
       pathParams={pathParams}
+      examples={examples}
     />
   );
 };

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

@@ -198,6 +198,7 @@ export const Sidecar = ({
               server={result.data.schema.url}
               servers={result.data.schema.servers.map((server) => server.url)}
               operation={operation}
+              examples={requestBodyContent ?? undefined}
             />
           )}
         </SidecarBox.Head>

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

@@ -0,0 +1,51 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { Content, Example } from "../SidecarExamples.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: Content;
+  onSelect: (example: Example) => void;
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Use Example</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        {examples.map((example) => {
+          return (
+            <div key={example.mediaType}>
+              <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                {example.examples?.map((example) => {
+                  return (
+                    <DropdownMenuItem
+                      key={example.name}
+                      onSelect={() => onSelect(example)}
+                    >
+                      {example.name}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuGroup>
+            </div>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ExamplesDropdown;