zudoku 0.0.0-fix-create-zudoku-run-build.fefccf58 → 0.0.0-reset-hash-value.ac516c6d

package/src/lib/components/LanguageIcon.tsx

@@ -0,0 +1,181 @@
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  lazy,
+  Suspense,
+  type SVGProps,
+} from "react";
+
+type Language = {
+  pattern: RegExp;
+  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
+  width?: number;
+};
+
+const Languages: Record<string, Language> = {
+  typescript: {
+    pattern: /^(ts|typescript)$/,
+    icon: lazy(() => import("../assets/language-icons/typescript.js")),
+    width: 15,
+  },
+  javascript: {
+    pattern: /^(js|javascript)$/,
+    icon: lazy(() => import("../assets/language-icons/javascript.js")),
+  },
+  react: {
+    pattern: /^(react|tsx|jsx)$/,
+    icon: lazy(() => import("../assets/language-icons/react.js")),
+    width: 22,
+  },
+  markdown: {
+    pattern: /^(md|markdown)$/,
+    icon: lazy(() => import("../assets/language-icons/markdown.js")),
+    width: 22,
+  },
+  mdx: {
+    pattern: /^mdx$/,
+    icon: lazy(() => import("../assets/language-icons/mdx.js")),
+    width: 28,
+  },
+  java: {
+    pattern: /^(java)$/,
+    icon: lazy(() => import("../assets/language-icons/java.js")),
+    width: 22,
+  },
+  json: {
+    pattern: /^jsonc?$/,
+    icon: lazy(() => import("../assets/language-icons/json.js")),
+  },
+  yaml: {
+    pattern: /^yaml$/,
+    icon: lazy(() => import("../assets/language-icons/yaml.js")),
+  },
+  toml: {
+    pattern: /^toml$/,
+    icon: lazy(() => import("../assets/language-icons/toml.js")),
+  },
+  shell: {
+    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
+    icon: lazy(() => import("../assets/language-icons/shell.js")),
+  },
+  python: {
+    pattern: /^(py|python)$/,
+    icon: lazy(() => import("../assets/language-icons/python.js")),
+  },
+  csharp: {
+    pattern: /^(cs|csharp|vb)$/,
+    icon: lazy(() => import("../assets/language-icons/csharp.js")),
+    width: 20,
+  },
+  rust: {
+    pattern: /^(rs|rust)$/,
+    icon: lazy(() => import("../assets/language-icons/rust.js")),
+    width: 20,
+  },
+  ruby: {
+    pattern: /^(rb|ruby)$/,
+    icon: lazy(() => import("../assets/language-icons/ruby.js")),
+  },
+  php: {
+    pattern: /^php$/,
+    icon: lazy(() => import("../assets/language-icons/php.js")),
+    width: 24,
+  },
+  html: {
+    pattern: /^html?$/,
+    icon: lazy(() => import("../assets/language-icons/html.js")),
+    width: 15,
+  },
+  css: {
+    pattern: /^css$/,
+    icon: lazy(() => import("../assets/language-icons/css.js")),
+  },
+  objectivec: {
+    pattern: /^(objc|objectivec)$/,
+    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
+    width: 16,
+  },
+  swift: {
+    pattern: /^swift$/,
+    icon: lazy(() => import("../assets/language-icons/swift.js")),
+  },
+  go: {
+    pattern: /^go$/,
+    icon: lazy(() => import("../assets/language-icons/go.js")),
+    width: 28,
+  },
+  xml: {
+    pattern: /^xml$/,
+    icon: lazy(() => import("../assets/language-icons/xml.js")),
+  },
+  kotlin: {
+    pattern: /^(kt|kotlin)$/,
+    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
+    width: 14,
+  },
+  graphql: {
+    pattern: /^(gql|graphql)$/,
+    icon: lazy(() => import("../assets/language-icons/graphql.js")),
+  },
+  zig: {
+    pattern: /^zig$/,
+    icon: lazy(() => import("../assets/language-icons/zig.js")),
+    width: 28,
+  },
+  scala: {
+    pattern: /^scala$/,
+    icon: lazy(() => import("../assets/language-icons/scala.js")),
+    width: 18,
+  },
+  dart: {
+    pattern: /^dart$/,
+    icon: lazy(() => import("../assets/language-icons/dart.js")),
+    width: 20,
+  },
+  ocaml: {
+    pattern: /^ocaml$/,
+    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
+    width: 20,
+  },
+  c: {
+    pattern: /^c$/,
+    icon: lazy(() => import("../assets/language-icons/c.js")),
+    width: 20,
+  },
+  cpp: {
+    pattern: /^(cpp|c\+\+)$/,
+    icon: lazy(() => import("../assets/language-icons/cpp.js")),
+    width: 20,
+  },
+  commonlisp: {
+    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
+    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
+    width: 18,
+  },
+  elixir: {
+    pattern: /^elixir$/,
+    icon: lazy(() => import("../assets/language-icons/elixir.js")),
+    width: 18,
+  },
+  powershell: {
+    pattern: /^(pshell|powershell|ps1)$/,
+    icon: lazy(() => import("../assets/language-icons/powershell.js")),
+    width: 18,
+  },
+};
+
+export const LanguageIcon = ({ language }: { language?: string }) => {
+  if (!language) return null;
+
+  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
+
+  if (!Lang) return null;
+
+  const size = Lang.width ?? 18;
+
+  return (
+    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
+      <Lang.icon className="h-auto" style={{ width: size }} />
+    </Suspense>
+  );
+};

package/src/lib/components/Main.tsx

@@ -27,7 +27,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         />
       )}
       {hasNavigation && (
-        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
+        <div className="lg:hidden m-0 p-0 md:-mx-4 md:px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>

package/src/lib/components/Meta.tsx

@@ -25,6 +25,19 @@ export const Meta = ({ children }: PropsWithChildren) => {
           <meta name="description" content={meta.description} />
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+        {meta?.generator && <meta name="generator" content={meta.generator} />}
+        {meta?.applicationName && (
+          <meta name="application-name" content={meta.applicationName} />
+        )}
+        {meta?.referrer && <meta name="referrer" content={meta.referrer} />}
+        {meta?.keywords && meta.keywords.length > 0 && (
+          <meta name="keywords" content={meta.keywords.join(", ")} />
+        )}
+        {meta?.authors?.map((author) => (
+          <meta key={author} name="author" content={author} />
+        ))}
+        {meta?.creator && <meta name="creator" content={meta.creator} />}
+        {meta?.publisher && <meta name="publisher" content={meta.publisher} />}
       </Helmet>
       {children}
     </>

package/src/lib/components/cache.ts

@@ -1,17 +1,21 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
 
 export const CACHE_KEYS = Object.freeze({
   API_IDENTITIES: ["api-identities"],
 });
 
+type CacheKey = keyof typeof CACHE_KEYS;
+
 export const useCache = () => {
   const queryClient = useQueryClient();
+  const invalidateCache = useCallback(
+    (key: CacheKey) =>
+      queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] }),
+    [queryClient],
+  );
 
-  return {
-    invalidateCache: async (key: keyof typeof CACHE_KEYS) => {
-      await queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] });
-    },
-  };
+  return { invalidateCache };
 };
 
 /**

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

@@ -1,10 +1,11 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { matchPath, useLocation } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { useAuthState } from "../../authentication/state.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS } from "../cache.js";
+import { CACHE_KEYS, useCache } from "../cache.js";
 import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -23,6 +24,14 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+  const { isAuthenticated } = useAuthState();
+  const { invalidateCache } = useCache();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      invalidateCache("API_IDENTITIES");
+    }
+  }, [isAuthenticated, invalidateCache]);
 
   return useQuery({
     queryFn: getApiIdentities,

package/src/lib/components/index.ts

@@ -12,6 +12,7 @@ import {
 } from "./cache.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
 import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
@@ -25,6 +26,7 @@ export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
+export const Slot = /*@__PURE__*/ SlotImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -144,7 +144,7 @@ export const NavigationItem = ({
         <a
           className={navigationListItem()}
           href={href}
-          target="_blank"
+          target={"target" in item ? item.target : "_blank"}
           rel="noopener noreferrer"
           onClick={onRequestClose}
         >

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

@@ -111,18 +111,34 @@ export const getAllTags = (
     ),
   );
 
-  return [
+  const result = [
     // Keep root tags that are actually used in operations
     ...rootTags
       .filter((tag) => operationTags.has(tag.name))
       .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
-    ...[...operationTags]
+    ...Array.from(operationTags)
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
       .map((tag) => ({ name: tag, slug: slugs[tag] })),
     // Add untagged operations if there are any
     ...(hasUntaggedOperations ? [{ name: undefined, slug: undefined }] : []),
   ];
+
+  // Apply x-tagGroups ordering if present
+  const tagGroups = (schema as any)["x-tagGroups"] ?? [];
+
+  if (tagGroups.length === 0) return result;
+
+  const groupOrder = tagGroups.flatMap((group: any) => group.tags);
+  return result.sort((a, b) => {
+    if (!a.name || !b.name) return 0; // Keep untagged at end
+    const indexA = groupOrder.indexOf(a.name);
+    const indexB = groupOrder.indexOf(b.name);
+    if (indexA === -1 && indexB === -1) return 0; // Keep original order for ungrouped
+    if (indexA === -1) return 1; // Ungrouped after grouped
+    if (indexB === -1) return -1; // Grouped before ungrouped
+    return indexA - indexB;
+  });
 };
 
 export const getAllSlugs = (
@@ -176,11 +192,21 @@ export const getAllOperations = (
         ...operationParameters,
       ];
 
+      // servers follow the OpenAPI 3.0 resolution hierarchy:
+      // 1. Operation-level servers (highest precedence)
+      // 2. Path-level servers
+      // 3. Global servers (handled at query time, lowest precedence)
+      const pathServers = value.servers ?? [];
+      const operationServers = operation.servers ?? [];
+      const servers =
+        operationServers.length > 0 ? operationServers : pathServers;
+
       return {
         ...operation,
         method,
         path,
         parameters,
+        servers,
         tags: operation.tags ?? [],
       } satisfies GraphQLOperationObject;
     }),
@@ -424,6 +450,15 @@ const OperationItem = builder
         type: [ParameterItem],
         nullable: true,
       }),
+      servers: t.field({
+        type: [ServerItem],
+        resolve: (parent, _, ctx) => {
+          // Return operation/path-level servers if defined, otherwise fall back to global servers
+          return parent.servers && parent.servers.length > 0
+            ? parent.servers
+            : (ctx.schema.servers ?? []);
+        },
+      }),
       requestBody: t.field({
         type: RequestBodyObject,
         resolve: (parent) => ({

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -62,6 +62,13 @@ export const Catalog = ({
                   <Markdown
                     className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
                     content={api.description}
+                    components={{
+                      // Because we're wrapping the description in a Link already,
+                      // we need to strip out other links to not get a hydration error, like:
+                      // > In HTML, <a> cannot be a descendant of <a>.
+                      // > This will cause a hydration error.
+                      a: (props) => <span {...props} />,
+                    }}
                   />
                 </div>
               </Link>

package/src/lib/plugins/api-keys/CreateApiKeyDialog.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import { Button } from "../../ui/Button.js";
+import { CreateApiKey } from "./CreateApiKey.js";
+import type { ApiKeyService } from "./index.js";
+
+interface CreateApiKeyDialogProps {
+  service: ApiKeyService;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: ReactNode;
+  buttonVariant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+}
+
+export const CreateApiKeyDialog = ({
+  service,
+  isOpen,
+  onOpenChange,
+  trigger,
+  buttonVariant = "outline",
+}: CreateApiKeyDialogProps) => {
+  const defaultTrigger = (
+    <Button variant={buttonVariant}>Create API Key</Button>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger ?? defaultTrigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create API Key</DialogTitle>
+        </DialogHeader>
+        <CreateApiKey service={service} onOpenChange={onOpenChange} />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/lib/plugins/api-keys/SettingsApiKeys.tsx

@@ -6,9 +6,6 @@ import {
 import {
   CheckIcon,
   CircleSlashIcon,
-  CopyIcon,
-  EyeIcon,
-  EyeOffIcon,
   PencilLineIcon,
   RefreshCwIcon,
   TrashIcon,
@@ -16,7 +13,6 @@ import {
 } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import React, { useState } from "react";
-import { Link } from "react-router";
 import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
@@ -29,13 +25,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "zudoku/ui/Dialog.js";
+import { Secret } from "zudoku/ui/Secret.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
-import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
-import { CreateApiKey } from "./CreateApiKey.js";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog.js";
 import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
@@ -186,23 +182,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         <h1 className="font-medium text-2xl">API Keys</h1>
 
         {service.createKey && (
-          <Dialog
-            open={isCreateApiKeyOpen}
+          <CreateApiKeyDialog
+            service={service}
+            isOpen={isCreateApiKeyOpen}
             onOpenChange={setIsCreateApiKeyOpen}
-          >
-            <DialogTrigger asChild>
-              <Button variant="outline">Create API Key</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Create API Key</DialogTitle>
-              </DialogHeader>
-              <CreateApiKey
-                service={service}
-                onOpenChange={setIsCreateApiKeyOpen}
-              />
-            </DialogContent>
-          </Dialog>
+          />
         )}
       </div>
       <p>Create, manage, and monitor your API keys</p>
@@ -236,9 +220,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
               {service.createKey && "Get started and create your first key."}
             </p>
             {service.createKey && (
-              <Button asChild variant="outline">
-                <Link to="/settings/api-keys/new">Create API Key</Link>
-              </Button>
+              <CreateApiKeyDialog
+                service={service}
+                isOpen={isCreateApiKeyOpen}
+                onOpenChange={setIsCreateApiKeyOpen}
+              />
             )}
           </div>
         ) : (
@@ -438,7 +424,6 @@ const RevealApiKey = ({
   className?: string;
 }) => {
   const [revealed, setRevealed] = useState(false);
-  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   const { key, createdOn, expiresOn } = apiKey;
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
@@ -452,44 +437,13 @@ const RevealApiKey = ({
   return (
     <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
-        <div className="flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1">
-          <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
-            <div
-              className={cn(
-                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
-                (expiresSoon || isExpired) && "bg-neutral-200",
-              )}
-            ></div>
-            <span className="w-full truncate">
-              <div
-                className={cn(
-                  "w-40 inline-block md:w-full truncate",
-                  revealed ? "" : "opacity-20",
-                )}
-              >
-                {revealed
-                  ? key.slice(0, -5)
-                  : "**** ".repeat(key.slice(0, -5).length / 5) +
-                    "*".repeat(key.slice(0, -5).length % 5)}
-              </div>
-              <span>{key.slice(-5)}</span>
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            onClick={() => setRevealed((prev) => !prev)}
-            size="icon"
-          >
-            {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => copyToClipboard(key)}
-            size="icon"
-          >
-            {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
-          </Button>
-        </div>
+        <Secret
+          className="max-w-fit w-full"
+          secret={key}
+          status={isExpired ? "expired" : expiresSoon ? "expiring" : "active"}
+          revealed={revealed}
+          onReveal={setRevealed}
+        />
         <div className="flex gap-1 mt-0.5 text-nowrap">
           {createdOn && (
             <span className="text-xs text-muted-foreground">