@scalar/api-client-react 1.4.20 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalar/api-client-react
 
+## 2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- [#8760](https://github.com/scalar/scalar/pull/8760): feat: update to use api-client v2 with new hook based api
+
 ## 1.4.20
 
 ## 1.4.19

package/README.md

@@ -11,34 +11,57 @@
 npm install @scalar/api-client-react
 ```
 
+## ⚠️ Breaking Changes
+
+We have updated the API for the client! Please see the new hook based usage below.
+
 ## Usage
 
-First we need to add the provider, you should add it in the highest place you have a unique spec.
+Call `useApiClient()` from any component. No provider is needed.
 
-```tsx
-import { ApiClientModalProvider } from '@scalar/api-client-react'
+The Vue app is created once and appended to `document.body` where it lives for the lifetime of the
+page — it survives client-side navigation without losing state.
 
+The code is ESM lazy loaded with the dynamic import function to make the smallest possible initial bundle size. We also
+handle de-duplication of documents so as long as the URL is the same you will only get one.
+
+```tsx
+import { useApiClient } from '@scalar/api-client-react'
 import '@scalar/api-client-react/style.css'
-;<ApiClientModalProvider
-  configuration={{
-    url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
-  }}>
-  {children}
-</ApiClientModalProvider>
+
+export const OpenButton = () => {
+  const client = useApiClient({
+    configuration: {
+      url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
+    },
+  })
+
+  return (
+    <button onClick={() => client?.open({ path: '/planets', method: 'get' })}>
+      Open API Client
+    </button>
+  )
+}
 ```
 
-Then you can trigger it from anywhere inside of that provider by calling the `useApiClientModal()`
+### Options
 
-```tsx
-import { useApiClientModal } from '@scalar/api-client-react'
+| Option | Type | Description |
+|---|---|---|
+| `configuration.url` | `string` | URL of an OpenAPI document to load |
+| `configuration.content` | `Record<string, unknown>` | Inline OpenAPI document object |
+
+### Routing to a specific request
 
-const client = useApiClientModal()
+Pass a `RoutePayload` to `client.open()` to navigate directly to a specific endpoint:
+
+```tsx
+const client = useApiClient({
+  configuration: { url: '...' },
+})
 
-return (
-  <button onClick={() => client?.open({ path: '/auth/token', method: 'get' })}>
-    Click me to open the Api Client
-  </button>
-)
+// Open to a specific request
+client?.open({ path: '/auth/token', method: 'post' })
 ```
 
 Check out the playground for a working example.

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export type { OpenClientPayload } from './ApiClientModalProvider';
-export { ApiClientModalProvider, useApiClientModal } from './ApiClientModalProvider';
+export type { RoutePayload } from '@scalar/api-client/v2/features/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,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA"}
+{"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"}

package/dist/index.js

@@ -1,115 +1,136 @@
 "use client";
-import { createContext, useContext, useEffect, useRef, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/client-store.ts
-globalThis.__VUE_OPTIONS_API__ = true;
-globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true;
-globalThis.__VUE_PROD_DEVTOOLS__ = false;
-/** Client state */
-var state = {
-	createClient: null,
-	clientDict: {}
-};
-/** Set of listener functions to be called when state changes */
-var listeners = /* @__PURE__ */ new Set();
-/** Subscribe to state changes */
-var subscribe = (listener) => {
-	listeners.add(listener);
-	return () => listeners.delete(listener);
-};
-/** Get the current state at this moment in time */
-var getSnapshot = () => state;
-/** Trigger all listeners */
-var emit = () => listeners.forEach((listener) => listener());
-/** Set the create client state */
-var setCreateClient = (clientFactory) => {
-	state = {
-		...state,
-		createClient: clientFactory
-	};
-	emit();
-};
-/** Add a client to the client dict */
-var addClient = (url, client) => {
-	state = {
-		...state,
-		clientDict: {
-			...state.clientDict,
-			[url]: client
-		}
-	};
-	emit();
-};
-/** Remove a client from the client dict */
-var removeClient = (url) => {
-	const { [url]: _, ...clientDict } = state.clientDict;
-	state = {
-		...state,
-		clientDict
+import { useEffect, useState } from "react";
+//#region src/lazy-load.ts
+/**
+* Creates a lazy singleton getter: the factory runs at most once, caches the resulting promise,
+* and clears the cache on failure so the next call can retry.
+*
+* Optional args are forwarded to the factory on the first (cache-miss) call only.
+* Subsequent calls return the cached promise regardless of the args passed.
+*/
+var makeLazySingleton = (factory) => {
+	let cached;
+	return (...args) => {
+		cached ??= factory(...args).catch((error) => {
+			cached = void 0;
+			throw error;
+		});
+		return cached;
 	};
-	emit();
-};
-var clientStore = {
-	getSnapshot,
-	subscribe,
-	setCreateClient,
-	addClient,
-	removeClient
 };
+/** Lazy load the client modal creator */
+var getClientModalCreator = makeLazySingleton(() => import("@scalar/api-client/v2/features/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). */
+var getWorkspaceEventBusSingleton = makeLazySingleton(() => import("@scalar/workspace-store/events").then(({ createWorkspaceEventBus }) => createWorkspaceEventBus()));
+/**
+* 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
+* (`url`, `content`) must be registered via `workspaceStore.addDocument` after the client
+* is ready — they are not part of the modal constructor.
+*/
+var getOrCreateApiClient = makeLazySingleton(async (options = {}) => {
+	const el = document.createElement("div");
+	el.className = "scalar-app";
+	document.body.appendChild(el);
+	try {
+		const [createModal, workspaceStore, eventBus] = await Promise.all([
+			getClientModalCreator(),
+			getWorkspaceStoreSingleton(),
+			getWorkspaceEventBusSingleton()
+		]);
+		return {
+			apiClient: createModal({
+				el,
+				eventBus,
+				workspaceStore,
+				options
+			}),
+			workspaceStore
+		};
+	} catch (error) {
+		el.remove();
+		throw error;
+	}
+});
 //#endregion
-//#region src/ApiClientModalProvider.tsx
-var ApiClientModalContext = createContext(null);
-/** Ensures we only load createClient once */
-var isLoading = false;
-/** Hack: this is strictly to prevent creation of extra clients as the store lags a bit */
-var clientDict = {};
+//#region src/use-api-client.ts
+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 = {};
 /**
-* Api Client Modal React
+* Returns the singleton Api Client
+*
+* On first call the Vue app is lazily created and appended to document.body where it
+* lives for the lifetime of the page — it is never unmounted, so it survives client-side
+* navigation without losing state.
 *
-* Provider which mounts the Scalar Api Client Modal vue app.
-* Rebuilt to support multiple instances when using a unique spec.url
+* Subsequent calls from any component share the same instance of the client but can use the same
+* or different documents
 */
-var ApiClientModalProvider = ({ children, initialRequest, configuration = {} }) => {
-	const key = configuration.spec?.url || "default";
-	const el = useRef(null);
-	const state = useSyncExternalStore(clientStore.subscribe, clientStore.getSnapshot, clientStore.getSnapshot);
+var useApiClient = ({ configuration } = {}) => {
+	const [client, setClient] = useState(void 0);
+	const [workspaceStore, setWorkspaceStore] = useState(void 0);
+	const [documentSlug, setDocumentSlug] = useState("");
+	/** Small wrapper to set the documentSlug */
+	const open = (payload) => client?.open({
+		documentSlug,
+		...payload
+	});
 	useEffect(() => {
-		const loadApiClientJs = async () => {
-			isLoading = true;
-			const { createApiClientModal } = await import("@scalar/api-client/layouts/Modal");
-			clientStore.setCreateClient(createApiClientModal);
+		let cancelled = false;
+		const { url, content, ...modalOptions } = configuration ?? {};
+		getOrCreateApiClient(modalOptions)?.then((_client) => {
+			if (cancelled || !_client) return;
+			const slug = url || content?.info?.title || "";
+			setClient(_client.apiClient);
+			setWorkspaceStore(_client.workspaceStore);
+			setDocumentSlug(slug);
+			if (slug && !documentDict[slug]) {
+				documentDict[slug] = true;
+				_client.workspaceStore.addDocument(content ? {
+					name: slug,
+					document: content
+				} : {
+					name: slug,
+					url: url ?? ""
+				});
+			}
+		});
+		return () => {
+			cancelled = true;
 		};
-		if (!isLoading) loadApiClientJs();
 	}, []);
 	useEffect(() => {
-		if (!el.current || !state.createClient || clientDict[key]) return () => null;
-		const { client: _client } = state.createClient({
-			el: el.current,
-			configuration
+		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
+		} : {
+			name: slug,
+			url: configuration.url ?? ""
 		});
-		const updateConfig = async () => {
-			await _client.updateConfig(configuration);
-			if (initialRequest) _client.route(initialRequest);
-		};
-		clientStore.addClient(key, _client);
-		clientDict[key] = _client;
-		updateConfig();
-		return () => {
-			_client.app.unmount();
-			clientStore.removeClient(key);
-			delete clientDict[key];
-		};
-	}, [el.current, state.createClient]);
-	return /* @__PURE__ */ jsxs(ApiClientModalContext.Provider, {
-		value: state.clientDict[key] ?? null,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "scalar-app",
-			ref: el
-		}), children]
-	});
+	}, [
+		client,
+		configuration?.url,
+		configuration?.content,
+		workspaceStore
+	]);
+	return client ? {
+		...client,
+		open
+	} : void 0;
 };
-var useApiClientModal = () => useContext(ApiClientModalContext);
 //#endregion
-export { ApiClientModalProvider, useApiClientModal };
+export { useApiClient };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/client-store.ts","../src/ApiClientModalProvider.tsx"],"sourcesContent":["import type { ApiClient, createApiClientModal } from '@scalar/api-client/layouts/Modal'\n\n// These are required for the vue bundler version\nglobalThis.__VUE_OPTIONS_API__ = true\nglobalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true\nglobalThis.__VUE_PROD_DEVTOOLS__ = false\n\n/** Client state */\nlet state = {\n  createClient: null as typeof createApiClientModal | null,\n  clientDict: {} as Record<string, ApiClient>,\n}\n\n/** Set of listener functions to be called when state changes */\nconst listeners = new Set<() => void>()\n\n/** Subscribe to state changes */\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener)\n  return () => listeners.delete(listener)\n}\n\n/** Get the current state at this moment in time */\nconst getSnapshot = () => state\n\n/** Trigger all listeners */\nconst emit = () => listeners.forEach((listener) => listener())\n\n/** Set the create client state */\nconst setCreateClient = (clientFactory: typeof createApiClientModal) => {\n  state = { ...state, createClient: clientFactory }\n  emit()\n}\n\n/** Add a client to the client dict */\nconst addClient = (url: string, client: ApiClient) => {\n  state = { ...state, clientDict: { ...state.clientDict, [url]: client } }\n  emit()\n}\n\n/** Remove a client from the client dict */\nconst removeClient = (url: string) => {\n  const { [url]: _, ...clientDict } = state.clientDict\n  state = { ...state, clientDict }\n  emit()\n}\n\nexport const clientStore = {\n  getSnapshot,\n  subscribe,\n  setCreateClient,\n  addClient,\n  removeClient,\n}\n","'use client'\n\nimport type { ApiClient } from '@scalar/api-client/layouts/Modal'\nimport type { OpenClientPayload } from '@scalar/api-client/libs'\nimport type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport type { PropsWithChildren } from 'react'\nimport { createContext, useContext, useEffect, useRef, useSyncExternalStore } from 'react'\n\nexport type { OpenClientPayload }\n\nimport { clientStore } from './client-store'\n\nimport './style.css'\n\nconst ApiClientModalContext = createContext<ApiClient | null>(null)\n\ntype Props = PropsWithChildren<{\n  /** Choose a request to initially route to */\n  initialRequest?: OpenClientPayload\n  /** Configuration for the Api Client */\n  configuration?: Partial<ApiClientConfiguration>\n}>\n\n/** Ensures we only load createClient once */\nlet isLoading = false\n\n/** Hack: this is strictly to prevent creation of extra clients as the store lags a bit */\nconst clientDict: Record<string, ApiClient> = {}\n\n/**\n * Api Client Modal React\n *\n * Provider which mounts the Scalar Api Client Modal vue app.\n * Rebuilt to support multiple instances when using a unique spec.url\n */\nexport const ApiClientModalProvider = ({ children, initialRequest, configuration = {} }: Props) => {\n  const key = configuration.spec?.url || 'default'\n  const el = useRef<HTMLDivElement | null>(null)\n\n  const state = useSyncExternalStore(clientStore.subscribe, clientStore.getSnapshot, clientStore.getSnapshot)\n\n  // Lazyload the js to create the client, but we only wanna call this once\n  useEffect(() => {\n    const loadApiClientJs = async () => {\n      isLoading = true\n      const { createApiClientModal } = await import('@scalar/api-client/layouts/Modal')\n      clientStore.setCreateClient(createApiClientModal)\n    }\n    if (!isLoading) {\n      void loadApiClientJs()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!el.current || !state.createClient || clientDict[key]) {\n      return () => null\n    }\n\n    // Check for cached client first\n    const { client: _client } = state.createClient({\n      el: el.current,\n      configuration,\n    })\n\n    const updateConfig = async () => {\n      await _client.updateConfig(configuration!)\n      if (initialRequest) {\n        _client.route(initialRequest)\n      }\n    }\n\n    // Add the client to the store and dict\n    clientStore.addClient(key, _client)\n    clientDict[key] = _client\n\n    // We update the config as we are using the sync version\n    void updateConfig()\n\n    // Ensure we unmount the vue app on unmount\n    return () => {\n      _client.app.unmount()\n      clientStore.removeClient(key)\n      delete clientDict[key]\n    }\n  }, [el.current, state.createClient])\n\n  return (\n    <ApiClientModalContext.Provider value={state.clientDict[key] ?? null}>\n      <div\n        className=\"scalar-app\"\n        ref={el}\n      />\n      {children}\n    </ApiClientModalContext.Provider>\n  )\n}\n\nexport const useApiClientModal = (): ApiClient | null => useContext(ApiClientModalContext)\n"],"mappings":";;;;AAGA,WAAW,sBAAsB;AACjC,WAAW,0CAA0C;AACrD,WAAW,wBAAwB;;AAGnC,IAAI,QAAQ;CACV,cAAc;CACd,YAAY,EAAA;CACb;;AAGD,IAAM,4BAAY,IAAI,KAAiB;;AAGvC,IAAM,aAAa,aAAyB;AAC1C,WAAU,IAAI,SAAS;AACvB,cAAa,UAAU,OAAO,SAAS;;;AAIzC,IAAM,oBAAoB;;AAG1B,IAAM,aAAa,UAAU,SAAS,aAAa,UAAU,CAAC;;AAG9D,IAAM,mBAAmB,kBAA+C;AACtE,SAAQ;EAAE,GAAG;EAAO,cAAc;EAAe;AACjD,OAAM;;;AAIR,IAAM,aAAa,KAAa,WAAsB;AACpD,SAAQ;EAAE,GAAG;EAAO,YAAY;GAAE,GAAG,MAAM;IAAa,MAAM;;EAAU;AACxE,OAAM;;;AAIR,IAAM,gBAAgB,QAAgB;CACpC,MAAM,GAAG,MAAM,GAAG,GAAG,eAAe,MAAM;AAC1C,SAAQ;EAAE,GAAG;EAAO;EAAY;AAChC,OAAM;;AAGR,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACD;;;ACvCD,IAAM,wBAAwB,cAAgC,KAAK;;AAUnE,IAAI,YAAY;;AAGhB,IAAM,aAAwC,EAAE;;;;;;;AAQhD,IAAa,0BAA0B,EAAE,UAAU,gBAAgB,gBAAgB,EAAE,OAAc;CACjG,MAAM,MAAM,cAAc,MAAM,OAAO;CACvC,MAAM,KAAK,OAA8B,KAAK;CAE9C,MAAM,QAAQ,qBAAqB,YAAY,WAAW,YAAY,aAAa,YAAY,YAAY;AAG3G,iBAAgB;EACd,MAAM,kBAAkB,YAAY;AAClC,eAAY;GACZ,MAAM,EAAE,yBAAyB,MAAM,OAAO;AAC9C,eAAY,gBAAgB,qBAAqB;;AAEnD,MAAI,CAAC,UACE,kBAAiB;IAEvB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,GAAG,WAAW,CAAC,MAAM,gBAAgB,WAAW,KACnD,cAAa;EAIf,MAAM,EAAE,QAAQ,YAAY,MAAM,aAAa;GAC7C,IAAI,GAAG;GACP;GACD,CAAC;EAEF,MAAM,eAAe,YAAY;AAC/B,SAAM,QAAQ,aAAa,cAAe;AAC1C,OAAI,eACF,SAAQ,MAAM,eAAe;;AAKjC,cAAY,UAAU,KAAK,QAAQ;AACnC,aAAW,OAAO;AAGb,gBAAc;AAGnB,eAAa;AACX,WAAQ,IAAI,SAAS;AACrB,eAAY,aAAa,IAAI;AAC7B,UAAO,WAAW;;IAEnB,CAAC,GAAG,SAAS,MAAM,aAAa,CAAC;AAEpC,QACE,qBAAC,sBAAsB,UAAvB;EAAgC,OAAO,MAAM,WAAW,QAAQ;YAAhE,CACE,oBAAC,OAAD;GACE,WAAU;GACV,KAAK;GACL,CAAA,EACD,SAAA;;;AAKP,IAAa,0BAA4C,WAAW,sBAAsB"}
+{"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"}

package/dist/lazy-load.d.ts

@@ -0,0 +1,87 @@
+/** Lazy load the client modal creator */
+export declare const getClientModalCreator: () => Promise<({ el, eventBus, mountOnInitialize, plugins, workspaceStore, options, }: {
+    el: HTMLElement | null;
+    mountOnInitialize?: boolean;
+    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>;
+/** 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). */
+export declare const getWorkspaceEventBusSingleton: () => Promise<import("@scalar/workspace-store/events").WorkspaceEventBus>;
+/**
+ * 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
+ * (`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;
+    workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
+}>;
+//# sourceMappingURL=lazy-load.d.ts.map

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

@@ -0,0 +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"}

package/dist/style.css

@@ -1014,6 +1014,7 @@ input[data-v-c1a50a6e]::placeholder {
     --scalar-text-decoration-hover: underline;
     --scalar-link-font-weight: inherit;
     --scalar-sidebar-indent: 20px;
+    --scalar-sidebar-padding: 12px;
   }
 
   .dark-mode {
@@ -1436,6 +1437,15 @@ input[data-v-c1a50a6e]::placeholder {
     width: 50dvw !important;
   }
 }
+@keyframes border-bottom {
+  from {
+    border-bottom-width: 0;
+  }
+
+  to {
+    border-bottom-width: var(--scalar-border-width);
+  }
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
@@ -2935,6 +2945,11 @@ input[data-v-c1a50a6e]::placeholder {
   max-height: 3.40282e38px;
   display: flex;
 }
+.animate-sidebar-border-bottom {
+  animation: forwards border-bottom;
+  animation-timeline: scroll();
+  animation-range-end: 1px;
+}
 .group\/sidebar-section:first-of-type > .group\/spacer-before, .group\/sidebar-section:last-of-type > .group\/spacer-after {
   height: 0;
 }
@@ -3144,6 +3159,9 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .top-\(--nested-items-offset\)\! {
   top: var(--nested-items-offset) !important;
 }
+.scalar-app .top-\(--scalar-sidebar-sticky-offset\,0\) {
+  top: var(--scalar-sidebar-sticky-offset, 0);
+}
 .scalar-app .top-0\.5 {
   top: 2px;
 }
@@ -3231,6 +3249,9 @@ input[data-v-c1a50a6e]::placeholder {
     max-width: 96rem;
   }
 }
+.scalar-app .-m-\(--scalar-sidebar-padding\) {
+  margin: calc(var(--scalar-sidebar-padding) * -1);
+}
 .scalar-app .-m-1 {
   margin: -4px;
 }
@@ -3358,6 +3379,9 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .min-h-header {
   min-height: 48px;
 }
+.scalar-app .w-\(--scalar-sidebar-width\) {
+  width: var(--scalar-sidebar-width);
+}
 .scalar-app .w-12 {
   width: 48px;
 }
@@ -3543,6 +3567,9 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .border-sidebar-border-search {
   border-color: var(--scalar-sidebar-search-border-color, var(--scalar-border-color));
 }
+.scalar-app .border-b-sidebar-border {
+  border-bottom-color: var(--scalar-sidebar-border-color, var(--scalar-border-color));
+}
 .scalar-app .bg-\(--bg-light\) {
   background-color: var(--bg-light);
 }
@@ -3651,6 +3678,9 @@ input[data-v-c1a50a6e]::placeholder {
   -webkit-mask-repeat: repeat;
   mask-repeat: repeat;
 }
+.scalar-app .p-\(--scalar-sidebar-padding\) {
+  padding: var(--scalar-sidebar-padding);
+}
 .scalar-app .p-0\.25 {
   padding: 1px;
 }
@@ -3862,11 +3892,11 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .placeholder\:font-\[inherit\]::placeholder {
   font-family: inherit;
 }
-.scalar-app .first\:rounded-t-\[inherit\]:first-child, :is(.scalar-app .\*\:first\:rounded-t-\[inherit\] > *):first-child {
+.scalar-app .first\:rounded-t-\[inherit\]:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-.scalar-app .last\:rounded-b-\[inherit\]:last-child, :is(.scalar-app .\*\:last\:rounded-b-\[inherit\] > *):last-child {
+.scalar-app .last\:rounded-b-\[inherit\]:last-child {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
@@ -4042,6 +4072,9 @@ input[data-v-c1a50a6e]::placeholder {
   inherits: false;
   initial-value: "";
 }
+:where(.scalar-app) [class*="rotate-"], :where(.scalar-app) [class*="translate-"], :where(.scalar-app) [class*="scale-"] {
+  transform: none;
+}
 .scalar-app .pointer-events-auto {
   pointer-events: auto;
 }
@@ -4727,12 +4760,18 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .min-h-20 {
   min-height: 80px;
 }
+.scalar-app .min-h-\[4rem\] {
+  min-height: 4rem;
+}
 .scalar-app .min-h-\[64px\] {
   min-height: 64px;
 }
 .scalar-app .min-h-\[65px\] {
   min-height: 65px;
 }
+.scalar-app .min-h-\[300px\] {
+  min-height: 300px;
+}
 .scalar-app .min-h-\[calc\(1rem\*4\)\] {
   min-height: 4rem;
 }
@@ -4757,6 +4796,9 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .w-1\/2 {
   width: 50%;
 }
+.scalar-app .w-2 {
+  width: 8px;
+}
 .scalar-app .w-2\.5 {
   width: 10px;
 }
@@ -5342,7 +5384,7 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .border-\(--scalar-color-alert\) {
   border-color: var(--scalar-color-alert);
 }
-.scalar-app .border-border {
+.scalar-app .border-\[var\(--scalar-border-color\)\], .scalar-app .border-border {
   border-color: var(--scalar-border-color);
 }
 .scalar-app .border-c-1 {
@@ -5379,6 +5421,18 @@ input[data-v-c1a50a6e]::placeholder {
 .scalar-app .bg-\(--scalar-background-alert\) {
   background-color: var(--scalar-background-alert);
 }
+.scalar-app .bg-\[var\(--scalar-background-1\)\] {
+  background-color: var(--scalar-background-1);
+}
+.scalar-app .bg-\[var\(--scalar-background-2\)\] {
+  background-color: var(--scalar-background-2);
+}
+.scalar-app .bg-\[var\(--scalar-background-3\)\] {
+  background-color: var(--scalar-background-3);
+}
+.scalar-app .bg-\[var\(--scalar-color-green\)\] {
+  background-color: var(--scalar-color-green);
+}
 .scalar-app .bg-b-1 {
   background-color: var(--scalar-background-1);
 }
@@ -6036,6 +6090,10 @@ input[data-v-c1a50a6e]::placeholder {
   --tw-shadow: 0 -8px 0 8px var(--tw-shadow-color, var(--scalar-background-1)), 0 0 8px 8px var(--tw-shadow-color, var(--scalar-background-1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.scalar-app .shadow-\[var\(--scalar-shadow-1\)\] {
+  --tw-shadow: var(--scalar-shadow-1);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .scalar-app .shadow-border {
   --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6096,6 +6154,11 @@ input[data-v-c1a50a6e]::placeholder {
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.scalar-app .transition-all {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .scalar-app .transition-colors {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -6479,6 +6542,10 @@ input[data-v-c1a50a6e]::placeholder {
     border-color: inherit;
   }
 
+  .scalar-app .hover\:bg-\[var\(--scalar-background-3\)\]:hover {
+    background-color: var(--scalar-background-3);
+  }
+
   .scalar-app .hover\:bg-b-2:hover, .scalar-app .hover\:bg-b-2\/40:hover {
     background-color: var(--scalar-background-2);
   }
@@ -7359,51 +7426,51 @@ input[data-v-c1a50a6e]::placeholder {
 .description[data-v-1b7a32a4] .markdown > *:first-child {
   margin-top: 0;
 }
-[data-v-e06ea441] .cm-editor {
+[data-v-0ec7147f] .cm-editor {
   height: 100%;
   outline: none;
   width: 100%;
 }
-[data-v-e06ea441] .cm-line {
+[data-v-0ec7147f] .cm-line {
   padding: 0;
 }
-[data-v-e06ea441] .cm-content {
+[data-v-0ec7147f] .cm-content {
   padding: 0;
   display: flex;
   align-items: center;
   font-size: var(--scalar-small);
 }
-.scroll-timeline-x[data-v-e06ea441] {
+.scroll-timeline-x[data-v-0ec7147f] {
   scroll-timeline: --scroll-timeline x;
   /* Firefox supports */
   scroll-timeline: --scroll-timeline horizontal;
   -ms-overflow-style: none; /* IE and Edge */
 }
-.scroll-timeline-x-hidden[data-v-e06ea441] {
+.scroll-timeline-x-hidden[data-v-0ec7147f] {
   overflow-x: auto;
 }
-.scroll-timeline-x-hidden[data-v-e06ea441] .cm-scroller {
+.scroll-timeline-x-hidden[data-v-0ec7147f] .cm-scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-right: 20px;
   overflow: auto;
 }
-.scroll-timeline-x-hidden[data-v-e06ea441]::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-0ec7147f]::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-hidden[data-v-e06ea441] .cm-scroller::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-0ec7147f] .cm-scroller::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-address[data-v-e06ea441] {
+.scroll-timeline-x-address[data-v-0ec7147f] {
   line-height: 27px;
   scrollbar-width: none; /* Firefox */
 }
 /* make clickable are to left of send button */
-.scroll-timeline-x-address[data-v-e06ea441]:after {
+.scroll-timeline-x-address[data-v-0ec7147f]:after {
   content: '';
   position: absolute;
   height: 100%;
@@ -7411,24 +7478,24 @@ input[data-v-c1a50a6e]::placeholder {
   right: 0;
   cursor: text;
 }
-.scroll-timeline-x-address[data-v-e06ea441]:empty:before {
+.scroll-timeline-x-address[data-v-0ec7147f]:empty:before {
   content: 'Enter URL or cURL request';
   color: var(--scalar-color-3);
   pointer-events: none;
 }
-.fade-left[data-v-e06ea441],
-.fade-right[data-v-e06ea441] {
+.fade-left[data-v-0ec7147f],
+.fade-right[data-v-0ec7147f] {
   content: '';
   position: sticky;
   height: 100%;
-  animation-name: fadein-e06ea441;
+  animation-name: fadein-0ec7147f;
   animation-duration: 1ms;
   animation-direction: reverse;
   animation-timeline: --scroll-timeline;
   pointer-events: none;
   z-index: 1;
 }
-.fade-left[data-v-e06ea441] {
+.fade-left[data-v-0ec7147f] {
   background: linear-gradient(
     -90deg,
     color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,
@@ -7439,7 +7506,7 @@ input[data-v-c1a50a6e]::placeholder {
   min-width: 6px;
   animation-direction: normal;
 }
-.fade-right[data-v-e06ea441] {
+.fade-right[data-v-0ec7147f] {
   background: linear-gradient(
     90deg,
     color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,
@@ -7449,7 +7516,7 @@ input[data-v-c1a50a6e]::placeholder {
   right: -1px;
   min-width: 24px;
 }
-@keyframes fadein-e06ea441 {
+@keyframes fadein-0ec7147f {
 0% {
     opacity: 0;
 }
@@ -7457,7 +7524,7 @@ input[data-v-c1a50a6e]::placeholder {
     opacity: 1;
 }
 }
-.address-bar-bg-states[data-v-e06ea441] {
+.address-bar-bg-states[data-v-0ec7147f] {
   --scalar-address-bar-bg: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -7465,14 +7532,14 @@ input[data-v-c1a50a6e]::placeholder {
   );
   background: var(--scalar-address-bar-bg);
 }
-.address-bar-bg-states[data-v-e06ea441]:has(.cm-focused) {
+.address-bar-bg-states[data-v-0ec7147f]:has(.cm-focused) {
   --scalar-address-bar-bg: var(--scalar-background-1);
   border-color: var(--scalar-border-color);
   outline-width: 1px;
   outline-style: solid;
 }
-.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-e06ea441],
-.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-e06ea441] {
+.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-0ec7147f],
+.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-0ec7147f] {
   --scalar-address-bar-bg: var(--scalar-background-1);
 }
 .app-exit-button[data-v-0e03d0d8] {
@@ -7881,27 +7948,27 @@ to {
 .dark-mode .download-app-button[data-v-9b609275]:hover {
   background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
 }
-.empty-sidebar-item-content[data-v-6f80f8d3] {
+.empty-sidebar-item-content[data-v-96a54993] {
   display: none;
 }
-.empty-sidebar-item .empty-sidebar-item-content[data-v-6f80f8d3] {
+.empty-sidebar-item .empty-sidebar-item-content[data-v-96a54993] {
   display: block;
 }
-.rabbitjump[data-v-6f80f8d3] {
+.rabbitjump[data-v-96a54993] {
   opacity: 0;
 }
-.empty-sidebar-item:hover .rabbitjump[data-v-6f80f8d3] {
+.empty-sidebar-item:hover .rabbitjump[data-v-96a54993] {
   opacity: 1;
-  animation: rabbitAnimation-6f80f8d3 0.5s steps(1) infinite;
+  animation: rabbitAnimation-96a54993 0.5s steps(1) infinite;
 }
-.empty-sidebar-item:hover .rabbitsit[data-v-6f80f8d3] {
+.empty-sidebar-item:hover .rabbitsit[data-v-96a54993] {
   opacity: 0;
-  animation: rabbitAnimation2-6f80f8d3 0.5s steps(1) infinite;
+  animation: rabbitAnimation2-96a54993 0.5s steps(1) infinite;
 }
-.empty-sidebar-item:hover .rabbit-ascii[data-v-6f80f8d3] {
-  animation: rabbitRun-6f80f8d3 8s infinite linear;
+.empty-sidebar-item:hover .rabbit-ascii[data-v-96a54993] {
+  animation: rabbitRun-96a54993 8s infinite linear;
 }
-@keyframes rabbitRun-6f80f8d3 {
+@keyframes rabbitRun-96a54993 {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -7921,7 +7988,7 @@ to {
     transform: translate3d(0, 0, 0);
 }
 }
-@keyframes rabbitAnimation-6f80f8d3 {
+@keyframes rabbitAnimation-96a54993 {
 0%,
   100% {
     opacity: 1;
@@ -7930,7 +7997,7 @@ to {
     opacity: 0;
 }
 }
-@keyframes rabbitAnimation2-6f80f8d3 {
+@keyframes rabbitAnimation2-96a54993 {
 0%,
   100% {
     opacity: 0;
@@ -9030,5 +9097,8 @@ to {
   justify-content: flex-end;
   gap: 1rem;
 }
+.document-scripts-editors__container[data-v-8c8fa790] {
+  min-height: 300px;
+}
 /*$vite$:1*/
 /*$vite$:1*/

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

@@ -0,0 +1,26 @@
+import type { ApiClientModal, RoutePayload } from '@scalar/api-client/v2/features/modal';
+import type { ApiClientConfiguration } from '@scalar/types/api-reference';
+import './style.css';
+/** We don't really need all of the content types so we just accept an object instead */
+export type ApiClientConfigurationReact = Partial<Omit<ApiClientConfiguration, 'content' | 'url'> & {
+    content?: Record<string, unknown>;
+    url?: string;
+}>;
+export type UseApiClientModalProps = {
+    /** Configuration for the Api Client (url or inline content) */
+    configuration?: ApiClientConfigurationReact;
+};
+/**
+ * Returns the singleton Api Client
+ *
+ * On first call the Vue app is lazily created and appended to document.body where it
+ * lives for the lifetime of the page — it is never unmounted, so it survives client-side
+ * navigation without losing state.
+ *
+ * Subsequent calls from any component share the same instance of the client but can use the same
+ * or different documents
+ */
+export declare const useApiClient: ({ configuration, }?: UseApiClientModalProps) => (Omit<ApiClientModal, "open"> & {
+    open: (payload: RoutePayload) => void;
+}) | undefined;
+//# sourceMappingURL=use-api-client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-api-client.d.ts","sourceRoot":"","sources":["../src/use-api-client.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACxF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAGzE,OAAO,aAAa,CAAA;AAUpB,wFAAwF;AACxF,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CACtG,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,2BAA2B,CAAA;CAC5C,CAAA;AAKD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,qBAE1B,sBAA2B,KAC1B,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,CAAC,GAC1E,SAsEH,CAAA"}

package/dist/vitest.setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=vitest.setup.d.ts.map

package/dist/vitest.setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.setup.d.ts","sourceRoot":"","sources":["../src/vitest.setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "1.4.20",
+  "version": "2.0.1",
   "engines": {
     "node": ">=22"
   },
@@ -39,17 +39,23 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/api-client": "2.41.0",
-    "@scalar/types": "0.7.6"
+    "@scalar/api-client": "2.43.0",
+    "@scalar/types": "0.8.0",
+    "@scalar/workspace-store": "0.45.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "6.0.1",
+    "jsdom": "^29.0.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "rollup-preserve-directives": "^1.1.1",
-    "vite": "8.0.0"
+    "vite": "8.0.0",
+    "vitest": "^4.1.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
@@ -57,6 +63,7 @@
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",
     "dev": "vite ./playground -c ./vite.config.ts",
+    "test": "vitest --run",
     "types:check": "vue-tsc --noEmit"
   }
 }

package/dist/ApiClientModalProvider.d.ts

@@ -1,21 +0,0 @@
-import type { ApiClient } from '@scalar/api-client/layouts/Modal';
-import type { OpenClientPayload } from '@scalar/api-client/libs';
-import type { ApiClientConfiguration } from '@scalar/types/api-reference';
-import type { PropsWithChildren } from 'react';
-export type { OpenClientPayload };
-import './style.css';
-type Props = PropsWithChildren<{
-    /** Choose a request to initially route to */
-    initialRequest?: OpenClientPayload;
-    /** Configuration for the Api Client */
-    configuration?: Partial<ApiClientConfiguration>;
-}>;
-/**
- * Api Client Modal React
- *
- * Provider which mounts the Scalar Api Client Modal vue app.
- * Rebuilt to support multiple instances when using a unique spec.url
- */
-export declare const ApiClientModalProvider: ({ children, initialRequest, configuration }: Props) => import("react/jsx-runtime").JSX.Element;
-export declare const useApiClientModal: () => ApiClient | null;
-//# sourceMappingURL=ApiClientModalProvider.d.ts.map

package/dist/ApiClientModalProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ApiClientModalProvider.d.ts","sourceRoot":"","sources":["../src/ApiClientModalProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG9C,YAAY,EAAE,iBAAiB,EAAE,CAAA;AAIjC,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,iBAAiB,CAAA;IAClC,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;CAChD,CAAC,CAAA;AAQF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,6CAAkD,KAAK,4CA4D7F,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAO,SAAS,GAAG,IAAyC,CAAA"}

package/dist/client-store.d.ts

@@ -1,12 +0,0 @@
-import type { ApiClient, createApiClientModal } from '@scalar/api-client/layouts/Modal';
-export declare const clientStore: {
-    getSnapshot: () => {
-        createClient: typeof createApiClientModal | null;
-        clientDict: Record<string, ApiClient>;
-    };
-    subscribe: (listener: () => void) => () => boolean;
-    setCreateClient: (clientFactory: typeof createApiClientModal) => void;
-    addClient: (url: string, client: ApiClient) => void;
-    removeClient: (url: string) => void;
-};
-//# sourceMappingURL=client-store.d.ts.map

package/dist/client-store.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client-store.d.ts","sourceRoot":"","sources":["../src/client-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AA+CvF,eAAO,MAAM,WAAW;;sBAtCA,OAAO,oBAAoB,GAAG,IAAI;oBACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;;0BAOhB,MAAM,IAAI;qCAYC,OAAO,oBAAoB;qBAM3C,MAAM,UAAU,SAAS;wBAMtB,MAAM;CAYhC,CAAA"}