@scalar/api-client 2.43.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @scalar/api-client
 
+## 3.1.0
+
+### Minor Changes
+
+- [#8865](https://github.com/scalar/scalar/pull/8865): feat: add plugin support for custom response body content types
+
+### Patch Changes
+
+- [#8810](https://github.com/scalar/scalar/pull/8810): refactor: move telemetry to an optional plugin
+- [#8912](https://github.com/scalar/scalar/pull/8912): fix: provide a default summary when creating a new temp operation
+- [#8903](https://github.com/scalar/scalar/pull/8903): fix: share Postman collection detection from postman-to-openapi
+- [#8911](https://github.com/scalar/scalar/pull/8911): feat: switch from Request to RequestPayload to support body with GET
+- [#8887](https://github.com/scalar/scalar/pull/8887): fix: invalid json body handling and add root document for bulk operation selection
+
+## 3.0.0
+
+### Major Changes
+
+- [#8863](https://github.com/scalar/scalar/pull/8863): feat: remove old api-client exports and make v2 the main export
+
+### Minor Changes
+
+- [#8632](https://github.com/scalar/scalar/pull/8632): feat: support generation of random data
+
+### Patch Changes
+
+- [#8827](https://github.com/scalar/scalar/pull/8827): chore: removed old client v1 code
+- [#8828](https://github.com/scalar/scalar/pull/8828): Add support for `text/json` media type
+- [#8840](https://github.com/scalar/scalar/pull/8840): feat: allow updating the proxyUrl and make options reactive in api-client
+- [#8735](https://github.com/scalar/scalar/pull/8735): fix: replace direct cjs mime and curl dependencies with local implementations
+- [#8848](https://github.com/scalar/scalar/pull/8848): fix: use search for virtual responses
+- [#8825](https://github.com/scalar/scalar/pull/8825): chore: moving files around in preparation for the big deletion of client v1
+- [#8794](https://github.com/scalar/scalar/pull/8794): Fix Monaco 0.55 compatibility in JSON/YAML editor language helpers.
+- [#8817](https://github.com/scalar/scalar/pull/8817): feat(snippetz): add a Laravel HTTP client plugin for PHP snippets
+
+  Added a new `php/laravel` client generator in `@scalar/snippetz`, including comprehensive request coverage for headers, cookies, auth, query params, JSON, multipart, form-encoded, binary, and fallback bodies.
+
+  Updated generated client registries and schema wiring so the new client is available across Scalar:
+  - `@scalar/types` `GROUPED_CLIENTS` / `AVAILABLE_CLIENTS`
+  - `@scalar/workspace-store` reference-config schema
+  - generated docs and integration client enums
+
+  Updated api-client expectations for the increased total built-in client count.
+
+- [#8849](https://github.com/scalar/scalar/pull/8849): fix(api-client): improve drag regions
+- [#8850](https://github.com/scalar/scalar/pull/8850): chore: remove entities, zod and the parser from oas-utils
+- [#8823](https://github.com/scalar/scalar/pull/8823): fix: prevent address bar text from hiding under fade overlay while typing
+
 ## 2.43.0
 
 ### Minor Changes

package/README.md

@@ -11,6 +11,10 @@ The Scalar API Client is a powerful tool designed to simplify API testing and in
 - embeddable component in various frontend environments
 - customizable module that can be integrated into existing projects
 
+## ⚠️ Breaking Changes
+
+We have removed the old version of the clients so you must update your imports as seen below. We will keep the v2 exports for a while then remove them.
+
 ## Features
 
 - Intuitive interface for sending API requests and viewing responses
@@ -55,108 +59,153 @@ You can mount the full-blown API Client to your DOM like this:
 
 ```ts
 // main.js
-import { createApiClientApp } from '@/App'
+import '@/style.css'
 
-// Initialize
-await createApiClientApp(document.getElementById('scalar-client'), {
-  url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
-  proxyUrl: 'https://proxy.scalar.com',
-})
+import { createApiClientApp } from '@scalar/api-client/app'
+
+const el = document.getElementById('scalar-client')
+
+createApiClientApp(el, { layout: 'web' })
 ```
 
 ### Modal
 
-Or you can mount a more compact version, which is living in a modal:
+Or you can mount a more compact version, which is rendered in a modal.
+You must initialize the workspace store and add at least one document.
 
 ```ts
 // main.js
-import { createApiClientApp } from '@/App'
+import { createWorkspaceStore } from '@scalar/workspace-store/client'
+import { createApiClientModal } from '@scalar/api-client/modal'
+
+import '@/style.css'
+
+const workspaceStore = createWorkspaceStore()
+await workspaceStore.addDocument({
+  name: 'default',
+  url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
+})
 
-// Initialize
-const { open } = await createApiClientApp(
-  document.getElementById('scalar-client'),
-  {
-    url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
+const modal = createApiClientModal({
+  el: document.getElementById('app'),
+  workspaceStore,
+  options: {
     proxyUrl: 'https://proxy.scalar.com',
   },
-)
+})
 
 // Open the API client right-away
-open()
+modal.open()
+
+document.getElementById('button')?.addEventListener('click', () =>
+  modal.open({
+    path: '/user/signup',
+    method: 'post',
+  }),
+)
+
+// Navigate while the modal is already open
+modal.route({
+  path: '/me',
+  method: 'get',
+})
+
+// Merge options at runtime
+modal.updateOptions({
+  hideClientButton: true,
+})
 
-// Or: Open a specific operation
-// open({
-//   method: 'GET',
-//   path: '/me',
-// })
 ```
 
 ## Configuration
 
-```ts
-/** Configuration options for the Scalar API client */
-export type ClientConfiguration = {
-  /** The Swagger/OpenAPI document to render */
-  spec: SourceConfiguration
-  /** Pass in a proxy to the API client */
-  proxyUrl?: string
-  /** Pass in a theme API client */
-  themeId?: string
-  /** Whether to show the sidebar */
-  showSidebar?: boolean
-  /** Whether dark mode is on or off initially (light mode) */
-  // darkMode?: boolean
-  /** Key used with CTRL/CMD to open the search modal (defaults to 'k' e.g. CMD+k) */
-  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'
-}
-```
+`createApiClientModal` accepts these top-level properties:
+
+| Option | Description |
+|---|---|
+| `el` | [Required] The HTML element to mount the modal app to. |
+| `workspaceStore` | [Required] An initialized workspace store with documents loaded. |
+| `mountOnInitialize` | Mount immediately (default: `true`). Set to `false` to mount manually later. |
+| `eventBus` | Pass an existing workspace event bus, or let the modal create one. |
+| `plugins` | Client plugins to include in the modal. |
+| `options` | Partial API client configuration for modal behavior (see below). |
+
+`options` supports these keys:
+
+| Option | Description |
+|---|---|
+| `options.proxyUrl` | Use a proxy URL to send requests when CORS blocks direct browser requests. |
+| `options.authentication` | Prefill authentication credentials and default security scheme behavior. |
+| `options.baseServerURL` | Prefix all relative servers with a base URL. |
+| `options.hideClientButton` | Hide the client button in modal-based integrations. |
+| `options.hiddenClients` | Control which HTTP code-example clients are shown; pass `[]` to show all clients. |
+| `options.oauth2RedirectUri` | Set the default OAuth 2.0 redirect URI for auth code and implicit flows. |
+| `options.servers` | Override the servers from your OpenAPI document. |
 
 ## Available Methods
 
-The following methods are returned from the `createApiClientModal` call:
+The `createApiClientModal` call returns:
 
-### open
+- `open(payload?)`: Opens the modal and optionally navigates to a route.
+- `route(payload)`: Navigates to a route without toggling modal visibility.
+- `updateOptions(nextOptions, overwrite?)`: Merges options by default, or replaces them when `overwrite` is `true`.
+- `mount(mountingEl?)`: Mounts the modal app to a specific element.
+- `modalState`: Reactive open/close state object.
+- `app`: Underlying Vue app instance.
 
-Opens the modal while allowing you to select which request to open to
+`open` and `route` use this payload shape:
 
 ```ts
-open({ path: string; method: RequestMethod })
+{
+  path: string
+  method: HttpMethod
+  example?: string
+  documentSlug?: string // For multiple documents
+}
 ```
 
-### updateConfig
 
-Allows you to update the config at any time, this will clear your current state and re-import a fresh spec!
+## Plugins
+
+The `plugins` option accepts an array of `ClientPlugin` objects that extend the API Client with custom behavior. Plugins can add lifecycle hooks, custom UI components, and custom response body handlers for content types that the client does not natively support.
+
+### Custom Response Body Handling
+
+When your API returns a non-standard content type (for example, MessagePack), you can register a plugin with a `responseBody` handler to decode and display it:
 
 ```ts
-updateConfig(newConfig: ClientConfiguration, mergeConfigs?: boolean): void
+import type { ClientPlugin } from '@scalar/oas-utils/helpers'
+
+const msgpackPlugin: ClientPlugin = {
+  responseBody: [
+    {
+      mimeTypes: ['application/msgpack', 'application/x-msgpack'],
+      decode: async (buffer) => {
+        const { decode } = await import('@msgpack/msgpack')
+        const decoded = decode(new Uint8Array(buffer))
+        return JSON.stringify(decoded, null, 2)
+      },
+      language: 'json',
+    },
+  ],
+}
+
+createApiClientApp(el, {
+  layout: 'web',
+  plugins: [msgpackPlugin],
+})
 ```
 
+Each handler in `responseBody` supports:
+
+| Property | Description |
+|---|---|
+| `mimeTypes` | MIME type patterns to match (exact or wildcard like `application/vnd.*+json`). |
+| `decode` | Transforms the raw `ArrayBuffer` into a string or Blob for display. |
+| `language` | CodeMirror language hint for the built-in raw renderer (for example, `json`). |
+| `rawComponent` | A custom Vue component for the raw view (mutually exclusive with `language`). |
+| `previewComponent` | A custom Vue component for the preview view. |
+
 ## Community
 
 We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

package/dist/components/HttpMethod/HttpMethod.vue.d.ts

@@ -4,12 +4,12 @@ type __VLS_Props = {
     isEditable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    change: (value: "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace") => any;
+    change: (value: "delete" | "head" | "get" | "options" | "put" | "post" | "patch" | "trace") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace") => any) | undefined;
+    onChange?: ((value: "delete" | "head" | "get" | "options" | "put" | "post" | "patch" | "trace") => any) | undefined;
 }>, {
-    isEditable: boolean;
     isSquare: boolean;
+    isEditable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/HttpMethod/HttpMethod.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAqGA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgIJ,QAAA,MAAM,YAAY;;;;;gBAjID,OAAO;cAFT,OAAO;6EAuIpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAuGA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgIJ,QAAA,MAAM,YAAY;;;;;cAnIH,OAAO;gBAEL,OAAO;6EAqItB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/HttpMethod/HttpMethod.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import HttpMethod_vue_vue_type_script_setup_true_lang_default from "./HttpMethod.vue.script.js";
 /* empty css                         */
 //#region src/components/HttpMethod/HttpMethod.vue
-var HttpMethod_default = /* @__PURE__ */ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-076b14a1"]]);
+var HttpMethod_default = /* @__PURE__ */ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7a19f363"]]);
 //#endregion
 export { HttpMethod_default as default };
 

package/dist/components/HttpMethod/HttpMethod.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { RequestMethod } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: RequestMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({\n  id: id as RequestMethod,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border border-r',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}

package/dist/components/HttpMethod/HttpMethod.vue.script.js

@@ -1,6 +1,7 @@
 import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarListbox, cva, cx } from "@scalar/components";
 import { REQUEST_METHODS, getHttpMethodInfo } from "@scalar/helpers/http/http-info";
+import { objectEntries } from "@scalar/helpers/object/object-entries";
 //#region src/components/HttpMethod/HttpMethod.vue?vue&type=script&setup=true&lang.ts
 var HttpMethod_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HttpMethod",
@@ -20,7 +21,7 @@ var HttpMethod_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const method = computed(() => getHttpMethodInfo(props.method));
-		const methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({
+		const methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({
 			id,
 			label: id.toUpperCase(),
 			color: getHttpMethodInfo(id).colorClass
@@ -37,7 +38,7 @@ var HttpMethod_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					false: "rounded-full"
 				},
 				isEditable: {
-					true: "http-bg-gradient rounded-md border border-r",
+					true: "http-bg-gradient rounded-md border",
 					false: "cursor-auto"
 				}
 			}

package/dist/components/HttpMethod/HttpMethod.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { RequestMethod } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: RequestMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({\n  id: id as RequestMethod,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border border-r',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,OAAO,CAAA;EAC7D,MAAM,gBAAgB,OAAO,QAAQ,gBAAgB,CAAC,KAAK,CAAC,SAAS;GAC/D;GACJ,OAAO,GAAG,aAAa;GACvB,OAAO,kBAAkB,GAAG,CAAC;GAC9B,EAAC;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,OAAO;GAC9D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,GAAG;GAChD,CAAA;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;KACR;IACD,YAAY;KACV,MAAM;KACN,OAAO;KACR;IACF;GACF,CAAA;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,MAAK;;UAKzC,QAAA,cAAA,WAAA,EADR,YAegB,MAAA,cAAA,EAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,cAAa;;2BAUjB,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,YAAU,CAAA,CAAA,EAAA,EAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;MAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,MAAS,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;KAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,MAAK,EAAA,EAAA"}
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,OAAO,CAAA;EAC7D,MAAM,gBAAgB,cAAc,gBAAgB,CAAC,KAAK,CAAC,SAAS;GAClE;GACA,OAAO,GAAG,aAAa;GACvB,OAAO,kBAAkB,GAAG,CAAC;GAC9B,EAAC;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,OAAO;GAC9D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,GAAG;GAChD,CAAA;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;KACR;IACD,YAAY;KACV,MAAM;KACN,OAAO;KACR;IACF;GACF,CAAA;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,MAAK;;UAKzC,QAAA,cAAA,WAAA,EADR,YAegB,MAAA,cAAA,EAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,cAAa;;2BAUjB,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,YAAU,CAAA,CAAA,EAAA,EAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;MAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,MAAS,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;KAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,MAAK,EAAA,EAAA"}

package/dist/components/IconSelector.vue.script.js

@@ -1,7 +1,7 @@
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { ScalarPopover } from "@scalar/components";
-import { LibraryIcon, libraryIcons } from "@scalar/icons/library";
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
+import { LibraryIcon, libraryIcons } from "@scalar/icons/library";
 //#region src/components/IconSelector.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex text-sm" };
 var _hoisted_2 = { class: "bg-b-1 custom-scroll grid w-dvw max-w-[420px] auto-rows-[32px] grid-cols-[repeat(auto-fill,minmax(32px,1fr))] content-between justify-between rounded border p-1" };

package/dist/components/Server/index.d.ts

@@ -1,4 +1,2 @@
-export { default as ServerDropdown } from './ServerDropdown.vue.js';
-export { default as ServerSelector } from './ServerSelector.vue.js';
 export { default as ServerVariablesForm } from './ServerVariablesForm.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/components/Server/index.js

@@ -1,4 +1,2 @@
 import ServerVariablesForm_default from "./ServerVariablesForm.vue.js";
-import ServerDropdown_default from "./ServerDropdown.vue.js";
-import ServerSelector_default from "./ServerSelector.vue.js";
-export { ServerDropdown_default as ServerDropdown, ServerSelector_default as ServerSelector, ServerVariablesForm_default as ServerVariablesForm };
+export { ServerVariablesForm_default as ServerVariablesForm };

package/dist/components/Sidebar/Actions/DeleteSidebarListElement.vue.d.ts

@@ -3,11 +3,11 @@ type __VLS_Props = {
     warningMessage: string | undefined;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    delete: () => any;
     close: () => any;
+    delete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/hooks/{useFileDialog.d.ts → use-file-dialog.d.ts}

@@ -1,4 +1,4 @@
-export type UseFileDialogOptions = {
+type UseFileDialogOptions = {
     multiple?: boolean;
     /** @default '*' */
     accept?: string;
@@ -45,4 +45,5 @@ export declare function useFileDialog({ multiple, accept, onChange, onError }?:
     } | null>>;
     open: () => void | Promise<void>;
 };
-//# sourceMappingURL=useFileDialog.d.ts.map
+export {};
+//# sourceMappingURL=use-file-dialog.d.ts.map

package/dist/hooks/use-file-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-dialog.d.ts","sourceRoot":"","sources":["../../src/hooks/use-file-dialog.ts"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACrC,CAAA;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAE,oBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgC/F"}

package/dist/hooks/{useFileDialog.js → use-file-dialog.js}

@@ -1,5 +1,5 @@
 import { readonly, ref } from "vue";
-//#region src/hooks/useFileDialog.ts
+//#region src/hooks/use-file-dialog.ts
 /**
 * Simplified interface for opening a file picker dialog
 * Derived from vueuse @see https://vueuse.org/useFileDialog
@@ -30,4 +30,4 @@ function useFileDialog({ multiple, accept, onChange, onError } = {}) {
 //#endregion
 export { useFileDialog };
 
-//# sourceMappingURL=useFileDialog.js.map
+//# sourceMappingURL=use-file-dialog.js.map

package/dist/hooks/use-file-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-dialog.js","names":[],"sources":["../../src/hooks/use-file-dialog.ts"],"sourcesContent":["import { readonly, ref } from 'vue'\n\ntype UseFileDialogOptions = {\n  multiple?: boolean\n  /** @default '*' */\n  accept?: string\n  onChange?: (files: FileList | null) => void | Promise<void>\n  onError?: () => void | Promise<void>\n}\n\n/**\n * Simplified interface for opening a file picker dialog\n * Derived from vueuse @see https://vueuse.org/useFileDialog\n */\nexport function useFileDialog({ multiple, accept, onChange, onError }: UseFileDialogOptions = {}) {\n  const files = ref<FileList | null>(null)\n\n  let input: HTMLInputElement | undefined\n  if (typeof document !== 'undefined') {\n    input = document.createElement('input')\n    input.type = 'file'\n\n    input.onchange = (event: Event) => {\n      const result = event.target as HTMLInputElement\n      files.value = result.files\n      onChange?.(files.value)\n    }\n\n    input.onerror = () => onError?.()\n\n    input.multiple = multiple!\n    input.accept = accept!\n  }\n\n  const open = () => {\n    if (!input) {\n      return onError?.()\n    }\n\n    input.click()\n  }\n\n  return {\n    files: readonly(files),\n    open,\n  }\n}\n"],"mappings":";;;;;;AAcA,SAAgB,cAAc,EAAE,UAAU,QAAQ,UAAU,YAAkC,EAAE,EAAE;CAChG,MAAM,QAAQ,IAAqB,KAAK;CAExC,IAAI;AACJ,KAAI,OAAO,aAAa,aAAa;AACnC,UAAQ,SAAS,cAAc,QAAQ;AACvC,QAAM,OAAO;AAEb,QAAM,YAAY,UAAiB;AAEjC,SAAM,QADS,MAAM,OACA;AACrB,cAAW,MAAM,MAAM;;AAGzB,QAAM,gBAAgB,WAAW;AAEjC,QAAM,WAAW;AACjB,QAAM,SAAS;;CAGjB,MAAM,aAAa;AACjB,MAAI,CAAC,MACH,QAAO,WAAW;AAGpB,QAAM,OAAO;;AAGf,QAAO;EACL,OAAO,SAAS,MAAM;EACtB;EACD"}

package/dist/index.d.ts

@@ -1,5 +1,2 @@
 import './style.css';
-export { ApiClientApp, createApiClientApp } from './layouts/App/index.js';
-export { type ApiClient, createApiClientModal } from './layouts/Modal/index.js';
-export { useWorkspace } from './store/store.js';
 //# 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,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,KAAK,SAAS,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA"}

package/dist/index.js

@@ -1,6 +1 @@
 /* empty css          */
-import { useWorkspace } from "./store/store.js";
-import ApiClientApp_default from "./layouts/App/ApiClientApp.vue.js";
-import { createApiClientApp } from "./layouts/App/create-api-client-app.js";
-import { createApiClientModal } from "./layouts/Modal/create-api-client-modal.js";
-export { ApiClientApp_default as ApiClientApp, createApiClientApp, createApiClientModal, useWorkspace };