zudoku 0.0.0-monetization-standalone.z2a065bd9 → 0.0.0-money-plugin.z605c614d

package/src/lib/components/index.ts

@@ -1,46 +1,26 @@
-import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
-import { Helmet } from "@zudoku/react-helmet-async";
-import { useTheme as useThemeImport } from "next-themes";
-import { Link as LinkImport } from "react-router";
-import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { Button as ButtonImport } from "../ui/Button.js";
-import { Callout as CalloutImport } from "../ui/Callout.js";
-import { ZudokuError as ZudokuErrorImport } from "../util/invariant.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
-import {
-  CACHE_KEYS as CACHE_KEYS_IMPORT,
-  useCache as useCacheImport,
-} from "./cache.js";
-import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Heading as HeadingImport } from "./Heading.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";
+export { Helmet as Head } from "@zudoku/react-helmet-async";
+export { Link } from "react-router";
+export { Button } from "../ui/Button.js";
+export { Callout } from "../ui/Callout.js";
+export { ZudokuError } from "../util/invariant.js";
+export { ClientOnly } from "./ClientOnly.js";
+export { Heading } from "./Heading.js";
+export { Markdown } from "./Markdown.js";
+export { Search } from "./Search.js";
+export { Slot } from "./Slot.js";
+export { Spinner } from "./Spinner.js";
+export { Typography } from "./Typography.js";
+export { Zudoku } from "./Zudoku.js";
 
-export const Head = /*@__PURE__*/ Helmet;
-export const Heading = /*@__PURE__*/ HeadingImport;
-export const Callout = /*@__PURE__*/ CalloutImport;
-export const Markdown = /*@__PURE__*/ MarkdownImport;
-export const Spinner = /*@__PURE__*/ SpinnerImport;
-export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
-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;
-export const ZudokuError = /*@__PURE__*/ ZudokuErrorImport;
+//
 
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+export { useMDXComponents } from "@mdx-js/react";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
+export { useTheme } from "next-themes";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useAuth = /*@__PURE__*/ useAuthImport;
+export { useAuth } from "../authentication/hook.js";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useCache = /*@__PURE__*/ useCacheImport;
+export { CACHE_KEYS, useCache } from "./cache.js";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
-/** @deprecated Import from `zudoku/hooks` instead */
-export const useTheme = /*@__PURE__*/ useThemeImport;
+export { useZudoku } from "./context/ZudokuContext.js";

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

@@ -2,6 +2,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { Slot } from "../Slot.js";
+import { NavigationFilterProvider } from "./NavigationFilterContext.js";
 import { NavigationItem } from "./NavigationItem.js";
 import { NavigationWrapper } from "./NavigationWrapper.js";
 
@@ -12,7 +13,7 @@ export const Navigation = ({
   onRequestClose?: () => void;
   navigation: NavigationItemType[];
 }) => (
-  <>
+  <NavigationFilterProvider>
     <NavigationWrapper>
       <Slot.Target name="navigation-before" />
       {navigation.map((item) => (
@@ -30,7 +31,7 @@ export const Navigation = ({
       <Slot.Target name="navigation-after" />
     </NavigationWrapper>
     <DrawerContent
-      className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
+      className="lg:hidden h-dvh start-0 w-[320px] rounded-none"
       aria-describedby={undefined}
     >
       <div className="p-4 overflow-y-auto overscroll-none">
@@ -46,5 +47,5 @@ export const Navigation = ({
         ))}
       </div>
     </DrawerContent>
-  </>
+  </NavigationFilterProvider>
 );

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

@@ -7,6 +7,7 @@ import { Button } from "zudoku/ui/Button.js";
 import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinUrl } from "../../util/joinUrl.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
 import { NavigationItem } from "./NavigationItem.js";
 import { navigationListItem, useIsCategoryOpen } from "./utils.js";
 
@@ -20,6 +21,7 @@ const NavigationCategoryInner = ({
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
   const location = useLocation();
+  const { query: filterQuery } = useNavigationFilter();
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -37,6 +39,13 @@ const NavigationCategoryInner = ({
     }
   }, [isCategoryOpen]);
 
+  // Auto-expand when there's an active filter query
+  useEffect(() => {
+    if (filterQuery.trim()) {
+      setOpen(true);
+    }
+  }, [filterQuery]);
+
   const ToggleButton = isCollapsible && (
     <Button
       onClick={(e) => {

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

@@ -0,0 +1,28 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+
+type NavigationFilterContextType = {
+  query: string;
+  setQuery: (query: string) => void;
+};
+
+const NavigationFilterContext = createContext<NavigationFilterContextType>({
+  query: "",
+  setQuery: () => {},
+});
+
+export const NavigationFilterProvider = ({ children }: PropsWithChildren) => {
+  const [query, setQuery] = useState("");
+
+  return (
+    <NavigationFilterContext.Provider value={{ query, setQuery }}>
+      {children}
+    </NavigationFilterContext.Provider>
+  );
+};
+
+export const useNavigationFilter = () => useContext(NavigationFilterContext);

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

@@ -0,0 +1,35 @@
+import { SearchIcon, XIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "zudoku/ui/InputGroup.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+
+export const NavigationFilterInput = ({
+  placeholder,
+}: {
+  placeholder?: string;
+}) => {
+  const { query, setQuery } = useNavigationFilter();
+
+  return (
+    <InputGroup className="my-2">
+      <InputGroupAddon>
+        <SearchIcon className="size-3.5" />
+      </InputGroupAddon>
+      <InputGroupInput
+        type="text"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      {query && (
+        <InputGroupButton onClick={() => setQuery("")}>
+          <XIcon className="size-3" />
+        </InputGroupButton>
+      )}
+    </InputGroup>
+  );
+};

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

@@ -1,6 +1,7 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router";
+import { Separator } from "zudoku/ui/Separator.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
@@ -11,6 +12,8 @@ import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+import { NavigationFilterInput } from "./NavigationFilterInput.js";
 import { navigationListItem, shouldShowItem } from "./utils.js";
 
 const TruncatedLabel = ({
@@ -65,8 +68,9 @@ export const NavigationItem = ({
   const { activeAnchor } = useViewportAnchor();
   const auth = useAuth();
   const context = useZudoku();
+  const { query } = useNavigationFilter();
 
-  if (!shouldShowItem(auth, context)(item)) {
+  if (!shouldShowItem(auth, context, query)(item)) {
     return null;
   }
 
@@ -75,6 +79,18 @@ export const NavigationItem = ({
       return (
         <NavigationCategory category={item} onRequestClose={onRequestClose} />
       );
+    case "separator":
+      return (
+        <Separator className="my-1 mx-auto w-[calc(100%-var(--padding-nav-item)*2)]!" />
+      );
+    case "section":
+      return (
+        <div className="mt-4 px-(--padding-nav-item) text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          {item.label}
+        </div>
+      );
+    case "filter":
+      return <NavigationFilterInput placeholder={item.placeholder} />;
     case "doc":
       return (
         <NavLink

package/src/lib/components/navigation/utils.ts

@@ -86,6 +86,13 @@ export const usePrevNext = (): {
   let foundCurrent = false;
 
   traverseNavigation(navigation, (item) => {
+    if (
+      item.type === "separator" ||
+      item.type === "section" ||
+      item.type === "filter"
+    )
+      return;
+
     const itemId =
       item.type === "doc"
         ? joinUrl(item.path)
@@ -133,9 +140,33 @@ export const navigationListItem = cva(
   },
 );
 
+export const itemMatchesFilter = (
+  item: NavigationItem,
+  query: string,
+): boolean => {
+  if (["separator", "section", "filter"].includes(item.type)) {
+    return true;
+  }
+  if (item.label?.toLowerCase().includes(query.toLowerCase())) {
+    return true;
+  }
+
+  if (item.type === "category") {
+    return item.items.some((child) => itemMatchesFilter(child, query));
+  }
+
+  return false;
+};
+
 export const shouldShowItem =
-  (auth: UseAuthReturn, context: ZudokuContext) =>
+  (auth: UseAuthReturn, context: ZudokuContext, filterQuery?: string) =>
   (item: NavigationItem): boolean => {
+    if (item.type === "filter") return true;
+
+    if (filterQuery?.trim() && !itemMatchesFilter(item, filterQuery)) {
+      return false;
+    }
+
     if (typeof item.display === "function") {
       return item.display({ context, auth });
     }

package/src/lib/hooks/index.ts

@@ -1,16 +1,7 @@
-import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
-import { useTheme as useThemeImport } from "next-themes";
-import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { CACHE_KEYS, useCache as useCacheImport } from "../components/cache.js";
-import { useZudoku as useZudokuImport } from "../components/context/ZudokuContext.js";
-import { useExposedProps as useExposedPropsImport } from "../util/useExposedProps.js";
-import { useEvent as useEventImport } from "./useEvent.js";
-
-export const useEvent = /*@__PURE__*/ useEventImport;
-export const useTheme = /*@__PURE__*/ useThemeImport;
-export const useExposedProps = /*@__PURE__*/ useExposedPropsImport;
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const useAuth = /*@__PURE__*/ useAuthImport;
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useCache = /*@__PURE__*/ useCacheImport;
-export { CACHE_KEYS };
+export { useMDXComponents } from "@mdx-js/react";
+export { useTheme } from "next-themes";
+export { useAuth } from "../authentication/hook.js";
+export { CACHE_KEYS, useCache } from "../components/cache.js";
+export { useZudoku } from "../components/context/ZudokuContext.js";
+export { useExposedProps } from "../util/useExposedProps.js";
+export { useEvent } from "./useEvent.js";

package/src/lib/oas/graphql/circular.test.ts

@@ -156,16 +156,20 @@ describe("handleCircularRefs", () => {
     });
   });
 
-  it("should deduplicate shared object instances with __$ref", () => {
+  it("should handle shared object instances with __$ref without marking circular", () => {
     const shared = { __$ref: "#/components/schemas/Foo", type: "string" };
     const obj = { a: shared, b: shared };
     const result = handleCircularRefs(obj);
 
+    // Both should return the cached result, not mark as circular
     expect(result.a).toEqual({
       __$ref: "#/components/schemas/Foo",
       type: "string",
     });
-    expect(result.b).toBe(`${SCHEMA_REF_PREFIX}#/components/schemas/Foo`);
+    expect(result.b).toEqual({
+      __$ref: "#/components/schemas/Foo",
+      type: "string",
+    });
   });
 
   it("should mark circular ref with property name from path", () => {
@@ -183,4 +187,35 @@ describe("handleCircularRefs", () => {
 
     expect(result.properties.child.properties.back).toContain(CIRCULAR_REF);
   });
+
+  // Exact reproduction of #1869 - shared object instances with __$ref
+  it("should NOT mark shared object instances with __$ref as circular (issue #1869)", () => {
+    // When dereferencing, the SAME object instance is returned for all refs to the same schema
+    const timestampSchema = {
+      __$ref: "#/components/schemas/timestamp",
+      type: "string",
+      format: "date-time",
+    };
+
+    // Both created_at and updated_at point to the SAME object instance
+    const obj = {
+      type: "object",
+      properties: {
+        created_at: timestampSchema,
+        updated_at: timestampSchema,
+      },
+    };
+
+    const result = handleCircularRefs(obj);
+
+    // The first one should be fully expanded
+    expect(result.properties.created_at).toEqual({
+      __$ref: "#/components/schemas/timestamp",
+      type: "string",
+      format: "date-time",
+    });
+    // The second one should ALSO be fully expanded (not marked as circular)
+    expect(typeof result.properties.updated_at).toBe("object");
+    expect(result.properties.updated_at).not.toContain(CIRCULAR_REF);
+  });
 });

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

@@ -1,6 +1,5 @@
 import { GraphQLScalarType } from "graphql/index.js";
 import { GraphQLJSON } from "graphql-type-json";
-import type { RecordAny } from "../../util/traverse.js";
 
 export const CIRCULAR_REF = "$[Circular Reference]";
 export const SCHEMA_REF_PREFIX = "$ref:";
@@ -17,73 +16,48 @@ const OPENAPI_PROPS = new Set([
 export const handleCircularRefs = (
   // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   obj: any,
-  visited = new WeakSet(),
+  currentPath = new WeakSet(),
   refs = new WeakMap(),
   path: string[] = [],
-  seenRefPaths = new Set<string>(),
+  currentRefPaths = new Set<string>(),
   // biome-ignore lint/suspicious/noExplicitAny: Allow any type
 ): any => {
   if (obj === null || typeof obj !== "object") return obj;
 
   const refPath = obj.__$ref;
+  const isCircular =
+    currentPath.has(obj) ||
+    (typeof refPath === "string" && currentRefPaths.has(refPath));
 
-  // Check if this object has a __$ref marker (set during schema code generation)
-  // If we've already fully processed this ref path, return a reference marker
-  // instead of the full data to avoid JSON.stringify serializing duplicates
-  if (typeof refPath === "string" && seenRefPaths.has(refPath)) {
-    return SCHEMA_REF_PREFIX + refPath;
-  }
-
-  if (visited.has(obj)) {
-    const cached = refs.get(obj);
-    if (cached) {
-      return typeof refPath === "string"
-        ? // If already processed, return ref marker to avoid duplicate serialization
-          SCHEMA_REF_PREFIX + refPath
-        : cached;
-    }
+  if (isCircular) {
+    if (typeof refPath === "string") return SCHEMA_REF_PREFIX + refPath;
     const circularProp = path.find((p) => !OPENAPI_PROPS.has(p)) || path[0];
-
     return [CIRCULAR_REF, circularProp].filter(Boolean).join(":");
   }
 
-  visited.add(obj);
+  if (refs.has(obj)) return refs.get(obj);
 
-  // Add refPath BEFORE recursing to detect cycles within this branch
-  // This will be removed after processing to allow siblings with the same ref
-  if (typeof refPath === "string") {
-    seenRefPaths.add(refPath);
-  }
+  currentPath.add(obj);
+  if (typeof refPath === "string") currentRefPaths.add(refPath);
 
-  let result: RecordAny | RecordAny[];
-  if (Array.isArray(obj)) {
-    result = obj.map((item, index) =>
-      handleCircularRefs(
-        item,
-        visited,
-        refs,
-        [...path, index.toString()],
-        seenRefPaths,
-      ),
+  const recurse = (value: unknown, key: string) =>
+    handleCircularRefs(
+      value,
+      currentPath,
+      refs,
+      [...path, key],
+      currentRefPaths,
     );
-  } else {
-    result = {};
-    for (const [key, value] of Object.entries(obj)) {
-      result[key] = handleCircularRefs(
-        value,
-        visited,
-        refs,
-        [...path, key],
-        seenRefPaths,
+
+  const result = Array.isArray(obj)
+    ? obj.map((item, i) => recurse(item, i.toString()))
+    : Object.fromEntries(
+        Object.entries(obj).map(([k, v]) => [k, recurse(v, k)]),
       );
-    }
-  }
-  refs.set(obj, result);
 
-  // Remove refPath after processing so sibling refs aren't incorrectly marked
-  if (typeof refPath === "string") {
-    seenRefPaths.delete(refPath);
-  }
+  refs.set(obj, result);
+  currentPath.delete(obj);
+  if (typeof refPath === "string") currentRefPaths.delete(refPath);
 
   return result;
 };

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

@@ -1,6 +1,7 @@
 import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
-import { flattenAllOfProcessor } from "../../util/flattenAllOf.js";
+import { flattenAllOf } from "../../util/flattenAllOf.js";
+import { traverse } from "../../util/traverse.js";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
@@ -104,11 +105,21 @@ export const validate = async (schemaInput: unknown) => {
   const dereferenced = await dereference(schema);
   const upgraded = upgradeSchema(dereferenced);
 
-  const flattened = await flattenAllOfProcessor({
-    schema: upgraded,
-    file: "schema.json",
-    dereference: async (schema) => schema,
-  });
+  const flattened = traverse(upgraded, (spec) => {
+    if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
+      return spec;
+    }
+    const isSchemaObject =
+      "type" in spec ||
+      "properties" in spec ||
+      "allOf" in spec ||
+      "anyOf" in spec ||
+      "oneOf" in spec;
+
+    if (!isSchemaObject) return spec;
+
+    return flattenAllOf(spec) as typeof spec;
+  }) as OpenAPIDocument;
 
   return flattened;
 };

package/src/lib/plugins/openapi/playground/fileUtils.ts

@@ -4,6 +4,10 @@ export function isBinaryContentType(contentType: string) {
   );
 }
 
+export function isAudioContentType(contentType: string) {
+  return /^audio\//i.test(contentType);
+}
+
 export const extractFileName = (
   headers: Array<[string, string]>,
   url: string,

package/src/lib/plugins/openapi/playground/result-panel/AudioPlayer.tsx

@@ -0,0 +1,50 @@
+import { DownloadIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+
+export const AudioPlayer = ({
+  blob,
+  fileName,
+  size,
+  onDownload,
+}: {
+  blob: Blob;
+  fileName: string;
+  size: number;
+  onDownload: () => void;
+}) => {
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setAudioUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [blob]);
+
+  if (!audioUrl) {
+    return (
+      <div className="p-4 text-center">
+        <div className="text-sm text-muted-foreground">Loading audio...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 text-center">
+      <div className="flex flex-col items-center gap-4">
+        {/* biome-ignore lint/a11y/useMediaCaption: API response audio cannot have predefined captions */}
+        <audio controls src={audioUrl} className="w-full max-w-md">
+          Your browser does not support the audio element.
+        </audio>
+        <Button onClick={onDownload} className="flex items-center gap-2">
+          <DownloadIcon className="h-4 w-4" />
+          Download {fileName} ({humanFileSize(size)})
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -32,6 +32,8 @@ import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
 } from "../CollapsibleHeader.js";
+import { isAudioContentType } from "../fileUtils.js";
+import { AudioPlayer } from "./AudioPlayer.js";
 import { convertToTypes } from "./convertToTypes.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
@@ -50,9 +52,14 @@ const mimeTypeToLanguage = (mimeType: string) => {
   )?.[1];
 };
 
+const getContentType = (headers: Array<[string, string]>) => {
+  return (
+    headers.find(([key]) => key.toLowerCase() === "content-type")?.[1] || ""
+  );
+};
+
 const detectLanguage = (headers: Array<[string, string]>) => {
-  const contentType =
-    headers.find(([key]) => key.toLowerCase() === "content-type")?.[1] || "";
+  const contentType = getContentType(headers);
   return mimeTypeToLanguage(contentType);
 };
 
@@ -293,23 +300,32 @@ export const ResponseTab = ({
       </div>
       <div className="flex-1">
         {isBinary ? (
-          <div className="p-4 text-center">
-            <div className="flex flex-col items-center gap-4">
-              <div className="text-lg font-semibold">Binary Content</div>
-              <div className="text-sm text-muted-foreground">
-                This response contains binary data that cannot be displayed as
-                text.
+          blob && isAudioContentType(getContentType(headers)) ? (
+            <AudioPlayer
+              blob={blob}
+              fileName={fileName ?? "audio"}
+              size={size}
+              onDownload={handleDownload}
+            />
+          ) : (
+            <div className="p-4 text-center">
+              <div className="flex flex-col items-center gap-4">
+                <div className="text-lg font-semibold">Binary Content</div>
+                <div className="text-sm text-muted-foreground">
+                  This response contains binary data that cannot be displayed as
+                  text.
+                </div>
+                <Button
+                  onClick={handleDownload}
+                  className="flex items-center gap-2"
+                  disabled={!blob}
+                >
+                  <DownloadIcon className="h-4 w-4" />
+                  Download {fileName || "file"} ({humanFileSize(size)})
+                </Button>
               </div>
-              <Button
-                onClick={handleDownload}
-                className="flex items-center gap-2"
-                disabled={!blob}
-              >
-                <DownloadIcon className="h-4 w-4" />
-                Download {fileName || "file"} ({humanFileSize(size)})
-              </Button>
             </div>
-          </div>
+          )
         ) : (
           <SyntaxHighlight
             className="text-xs flex-1"