zudoku 0.57.0 → 0.58.0

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

@@ -16,7 +16,7 @@ import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { useAuth } from "../../hooks/index.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { type ApiKeyService } from "./index.js";
+import type { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description?: string; expiresOn?: string };
 

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

@@ -36,7 +36,7 @@ import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
 import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
 import { CreateApiKey } from "./CreateApiKey.js";
-import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
+import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
@@ -90,7 +90,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -136,7 +136,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -290,7 +290,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                           </div>
                         </div>
                       ) : (
-                        <>{consumers.label}</>
+                        consumers.label
                       )}
                       <div className="text-muted-foreground text-xs">
                         {consumers.createdOn}
@@ -444,8 +444,7 @@ const RevealApiKey = ({
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
   const daysUntilExpiry = expiresOn
     ? Math.ceil(
-        (new Date(expiresOn).getTime() - new Date().getTime()) /
-          (1000 * 60 * 60 * 24),
+        (new Date(expiresOn).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
       )
     : Infinity;
   const expiresSoon = daysUntilExpiry <= 7 && !isExpired;

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

@@ -1,12 +1,12 @@
 import { KeyRoundIcon } from "lucide-react";
-import { type RouteObject } from "react-router";
-import { UseAuthReturn } from "../../authentication/hook.js";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
-import {
-  type ApiIdentityPlugin,
-  type ProfileMenuPlugin,
-  type ZudokuPlugin,
+import type { RouteObject } from "react-router";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type {
+  ApiIdentityPlugin,
+  ProfileMenuPlugin,
+  ZudokuPlugin,
 } from "../../core/plugins.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { RouterError } from "../../errors/RouterError.js";
 import invariant from "../../util/invariant.js";
 import { ProtectedRoute } from "./ProtectedRoute.js";
@@ -140,7 +140,7 @@ const createDefaultHandler = (
     },
     getConsumers: async (context) => {
       const request = new Request(
-        DEFAULT_API_KEY_ENDPOINT + `/${deploymentName}/consumers`,
+        `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers`,
       );
       await context.signRequest(request);
 

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { RouteObject } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { traverseNavigation } from "../../components/navigation/utils.js";

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

@@ -6,15 +6,15 @@ import { type PropsWithChildren, useEffect } from "react";
 import { Button } from "zudoku/ui/Button.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
-import { Pagination } from "../../components/Pagination.js";
-import { Typography } from "../../components/Typography.js";
 import { Toc } from "../../components/navigation/Toc.js";
 import {
   useCurrentItem,
   usePrevNext,
 } from "../../components/navigation/utils.js";
+import { Pagination } from "../../components/Pagination.js";
+import { Typography } from "../../components/Typography.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
-import { type MarkdownPluginDefaultOptions, type MDXImport } from "./index.js";
+import type { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 declare global {
   interface Window {
@@ -171,8 +171,8 @@ export const MdxPage = ({
           <>
             <div className="h-px bg-border mt-2 mb-6" />
             <Pagination
-              prev={prev ? { to: prev.id, label: prev.label } : undefined}
-              next={next ? { to: next.id, label: next.label } : undefined}
+              prev={prev ? { to: prev.id, label: prev.label ?? "" } : undefined}
+              next={next ? { to: next.id, label: next.label ?? "" } : undefined}
               className="mb-10"
             />
           </>

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

@@ -1,6 +1,6 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
-import { type JSX } from "react";
+import type { JSX } from "react";
 import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 

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

@@ -1,5 +1,5 @@
 import { useTheme } from "next-themes";
-import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import { type CSSProperties, type ReactNode, useEffect, useRef } from "react";
 import { cn } from "../../util/cn.js";
 import { pastellize } from "../../util/pastellize.js";
 
@@ -86,6 +86,8 @@ export const ColorizedParam = ({
   }, [normalizedSlug]);
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Just passing props through
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Just passing props through
     <span
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(

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

@@ -54,9 +54,9 @@ export const Endpoint = () => {
 
   const { servers } = result.data.schema;
 
-  if (servers.length === 0) return null;
+  const firstServer = servers.at(0);
 
-  const firstServer = servers.at(0)!;
+  if (!firstServer) return null;
 
   if (servers.length === 1) {
     return (

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

@@ -4,7 +4,7 @@ import { joinPath } from "../../util/joinPath.js";
 import type { GraphQLClient } from "./client/GraphQLClient.js";
 import { GraphQLProvider } from "./client/GraphQLContext.js";
 import { OasConfigProvider } from "./context.js";
-import { type OasPluginConfig } from "./interfaces.js";
+import type { OasPluginConfig } from "./interfaces.js";
 import { getVersions } from "./util/getRoutes.js";
 
 export const OasProvider = ({
@@ -25,6 +25,7 @@ export const OasProvider = ({
       config.type === "file"
         ? {
             type: config.type,
+            // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
             input: version ? config.input[version]! : firstVersion!,
           }
         : { type: config.type, input: config.input };

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

@@ -1,4 +1,4 @@
-import { type ResultOf } from "@graphql-typed-document-node/core";
+import type { ResultOf } from "@graphql-typed-document-node/core";
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
@@ -16,16 +16,16 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { Pagination } from "../../components/Pagination.js";
-import { useApiIdentities } from "../../components/context/ZudokuContext.js";
-import { Endpoint } from "./Endpoint.js";
-import { OperationListItem } from "./OperationListItem.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
+import { Endpoint } from "./Endpoint.js";
 import { graphql } from "./graphql/index.js";
 import { UNTAGGED_PATH } from "./index.js";
+import { OperationListItem } from "./OperationListItem.js";
 import { useSelectedServer } from "./state.js";
 import { sanitizeMarkdownForMetatag } from "./util/sanitizeMarkdownForMetatag.js";
 
@@ -258,6 +258,7 @@ export const OperationList = ({
             <div className="flex flex-col gap-4 sm:items-end">
               {showVersions && (
                 <Select
+                  // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
                   onValueChange={(version) => navigate(versions[version]!)}
                   defaultValue={version}
                   disabled={!hasMultipleVersions}

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

@@ -6,13 +6,13 @@ import { Markdown } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
-import { OperationsFragment } from "./OperationList.js";
-import { ParameterList } from "./ParameterList.js";
-import { Sidecar } from "./Sidecar.js";
 import { ResponseContent } from "./components/ResponseContent.js";
 import { SelectOnClick } from "./components/SelectOnClick.js";
 import { useOasConfig } from "./context.js";
 import { type FragmentType, useFragment } from "./graphql/index.js";
+import { OperationsFragment } from "./OperationList.js";
+import { ParameterList } from "./ParameterList.js";
+import { Sidecar } from "./Sidecar.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { methodForColor } from "./util/methodToColor.js";
 
@@ -86,23 +86,21 @@ export const OperationListItem = ({
               content={operation.description}
             />
           )}
-          {operation.parameters && operation.parameters.length > 0 && (
-            <>
-              {PARAM_GROUPS.flatMap((group) =>
-                groupedParameters[group]?.length ? (
-                  <ParameterList
-                    key={group}
-                    summary={operation.summary ?? undefined}
-                    id={operation.slug}
-                    parameters={groupedParameters[group]}
-                    group={group}
-                  />
-                ) : (
-                  []
-                ),
-              )}
-            </>
-          )}
+          {operation.parameters &&
+            operation.parameters.length > 0 &&
+            PARAM_GROUPS.flatMap((group) =>
+              groupedParameters[group]?.length ? (
+                <ParameterList
+                  key={group}
+                  summary={operation.summary ?? undefined}
+                  id={operation.slug}
+                  parameters={groupedParameters[group]}
+                  group={group}
+                />
+              ) : (
+                []
+              ),
+            )}
           {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
             <div className="mt-4 flex flex-col gap-4">
               <Heading

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

@@ -1,7 +1,7 @@
 import { ChevronsLeftRightIcon } from "lucide-react";
 import { isValidElement, useState } from "react";
 import { InlineCode } from "../../components/InlineCode.js";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 
 const Pattern = ({ pattern }: { pattern: string }) => {
@@ -76,6 +76,7 @@ export const ParamInfos = ({
   return (
     <span className={className}>
       {filteredItems.map((item, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
         <span className="text-muted-foreground" key={index}>
           {item}
           {index < filteredItems.length - 1 && (

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

@@ -2,14 +2,14 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
+import type { SchemaObject } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { ColorizedParam } from "./ColorizedParam.js";
+import { EnumValues } from "./components/EnumValues.js";
+import { SelectOnClick } from "./components/SelectOnClick.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParamInfos } from "./ParamInfos.js";
-import { EnumValues } from "./components/EnumValues.js";
-import { SelectOnClick } from "./components/SelectOnClick.js";
 import { SchemaExampleAndDefault } from "./schema/SchemaExampleAndDefault.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { isArrayType } from "./schema/utils.js";

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

@@ -1,7 +1,7 @@
 import { useAuth } from "zudoku/components";
 import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { type Content } from "./SidecarExamples.js";
+import type { Content } from "./SidecarExamples.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
@@ -26,7 +26,7 @@ export const PlaygroundDialogWrapper = ({
         p.schema?.default ?? p.examples?.find((x) => x.value)?.value ?? "",
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
     }));
 
@@ -37,7 +37,7 @@ export const PlaygroundDialogWrapper = ({
       name: p.name,
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
       defaultValue: p.schema?.default,
     }));

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

@@ -1,8 +1,8 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { cn } from "../../util/cn.js";
+import type { ResponseItem } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SidecarExamples } from "./SidecarExamples.js";
-import type { ResponseItem } from "./graphql/graphql.js";
 
 export const ResponsesSidecarBox = ({
   responses,

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

@@ -8,9 +8,9 @@ import type { SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { useOnScreen } from "../../util/useOnScreen.js";
-import { useCreateQuery } from "./client/useCreateQuery.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import { ColorizedParam } from "./ColorizedParam.js";
+import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
 import type { OperationListItemResult } from "./OperationList.js";
@@ -174,6 +174,7 @@ export const Sidecar = ({
                   language={selectedLang}
                   noBackground
                   className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
+                  // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";

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

@@ -1,7 +1,7 @@
 import {
   Children,
   createContext,
-  ReactNode,
+  type ReactNode,
   useContext,
   useEffect,
   useState,

package/src/lib/plugins/openapi/client/GraphQLContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, type ReactNode } from "react";
-import { GraphQLClient } from "./GraphQLClient.js";
+import type { GraphQLClient } from "./GraphQLClient.js";
 
 export const GraphQLContext = createContext<GraphQLClient | undefined>(
   undefined,

package/src/lib/plugins/openapi/client/createServer.ts

@@ -13,7 +13,6 @@ export const createServer = (config: OpenApiPluginOptions) =>
       schemaImports: config.schemaImports,
     },
     plugins: [
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       useLogger({
         logFn: (eventName, { args }) => {
           if (import.meta.env.PROD) return;
@@ -24,7 +23,7 @@ export const createServer = (config: OpenApiPluginOptions) =>
             const startEvent = eventName.replace("-end", "-start");
             const start = map.get(`${startEvent}-${args.operationName}`);
             if (start) {
-              // eslint-disable-next-line no-console
+              // biome-ignore lint/suspicious/noConsole: Logging allowed here
               console.log(
                 `[zudoku:debug] ${args.operationName} query took ${performance.now() - start}ms`,
               );

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -8,8 +8,9 @@ type NoExtraProps<T, U extends T = T> = U & {
   [K in Exclude<keyof U, keyof T>]?: never;
 };
 
-type VarArgs<TVariables> =
-  TVariables extends Record<string, never> ? [] : [NoExtraProps<TVariables>];
+type VarArgs<TVariables> = TVariables extends Record<string, never>
+  ? []
+  : [NoExtraProps<TVariables>];
 
 export const createQuery = <TResult, TVariables>(
   client: GraphQLClient,

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

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import { type OasPluginContext } from "./interfaces.js";
+import type { OasPluginContext } from "./interfaces.js";
 
 const OasContext = createContext<{ config: OasPluginContext } | undefined>(
   undefined,

package/src/lib/plugins/openapi/graphql/fragment-masking.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import type {
   DocumentTypeDecoration,
   ResultOf,

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

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import * as types from "./graphql.js";
 
 /**

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

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import type { DocumentTypeDecoration } from "@graphql-typed-document-node/core";
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;

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

@@ -1,16 +1,16 @@
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { matchPath } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
-import { type ZudokuPlugin } from "../../core/plugins.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
 import { createQuery } from "./client/useCreateQuery.js";
 import type { GetNavigationOperationsQuery as GetNavigationOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
-import { type OasPluginConfig } from "./interfaces.js";
+import type { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createNavigationCategory } from "./util/createNavigationCategory.js";
@@ -133,6 +133,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const versionParam = match?.params.version;
         const version = versionParam ?? getVersions(config).at(0);
         const { type } = config;
+        // biome-ignore lint/style/noNonNullAssertion: version is guaranteed to be defined
         const input = type === "file" ? config.input[version!] : config.input;
 
         const query = createQuery(client, GetNavigationOperationsQuery, {
@@ -160,7 +161,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
               return [
                 tag.name,
                 createNavigationCategory({
-                  label: tag.name,
+                  label: tag.extensions?.["x-displayName"] ?? tag.name,
                   path: categoryPath,
                   operations: tag.operations,
                   collapsed: isCollapsed,

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

@@ -1,7 +1,7 @@
-import { type AuthState } from "../../authentication/state.js";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
-import { type OperationListItemResult } from "./OperationList.js";
+import type { OperationListItemResult } from "./OperationList.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -19,12 +19,14 @@ type Example = {
   name: string;
   description?: string | null;
   externalValue?: string | null;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   value?: any | null;
   summary?: string | null;
 };
 
 type Content = {
   mediaType: string;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   schema?: any | null;
   encoding?: Array<{
     name: string;

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

@@ -3,13 +3,13 @@ import { useFormContext } from "react-hook-form";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
-import { type Content } from "../SidecarExamples.js";
+import type { Content } from "../SidecarExamples.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
-import { type PlaygroundForm } from "./Playground.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 export const BodyPanel = ({ content }: { content?: Content }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();

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

@@ -24,7 +24,7 @@ import {
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { type Header, type PlaygroundForm } from "./Playground.js";
+import type { Header, PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
   "Accept",

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

@@ -10,7 +10,7 @@ import {
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
 import { Label } from "zudoku/ui/Label.js";
-import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import type { ApiIdentity } from "../../../core/ZudokuContext.js";
 import IdentitySelector from "./IdentitySelector.js";
 
 const IdentityDialog = ({

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

@@ -1,6 +1,6 @@
 import { Label } from "zudoku/ui/Label.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
-import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import type { ApiIdentity } from "../../../core/ZudokuContext.js";
 import { NO_IDENTITY } from "./Playground.js";
 
 const IdentitySelector = ({

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

@@ -23,7 +23,7 @@ import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
 import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import { type Content } from "../SidecarExamples.js";
+import type { Content } from "../SidecarExamples.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
 import {
@@ -37,10 +37,10 @@ import { IdentityDialog } from "./IdentityDialog.js";
 import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
+import RequestLoginDialog from "./RequestLoginDialog.js";
 import { useIdentityStore } from "./rememberedIdentity.js";
 import { UrlPath } from "./request-panel/UrlPath.js";
 import { UrlQueryParams } from "./request-panel/UrlQueryParams.js";
-import RequestLoginDialog from "./RequestLoginDialog.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
 import { useRememberSkipLoginDialog } from "./useRememberSkipLoginDialog.js";
 

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

@@ -17,7 +17,7 @@ import {
 } from "./CollapsibleHeader.js";
 import { InlineInput } from "./InlineInput.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { type PlaygroundForm, type QueryParam } from "./Playground.js";
+import type { PlaygroundForm, QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,

package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx

@@ -1,7 +1,7 @@
 import { useFormContext } from "react-hook-form";
 import { PathRenderer } from "../../../../components/PathRenderer.js";
 import { ColorizedParam } from "../../ColorizedParam.js";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlPath = ({ url }: { url: string }) => {
   const { watch, setFocus } = useFormContext<PlaygroundForm>();

package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { useFormContext } from "react-hook-form";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlQueryParams = () => {
   const { watch } = useFormContext<PlaygroundForm>();

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

@@ -31,9 +31,11 @@ const RealTimeCounter = () => {
   }, []);
 
   useLayoutEffect(() => {
+    const currentSpanRef = spanRef.current;
+    if (!currentSpanRef) return;
+
     // Create a text node and attach it to the span
     const textNode = document.createTextNode("0");
-    const currentSpanRef = spanRef.current!;
 
     currentSpanRef.appendChild(textNode);
     textRef.current = textNode;