@scalar/api-client-react 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @scalar/api-client-react
 
+## 2.0.2
+
+### Patch Changes
+
+- [#8840](https://github.com/scalar/scalar/pull/8840): feat: allow updating the proxyUrl and make options reactive in api-client
+- [#8863](https://github.com/scalar/scalar/pull/8863): chore: updated imports to new api client version
+
 ## 2.0.1
 
 ## 2.0.0

package/README.md

@@ -46,10 +46,20 @@ export const OpenButton = () => {
 
 ### Options
 
-| Option | Type | Description |
-|---|---|---|
-| `configuration.url` | `string` | URL of an OpenAPI document to load |
-| `configuration.content` | `Record<string, unknown>` | Inline OpenAPI document object |
+<!-- For the complete list of configuration options, see the [Scalar configuration docs](https://scalar.com/products/api-references/configuration). -->
+
+| Option | Description |
+|---|---|
+| `configuration.url` | [Required] Pass the URL of an OpenAPI document (JSON or YAML). |
+| `configuration.proxyUrl` | Use a proxy URL to send requests to other origins when CORS blocks direct browser requests. |
+| `configuration.authentication` | Prefill authentication credentials and default security scheme behavior for users. |
+| `configuration.baseServerURL` | Prefix all relative servers with a base URL. |
+| `configuration.hideClientButton` | Whether to hide the client button from the reference sidebar and modal. |
+| `configuration.hiddenClients` | Control which HTTP code-example clients are shown; pass `[]` to show all clients. |
+| `configuration.oauth2RedirectUri` | Set the default OAuth 2.0 redirect URI for authorization code and implicit flows. |
+| `configuration.servers` | Pass a list of servers to override the servers in your OpenAPI document. |
+
+<!-- | `configuration.content` | `Record<string, unknown>` | Inline OpenAPI document object | -->
 
 ### Routing to a specific request
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { RoutePayload } from '@scalar/api-client/v2/features/modal';
+export type { RoutePayload } from '@scalar/api-client/modal';
 export type { ApiClientConfigurationReact, UseApiClientModalProps } from './use-api-client';
 export { useApiClient } from './use-api-client';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AAExE,YAAY,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,YAAY,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -1,5 +1,6 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { isObjectEqual } from "@scalar/helpers/object/is-object-equal";
 //#region src/lazy-load.ts
 /**
 * Creates a lazy singleton getter: the factory runs at most once, caches the resulting promise,
@@ -19,7 +20,7 @@ var makeLazySingleton = (factory) => {
 	};
 };
 /** Lazy load the client modal creator */
-var getClientModalCreator = makeLazySingleton(() => import("@scalar/api-client/v2/features/modal").then(({ createApiClientModal }) => createApiClientModal));
+var getClientModalCreator = makeLazySingleton(() => import("@scalar/api-client/modal").then(({ createApiClientModal }) => createApiClientModal));
 /** Module-scoped singleton workspace store (lazy-loaded on first use). */
 var getWorkspaceStoreSingleton = makeLazySingleton(() => import("@scalar/workspace-store/client").then(({ createWorkspaceStore }) => createWorkspaceStore()));
 /** Module-scoped singleton workspace event bus (lazy-loaded on first use). */
@@ -28,7 +29,7 @@ var getWorkspaceEventBusSingleton = makeLazySingleton(() => import("@scalar/work
 * Lazily creates the singleton Vue app, mounts it as the last child of document.body,
 * and returns the controller. Subsequent calls return the same promise.
 *
-* Only modal-level options (e.g. `proxyUrl`) are accepted here. Document-specific fields
+* Only modal-supported options are accepted here. Document-specific fields
 * (`url`, `content`) must be registered via `workspaceStore.addDocument` after the client
 * is ready — they are not part of the modal constructor.
 */
@@ -62,7 +63,7 @@ globalThis.__VUE_OPTIONS_API__ = true;
 globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true;
 globalThis.__VUE_PROD_DEVTOOLS__ = false;
 /** Tracks which documents are/have been loaded so we dont duplicate */
-var documentDict = {};
+var documentSet = /* @__PURE__ */ new Set();
 /**
 * Returns the singleton Api Client
 *
@@ -73,32 +74,32 @@ var documentDict = {};
 * Subsequent calls from any component share the same instance of the client but can use the same
 * or different documents
 */
-var useApiClient = ({ configuration } = {}) => {
+var useApiClient = ({ configuration }) => {
 	const [client, setClient] = useState(void 0);
 	const [workspaceStore, setWorkspaceStore] = useState(void 0);
-	const [documentSlug, setDocumentSlug] = useState("");
+	const documentSlugRef = useRef("");
+	const previousModalOptionsRef = useRef(void 0);
 	/** Small wrapper to set the documentSlug */
 	const open = (payload) => client?.open({
-		documentSlug,
+		documentSlug: documentSlugRef.current,
 		...payload
 	});
 	useEffect(() => {
 		let cancelled = false;
-		const { url, content, ...modalOptions } = configuration ?? {};
+		const { url, ...modalOptions } = configuration;
 		getOrCreateApiClient(modalOptions)?.then((_client) => {
 			if (cancelled || !_client) return;
-			const slug = url || content?.info?.title || "";
+			const slug = url || "";
+			_client.apiClient.updateOptions(modalOptions, true);
+			previousModalOptionsRef.current = modalOptions;
 			setClient(_client.apiClient);
 			setWorkspaceStore(_client.workspaceStore);
-			setDocumentSlug(slug);
-			if (slug && !documentDict[slug]) {
-				documentDict[slug] = true;
-				_client.workspaceStore.addDocument(content ? {
+			documentSlugRef.current = slug;
+			if (slug && !documentSet.has(slug)) {
+				documentSet.add(slug);
+				_client.workspaceStore.addDocument({
 					name: slug,
-					document: content
-				} : {
-					name: slug,
-					url: url ?? ""
+					url
 				});
 			}
 		});
@@ -107,24 +108,27 @@ var useApiClient = ({ configuration } = {}) => {
 		};
 	}, []);
 	useEffect(() => {
-		if (!client || !configuration || !workspaceStore) return;
-		const slug = configuration.url || configuration.content?.info?.title || "default";
-		setDocumentSlug(slug);
-		if (documentDict[slug]) return;
-		documentDict[slug] = true;
-		workspaceStore.addDocument(configuration.content ? {
-			name: slug,
-			document: configuration.content
-		} : {
+		if (!client || !workspaceStore) return;
+		const slug = configuration.url || "default";
+		documentSlugRef.current = slug;
+		if (documentSet.has(slug)) return;
+		documentSet.add(slug);
+		workspaceStore.addDocument({
 			name: slug,
-			url: configuration.url ?? ""
+			url: configuration.url
 		});
 	}, [
 		client,
-		configuration?.url,
-		configuration?.content,
+		configuration.url,
 		workspaceStore
 	]);
+	useEffect(() => {
+		if (!client || !configuration) return;
+		const { url: _, ...modalOptions } = configuration;
+		if (isObjectEqual(previousModalOptionsRef.current, modalOptions)) return;
+		client.updateOptions(modalOptions, true);
+		previousModalOptionsRef.current = modalOptions;
+	}, [client, configuration]);
 	return client ? {
 		...client,
 		open

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 { ApiClientConfiguration } from '@scalar/types/api-reference'\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/v2/features/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-level options (e.g. `proxyUrl`) 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: Partial<ApiClientConfiguration> = {}) => {\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, RoutePayload } from '@scalar/api-client/v2/features/modal'\nimport type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport { useEffect, useState } from 'react'\n\nimport './style.css'\n\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\n/** We don't really need all of the content types so we just accept an object instead */\nexport type ApiClientConfigurationReact = Partial<\n  Omit<ApiClientConfiguration, 'content' | 'url'> & { content?: Record<string, unknown>; 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 documentDict: Record<string, true> = {}\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 = {}):\n  | (Omit<ApiClientModal, 'open'> & { open: (payload: RoutePayload) => void })\n  | undefined => {\n  const [client, setClient] = useState<ApiClientModal | undefined>(undefined)\n  const [workspaceStore, setWorkspaceStore] = useState<WorkspaceStore | undefined>(undefined)\n  const [documentSlug, setDocumentSlug] = useState('')\n\n  /** Small wrapper to set the documentSlug */\n  const open = (payload: RoutePayload) => client?.open({ documentSlug, ...payload })\n\n  useEffect(() => {\n    let cancelled = false\n\n    // Strip document-specific fields before passing to the modal constructor.\n    // `url` and `content` are registered separately via workspaceStore.addDocument.\n    const { url, content, ...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 || (content as { info?: { title?: string } })?.info?.title || ''\n\n      setClient(_client.apiClient)\n      setWorkspaceStore(_client.workspaceStore)\n      setDocumentSlug(slug)\n\n      if (slug && !documentDict[slug]) {\n        documentDict[slug] = true\n        void _client.workspaceStore.addDocument(\n          content ? { name: slug, document: content } : { name: slug, url: url ?? '' },\n        )\n      }\n    })\n\n    return () => {\n      cancelled = true\n    }\n\n    // Only run once per mount\n  }, [])\n\n  // When url or content changes after the client is already mounted, register the new document\n  useEffect(() => {\n    if (!client || !configuration || !workspaceStore) {\n      return\n    }\n\n    const slug = configuration.url || (configuration.content as { info?: { title?: string } })?.info?.title || 'default'\n    setDocumentSlug(slug)\n\n    if (documentDict[slug]) {\n      return\n    }\n    documentDict[slug] = true\n\n    void workspaceStore.addDocument(\n      configuration.content\n        ? { name: slug, document: configuration.content }\n        : { name: slug, url: configuration.url ?? '' },\n    )\n  }, [client, configuration?.url, configuration?.content, workspaceStore])\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,wCAAwC,MAAM,EAAE,2BAA2B,qBAAqB,CACxG;;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,UAA2C,EAAE,KAAK;CAC7G,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,eAAqC,EAAE;;;;;;;;;;;AAY7C,IAAa,gBAAgB,EAC3B,kBAC0B,EAAE,KAEb;CACf,MAAM,CAAC,QAAQ,aAAa,SAAqC,KAAA,EAAU;CAC3E,MAAM,CAAC,gBAAgB,qBAAqB,SAAqC,KAAA,EAAU;CAC3F,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;;CAGpD,MAAM,QAAQ,YAA0B,QAAQ,KAAK;EAAE;EAAc,GAAG;EAAS,CAAC;AAElF,iBAAgB;EACd,IAAI,YAAY;EAIhB,MAAM,EAAE,KAAK,SAAS,GAAG,iBAAiB,iBAAiB,EAAE;AAExD,uBAAqB,aAAa,EAAE,MAAM,YAAY;AACzD,OAAI,aAAa,CAAC,QAChB;GAKF,MAAM,OAAO,OAAQ,SAA2C,MAAM,SAAS;AAE/E,aAAU,QAAQ,UAAU;AAC5B,qBAAkB,QAAQ,eAAe;AACzC,mBAAgB,KAAK;AAErB,OAAI,QAAQ,CAAC,aAAa,OAAO;AAC/B,iBAAa,QAAQ;AAChB,YAAQ,eAAe,YAC1B,UAAU;KAAE,MAAM;KAAM,UAAU;KAAS,GAAG;KAAE,MAAM;KAAM,KAAK,OAAO;KAAI,CAC7E;;IAEH;AAEF,eAAa;AACX,eAAY;;IAIb,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,eAChC;EAGF,MAAM,OAAO,cAAc,OAAQ,cAAc,SAA2C,MAAM,SAAS;AAC3G,kBAAgB,KAAK;AAErB,MAAI,aAAa,MACf;AAEF,eAAa,QAAQ;AAEhB,iBAAe,YAClB,cAAc,UACV;GAAE,MAAM;GAAM,UAAU,cAAc;GAAS,GAC/C;GAAE,MAAM;GAAM,KAAK,cAAc,OAAO;GAAI,CACjD;IACA;EAAC;EAAQ,eAAe;EAAK,eAAe;EAAS;EAAe,CAAC;AAExE,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 { 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"}

package/dist/lazy-load.d.ts

@@ -1,3 +1,4 @@
+import type { ApiClientModalOptions } 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;
@@ -5,8 +6,8 @@ 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<Partial<Pick<import("@scalar/types/api-reference").ApiReferenceConfigurationRaw, "authentication" | "baseServerURL" | "hideClientButton" | "servers" | "hiddenClients">>>;
-}) => import("@scalar/api-client/v2/features/modal").ApiClientModal>;
+    options?: import("vue").MaybeRefOrGetter<ApiClientModalOptions>;
+}) => 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>;
 /** Module-scoped singleton workspace event bus (lazy-loaded on first use). */
@@ -15,73 +16,12 @@ export declare const getWorkspaceEventBusSingleton: () => Promise<import("@scala
  * Lazily creates the singleton Vue app, mounts it as the last child of document.body,
  * and returns the controller. Subsequent calls return the same promise.
  *
- * Only modal-level options (e.g. `proxyUrl`) are accepted here. Document-specific fields
+ * Only modal-supported options are accepted here. Document-specific fields
  * (`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<{
-    hideClientButton: boolean;
-    showSidebar: boolean;
-    showDeveloperTools: "never" | "always" | "localhost";
-    showToolbar: "never" | "always" | "localhost";
-    operationTitleSource: "summary" | "path";
-    theme: "default" | "alternate" | "moon" | "purple" | "solarized" | "bluePlanet" | "deepSpace" | "saturn" | "kepler" | "elysiajs" | "fastify" | "mars" | "laserwave" | "none";
-    persistAuth: boolean;
-    telemetry: boolean;
-    externalUrls: {
-        dashboardUrl: string;
-        registryUrl: string;
-        proxyUrl: string;
-        apiBaseUrl: string;
-    };
-    authentication?: any;
-    baseServerURL?: string | undefined;
-    proxyUrl?: string | undefined;
-    oauth2RedirectUri?: string | undefined;
-    searchHotKey?: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | undefined;
-    servers?: any[] | undefined;
-    _integration?: "elysiajs" | "fastify" | "adonisjs" | "astro" | "docusaurus" | "dotnet" | "express" | "fastapi" | "go" | "hono" | "html" | "laravel" | "litestar" | "nestjs" | "nextjs" | "nitro" | "nuxt" | "platformatic" | "react" | "rust" | "svelte" | "vue" | null | undefined;
-    onRequestSent?: import("zod/v4/core").$InferOuterFunctionType<import("zod").ZodTuple<readonly [import("zod").ZodString], null>, import("zod").ZodVoid> | undefined;
-    plugins?: import("zod/v4/core").$InferOuterFunctionType<import("zod").ZodTuple<readonly [], null>, import("zod").ZodObject<{
-        name: import("zod").ZodString;
-        views: import("zod").ZodOptional<import("zod").ZodObject<{
-            "request.section": import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodObject<{
-                title: import("zod").ZodOptional<import("zod").ZodString>;
-                component: import("zod").ZodUnknown;
-                props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodAny>>;
-            }, import("zod/v4/core").$strip>>>;
-            "response.section": import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodObject<{
-                title: import("zod").ZodOptional<import("zod").ZodString>;
-                component: import("zod").ZodUnknown;
-                props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodAny>>;
-            }, import("zod/v4/core").$strip>>>;
-        }, import("zod/v4/core").$strip>>;
-        hooks: import("zod").ZodOptional<import("zod").ZodObject<{
-            onBeforeRequest: import("zod").ZodOptional<import("zod").ZodFunction<import("zod").ZodTuple<readonly [import("zod").ZodObject<{
-                request: import("zod").ZodAny;
-            }, import("zod/v4/core").$strip>], null>, import("zod/v4/core").$ZodFunctionOut>>;
-            onResponseReceived: import("zod").ZodOptional<import("zod").ZodFunction<import("zod").ZodTuple<readonly [import("zod").ZodObject<{
-                response: import("zod").ZodCustom<Response, Response>;
-                operation: import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodAny>;
-            }, import("zod/v4/core").$strip>], null>, import("zod/v4/core").$ZodFunctionOut>>;
-        }, import("zod/v4/core").$strip>>;
-    }, import("zod/v4/core").$strip>>[] | undefined;
-    default?: boolean | undefined;
-    url?: string | undefined;
-    content?: string | Record<string, any> | import("zod/v4/core").$InferOuterFunctionType<import("zod").ZodTuple<readonly [], null>, import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodAny>> | null | undefined;
-    title?: string | undefined;
-    slug?: string | undefined;
-    spec?: {
-        url?: string | undefined;
-        content?: string | Record<string, any> | import("zod/v4/core").$InferOuterFunctionType<import("zod").ZodTuple<readonly [], null>, import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodAny>> | null | undefined;
-    } | undefined;
-    agent?: {
-        key?: string | undefined;
-        disabled?: boolean | undefined;
-        hideAddApi?: boolean | undefined;
-    } | undefined;
-}> | undefined) => Promise<{
-    apiClient: import("@scalar/api-client/v2/features/modal").ApiClientModal;
+export declare const getOrCreateApiClient: (options?: Partial<Pick<import("@scalar/types/api-reference").ApiReferenceConfigurationRaw, "authentication" | "baseServerURL" | "hideClientButton" | "proxyUrl" | "oauth2RedirectUri" | "servers" | "hiddenClients">> | undefined) => Promise<{
+    apiClient: import("@scalar/api-client/modal").ApiClientModal;
     workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
 }>;
 //# sourceMappingURL=lazy-load.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../src/lazy-load.ts"],"names":[],"mappings":"AAsBA,yCAAyC;AACzC,eAAO,MAAM,qBAAqB;;;;;;;oEAEjC,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,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"}