@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/features/modal/Modal.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<\n    Partial<\n      Pick<\n        ApiReferenceConfigurationRaw,\n        | 'authentication'\n        | 'baseServerURL'\n        | 'hideClientButton'\n        | 'hiddenClients'\n        | 'servers'\n      >\n    >\n  >\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  toValue,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport { mergeSecurity } from '@/v2/blocks/scalar-auth-selector-block/helpers/merge-security'\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { getActiveEnvironment } from '@/v2/helpers/get-active-environment'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<ModalProps>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(() =>\n  getActiveEnvironment(workspaceStore, document.value),\n)\n\n/** Merge authentication config with the document security schemes */\nconst securitySchemes = computed(() =>\n  mergeSecurity(\n    document.value?.components?.securitySchemes,\n    toValue(options)?.authentication?.securitySchemes,\n    workspaceStore.auth,\n    document.value?.['x-scalar-navigation']?.name ?? '',\n  ),\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-3 z-2\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :securitySchemes\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eAClB,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CACtD;;EAGA,MAAM,kBAAkB,eACtB,cACE,QAAA,SAAS,OAAO,YAAY,iBAC5B,QAAQ,QAAA,QAAQ,EAAE,gBAAgB,iBAClC,QAAA,eAAe,MACf,QAAA,SAAS,QAAQ,wBAAwB,QAAQ,GAClD,CACH;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA+CuB,8BAAA,EA/CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAmCO,QAnCP,YAmCO;KAhCL,YAEsC,MAAA,sBAAA,EAAA;kBAD3B,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAeoB,mBAAA;MAdA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,iBAAA,gBAAA;MACA,gBAAA,QAAA;;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/v2/features/modal/helpers/create-api-client-modal.d.ts

@@ -3,8 +3,8 @@ import type { ClientPlugin } from '@scalar/oas-utils/helpers';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import { type App } from 'vue';
-import { type RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters';
-import { type ModalProps } from '../../../../v2/features/modal/Modal.vue';
+import { type RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
+import { type ModalProps } from '../../../../v2/features/modal/Modal.vue.js';
 type CreateApiClientModalOptions = {
     /** Element to mount the client modal to. */
     el: HTMLElement | null;

package/dist/v2/features/modal/helpers/create-api-client-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAEhG,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,KAAK,CAAA;AAEzE,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAG7D,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAEtE,KAAK,2BAA2B,GAAG;IACjC,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,2BAA2B,KAAG,cAqHhC,CAAA"}
+{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAEhG,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,KAAK,CAAA;AAEzE,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAG7D,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAEtE,KAAK,2BAA2B,GAAG;IACjC,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,2BAA2B,KAAG,cA0HhC,CAAA"}

package/dist/v2/features/modal/helpers/create-api-client-modal.js

@@ -0,0 +1,103 @@
+import { resolveRouteParameters } from "./resolve-route-parameters.js";
+import { restoreWorkspaceState } from "./restore-workspace-state.js";
+import { useModalSidebar } from "../hooks/use-modal-sidebar.js";
+import Modal_default from "../Modal.vue.js";
+import { computed, createApp, reactive, ref, watch } from "vue";
+import { useModal } from "@scalar/components";
+import { createWorkspaceEventBus } from "@scalar/workspace-store/events";
+//#region src/v2/features/modal/helpers/create-api-client-modal.ts
+/**
+* Creates the API Client Modal.
+*
+* The modal does not require a router. Instead, navigation is handled by setting
+* active entities directly through the returned `route` function.
+*/
+var createApiClientModal = ({ el, eventBus = createWorkspaceEventBus({ debug: false }), mountOnInitialize = true, plugins = [], workspaceStore, options = {} }) => {
+	const requestBodyCompositionSelection = ref({});
+	const defaultEntities = {
+		path: "default",
+		method: "default",
+		example: "default",
+		documentSlug: workspaceStore.workspace["x-scalar-active-document"] || "default"
+	};
+	const workspaceStoreSnapshot = ref(null);
+	const parameters = reactive({ ...defaultEntities });
+	/** Navigate to the specified path, method, and example. */
+	const route = (payload) => {
+		Object.assign(parameters, defaultEntities, payload);
+	};
+	/** Resolved parameters from the workspace store. */
+	const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters));
+	const documentSlug = computed(() => resolvedParameters.value.documentSlug);
+	const path = computed(() => resolvedParameters.value.path);
+	const method = computed(() => resolvedParameters.value.method);
+	const exampleName = computed(() => resolvedParameters.value.example);
+	/** The document from the workspace store. */
+	const document = computed(() => workspaceStore.workspace.documents[documentSlug.value ?? ""] ?? null);
+	/** Sidebar state and selection handling. */
+	const sidebarState = useModalSidebar({
+		workspaceStore,
+		documentSlug,
+		path,
+		method,
+		exampleName,
+		route
+	});
+	const modalState = useModal();
+	const app = createApp(Modal_default, {
+		document,
+		eventBus,
+		exampleName,
+		method,
+		modalState,
+		path,
+		plugins,
+		requestBodyCompositionSelection,
+		sidebarState,
+		workspaceStore,
+		options
+	});
+	/** Snapshot the workspace store when the modal is opened. */
+	const handleModalOpen = () => {
+		workspaceStoreSnapshot.value = window.structuredClone(workspaceStore.exportWorkspace());
+	};
+	/** Restore the workspace store when the modal is closed. */
+	const handleModalClose = () => {
+		requestBodyCompositionSelection.value = {};
+		if (!workspaceStoreSnapshot.value) {
+			console.warn("No workspace store snapshot to restore");
+			return;
+		}
+		const result = restoreWorkspaceState({
+			workspaceStore,
+			workspaceState: workspaceStoreSnapshot.value,
+			name: documentSlug.value ?? ""
+		});
+		if (!result.ok) console.error("Failed to restore workspace state", result.error);
+	};
+	watch(() => modalState.open, (open) => open ? handleModalOpen() : handleModalClose());
+	app.config.idPrefix = "scalar-client";
+	/** Mount the modal to a given element. */
+	const mount = (mountingEl = el) => {
+		if (!mountingEl) {
+			console.error("[@scalar/api-client] Could not create the API client Modal.", "Invalid HTML element provided.", "Read more: https://github.com/scalar/scalar/tree/main/packages/api-client");
+			return;
+		}
+		app.mount(mountingEl);
+	};
+	if (mountOnInitialize) mount();
+	return {
+		app,
+		open: (payload) => {
+			modalState.open = true;
+			if (payload) route(payload);
+		},
+		mount,
+		route,
+		modalState
+	};
+};
+//#endregion
+export { createApiClientModal };
+
+//# sourceMappingURL=create-api-client-modal.js.map

package/dist/v2/features/modal/helpers/create-api-client-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-api-client-modal.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"sourcesContent":["import { type ModalState, useModal } from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus, createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { InMemoryWorkspace } from '@scalar/workspace-store/schemas/inmemory-workspace'\nimport { type App, computed, createApp, reactive, ref, watch } from 'vue'\n\nimport {\n  type DefaultEntities,\n  type RoutePayload,\n  resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport { restoreWorkspaceState } from '@/v2/features/modal/helpers/restore-workspace-state'\nimport { useModalSidebar } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport Modal, { type ModalProps } from '@/v2/features/modal/Modal.vue'\n\ntype CreateApiClientModalOptions = {\n  /** Element to mount the client modal to. */\n  el: HTMLElement | null\n  /**\n   * Will attempt to mount the references immediately.\n   * For SSR this may need to be disabled and handled manually on the client side.\n   */\n  mountOnInitialize?: boolean\n  /** You can pass in an event bus if you have one already, or we will create one */\n  eventBus?: WorkspaceEventBus\n  /** The workspace store must be initialized and passed in. */\n  workspaceStore: WorkspaceStore\n  /** Api client plugins to include in the modal */\n  plugins?: ClientPlugin[]\n  /** Subset of the configuration options for the modal, if you want it to be reactive ensure its a ref */\n  options?: ModalProps['options']\n}\n\nexport type ApiClientModal = {\n  app: App\n  open: (payload?: RoutePayload) => void\n  mount: (mountingEl: HTMLElement | null) => void\n  route: (payload: RoutePayload) => void\n  modalState: ModalState\n}\n\n/**\n * Creates the API Client Modal.\n *\n * The modal does not require a router. Instead, navigation is handled by setting\n * active entities directly through the returned `route` function.\n */\nexport const createApiClientModal = ({\n  el,\n  eventBus = createWorkspaceEventBus({\n    debug: import.meta.env.DEV,\n  }),\n  mountOnInitialize = true,\n  plugins = [],\n  workspaceStore,\n  options = {},\n}: CreateApiClientModalOptions): ApiClientModal => {\n  const requestBodyCompositionSelection = ref<Record<string, number>>({})\n\n  const defaultEntities: DefaultEntities = {\n    path: 'default',\n    method: 'default',\n    example: 'default',\n    documentSlug: workspaceStore.workspace['x-scalar-active-document'] || 'default',\n  }\n\n  const workspaceStoreSnapshot = ref<InMemoryWorkspace | null>(null)\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  /** The document from the workspace store. */\n  const document = computed(() => workspaceStore.workspace.documents[documentSlug.value ?? ''] ?? null)\n\n  /** Sidebar state and selection handling. */\n  const sidebarState = useModalSidebar({\n    workspaceStore,\n    documentSlug: documentSlug,\n    path: path,\n    method: method,\n    exampleName: exampleName,\n    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    method,\n    modalState,\n    path,\n    plugins,\n    requestBodyCompositionSelection,\n    sidebarState,\n    workspaceStore,\n    options,\n  } satisfies ModalProps)\n\n  /** Snapshot the workspace store when the modal is opened. */\n  const handleModalOpen = () => {\n    workspaceStoreSnapshot.value = window.structuredClone(workspaceStore.exportWorkspace())\n  }\n\n  /** Restore the workspace store when the modal is closed. */\n  const handleModalClose = () => {\n    requestBodyCompositionSelection.value = {}\n\n    if (!workspaceStoreSnapshot.value) {\n      console.warn('No workspace store snapshot to restore')\n      return\n    }\n\n    const result = restoreWorkspaceState({\n      workspaceStore,\n      workspaceState: workspaceStoreSnapshot.value,\n      name: documentSlug.value ?? '',\n    })\n\n    if (!result.ok) {\n      console.error('Failed to restore workspace state', result.error)\n    }\n    return\n  }\n\n  watch(\n    () => modalState.open,\n    (open) => (open ? handleModalOpen() : handleModalClose()),\n  )\n\n  // Use a unique id prefix to prevent collisions with other Vue apps on the page\n  app.config.idPrefix = 'scalar-client'\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgDA,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,OACD,CAAC,EACF,oBAAoB,MACpB,UAAU,EAAE,EACZ,gBACA,UAAU,EAAE,OACqC;CACjD,MAAM,kCAAkC,IAA4B,EAAE,CAAC;CAEvE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,MAAM,yBAAyB,IAA8B,KAAK;CAElE,MAAM,aAAa,SAA0B,EAAE,GAAG,iBAAiB,CAAC;;CAGpE,MAAM,SAAS,YAAgC;AAC7C,SAAO,OAAO,YAAY,iBAAiB,QAAQ;;;CAIrD,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,WAAW,CAAC;CAC7F,MAAM,eAAe,eAAe,mBAAmB,MAAM,aAAa;CAC1E,MAAM,OAAO,eAAe,mBAAmB,MAAM,KAAK;CAC1D,MAAM,SAAS,eAAe,mBAAmB,MAAM,OAAO;CAC9D,MAAM,cAAc,eAAe,mBAAmB,MAAM,QAAQ;;CAEpE,MAAM,WAAW,eAAe,eAAe,UAAU,UAAU,aAAa,SAAS,OAAO,KAAK;;CAGrG,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACD,CAAC;CAEF,MAAM,aAAa,UAAU;CAE7B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAsB;;CAGvB,MAAM,wBAAwB;AAC5B,yBAAuB,QAAQ,OAAO,gBAAgB,eAAe,iBAAiB,CAAC;;;CAIzF,MAAM,yBAAyB;AAC7B,kCAAgC,QAAQ,EAAE;AAE1C,MAAI,CAAC,uBAAuB,OAAO;AACjC,WAAQ,KAAK,yCAAyC;AACtD;;EAGF,MAAM,SAAS,sBAAsB;GACnC;GACA,gBAAgB,uBAAuB;GACvC,MAAM,aAAa,SAAS;GAC7B,CAAC;AAEF,MAAI,CAAC,OAAO,GACV,SAAQ,MAAM,qCAAqC,OAAO,MAAM;;AAKpE,aACQ,WAAW,OAChB,SAAU,OAAO,iBAAiB,GAAG,kBAAkB,CACzD;AAGD,KAAI,OAAO,WAAW;;CAGtB,MAAM,SAAS,aAAiC,OAAa;AAC3D,MAAI,CAAC,YAAY;AACf,WAAQ,MACN,+DACA,kCACA,4EACD;AACD;;AAEF,MAAI,MAAM,WAAW;;AAGvB,KAAI,kBACF,QAAO;AAGT,QAAO;EAEL;EAEA,OAAO,YAAiC;AACtC,cAAW,OAAO;AAClB,OAAI,QACF,OAAM,QAAQ;;EAIlB;EAEA;EAEA;EACD"}

package/dist/v2/features/modal/helpers/map-hidden-clients-config.js

@@ -0,0 +1,32 @@
+import { objectKeys } from "@scalar/helpers/object/object-keys";
+import { AVAILABLE_CLIENTS, GROUPED_CLIENTS } from "@scalar/types/snippetz";
+//#region src/v2/features/modal/helpers/map-hidden-clients-config.ts
+/**
+* Map the old hiddenClients config to the new httpClients config.
+* Filters out clients based on the configuration and returns the remaining clients.
+*/
+var mapHiddenClientsConfig = (hiddenClients) => {
+	if (hiddenClients === true) return [];
+	if (!hiddenClients || Array.isArray(hiddenClients) && hiddenClients.length === 0) return AVAILABLE_CLIENTS;
+	const visibleClientsSet = new Set(AVAILABLE_CLIENTS);
+	if (Array.isArray(hiddenClients)) for (const item of hiddenClients) {
+		const group = GROUPED_CLIENTS[item];
+		if (group) for (const client of group) visibleClientsSet.delete(`${item}/${client}`);
+		else if (item.includes("/")) visibleClientsSet.delete(item);
+		else for (const language of objectKeys(GROUPED_CLIENTS)) visibleClientsSet.delete(`${language}/${item}`);
+	}
+	else if (typeof hiddenClients === "object") {
+		for (const [targetId, clients] of Object.entries(hiddenClients)) if (clients === true) {
+			const group = GROUPED_CLIENTS[targetId];
+			if (group) for (const client of group) visibleClientsSet.delete(`${targetId}/${client}`);
+		} else if (Array.isArray(clients)) for (const client of clients) {
+			visibleClientsSet.delete(client);
+			visibleClientsSet.delete(`${targetId}/${client}`);
+		}
+	}
+	return Array.from(visibleClientsSet);
+};
+//#endregion
+export { mapHiddenClientsConfig };
+
+//# sourceMappingURL=map-hidden-clients-config.js.map

package/dist/v2/features/modal/helpers/map-hidden-clients-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-hidden-clients-config.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/map-hidden-clients-config.ts"],"sourcesContent":["import { objectKeys } from '@scalar/helpers/object/object-keys'\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport type { AvailableClient, TargetId } from '@scalar/types/snippetz'\nimport { AVAILABLE_CLIENTS, type AvailableClients, GROUPED_CLIENTS } from '@scalar/types/snippetz'\n\n/**\n * Map the old hiddenClients config to the new httpClients config.\n * Filters out clients based on the configuration and returns the remaining clients.\n */\nexport const mapHiddenClientsConfig = (hiddenClients: ApiReferenceConfiguration['hiddenClients']): AvailableClients => {\n  // Early return for boolean true - hide all clients\n  if (hiddenClients === true) {\n    return []\n  }\n\n  // Early return for falsy values or empty arrays - show all clients\n  if (!hiddenClients || (Array.isArray(hiddenClients) && hiddenClients.length === 0)) {\n    return AVAILABLE_CLIENTS\n  }\n\n  // Start with all clients visible and remove hidden ones\n  const visibleClientsSet = new Set<AvailableClient>(AVAILABLE_CLIENTS)\n\n  // Handle array config: ['js/fetch', 'js/axios', 'java', 'fetch', 'axios']\n  if (Array.isArray(hiddenClients)) {\n    for (const item of hiddenClients) {\n      // Check if item is a target group first\n      const group = GROUPED_CLIENTS[item as TargetId]\n\n      // Item is a target group (e.g., 'java', 'ruby') - hide all clients in the group\n      if (group) {\n        for (const client of group) {\n          visibleClientsSet.delete(`${item}/${client}` as AvailableClient)\n        }\n      }\n\n      // Item is a full client ID (e.g., 'js/fetch') - hide this specific client\n      else if (item.includes('/')) {\n        visibleClientsSet.delete(item as AvailableClient)\n      }\n\n      // Item is a client name suffix (e.g., 'fetch', 'axios') - hide all matching clients\n      else {\n        for (const language of objectKeys(GROUPED_CLIENTS)) {\n          visibleClientsSet.delete(`${language}/${item}` as AvailableClient)\n        }\n      }\n    }\n  }\n\n  // Handle object config: { node: true, python: ['requests'] }\n  else if (typeof hiddenClients === 'object') {\n    for (const [targetId, clients] of Object.entries(hiddenClients)) {\n      if (clients === true) {\n        // Hide all clients for this target\n        const group = GROUPED_CLIENTS[targetId as TargetId]\n        if (group) {\n          for (const client of group) {\n            visibleClientsSet.delete(`${targetId}/${client}` as AvailableClient)\n          }\n        }\n      } else if (Array.isArray(clients)) {\n        // Hide specific clients for this target\n        for (const client of clients) {\n          // Try both formats: 'fetch' and 'js/fetch'\n          visibleClientsSet.delete(client as AvailableClient)\n          visibleClientsSet.delete(`${targetId}/${client}` as AvailableClient)\n        }\n      }\n    }\n  }\n\n  return Array.from(visibleClientsSet)\n}\n"],"mappings":";;;;;;;AASA,IAAa,0BAA0B,kBAAgF;AAErH,KAAI,kBAAkB,KACpB,QAAO,EAAE;AAIX,KAAI,CAAC,iBAAkB,MAAM,QAAQ,cAAc,IAAI,cAAc,WAAW,EAC9E,QAAO;CAIT,MAAM,oBAAoB,IAAI,IAAqB,kBAAkB;AAGrE,KAAI,MAAM,QAAQ,cAAc,CAC9B,MAAK,MAAM,QAAQ,eAAe;EAEhC,MAAM,QAAQ,gBAAgB;AAG9B,MAAI,MACF,MAAK,MAAM,UAAU,MACnB,mBAAkB,OAAO,GAAG,KAAK,GAAG,SAA4B;WAK3D,KAAK,SAAS,IAAI,CACzB,mBAAkB,OAAO,KAAwB;MAKjD,MAAK,MAAM,YAAY,WAAW,gBAAgB,CAChD,mBAAkB,OAAO,GAAG,SAAS,GAAG,OAA0B;;UAOjE,OAAO,kBAAkB;OAC3B,MAAM,CAAC,UAAU,YAAY,OAAO,QAAQ,cAAc,CAC7D,KAAI,YAAY,MAAM;GAEpB,MAAM,QAAQ,gBAAgB;AAC9B,OAAI,MACF,MAAK,MAAM,UAAU,MACnB,mBAAkB,OAAO,GAAG,SAAS,GAAG,SAA4B;aAG/D,MAAM,QAAQ,QAAQ,CAE/B,MAAK,MAAM,UAAU,SAAS;AAE5B,qBAAkB,OAAO,OAA0B;AACnD,qBAAkB,OAAO,GAAG,SAAS,GAAG,SAA4B;;;AAM5E,QAAO,MAAM,KAAK,kBAAkB"}

package/dist/v2/features/modal/helpers/resolve-route-parameters.js

@@ -0,0 +1,92 @@
+import { getOperationEntries } from "@scalar/workspace-store/navigation";
+import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
+//#region src/v2/features/modal/helpers/resolve-route-parameters.ts
+/** Type guard to check if an entry is an example. */
+var isExample = (entry) => entry.type === "example";
+/**
+* Gets the document from the workspace store.
+* Returns undefined if the document slug is not provided or the document does not exist.
+*/
+var getDocument = (ctx) => ctx.store.workspace.documents[ctx.documentSlug ?? ""];
+/**
+* Resolves the document slug from a raw input value.
+*
+* When "default" is specified and no document exists with that slug,
+* we fall back to the active document or the first available document.
+* This ensures a valid document is selected even when the caller does not know which documents exist.
+*/
+var resolveDocumentSlug = (store, slug) => {
+	if (slug !== "default" || store.workspace.documents[slug] !== void 0) return slug;
+	return store.workspace["x-scalar-active-document"] || Object.keys(store.workspace.documents)[0];
+};
+/**
+* Resolves the path from a raw input value.
+*
+* When "default" is specified, returns the first available path in the document.
+* This is useful for initial navigation when no specific path is requested.
+*/
+var resolvePath = (ctx, path) => {
+	const document = getDocument(ctx);
+	if (!document) return;
+	if (path === "default") return Object.keys(document.paths ?? {})[0];
+	return path;
+};
+/**
+* Resolves the HTTP method from a raw input value.
+*
+* When "default" is specified, returns the first valid HTTP method for the given path.
+* This ensures we select a real method rather than metadata keys like "parameters" or "summary".
+*/
+var resolveMethod = (ctx, path, method) => {
+	const document = getDocument(ctx);
+	if (!document || !path) return;
+	if (method === "default") return Object.keys(document.paths?.[path] ?? {}).find(isHttpMethod);
+	return isHttpMethod(method) ? method : void 0;
+};
+/**
+* Resolves the example name from a raw input value.
+*
+* When "default" is specified, returns the first available example name.
+* Falls back to "default" when no examples exist, which signals to use the default request body.
+*/
+var resolveExampleName = (ctx, operation, exampleKey) => {
+	if (!getDocument(ctx) || operation?.type !== "operation") return "default";
+	const examples = operation.children?.filter(isExample) ?? [];
+	const matchingExample = examples.find((child) => child.name === exampleKey);
+	if (matchingExample) return matchingExample.name;
+	if (exampleKey === "default") return examples[0]?.name ?? "default";
+	return "default";
+};
+/**
+* Resolves all route parameters from raw input values to their actual values.
+*
+* This function handles "default" placeholders by looking up actual values from the workspace store.
+* It ensures the modal can be opened even when the caller does not know specific paths, methods, or examples.
+*/
+var resolveRouteParameters = (store, params) => {
+	const documentSlug = resolveDocumentSlug(store, params.documentSlug);
+	const ctx = {
+		store,
+		documentSlug
+	};
+	const path = resolvePath(ctx, params.path);
+	const method = resolveMethod(ctx, path, params.method);
+	const traversedDocument = getDocument(ctx)?.["x-scalar-navigation"];
+	if (!traversedDocument) return {
+		documentSlug,
+		path,
+		method,
+		example: "default"
+	};
+	const operation = getOperationEntries(traversedDocument).get(`${path}|${method}`)?.find((entry) => entry.type === "operation");
+	return {
+		documentSlug,
+		path,
+		method,
+		example: resolveExampleName(ctx, operation, params.example)
+	};
+};
+//#endregion
+export { resolveRouteParameters };
+
+//# sourceMappingURL=resolve-route-parameters.js.map

package/dist/v2/features/modal/helpers/resolve-route-parameters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-route-parameters.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/resolve-route-parameters.ts"],"sourcesContent":["import type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { getOperationEntries } from '@scalar/workspace-store/navigation'\nimport type { TraversedEntry, TraversedExample } from '@scalar/workspace-store/schemas/navigation'\n\n/** Payload for routing and opening the API client modal. */\nexport type RoutePayload = {\n  path: string\n  method: HttpMethod\n  example?: string\n  documentSlug?: string\n}\n\n/** Raw input values that may contain \"default\" placeholders. */\nexport type DefaultEntities = Record<keyof RoutePayload, string>\n\n/** Context for resolving route parameters from the workspace store. */\ntype ResolverContext = {\n  store: WorkspaceStore\n  documentSlug: string | undefined\n}\n\n/** Type guard to check if an entry is an example. */\nconst isExample = (entry: TraversedEntry): entry is TraversedExample => entry.type === 'example'\n\n/**\n * Gets the document from the workspace store.\n * Returns undefined if the document slug is not provided or the document does not exist.\n */\nconst getDocument = (ctx: ResolverContext) => ctx.store.workspace.documents[ctx.documentSlug ?? '']\n\n/**\n * Resolves the document slug from a raw input value.\n *\n * When \"default\" is specified and no document exists with that slug,\n * we fall back to the active document or the first available document.\n * This ensures a valid document is selected even when the caller does not know which documents exist.\n */\nexport const resolveDocumentSlug = (store: WorkspaceStore, slug: string | undefined): string | undefined => {\n  const hasMatchingDocument = slug !== 'default' || store.workspace.documents[slug] !== undefined\n\n  if (hasMatchingDocument) {\n    return slug\n  }\n\n  // Fall back to active document, then first available document\n  return store.workspace['x-scalar-active-document'] || Object.keys(store.workspace.documents)[0]\n}\n\n/**\n * Resolves the path from a raw input value.\n *\n * When \"default\" is specified, returns the first available path in the document.\n * This is useful for initial navigation when no specific path is requested.\n */\nexport const resolvePath = (ctx: ResolverContext, path: string | undefined): string | undefined => {\n  const document = getDocument(ctx)\n\n  if (!document) {\n    return undefined\n  }\n\n  if (path === 'default') {\n    return Object.keys(document.paths ?? {})[0]\n  }\n\n  return path\n}\n\n/**\n * Resolves the HTTP method from a raw input value.\n *\n * When \"default\" is specified, returns the first valid HTTP method for the given path.\n * This ensures we select a real method rather than metadata keys like \"parameters\" or \"summary\".\n */\nexport const resolveMethod = (\n  ctx: ResolverContext,\n  path: string | undefined,\n  method: string | undefined,\n): HttpMethod | undefined => {\n  const document = getDocument(ctx)\n\n  if (!document || !path) {\n    return undefined\n  }\n\n  if (method === 'default') {\n    const pathMethods = Object.keys(document.paths?.[path] ?? {})\n    return pathMethods.find(isHttpMethod)\n  }\n\n  return isHttpMethod(method) ? method : undefined\n}\n\n/**\n * Resolves the example name from a raw input value.\n *\n * When \"default\" is specified, returns the first available example name.\n * Falls back to \"default\" when no examples exist, which signals to use the default request body.\n */\nexport const resolveExampleName = (\n  ctx: ResolverContext,\n  operation: TraversedEntry | undefined,\n  exampleKey: string | undefined,\n): string => {\n  const document = getDocument(ctx)\n\n  if (!document || operation?.type !== 'operation') {\n    return 'default'\n  }\n\n  const examples = operation.children?.filter(isExample) ?? []\n  const matchingExample = examples.find((child) => child.name === exampleKey)\n\n  if (matchingExample) {\n    return matchingExample.name\n  }\n\n  if (exampleKey === 'default') {\n    return examples[0]?.name ?? 'default'\n  }\n\n  return 'default'\n}\n\n/**\n * Resolves all route parameters from raw input values to their actual values.\n *\n * This function handles \"default\" placeholders by looking up actual values from the workspace store.\n * It ensures the modal can be opened even when the caller does not know specific paths, methods, or examples.\n */\nexport const resolveRouteParameters = (store: WorkspaceStore, params: DefaultEntities): Partial<RoutePayload> => {\n  const documentSlug = resolveDocumentSlug(store, params.documentSlug)\n  const ctx: ResolverContext = { store, documentSlug }\n\n  const path = resolvePath(ctx, params.path)\n  const method = resolveMethod(ctx, path, params.method)\n\n  const traversedDocument = getDocument(ctx)?.['x-scalar-navigation']\n\n  if (!traversedDocument) {\n    return { documentSlug, path, method, example: 'default' }\n  }\n\n  const operations = getOperationEntries(traversedDocument)\n  const operation = operations.get(`${path}|${method}`)?.find((entry) => entry.type === 'operation')\n  const example = resolveExampleName(ctx, operation, params.example)\n\n  return { documentSlug, path, method, example }\n}\n"],"mappings":";;;;AAwBA,IAAM,aAAa,UAAqD,MAAM,SAAS;;;;;AAMvF,IAAM,eAAe,QAAyB,IAAI,MAAM,UAAU,UAAU,IAAI,gBAAgB;;;;;;;;AAShG,IAAa,uBAAuB,OAAuB,SAAiD;AAG1G,KAF4B,SAAS,aAAa,MAAM,UAAU,UAAU,UAAU,KAAA,EAGpF,QAAO;AAIT,QAAO,MAAM,UAAU,+BAA+B,OAAO,KAAK,MAAM,UAAU,UAAU,CAAC;;;;;;;;AAS/F,IAAa,eAAe,KAAsB,SAAiD;CACjG,MAAM,WAAW,YAAY,IAAI;AAEjC,KAAI,CAAC,SACH;AAGF,KAAI,SAAS,UACX,QAAO,OAAO,KAAK,SAAS,SAAS,EAAE,CAAC,CAAC;AAG3C,QAAO;;;;;;;;AAST,IAAa,iBACX,KACA,MACA,WAC2B;CAC3B,MAAM,WAAW,YAAY,IAAI;AAEjC,KAAI,CAAC,YAAY,CAAC,KAChB;AAGF,KAAI,WAAW,UAEb,QADoB,OAAO,KAAK,SAAS,QAAQ,SAAS,EAAE,CAAC,CAC1C,KAAK,aAAa;AAGvC,QAAO,aAAa,OAAO,GAAG,SAAS,KAAA;;;;;;;;AASzC,IAAa,sBACX,KACA,WACA,eACW;AAGX,KAAI,CAFa,YAAY,IAAI,IAEhB,WAAW,SAAS,YACnC,QAAO;CAGT,MAAM,WAAW,UAAU,UAAU,OAAO,UAAU,IAAI,EAAE;CAC5D,MAAM,kBAAkB,SAAS,MAAM,UAAU,MAAM,SAAS,WAAW;AAE3E,KAAI,gBACF,QAAO,gBAAgB;AAGzB,KAAI,eAAe,UACjB,QAAO,SAAS,IAAI,QAAQ;AAG9B,QAAO;;;;;;;;AAST,IAAa,0BAA0B,OAAuB,WAAmD;CAC/G,MAAM,eAAe,oBAAoB,OAAO,OAAO,aAAa;CACpE,MAAM,MAAuB;EAAE;EAAO;EAAc;CAEpD,MAAM,OAAO,YAAY,KAAK,OAAO,KAAK;CAC1C,MAAM,SAAS,cAAc,KAAK,MAAM,OAAO,OAAO;CAEtD,MAAM,oBAAoB,YAAY,IAAI,GAAG;AAE7C,KAAI,CAAC,kBACH,QAAO;EAAE;EAAc;EAAM;EAAQ,SAAS;EAAW;CAI3D,MAAM,YADa,oBAAoB,kBAAkB,CAC5B,IAAI,GAAG,KAAK,GAAG,SAAS,EAAE,MAAM,UAAU,MAAM,SAAS,YAAY;AAGlG,QAAO;EAAE;EAAc;EAAM;EAAQ,SAFrB,mBAAmB,KAAK,WAAW,OAAO,QAAQ;EAEpB"}

package/dist/v2/features/modal/helpers/restore-workspace-state.js

@@ -0,0 +1,51 @@
+import { unpackProxyObject } from "@scalar/workspace-store/helpers/unpack-proxy";
+//#region src/v2/features/modal/helpers/restore-workspace-state.ts
+/**
+* Restores the state of a workspace document by reverting its state
+* to the specified import, while preserving certain live properties
+* such as servers, security schemes, and selected server.
+*/
+var restoreWorkspaceState = ({ workspaceStore, workspaceState, name }) => {
+	if (!workspaceStore) return {
+		ok: false,
+		error: "Workspace store is not available"
+	};
+	const currentDocument = unpackProxyObject(workspaceStore.workspace.documents[name]);
+	if (!currentDocument) return {
+		ok: false,
+		error: "Current document not found in workspace store"
+	};
+	const importingDocument = workspaceState.documents[name];
+	if (!importingDocument) return {
+		ok: false,
+		error: "Importing document not found in workspace state"
+	};
+	const persistedProperties = {
+		selectedServer: currentDocument["x-scalar-selected-server"],
+		securitySchemes: currentDocument.components?.securitySchemes,
+		servers: currentDocument.servers
+	};
+	workspaceStore.loadWorkspace({
+		meta: {},
+		documents: { [name]: importingDocument },
+		intermediateDocuments: {},
+		originalDocuments: {},
+		overrides: {},
+		history: {},
+		auth: {}
+	});
+	const newDocument = unpackProxyObject(workspaceStore.workspace.documents[name]);
+	if (!newDocument) return {
+		ok: false,
+		error: "New document not found in workspace store"
+	};
+	newDocument["x-scalar-selected-server"] = persistedProperties.selectedServer;
+	newDocument.servers = persistedProperties.servers;
+	newDocument.components ??= {};
+	newDocument.components.securitySchemes = persistedProperties.securitySchemes;
+	return { ok: true };
+};
+//#endregion
+export { restoreWorkspaceState };
+
+//# sourceMappingURL=restore-workspace-state.js.map

package/dist/v2/features/modal/helpers/restore-workspace-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restore-workspace-state.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/restore-workspace-state.ts"],"sourcesContent":["import type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport type { InMemoryWorkspace } from '@scalar/workspace-store/schemas/inmemory-workspace'\n\n/**\n * Restores the state of a workspace document by reverting its state\n * to the specified import, while preserving certain live properties\n * such as servers, security schemes, and selected server.\n */\nexport const restoreWorkspaceState = ({\n  workspaceStore,\n  workspaceState,\n  name,\n}: {\n  workspaceStore: WorkspaceStore | null\n  workspaceState: InMemoryWorkspace\n  name: string\n}): { ok: true } | { ok: false; error: string } => {\n  if (!workspaceStore) {\n    return { ok: false, error: 'Workspace store is not available' }\n  }\n\n  const currentDocument = unpackProxyObject(workspaceStore.workspace.documents[name])\n  if (!currentDocument) {\n    return { ok: false, error: 'Current document not found in workspace store' }\n  }\n\n  const importingDocument = workspaceState.documents[name]\n  if (!importingDocument) {\n    return { ok: false, error: 'Importing document not found in workspace state' }\n  }\n\n  // Preserve some of the document properties we want to keep\n  const persistedProperties = {\n    selectedServer: currentDocument['x-scalar-selected-server'],\n    securitySchemes: currentDocument.components?.securitySchemes,\n    servers: currentDocument.servers,\n  }\n\n  // We only revert the active state of the document itself\n  workspaceStore.loadWorkspace({\n    meta: {},\n    documents: {\n      [name]: importingDocument,\n    },\n    intermediateDocuments: {},\n    originalDocuments: {},\n    overrides: {},\n    history: {},\n    auth: {},\n  })\n\n  const newDocument = unpackProxyObject(workspaceStore.workspace.documents[name])\n  if (!newDocument) {\n    return { ok: false, error: 'New document not found in workspace store' }\n  }\n\n  // Now restore the persisted properties\n  // ------------------------------------------------------------\n  // Server selection\n  newDocument['x-scalar-selected-server'] = persistedProperties.selectedServer\n  newDocument.servers = persistedProperties.servers\n\n  // ------------------------------------------------------------\n  // Security schemes\n  newDocument.components ??= {}\n  newDocument.components.securitySchemes = persistedProperties.securitySchemes\n\n  return { ok: true }\n}\n"],"mappings":";;;;;;;AASA,IAAa,yBAAyB,EACpC,gBACA,gBACA,WAKiD;AACjD,KAAI,CAAC,eACH,QAAO;EAAE,IAAI;EAAO,OAAO;EAAoC;CAGjE,MAAM,kBAAkB,kBAAkB,eAAe,UAAU,UAAU,MAAM;AACnF,KAAI,CAAC,gBACH,QAAO;EAAE,IAAI;EAAO,OAAO;EAAiD;CAG9E,MAAM,oBAAoB,eAAe,UAAU;AACnD,KAAI,CAAC,kBACH,QAAO;EAAE,IAAI;EAAO,OAAO;EAAmD;CAIhF,MAAM,sBAAsB;EAC1B,gBAAgB,gBAAgB;EAChC,iBAAiB,gBAAgB,YAAY;EAC7C,SAAS,gBAAgB;EAC1B;AAGD,gBAAe,cAAc;EAC3B,MAAM,EAAE;EACR,WAAW,GACR,OAAO,mBACT;EACD,uBAAuB,EAAE;EACzB,mBAAmB,EAAE;EACrB,WAAW,EAAE;EACb,SAAS,EAAE;EACX,MAAM,EAAE;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB,eAAe,UAAU,UAAU,MAAM;AAC/E,KAAI,CAAC,YACH,QAAO;EAAE,IAAI;EAAO,OAAO;EAA6C;AAM1E,aAAY,8BAA8B,oBAAoB;AAC9D,aAAY,UAAU,oBAAoB;AAI1C,aAAY,eAAe,EAAE;AAC7B,aAAY,WAAW,kBAAkB,oBAAoB;AAE7D,QAAO,EAAE,IAAI,MAAM"}

package/dist/v2/features/modal/hooks/use-modal-sidebar.d.ts

@@ -3,7 +3,7 @@ import { createSidebarState } from '@scalar/sidebar';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation';
 import { type ComputedRef } from 'vue';
-import type { RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters';
+import type { RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
 export type UseModalSidebarReturn = {
     handleSelectItem: (id: string) => void;
     state: ReturnType<typeof createSidebarState<TraversedEntry>>;

package/dist/v2/features/modal/hooks/use-modal-sidebar.js

@@ -0,0 +1,142 @@
+import { generateLocationId } from "../../../helpers/generate-location-id.js";
+import { computed, toValue, watch } from "vue";
+import { createSidebarState, generateReverseIndex, getChildEntry } from "@scalar/sidebar";
+import { getParentEntry } from "@scalar/workspace-store/navigation";
+//#region src/v2/features/modal/hooks/use-modal-sidebar.ts
+/**
+* useSidebarState - Custom hook to manage the sidebar state and navigation logic in the Scalar API client
+*
+* This composable manages the sidebar structure, synchronizes selection state
+* with the current route, and provides a handler for selecting sidebar items.
+*
+* Example usage:
+*
+* const { handleSelectItem, sidebarState } = useSidebarState({
+*   workspaceStore,
+*   workspaceSlug,
+*   documentSlug,
+*   path,
+*   method,
+*   exampleName,
+* })
+*/
+var useModalSidebar = ({ workspaceStore, documentSlug, path, method, exampleName, route }) => {
+	const entries = computed(() => workspaceStore?.workspace.documents[toValue(documentSlug) ?? ""]?.["x-scalar-navigation"]?.children ?? []);
+	const state = createSidebarState(entries);
+	/**
+	* Computed index for fast lookup of sidebar nodes by their unique API location.
+	*
+	* - Only indexes nodes of type 'operation', or 'example'.
+	* - The lookup key is a serialized array of: [operationPath, operationMethod, exampleName?].
+	* - Supports precise resolution of sidebar entries given an API "location".
+	*/
+	const locationIndex = computed(() => generateReverseIndex({
+		items: entries.value,
+		nestedKey: "children",
+		filter: (node) => node.type === "operation" || node.type === "example",
+		getId: (node) => {
+			const operation = getParentEntry("operation", node);
+			return generateLocationId({
+				document: toValue(documentSlug) ?? "",
+				path: operation?.path,
+				method: operation?.method,
+				example: node.type === "example" ? node.name : void 0
+			});
+		}
+	}));
+	/**
+	* Looks up a sidebar entry by its unique API location.
+	* - First tries to find an entry matching all provided properties (including example).
+	* - If not found, falls back to matching only the operation (ignores example field).
+	* This allows resolving either examples, operations, or documents as appropriate.
+	*
+	* @param location - Object specifying the document name, path, method, and optional example name.
+	* @returns The matching sidebar entry, or undefined if none found.
+	*
+	* Example:
+	*   const entry = getEntryByLocation({
+	*     document: 'pets',
+	*     path: '/pets',
+	*     method: 'get',
+	*     example: 'default',
+	*   })
+	*/
+	const getEntryByLocation = (location) => {
+		const entryWithExample = locationIndex.value.get(generateLocationId({
+			document: location.document,
+			path: location.path,
+			method: location.method,
+			example: location.example
+		}));
+		if (entryWithExample) return entryWithExample;
+		return locationIndex.value.get(generateLocationId({
+			document: location.document,
+			path: location.path,
+			method: location.method
+		}));
+	};
+	/**
+	* Handles item selection from the sidebar and routes navigation accordingly.
+	*
+	* Example:
+	*   handleSelectItem('id-of-entry')
+	*/
+	const handleSelectItem = (id) => {
+		const entry = state.getEntryById(id);
+		if (!entry) {
+			console.warn(`Could not find sidebar entry with id ${id} to select`);
+			return;
+		}
+		if (entry.type === "operation" || entry.type === "example") {
+			if (state.isSelected(id)) {
+				state.setExpanded(id, !state.isExpanded(id));
+				return;
+			}
+			const operation = getParentEntry("operation", entry);
+			const example = getChildEntry("example", entry);
+			if (example) {
+				state.setSelected(example.id);
+				state.setExpanded(example.id, true);
+			} else state.setSelected(id);
+			if (!operation) return;
+			return route({
+				documentSlug: toValue(documentSlug),
+				path: operation.path,
+				method: operation.method,
+				example: example?.name ?? "default"
+			});
+		}
+		state.setExpanded(id, !state.isExpanded(id));
+	};
+	/** Keep the sidebar state in sync with the modal parameters */
+	watch([
+		documentSlug,
+		path,
+		method,
+		exampleName
+	], ([newDocument, newPath, newMethod, newExample]) => {
+		if (!newDocument) {
+			state.setSelected(null);
+			return;
+		}
+		const entry = getEntryByLocation({
+			document: newDocument,
+			path: newPath,
+			method: newMethod,
+			example: newExample
+		});
+		if (entry) {
+			state.setSelected(entry.id);
+			state.setExpanded(entry.id, true);
+		}
+	}, { immediate: true });
+	return {
+		handleSelectItem,
+		state,
+		getEntryByLocation
+	};
+};
+//#endregion
+export { useModalSidebar };
+
+//# sourceMappingURL=use-modal-sidebar.js.map

package/dist/v2/features/modal/hooks/use-modal-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-sidebar.js","names":[],"sources":["../../../../../src/v2/features/modal/hooks/use-modal-sidebar.ts"],"sourcesContent":["import type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { createSidebarState, generateReverseIndex, getChildEntry } from '@scalar/sidebar'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { getParentEntry } from '@scalar/workspace-store/navigation'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { type ComputedRef, computed, toValue, watch } from 'vue'\n\nimport type { RoutePayload } from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport { generateLocationId } from '@/v2/helpers/generate-location-id'\n\nexport type UseModalSidebarReturn = {\n  handleSelectItem: (id: string) => void\n  state: ReturnType<typeof createSidebarState<TraversedEntry>>\n  getEntryByLocation: (location: {\n    document: string\n    path?: string\n    method?: HttpMethod\n    example?: string\n  }) => TraversedEntry | undefined\n}\n\n/**\n * useSidebarState - Custom hook to manage the sidebar state and navigation logic in the Scalar API client\n *\n * This composable manages the sidebar structure, synchronizes selection state\n * with the current route, and provides a handler for selecting sidebar items.\n *\n * Example usage:\n *\n * const { handleSelectItem, sidebarState } = useSidebarState({\n *   workspaceStore,\n *   workspaceSlug,\n *   documentSlug,\n *   path,\n *   method,\n *   exampleName,\n * })\n */\nexport const useModalSidebar = ({\n  workspaceStore,\n  documentSlug,\n  path,\n  method,\n  exampleName,\n  route,\n}: {\n  workspaceStore: WorkspaceStore | null\n  documentSlug: ComputedRef<string | undefined>\n  path: ComputedRef<string | undefined>\n  method: ComputedRef<HttpMethod | undefined>\n  exampleName: ComputedRef<string | undefined>\n  route: (payload: RoutePayload) => void\n}): UseModalSidebarReturn => {\n  const entries = computed(\n    () => workspaceStore?.workspace.documents[toValue(documentSlug) ?? '']?.['x-scalar-navigation']?.children ?? [],\n  )\n  const state = createSidebarState(entries)\n\n  /**\n   * Computed index for fast lookup of sidebar nodes by their unique API location.\n   *\n   * - Only indexes nodes of type 'operation', or 'example'.\n   * - The lookup key is a serialized array of: [operationPath, operationMethod, exampleName?].\n   * - Supports precise resolution of sidebar entries given an API \"location\".\n   */\n  const locationIndex = computed(() =>\n    generateReverseIndex({\n      items: entries.value,\n      nestedKey: 'children',\n      filter: (node) => node.type === 'operation' || node.type === 'example',\n      getId: (node) => {\n        const operation = getParentEntry('operation', node)\n        return generateLocationId({\n          document: toValue(documentSlug) ?? '',\n          path: operation?.path,\n          method: operation?.method,\n          example: node.type === 'example' ? node.name : undefined,\n        })\n      },\n    }),\n  )\n\n  /**\n   * Looks up a sidebar entry by its unique API location.\n   * - First tries to find an entry matching all provided properties (including example).\n   * - If not found, falls back to matching only the operation (ignores example field).\n   * This allows resolving either examples, operations, or documents as appropriate.\n   *\n   * @param location - Object specifying the document name, path, method, and optional example name.\n   * @returns The matching sidebar entry, or undefined if none found.\n   *\n   * Example:\n   *   const entry = getEntryByLocation({\n   *     document: 'pets',\n   *     path: '/pets',\n   *     method: 'get',\n   *     example: 'default',\n   *   })\n   */\n  const getEntryByLocation: UseModalSidebarReturn['getEntryByLocation'] = (location) => {\n    // Try to find an entry with the most-specific location (including example)\n    const entryWithExample = locationIndex.value.get(\n      generateLocationId({\n        document: location.document,\n        path: location.path,\n        method: location.method,\n        example: location.example,\n      }),\n    )\n\n    if (entryWithExample) {\n      return entryWithExample\n    }\n\n    // Fallback to the operation (ignoring example) if an example wasn't found or specified\n    return locationIndex.value.get(\n      generateLocationId({\n        document: location.document,\n        path: location.path,\n        method: location.method,\n      }),\n    )\n  }\n\n  /**\n   * Handles item selection from the sidebar and routes navigation accordingly.\n   *\n   * Example:\n   *   handleSelectItem('id-of-entry')\n   */\n  const handleSelectItem = (id: string) => {\n    const entry = state.getEntryById(id)\n\n    if (!entry) {\n      console.warn(`Could not find sidebar entry with id ${id} to select`)\n      return\n    }\n\n    // Navigate to the example page\n    if (entry.type === 'operation' || entry.type === 'example') {\n      // If we are already in the operation, just toggle expansion\n      if (state.isSelected(id)) {\n        state.setExpanded(id, !state.isExpanded(id))\n        return\n      }\n\n      const operation = getParentEntry('operation', entry)\n      const example = getChildEntry('example', entry)\n\n      if (example) {\n        state.setSelected(example.id)\n        state.setExpanded(example.id, true)\n      } else {\n        state.setSelected(id)\n      }\n\n      if (!operation) {\n        return\n      }\n\n      return route({\n        documentSlug: toValue(documentSlug),\n        path: operation.path,\n        method: operation.method,\n        example: example?.name ?? 'default',\n      })\n    }\n\n    state.setExpanded(id, !state.isExpanded(id))\n    return\n  }\n\n  /** Keep the sidebar state in sync with the modal parameters */\n  watch(\n    [documentSlug, path, method, exampleName],\n    ([newDocument, newPath, newMethod, newExample]) => {\n      if (!newDocument) {\n        // Reset selection if no document is selected\n        state.setSelected(null)\n        return\n      }\n\n      const entry = getEntryByLocation({\n        document: newDocument,\n        path: newPath,\n        method: newMethod,\n        example: newExample,\n      })\n\n      if (entry) {\n        state.setSelected(entry.id)\n        state.setExpanded(entry.id, true)\n      }\n    },\n    {\n      immediate: true,\n    },\n  )\n\n  return {\n    handleSelectItem,\n    state,\n    getEntryByLocation,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAa,mBAAmB,EAC9B,gBACA,cACA,MACA,QACA,aACA,YAQ2B;CAC3B,MAAM,UAAU,eACR,gBAAgB,UAAU,UAAU,QAAQ,aAAa,IAAI,MAAM,wBAAwB,YAAY,EAAE,CAChH;CACD,MAAM,QAAQ,mBAAmB,QAAQ;;;;;;;;CASzC,MAAM,gBAAgB,eACpB,qBAAqB;EACnB,OAAO,QAAQ;EACf,WAAW;EACX,SAAS,SAAS,KAAK,SAAS,eAAe,KAAK,SAAS;EAC7D,QAAQ,SAAS;GACf,MAAM,YAAY,eAAe,aAAa,KAAK;AACnD,UAAO,mBAAmB;IACxB,UAAU,QAAQ,aAAa,IAAI;IACnC,MAAM,WAAW;IACjB,QAAQ,WAAW;IACnB,SAAS,KAAK,SAAS,YAAY,KAAK,OAAO,KAAA;IAChD,CAAC;;EAEL,CAAC,CACH;;;;;;;;;;;;;;;;;;CAmBD,MAAM,sBAAmE,aAAa;EAEpF,MAAM,mBAAmB,cAAc,MAAM,IAC3C,mBAAmB;GACjB,UAAU,SAAS;GACnB,MAAM,SAAS;GACf,QAAQ,SAAS;GACjB,SAAS,SAAS;GACnB,CAAC,CACH;AAED,MAAI,iBACF,QAAO;AAIT,SAAO,cAAc,MAAM,IACzB,mBAAmB;GACjB,UAAU,SAAS;GACnB,MAAM,SAAS;GACf,QAAQ,SAAS;GAClB,CAAC,CACH;;;;;;;;CASH,MAAM,oBAAoB,OAAe;EACvC,MAAM,QAAQ,MAAM,aAAa,GAAG;AAEpC,MAAI,CAAC,OAAO;AACV,WAAQ,KAAK,wCAAwC,GAAG,YAAY;AACpE;;AAIF,MAAI,MAAM,SAAS,eAAe,MAAM,SAAS,WAAW;AAE1D,OAAI,MAAM,WAAW,GAAG,EAAE;AACxB,UAAM,YAAY,IAAI,CAAC,MAAM,WAAW,GAAG,CAAC;AAC5C;;GAGF,MAAM,YAAY,eAAe,aAAa,MAAM;GACpD,MAAM,UAAU,cAAc,WAAW,MAAM;AAE/C,OAAI,SAAS;AACX,UAAM,YAAY,QAAQ,GAAG;AAC7B,UAAM,YAAY,QAAQ,IAAI,KAAK;SAEnC,OAAM,YAAY,GAAG;AAGvB,OAAI,CAAC,UACH;AAGF,UAAO,MAAM;IACX,cAAc,QAAQ,aAAa;IACnC,MAAM,UAAU;IAChB,QAAQ,UAAU;IAClB,SAAS,SAAS,QAAQ;IAC3B,CAAC;;AAGJ,QAAM,YAAY,IAAI,CAAC,MAAM,WAAW,GAAG,CAAC;;;AAK9C,OACE;EAAC;EAAc;EAAM;EAAQ;EAAY,GACxC,CAAC,aAAa,SAAS,WAAW,gBAAgB;AACjD,MAAI,CAAC,aAAa;AAEhB,SAAM,YAAY,KAAK;AACvB;;EAGF,MAAM,QAAQ,mBAAmB;GAC/B,UAAU;GACV,MAAM;GACN,QAAQ;GACR,SAAS;GACV,CAAC;AAEF,MAAI,OAAO;AACT,SAAM,YAAY,MAAM,GAAG;AAC3B,SAAM,YAAY,MAAM,IAAI,KAAK;;IAGrC,EACE,WAAW,MACZ,CACF;AAED,QAAO;EACL;EACA;EACA;EACD"}

package/dist/v2/features/modal/index.d.ts

@@ -1,4 +1,4 @@
-export { type ApiClientModal, createApiClientModal } from './helpers/create-api-client-modal';
-export { mapHiddenClientsConfig } from './helpers/map-hidden-clients-config';
-export { initializeModalEvents } from './modal-events';
+export { type ApiClientModal, createApiClientModal } from './helpers/create-api-client-modal.js';
+export { mapHiddenClientsConfig } from './helpers/map-hidden-clients-config.js';
+export { initializeModalEvents } from './modal-events.js';
 //# sourceMappingURL=index.d.ts.map