@scalar/api-client-react 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalar/api-client-react
 
+## 2.0.4
+
+### Patch Changes
+
+- [#8943](https://github.com/scalar/scalar/pull/8943): feat: added customFetch config to the client
+
+## 2.0.3
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/lazy-load.ts","../src/use-api-client.ts"],"sourcesContent":["import type { ApiClientModalOptions } from '@scalar/api-client/modal'\n\n/**\n * Creates a lazy singleton getter: the factory runs at most once, caches the resulting promise,\n * and clears the cache on failure so the next call can retry.\n *\n * Optional args are forwarded to the factory on the first (cache-miss) call only.\n * Subsequent calls return the cached promise regardless of the args passed.\n */\nconst makeLazySingleton = <T, Args extends unknown[] = []>(\n  factory: (...args: Args) => Promise<T>,\n): ((...args: Args) => Promise<T>) => {\n  let cached: Promise<T> | undefined\n  return (...args: Args) => {\n    cached ??= factory(...args).catch((error) => {\n      cached = undefined\n      throw error\n    })\n    return cached\n  }\n}\n\n/** Lazy load the client modal creator */\nexport const getClientModalCreator = makeLazySingleton(() =>\n  import('@scalar/api-client/modal').then(({ createApiClientModal }) => createApiClientModal),\n)\n\n/** Module-scoped singleton workspace store (lazy-loaded on first use). */\nexport const getWorkspaceStoreSingleton = makeLazySingleton(() =>\n  import('@scalar/workspace-store/client').then(({ createWorkspaceStore }) => createWorkspaceStore()),\n)\n\n/** Module-scoped singleton workspace event bus (lazy-loaded on first use). */\nexport const getWorkspaceEventBusSingleton = makeLazySingleton(() =>\n  import('@scalar/workspace-store/events').then(({ createWorkspaceEventBus }) => createWorkspaceEventBus()),\n)\n\n/**\n * Lazily creates the singleton Vue app, mounts it as the last child of document.body,\n * and returns the controller. Subsequent calls return the same promise.\n *\n * Only modal-supported options are accepted here. Document-specific fields\n * (`url`, `content`) must be registered via `workspaceStore.addDocument` after the client\n * is ready — they are not part of the modal constructor.\n */\nexport const getOrCreateApiClient = makeLazySingleton(async (options: ApiClientModalOptions = {}) => {\n  const el = document.createElement('div')\n  el.className = 'scalar-app'\n  document.body.appendChild(el)\n\n  try {\n    const [createModal, workspaceStore, eventBus] = await Promise.all([\n      getClientModalCreator(),\n      getWorkspaceStoreSingleton(),\n      getWorkspaceEventBusSingleton(),\n    ])\n\n    const apiClient = createModal({\n      el,\n      eventBus,\n      workspaceStore,\n      options,\n      // TODO: map plugins from configuration when available\n      // plugins: mapConfigPlugins(options),\n    })\n\n    return { apiClient, workspaceStore }\n  } catch (error) {\n    el.remove()\n    throw error\n  }\n})\n","'use client'\n\nimport type { ApiClientModal, ApiClientModalOptions, RoutePayload } from '@scalar/api-client/modal'\nimport { useEffect, useRef, useState } from 'react'\n\nimport './style.css'\n\nimport { isObjectEqual } from '@scalar/helpers/object/is-object-equal'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { getOrCreateApiClient } from './lazy-load'\n\nglobalThis.__VUE_OPTIONS_API__ = true\nglobalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true\nglobalThis.__VUE_PROD_DEVTOOLS__ = false\n\nexport type ApiClientConfigurationReact = ApiClientModalOptions & {\n  // content?: Record<string, unknown>\n  url: string\n}\n\nexport type UseApiClientModalProps = {\n  /** Configuration for the Api Client (url or inline content) */\n  configuration: ApiClientConfigurationReact\n}\n\n/** Tracks which documents are/have been loaded so we dont duplicate */\nconst documentSet = new Set<string>()\n\n/**\n * Returns the singleton Api Client\n *\n * On first call the Vue app is lazily created and appended to document.body where it\n * lives for the lifetime of the page — it is never unmounted, so it survives client-side\n * navigation without losing state.\n *\n * Subsequent calls from any component share the same instance of the client but can use the same\n * or different documents\n */\nexport const useApiClient = ({\n  configuration,\n}: UseApiClientModalProps): (Omit<ApiClientModal, 'open'> & { open: (payload: RoutePayload) => void }) | undefined => {\n  const [client, setClient] = useState<ApiClientModal | undefined>(undefined)\n  const [workspaceStore, setWorkspaceStore] = useState<WorkspaceStore | undefined>(undefined)\n  const documentSlugRef = useRef('')\n  const previousModalOptionsRef = useRef<ApiClientModalOptions | undefined>(undefined)\n\n  /** Small wrapper to set the documentSlug */\n  const open = (payload: RoutePayload) => client?.open({ documentSlug: documentSlugRef.current, ...payload })\n\n  useEffect(() => {\n    let cancelled = false\n\n    // Strip document-specific fields before passing to the modal constructor.\n    const { url, ...modalOptions } = configuration\n\n    void getOrCreateApiClient(modalOptions)?.then((_client) => {\n      if (cancelled || !_client) {\n        return\n      }\n\n      // Compute the slug here so we can batch all three state updates into one render,\n      // preventing a render where `client` is set but `documentSlug` is still ''.\n      const slug = url || ''\n\n      // React always provides the complete modal option set for this hook instance,\n      // so we overwrite to clear options removed by consumers.\n      _client.apiClient.updateOptions(modalOptions, true)\n      previousModalOptionsRef.current = modalOptions\n\n      setClient(_client.apiClient)\n      setWorkspaceStore(_client.workspaceStore)\n      documentSlugRef.current = slug\n\n      if (slug && !documentSet.has(slug)) {\n        documentSet.add(slug)\n        void _client.workspaceStore.addDocument({ name: slug, url })\n      }\n    })\n\n    return () => {\n      cancelled = true\n    }\n\n    // Only run once per mount\n  }, [])\n\n  // Register new document when we detect the url has changed\n  useEffect(() => {\n    if (!client || !workspaceStore) {\n      return\n    }\n\n    const slug = configuration.url || 'default'\n    documentSlugRef.current = slug\n\n    if (documentSet.has(slug)) {\n      return\n    }\n    documentSet.add(slug)\n\n    void workspaceStore.addDocument({ name: slug, url: configuration.url })\n  }, [client, configuration.url, workspaceStore])\n\n  // Update the modal options when the configuration changes\n  useEffect(() => {\n    if (!client || !configuration) {\n      return\n    }\n\n    const { url: _, ...modalOptions } = configuration\n    if (isObjectEqual(previousModalOptionsRef.current, modalOptions)) {\n      return\n    }\n\n    client.updateOptions(modalOptions, true)\n    previousModalOptionsRef.current = modalOptions\n  }, [client, configuration])\n\n  return client\n    ? {\n        ...client,\n        open,\n      }\n    : undefined\n}\n"],"mappings":";;;;;;;;;;;AASA,IAAM,qBACJ,YACoC;CACpC,IAAI;AACJ,SAAQ,GAAG,SAAe;AACxB,aAAW,QAAQ,GAAG,KAAK,CAAC,OAAO,UAAU;AAC3C,YAAS,KAAA;AACT,SAAM;IACN;AACF,SAAO;;;;AAKX,IAAa,wBAAwB,wBACnC,OAAO,4BAA4B,MAAM,EAAE,2BAA2B,qBAAqB,CAC5F;;AAGD,IAAa,6BAA6B,wBACxC,OAAO,kCAAkC,MAAM,EAAE,2BAA2B,sBAAsB,CAAC,CACpG;;AAGD,IAAa,gCAAgC,wBAC3C,OAAO,kCAAkC,MAAM,EAAE,8BAA8B,yBAAyB,CAAC,CAC1G;;;;;;;;;AAUD,IAAa,uBAAuB,kBAAkB,OAAO,UAAiC,EAAE,KAAK;CACnG,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,YAAY;AACf,UAAS,KAAK,YAAY,GAAG;AAE7B,KAAI;EACF,MAAM,CAAC,aAAa,gBAAgB,YAAY,MAAM,QAAQ,IAAI;GAChE,uBAAuB;GACvB,4BAA4B;GAC5B,+BAAA;GACD,CAAC;AAWF,SAAO;GAAE,WATS,YAAY;IAC5B;IACA;IACA;IACA;IAGD,CAAC;GAEkB;GAAgB;UAC7B,OAAO;AACd,KAAG,QAAQ;AACX,QAAM;;EAER;;;AC3DF,WAAW,sBAAsB;AACjC,WAAW,0CAA0C;AACrD,WAAW,wBAAwB;;AAanC,IAAM,8BAAc,IAAI,KAAa;;;;;;;;;;;AAYrC,IAAa,gBAAgB,EAC3B,oBACoH;CACpH,MAAM,CAAC,QAAQ,aAAa,SAAqC,KAAA,EAAU;CAC3E,MAAM,CAAC,gBAAgB,qBAAqB,SAAqC,KAAA,EAAU;CAC3F,MAAM,kBAAkB,OAAO,GAAG;CAClC,MAAM,0BAA0B,OAA0C,KAAA,EAAU;;CAGpF,MAAM,QAAQ,YAA0B,QAAQ,KAAK;EAAE,cAAc,gBAAgB;EAAS,GAAG;EAAS,CAAC;AAE3G,iBAAgB;EACd,IAAI,YAAY;EAGhB,MAAM,EAAE,KAAK,GAAG,iBAAiB;AAE5B,uBAAqB,aAAa,EAAE,MAAM,YAAY;AACzD,OAAI,aAAa,CAAC,QAChB;GAKF,MAAM,OAAO,OAAO;AAIpB,WAAQ,UAAU,cAAc,cAAc,KAAK;AACnD,2BAAwB,UAAU;AAElC,aAAU,QAAQ,UAAU;AAC5B,qBAAkB,QAAQ,eAAe;AACzC,mBAAgB,UAAU;AAE1B,OAAI,QAAQ,CAAC,YAAY,IAAI,KAAK,EAAE;AAClC,gBAAY,IAAI,KAAK;AAChB,YAAQ,eAAe,YAAY;KAAE,MAAM;KAAM;KAAK,CAAC;;IAE9D;AAEF,eAAa;AACX,eAAY;;IAIb,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,CAAC,UAAU,CAAC,eACd;EAGF,MAAM,OAAO,cAAc,OAAO;AAClC,kBAAgB,UAAU;AAE1B,MAAI,YAAY,IAAI,KAAK,CACvB;AAEF,cAAY,IAAI,KAAK;AAEhB,iBAAe,YAAY;GAAE,MAAM;GAAM,KAAK,cAAc;GAAK,CAAC;IACtE;EAAC;EAAQ,cAAc;EAAK;EAAe,CAAC;AAG/C,iBAAgB;AACd,MAAI,CAAC,UAAU,CAAC,cACd;EAGF,MAAM,EAAE,KAAK,GAAG,GAAG,iBAAiB;AACpC,MAAI,cAAc,wBAAwB,SAAS,aAAa,CAC9D;AAGF,SAAO,cAAc,cAAc,KAAK;AACxC,0BAAwB,UAAU;IACjC,CAAC,QAAQ,cAAc,CAAC;AAE3B,QAAO,SACH;EACE,GAAG;EACH;EACD,GACD,KAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/lazy-load.ts","../src/use-api-client.ts"],"sourcesContent":["import type { ApiClientOptions } from '@scalar/api-client/modal'\n\n/**\n * Creates a lazy singleton getter: the factory runs at most once, caches the resulting promise,\n * and clears the cache on failure so the next call can retry.\n *\n * Optional args are forwarded to the factory on the first (cache-miss) call only.\n * Subsequent calls return the cached promise regardless of the args passed.\n */\nconst makeLazySingleton = <T, Args extends unknown[] = []>(\n  factory: (...args: Args) => Promise<T>,\n): ((...args: Args) => Promise<T>) => {\n  let cached: Promise<T> | undefined\n  return (...args: Args) => {\n    cached ??= factory(...args).catch((error) => {\n      cached = undefined\n      throw error\n    })\n    return cached\n  }\n}\n\n/** Lazy load the client modal creator */\nexport const getClientModalCreator = makeLazySingleton(() =>\n  import('@scalar/api-client/modal').then(({ createApiClientModal }) => createApiClientModal),\n)\n\n/** Module-scoped singleton workspace store (lazy-loaded on first use). */\nexport const getWorkspaceStoreSingleton = makeLazySingleton(() =>\n  import('@scalar/workspace-store/client').then(({ createWorkspaceStore }) => createWorkspaceStore()),\n)\n\n/** Module-scoped singleton workspace event bus (lazy-loaded on first use). */\nexport const getWorkspaceEventBusSingleton = makeLazySingleton(() =>\n  import('@scalar/workspace-store/events').then(({ createWorkspaceEventBus }) => createWorkspaceEventBus()),\n)\n\n/**\n * Lazily creates the singleton Vue app, mounts it as the last child of document.body,\n * and returns the controller. Subsequent calls return the same promise.\n *\n * Only modal-supported options are accepted here. Document-specific fields\n * (`url`, `content`) must be registered via `workspaceStore.addDocument` after the client\n * is ready — they are not part of the modal constructor.\n */\nexport const getOrCreateApiClient = makeLazySingleton(async (options: ApiClientOptions = {}) => {\n  const el = document.createElement('div')\n  el.className = 'scalar-app'\n  document.body.appendChild(el)\n\n  try {\n    const [createModal, workspaceStore, eventBus] = await Promise.all([\n      getClientModalCreator(),\n      getWorkspaceStoreSingleton(),\n      getWorkspaceEventBusSingleton(),\n    ])\n\n    const apiClient = createModal({\n      el,\n      eventBus,\n      workspaceStore,\n      options,\n      // TODO: map plugins from configuration when available\n      // plugins: mapConfigPlugins(options),\n    })\n\n    return { apiClient, workspaceStore }\n  } catch (error) {\n    el.remove()\n    throw error\n  }\n})\n","'use client'\n\nimport type { ApiClientModal, ApiClientOptions, RoutePayload } from '@scalar/api-client/modal'\nimport { useEffect, useRef, useState } from 'react'\n\nimport './style.css'\n\nimport { isObjectEqual } from '@scalar/helpers/object/is-object-equal'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { getOrCreateApiClient } from './lazy-load'\n\nglobalThis.__VUE_OPTIONS_API__ = true\nglobalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true\nglobalThis.__VUE_PROD_DEVTOOLS__ = false\n\nexport type ApiClientConfigurationReact = ApiClientOptions & {\n  // content?: Record<string, unknown>\n  url: string\n}\n\nexport type UseApiClientModalProps = {\n  /** Configuration for the Api Client (url or inline content) */\n  configuration: ApiClientConfigurationReact\n}\n\n/** Tracks which documents are/have been loaded so we dont duplicate */\nconst documentSet = new Set<string>()\n\n/**\n * Returns the singleton Api Client\n *\n * On first call the Vue app is lazily created and appended to document.body where it\n * lives for the lifetime of the page — it is never unmounted, so it survives client-side\n * navigation without losing state.\n *\n * Subsequent calls from any component share the same instance of the client but can use the same\n * or different documents\n */\nexport const useApiClient = ({\n  configuration,\n}: UseApiClientModalProps): (Omit<ApiClientModal, 'open'> & { open: (payload: RoutePayload) => void }) | undefined => {\n  const [client, setClient] = useState<ApiClientModal | undefined>(undefined)\n  const [workspaceStore, setWorkspaceStore] = useState<WorkspaceStore | undefined>(undefined)\n  const documentSlugRef = useRef('')\n  const previousModalOptionsRef = useRef<ApiClientOptions | undefined>(undefined)\n\n  /** Small wrapper to set the documentSlug */\n  const open = (payload: RoutePayload) => client?.open({ documentSlug: documentSlugRef.current, ...payload })\n\n  useEffect(() => {\n    let cancelled = false\n\n    // Strip document-specific fields before passing to the modal constructor.\n    const { url, ...modalOptions } = configuration\n\n    void getOrCreateApiClient(modalOptions)?.then((_client) => {\n      if (cancelled || !_client) {\n        return\n      }\n\n      // Compute the slug here so we can batch all three state updates into one render,\n      // preventing a render where `client` is set but `documentSlug` is still ''.\n      const slug = url || ''\n\n      // React always provides the complete modal option set for this hook instance,\n      // so we overwrite to clear options removed by consumers.\n      _client.apiClient.updateOptions(modalOptions, true)\n      previousModalOptionsRef.current = modalOptions\n\n      setClient(_client.apiClient)\n      setWorkspaceStore(_client.workspaceStore)\n      documentSlugRef.current = slug\n\n      if (slug && !documentSet.has(slug)) {\n        documentSet.add(slug)\n        void _client.workspaceStore.addDocument({ name: slug, url })\n      }\n    })\n\n    return () => {\n      cancelled = true\n    }\n\n    // Only run once per mount\n  }, [])\n\n  // Register new document when we detect the url has changed\n  useEffect(() => {\n    if (!client || !workspaceStore) {\n      return\n    }\n\n    const slug = configuration.url || 'default'\n    documentSlugRef.current = slug\n\n    if (documentSet.has(slug)) {\n      return\n    }\n    documentSet.add(slug)\n\n    void workspaceStore.addDocument({ name: slug, url: configuration.url })\n  }, [client, configuration.url, workspaceStore])\n\n  // Update the modal options when the configuration changes\n  useEffect(() => {\n    if (!client || !configuration) {\n      return\n    }\n\n    const { url: _, ...modalOptions } = configuration\n    if (isObjectEqual(previousModalOptionsRef.current, modalOptions)) {\n      return\n    }\n\n    client.updateOptions(modalOptions, true)\n    previousModalOptionsRef.current = modalOptions\n  }, [client, configuration])\n\n  return client\n    ? {\n        ...client,\n        open,\n      }\n    : undefined\n}\n"],"mappings":";;;;;;;;;;;AASA,IAAM,qBACJ,YACoC;CACpC,IAAI;AACJ,SAAQ,GAAG,SAAe;AACxB,aAAW,QAAQ,GAAG,KAAK,CAAC,OAAO,UAAU;AAC3C,YAAS,KAAA;AACT,SAAM;IACN;AACF,SAAO;;;;AAKX,IAAa,wBAAwB,wBACnC,OAAO,4BAA4B,MAAM,EAAE,2BAA2B,qBAAqB,CAC5F;;AAGD,IAAa,6BAA6B,wBACxC,OAAO,kCAAkC,MAAM,EAAE,2BAA2B,sBAAsB,CAAC,CACpG;;AAGD,IAAa,gCAAgC,wBAC3C,OAAO,kCAAkC,MAAM,EAAE,8BAA8B,yBAAyB,CAAC,CAC1G;;;;;;;;;AAUD,IAAa,uBAAuB,kBAAkB,OAAO,UAA4B,EAAE,KAAK;CAC9F,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,YAAY;AACf,UAAS,KAAK,YAAY,GAAG;AAE7B,KAAI;EACF,MAAM,CAAC,aAAa,gBAAgB,YAAY,MAAM,QAAQ,IAAI;GAChE,uBAAuB;GACvB,4BAA4B;GAC5B,+BAAA;GACD,CAAC;AAWF,SAAO;GAAE,WATS,YAAY;IAC5B;IACA;IACA;IACA;IAGD,CAAC;GAEkB;GAAgB;UAC7B,OAAO;AACd,KAAG,QAAQ;AACX,QAAM;;EAER;;;AC3DF,WAAW,sBAAsB;AACjC,WAAW,0CAA0C;AACrD,WAAW,wBAAwB;;AAanC,IAAM,8BAAc,IAAI,KAAa;;;;;;;;;;;AAYrC,IAAa,gBAAgB,EAC3B,oBACoH;CACpH,MAAM,CAAC,QAAQ,aAAa,SAAqC,KAAA,EAAU;CAC3E,MAAM,CAAC,gBAAgB,qBAAqB,SAAqC,KAAA,EAAU;CAC3F,MAAM,kBAAkB,OAAO,GAAG;CAClC,MAAM,0BAA0B,OAAqC,KAAA,EAAU;;CAG/E,MAAM,QAAQ,YAA0B,QAAQ,KAAK;EAAE,cAAc,gBAAgB;EAAS,GAAG;EAAS,CAAC;AAE3G,iBAAgB;EACd,IAAI,YAAY;EAGhB,MAAM,EAAE,KAAK,GAAG,iBAAiB;AAE5B,uBAAqB,aAAa,EAAE,MAAM,YAAY;AACzD,OAAI,aAAa,CAAC,QAChB;GAKF,MAAM,OAAO,OAAO;AAIpB,WAAQ,UAAU,cAAc,cAAc,KAAK;AACnD,2BAAwB,UAAU;AAElC,aAAU,QAAQ,UAAU;AAC5B,qBAAkB,QAAQ,eAAe;AACzC,mBAAgB,UAAU;AAE1B,OAAI,QAAQ,CAAC,YAAY,IAAI,KAAK,EAAE;AAClC,gBAAY,IAAI,KAAK;AAChB,YAAQ,eAAe,YAAY;KAAE,MAAM;KAAM;KAAK,CAAC;;IAE9D;AAEF,eAAa;AACX,eAAY;;IAIb,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,CAAC,UAAU,CAAC,eACd;EAGF,MAAM,OAAO,cAAc,OAAO;AAClC,kBAAgB,UAAU;AAE1B,MAAI,YAAY,IAAI,KAAK,CACvB;AAEF,cAAY,IAAI,KAAK;AAEhB,iBAAe,YAAY;GAAE,MAAM;GAAM,KAAK,cAAc;GAAK,CAAC;IACtE;EAAC;EAAQ,cAAc;EAAK;EAAe,CAAC;AAG/C,iBAAgB;AACd,MAAI,CAAC,UAAU,CAAC,cACd;EAGF,MAAM,EAAE,KAAK,GAAG,GAAG,iBAAiB;AACpC,MAAI,cAAc,wBAAwB,SAAS,aAAa,CAC9D;AAGF,SAAO,cAAc,cAAc,KAAK;AACxC,0BAAwB,UAAU;IACjC,CAAC,QAAQ,cAAc,CAAC;AAE3B,QAAO,SACH;EACE,GAAG;EACH;EACD,GACD,KAAA"}

package/dist/lazy-load.d.ts

@@ -1,4 +1,4 @@
-import type { ApiClientModalOptions } from '@scalar/api-client/modal';
+import type { ApiClientOptions } from '@scalar/api-client/modal';
 /** Lazy load the client modal creator */
 export declare const getClientModalCreator: () => Promise<({ el, eventBus, mountOnInitialize, plugins, workspaceStore, options, }: {
     el: HTMLElement | null;
@@ -6,7 +6,7 @@ export declare const getClientModalCreator: () => Promise<({ el, eventBus, mount
     eventBus?: import("@scalar/workspace-store/events").WorkspaceEventBus;
     workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
     plugins?: import("@scalar/oas-utils/helpers").ClientPlugin[];
-    options?: import("vue").MaybeRefOrGetter<ApiClientModalOptions>;
+    options?: import("vue").MaybeRefOrGetter<ApiClientOptions>;
 }) => import("@scalar/api-client/modal").ApiClientModal>;
 /** Module-scoped singleton workspace store (lazy-loaded on first use). */
 export declare const getWorkspaceStoreSingleton: () => Promise<import("@scalar/workspace-store/client").WorkspaceStore>;
@@ -20,7 +20,7 @@ export declare const getWorkspaceEventBusSingleton: () => Promise<import("@scala
  * (`url`, `content`) must be registered via `workspaceStore.addDocument` after the client
  * is ready — they are not part of the modal constructor.
  */
-export declare const getOrCreateApiClient: (options?: Partial<Pick<import("@scalar/types/api-reference").ApiReferenceConfigurationRaw, "authentication" | "baseServerURL" | "hideClientButton" | "proxyUrl" | "oauth2RedirectUri" | "servers" | "hiddenClients">> | undefined) => Promise<{
+export declare const getOrCreateApiClient: (options?: ApiClientOptions | undefined) => Promise<{
     apiClient: import("@scalar/api-client/modal").ApiClientModal;
     workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
 }>;

package/dist/lazy-load.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../src/lazy-load.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAsBrE,yCAAyC;AACzC,eAAO,MAAM,qBAAqB;;;;;;;wDAEjC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,wEAEtC,CAAA;AAED,8EAA8E;AAC9E,eAAO,MAAM,6BAA6B,2EAEzC,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB;;;EA0B/B,CAAA"}
+{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../src/lazy-load.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAsBhE,yCAAyC;AACzC,eAAO,MAAM,qBAAqB;;;;;;;wDAEjC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,wEAEtC,CAAA;AAED,8EAA8E;AAC9E,eAAO,MAAM,6BAA6B,2EAEzC,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB;;;EA0B/B,CAAA"}

package/dist/style.css

@@ -951,8 +951,8 @@
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 
   .scalar-app .hover\:bg-b-2:hover {
@@ -963,10 +963,24 @@
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb, var(--scalar-header-call-to-action-color, var(--scalar-button-1)), var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -1007,6 +1021,10 @@
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }
@@ -2939,6 +2957,9 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
+.scalar-app .border-border-header {
+  border-color: var(--scalar-header-border-color, var(--scalar-border-color));
+}
 .scalar-app .border-c-alert {
   border-color: var(--scalar-color-alert);
 }
@@ -2971,6 +2992,12 @@
 .scalar-app .bg-b-btn {
   background-color: var(--scalar-button-1);
 }
+.scalar-app .bg-b-header-1 {
+  background-color: var(--scalar-header-background-1, var(--scalar-background-1));
+}
+.scalar-app .bg-b-header-cta {
+  background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+}
 .scalar-app .bg-b-tooltip {
   background-color: var(--scalar-tooltip-background);
 }
@@ -3118,6 +3145,15 @@
 .scalar-app .break-words, .scalar-app .wrap-break-word {
   overflow-wrap: break-word;
 }
+.scalar-app .text-c-header-1 {
+  color: var(--scalar-header-color-1, var(--scalar-color-1));
+}
+.scalar-app .text-c-header-2 {
+  color: var(--scalar-header-color-2, var(--scalar-color-2));
+}
+.scalar-app .text-c-header-cta {
+  color: var(--scalar-button-1-color);
+}
 .scalar-app .text-c-tooltip {
   color: var(--scalar-tooltip-color);
 }
@@ -3198,8 +3234,8 @@
 :is(.scalar-app .\*\:justify-center > *) {
   justify-content: center;
 }
-:is(.scalar-app .\*\:gap-px > *) {
-  gap: 1px;
+:is(.scalar-app .\*\:gap-1 > *) {
+  gap: 4px;
 }
 :is(.scalar-app .\*\:rounded > *) {
   border-radius: var(--scalar-radius);
@@ -3231,8 +3267,8 @@
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 }
 .scalar-app .group-focus-visible\/toggle\:outline:is(:where(.group\/toggle):focus-visible *) {
@@ -3296,10 +3332,24 @@
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb, var(--scalar-header-call-to-action-color, var(--scalar-button-1)), var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -3340,6 +3390,10 @@
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }
@@ -3959,6 +4013,9 @@
 .scalar-app .h-\[68px\] {
   height: 68px;
 }
+.scalar-app .h-\[300px\] {
+  height: 300px;
+}
 .scalar-app .h-\[calc\(100\%_-_50px\)\] {
   height: calc(100% - 50px);
 }
@@ -4010,9 +4067,6 @@
 .scalar-app .max-h-\[60svh\] {
   max-height: 60svh;
 }
-.scalar-app .max-h-\[300px\] {
-  max-height: 300px;
-}
 .scalar-app .max-h-\[auto\] {
   max-height: auto;
 }
@@ -6244,23 +6298,23 @@
 /*
    Deep styling for customizing Codemirror
   */
-[data-v-167b1bd5] .cm-editor {
+[data-v-6499ec1f] .cm-editor {
   height: 100%;
   outline: none;
   padding: 0;
   background: transparent;
 }
-[data-v-167b1bd5] .cm-placeholder {
+[data-v-6499ec1f] .cm-placeholder {
   color: var(--scalar-color-3);
 }
-[data-v-167b1bd5] .cm-content {
+[data-v-6499ec1f] .cm-content {
   font-family: var(--scalar-font-code);
   font-size: var(--scalar-small);
   max-height: 20px;
   padding: 8px 0;
 }
 /* Tooltip helper */
-[data-v-167b1bd5] .cm-tooltip {
+[data-v-6499ec1f] .cm-tooltip {
   background: transparent !important;
   filter: brightness(var(--scalar-lifted-brightness));
   border-radius: var(--scalar-radius);
@@ -6269,43 +6323,43 @@
   outline: none !important;
   overflow: hidden !important;
 }
-[data-v-167b1bd5] .cm-tooltip-autocomplete ul li {
+[data-v-6499ec1f] .cm-tooltip-autocomplete ul li {
   padding: 3px 6px !important;
 }
-[data-v-167b1bd5] .cm-completionIcon-type:after {
+[data-v-6499ec1f] .cm-completionIcon-type:after {
   color: var(--scalar-color-3) !important;
 }
-[data-v-167b1bd5] .cm-tooltip-autocomplete ul li[aria-selected] {
+[data-v-6499ec1f] .cm-tooltip-autocomplete ul li[aria-selected] {
   background: var(--scalar-background-2) !important;
   color: var(--scalar-color-1) !important;
 }
-[data-v-167b1bd5] .cm-tooltip-autocomplete ul {
+[data-v-6499ec1f] .cm-tooltip-autocomplete ul {
   padding: 6px !important;
   position: relative;
 }
-[data-v-167b1bd5] .cm-tooltip-autocomplete ul li:hover {
+[data-v-6499ec1f] .cm-tooltip-autocomplete ul li:hover {
   border-radius: 3px;
   color: var(--scalar-color-1) !important;
   background: var(--scalar-background-3) !important;
 }
 /* Disable active line highlighting */
-[data-v-167b1bd5] .cm-activeLine,[data-v-167b1bd5] .cm-activeLineGutter {
+[data-v-6499ec1f] .cm-activeLine,[data-v-6499ec1f] .cm-activeLineGutter {
   background-color: transparent;
 }
 /* Color selection matching */
-[data-v-167b1bd5] .cm-selectionMatch,[data-v-167b1bd5] .cm-matchingBracket {
+[data-v-6499ec1f] .cm-selectionMatch,[data-v-6499ec1f] .cm-matchingBracket {
   border-radius: var(--scalar-radius);
   background: var(--scalar-background-4) !important;
 }
 /* Color Picker Swatches */
-[data-v-167b1bd5] .cm-css-color-picker-wrapper {
+[data-v-6499ec1f] .cm-css-color-picker-wrapper {
   display: inline-flex;
   outline: 1px solid var(--scalar-background-3);
   border-radius: 3px;
   overflow: hidden;
 }
 /* Number gutter */
-[data-v-167b1bd5] .cm-gutters {
+[data-v-6499ec1f] .cm-gutters {
   background-color: transparent;
   border-right: none;
   color: var(--scalar-color-3);
@@ -6313,7 +6367,7 @@
   line-height: 22px;
   border-radius: 0 0 0 3px;
 }
-[data-v-167b1bd5] .cm-gutters:before {
+[data-v-6499ec1f] .cm-gutters:before {
   content: '';
   position: absolute;
   top: 2px;
@@ -6323,7 +6377,7 @@
   border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);
   background-color: var(--scalar-background-1);
 }
-[data-v-167b1bd5] .cm-gutterElement {
+[data-v-6499ec1f] .cm-gutterElement {
   font-family: var(--scalar-font-code) !important;
   padding-left: 0px !important;
   padding-right: 6px !important;
@@ -6332,16 +6386,16 @@
   justify-content: flex-end;
   position: relative;
 }
-[data-v-167b1bd5] .cm-lineNumbers .cm-gutterElement {
+[data-v-6499ec1f] .cm-lineNumbers .cm-gutterElement {
   min-width: fit-content;
 }
-[data-v-167b1bd5] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
+[data-v-6499ec1f] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
   padding-left: 0 !important;
 }
-[data-v-167b1bd5] .cm-scroller {
+[data-v-6499ec1f] .cm-scroller {
   overflow: auto;
 }
-.line-wrapping[data-v-167b1bd5]:focus-within .cm-content {
+.line-wrapping[data-v-6499ec1f]:focus-within .cm-content {
   display: inline-table;
   min-height: fit-content;
   padding: 3px 6px;
@@ -6658,7 +6712,7 @@
     var(--scalar-background-2) 20px
   );
 }
-[data-v-e861924b] .cm-content {
+[data-v-06778e40] .cm-content {
   font-size: var(--scalar-small);
 }
 .form-group[data-v-678c9f4a] {
@@ -6676,10 +6730,10 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-[data-v-3157c3c7] .cm-editor {
+[data-v-819cea32] .cm-editor {
   padding: 0;
 }
-[data-v-3157c3c7] .cm-content {
+[data-v-819cea32] .cm-content {
   align-items: center;
   background-color: transparent;
   display: flex;
@@ -6688,30 +6742,30 @@
   padding: 5px 8px;
   width: 100%;
 }
-[data-v-3157c3c7] .cm-content:has(.cm-pill) {
+[data-v-819cea32] .cm-content:has(.cm-pill) {
   padding: 5px 8px;
 }
-[data-v-3157c3c7] .cm-content .cm-pill:not(:last-of-type) {
+[data-v-819cea32] .cm-content .cm-pill:not(:last-of-type) {
   margin-right: 0.5px;
 }
-[data-v-3157c3c7] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-819cea32] .cm-content .cm-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-3157c3c7] .cm-line {
+[data-v-819cea32] .cm-line {
   overflow: hidden;
   padding: 0;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-.required[data-v-3157c3c7]::after {
+.required[data-v-819cea32]::after {
   content: 'Required';
 }
 /* Tailwind placeholder is busted */
-input[data-v-3157c3c7]::placeholder {
+input[data-v-819cea32]::placeholder {
   color: var(--scalar-color-3);
 }
 /* we want our inputs to look like a password input but not be one */
-.scalar-password-input[data-v-3157c3c7] {
+.scalar-password-input[data-v-819cea32] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -6760,7 +6814,7 @@ input[data-v-3157c3c7]::placeholder {
   overflow: auto;
   min-width: 100%;
 }
-.scalar-code-block[data-v-94c74c13] .hljs * {
+.scalar-code-block[data-v-30c34ea4] .hljs * {
   font-size: var(--scalar-small);
 }
 .response-body-virtual[data-headlessui-state='open'],
@@ -6828,11 +6882,11 @@ to {
 .v-enter-from[data-v-1f35725e] {
   opacity: 0;
 }
-.animate-response-heading .response-heading[data-v-3d6c8e96] {
-  animation: push-response-3d6c8e96 0.2s ease-in-out forwards;
+.animate-response-heading .response-heading[data-v-82f4df98] {
+  animation: push-response-82f4df98 0.2s ease-in-out forwards;
   opacity: 1;
 }
-@keyframes push-response-3d6c8e96 {
+@keyframes push-response-82f4df98 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -6842,11 +6896,11 @@ to {
     transform: translateY(-4px);
 }
 }
-.animate-response-heading .animate-response-children[data-v-3d6c8e96] {
-  animation: response-spans-3d6c8e96 0.2s ease-in-out forwards 0.05s;
+.animate-response-heading .animate-response-children[data-v-82f4df98] {
+  animation: response-spans-82f4df98 0.2s ease-in-out forwards 0.05s;
   opacity: 0;
 }
-@keyframes response-spans-3d6c8e96 {
+@keyframes response-spans-82f4df98 {
 from {
     opacity: 0;
     transform: translateY(4px);
@@ -6856,33 +6910,33 @@ to {
     transform: translateY(0);
 }
 }
-.request-card[data-v-0e4ddc16] {
+.request-card[data-v-59da314d] {
   font-size: var(--scalar-font-size-3);
 }
-.request-method[data-v-0e4ddc16] {
+.request-method[data-v-59da314d] {
   font-family: var(--scalar-font-code);
   text-transform: uppercase;
   margin-right: 6px;
 }
-.request-card-footer[data-v-0e4ddc16] {
+.request-card-footer[data-v-59da314d] {
   display: flex;
   justify-content: flex-end;
   padding: 6px;
   flex-shrink: 0;
   position: relative;
 }
-.request-card-footer-addon[data-v-0e4ddc16] {
+.request-card-footer-addon[data-v-59da314d] {
   display: flex;
   align-items: center;
 
   flex: 1;
   min-width: 0;
 }
-.request-editor-section[data-v-0e4ddc16] {
+.request-editor-section[data-v-59da314d] {
   display: flex;
   flex: 1;
 }
-.request-card-simple[data-v-0e4ddc16] {
+.request-card-simple[data-v-59da314d] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6891,7 +6945,7 @@ to {
 
   font-size: var(--scalar-small);
 }
-.code-snippet[data-v-0e4ddc16] {
+.code-snippet[data-v-59da314d] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -7346,15 +7400,15 @@ to {
 .full-size-styles:has(.sync-conflict-modal-root)::after {
   display: none;
 }
-.scalar-collection-auth[data-v-6bba6b78] {
+.scalar-collection-auth[data-v-d3bc49bd] {
   border: var(--scalar-border-width) solid var(--scalar-border-color);
   border-radius: var(--scalar-radius-lg);
   overflow: hidden;
 }
-[data-v-ddfccc08] .cm-editor {
+[data-v-2f13118d] .cm-editor {
   padding: 0;
 }
-[data-v-ddfccc08] .cm-content {
+[data-v-2f13118d] .cm-content {
   align-items: center;
   background-color: transparent;
   display: flex;
@@ -7363,16 +7417,16 @@ to {
   padding: 5px 8px;
   width: 100%;
 }
-[data-v-ddfccc08] .cm-content:has(.cm-pill) {
+[data-v-2f13118d] .cm-content:has(.cm-pill) {
   padding: 5px 8px;
 }
-[data-v-ddfccc08] .cm-content .cm-pill:not(:last-of-type) {
+[data-v-2f13118d] .cm-content .cm-pill:not(:last-of-type) {
   margin-right: 0.5px;
 }
-[data-v-ddfccc08] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-2f13118d] .cm-content .cm-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-ddfccc08] .cm-line {
+[data-v-2f13118d] .cm-line {
   overflow: hidden;
   padding: 0;
   text-overflow: ellipsis;
@@ -7445,7 +7499,7 @@ to {
 .scroll-timeline-x[data-v-f4568236]::-webkit-scrollbar {
   display: none;
 }
-.postman-import-path-conflict-callout[data-v-9f13a627] {
+.postman-import-path-conflict-callout[data-v-cc4f666d] {
   border-color: var(--scalar-color-red);
   background-color: var(--scalar-background-danger);
   color: var(--scalar-color-1);

package/dist/use-api-client.d.ts

@@ -1,6 +1,6 @@
-import type { ApiClientModal, ApiClientModalOptions, RoutePayload } from '@scalar/api-client/modal';
+import type { ApiClientModal, ApiClientOptions, RoutePayload } from '@scalar/api-client/modal';
 import './style.css';
-export type ApiClientConfigurationReact = ApiClientModalOptions & {
+export type ApiClientConfigurationReact = ApiClientOptions & {
     url: string;
 };
 export type UseApiClientModalProps = {

package/dist/use-api-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-api-client.d.ts","sourceRoot":"","sources":["../src/use-api-client.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGnG,OAAO,aAAa,CAAA;AAWpB,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,GAAG;IAEhE,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,+DAA+D;IAC/D,aAAa,EAAE,2BAA2B,CAAA;CAC3C,CAAA;AAKD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,oBAE1B,sBAAsB,KAAG,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,CAAC,GAAG,SAoFxG,CAAA"}
+{"version":3,"file":"use-api-client.d.ts","sourceRoot":"","sources":["../src/use-api-client.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAG9F,OAAO,aAAa,CAAA;AAWpB,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,GAAG;IAE3D,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,+DAA+D;IAC/D,aAAa,EAAE,2BAA2B,CAAA;CAC3C,CAAA;AAKD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,oBAE1B,sBAAsB,KAAG,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,CAAC,GAAG,SAoFxG,CAAA"}

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "2.0.2",
+  "version": "2.0.4",
   "engines": {
     "node": ">=22"
   },
@@ -39,9 +39,9 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/helpers": "0.5.0",
-    "@scalar/workspace-store": "0.46.0",
-    "@scalar/api-client": "3.0.0"
+    "@scalar/api-client": "3.2.0",
+    "@scalar/helpers": "0.5.1",
+    "@scalar/workspace-store": "0.46.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",