@scalar/api-client 3.18.0 → 3.19.1

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @scalar/api-client
 
+## 3.19.1
+
+### Patch Changes
+
+- [#10229](https://github.com/scalar/scalar/pull/10229): Fix the API client modal getting stuck on "Select an operation to view details" for a document's first operation after its active document re-syncs. The reference used to hand the modal a route to a nonexistent path and method during that re-sync; the modal now leaves the current operation in place instead.
+- [#9912](https://github.com/scalar/scalar/pull/9912): add line wrapping toggle for request and response bodies
+- [#10179](https://github.com/scalar/scalar/pull/10179): Support OpenAPI 3.2 OAuth2 metadata URLs in workspace schemas and the shared authentication UI. Fetch HTTPS authorization server metadata or HTTP metadata from local development URLs to discover flows or fill missing endpoints while preserving explicit configuration.
+
+  For local development, Scalar deliberately relaxes the OpenAPI 3.2 TLS requirement: metadata URLs and discovered endpoints may use HTTP for local development URLs recognized by the shared `isLocalUrl` helper, including loopback hosts, `0.0.0.0`, and reserved development domains such as `*.test` and `*.example`. Other hosts require HTTPS.
+
+  Discovery leaves `refreshUrl` unchanged. Token refresh already falls back to the flow's token URL when no refresh URL is configured, so a discovered token endpoint also supports refresh without overriding an explicit refresh URL.
+
+- [#9852](https://github.com/scalar/scalar/pull/9852): Render OpenAPI 3.2 response summaries, server names in the server selectors, and a strikethrough on deprecated security schemes.
+- [#9889](https://github.com/scalar/scalar/pull/9889): feat: add a copy button to the request body editor
+
+  The raw request body editor now shows a copy-to-clipboard button (revealed on hover, matching the response panel) so you can grab the whole body without selecting the text by hand. The editor stays fully editable at any size.
+
+- [#10231](https://github.com/scalar/scalar/pull/10231): Trim surrounding whitespace from OAuth2 client IDs and client secrets when authorizing and refreshing tokens.
+- [#10238](https://github.com/scalar/scalar/pull/10238): Display responses with vendor `+xml` media types as XML text and use `.xml` for downloads.
+
+## 3.19.0
+
+### Minor Changes
+
+- [#10102](https://github.com/scalar/scalar/pull/10102): Allow response hooks to return a replacement Response before the client processes its body, status, and headers. Add the onResponseReceived configuration callback for API References. Existing hooks can still read responses and return nothing.
+
+### Patch Changes
+
+- [#10123](https://github.com/scalar/scalar/pull/10123): Fall back to the requested URL when a custom fetch returns a response without one. Errors raised while reading the response body are now returned as an error result instead of escaping the request helper.
+- [#10086](https://github.com/scalar/scalar/pull/10086): Enable optional query parameters when their value is entered.
+- [#10080](https://github.com/scalar/scalar/pull/10080): Fix the Test Request body showing schema defaults instead of the example on first open. This happened for the first operation when its body used oneOf/anyOf and had a named example.
+- [#10160](https://github.com/scalar/scalar/pull/10160): Pass request duration to post-response scripts as `pm.response.responseTime` in milliseconds and enable the response-time example.
+- [#10072](https://github.com/scalar/scalar/pull/10072): Add a "generate example from schema" button to the request body, so the schema-generated fields stay reachable once an operation ships custom examples
+- [#10081](https://github.com/scalar/scalar/pull/10081): Keep the `mutualTLS` security scheme type instead of turning it into an apiKey form, and show read-only authentication guidance for mutual TLS and unsupported browser broker credentials.
+- [#10167](https://github.com/scalar/scalar/pull/10167): fix: hide the code snippet section when all clients are hidden
+- [#10170](https://github.com/scalar/scalar/pull/10170): Keep form fields checked for composed body schemas so the initial form matches the fields sent in the request.
+- [#10148](https://github.com/scalar/scalar/pull/10148): Typing a value into an unchecked optional form body row now enables that row, so the value is sent with the request. This matches how optional query parameters already behave.
+- [#10136](https://github.com/scalar/scalar/pull/10136): Restore modal and single-file reference tests, update layout selectors, and remove stale comments. Named-resource resolution remains unsupported and is tested explicitly.
+- [#10140](https://github.com/scalar/scalar/pull/10140): Replace redundant type assertions with compiler-checked annotations, typed accumulators, and existing guards across helpers, API conversion, request handling, and schema rendering.
+
+  Narrow DOM elements and caught errors before accessing their properties. Correct header lookup to include missing values and handle them during PowerShell snippet generation.
+
+  Validate release-note provider responses, represent unresolved references and absent groups in helper return types, and require narrowing merged object values. Preserve AsyncAPI broker credentials separately from HTTP authentication schemes.
+
+- [#10149](https://github.com/scalar/scalar/pull/10149): Keep focus while editing request body field names by saving name changes on blur.
+- [#10142](https://github.com/scalar/scalar/pull/10142): Send multipart array properties as separate parts with the same field name, applying encoding to each item. Preserve JSON item content types, uploaded files, and array values after form edits, and generate matching code snippets.
+
+  Send JSON form fields without an upload filename and preserve fields and files in request history.
+
+  Rename the RestSharp snippet's internal `getMethod` helper so it no longer clashes with the `getMethod` that Nitro bundles into server builds (the new multipart imports shifted chunking and surfaced the collision).
+
 ## 3.18.0
 
 ### Minor Changes

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

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

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

@@ -1,7 +1,8 @@
 declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         filters?: T[];
-        filterIds?: Record<T, string>;
+        /** IDs for the currently available sections. */
+        filterIds?: Partial<Record<T, string>>;
     } & {
         modelValue?: T;
     }) & {

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AAuKA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAiNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBA/M5C,CAAC,EAAE;oBACD,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC;;qBAkClB,CAAC;;;KA4K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AAwKA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAkNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBAhN5C,CAAC,EAAE;QACb,gDAAgD;oBACpC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;qBAkC3B,CAAC;;;KA4K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/SectionFilter.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import SectionFilter_vue_vue_type_script_setup_true_lang_default from "./SectionFilter.vue.script.js";
 /* empty css                            */
 //#region src/components/SectionFilter.vue
-var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-07ff8fc3"]]);
+var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ac788106"]]);
 //#endregion
 export { SectionFilter_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,MAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,IAAA,GAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,MAAM,GAAA,CAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,KAAK,GAAA,CAAA,GAC5D,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}
+{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,MAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,IAAA,GAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,MAAM,GAAA,CAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,KAAK,GAAA,CAAA,GAC5D,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/F"}

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

@@ -11,6 +11,7 @@ function useFileDialog({ multiple, accept, onChange, onError } = {}) {
 		input = document.createElement("input");
 		input.type = "file";
 		input.onchange = (event) => {
+			if (!(event.target instanceof HTMLInputElement)) return;
 			const result = event.target;
 			files.value = result.files;
 			onChange?.(files.value);

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

@@ -1 +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,CAAC,GAAG;CAChG,MAAM,QAAQ,IAAqB,IAAI;CAEvC,IAAI;CACJ,IAAI,OAAO,aAAa,aAAa;EACnC,QAAQ,SAAS,cAAc,OAAO;EACtC,MAAM,OAAO;EAEb,MAAM,YAAY,UAAiB;GACjC,MAAM,SAAS,MAAM;GACrB,MAAM,QAAQ,OAAO;GACrB,WAAW,MAAM,KAAK;EACxB;EAEA,MAAM,gBAAgB,UAAU;EAEhC,MAAM,WAAW;EACjB,MAAM,SAAS;CACjB;CAEA,MAAM,aAAa;EACjB,IAAI,CAAC,OACH,OAAO,UAAU;EAGnB,MAAM,MAAM;CACd;CAEA,OAAO;EACL,OAAO,SAAS,KAAK;EACrB;CACF;AACF"}
+{"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      if (!(event.target instanceof HTMLInputElement)) {\n        return\n      }\n      const result = event.target\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,CAAC,GAAG;CAChG,MAAM,QAAQ,IAAqB,IAAI;CAEvC,IAAI;CACJ,IAAI,OAAO,aAAa,aAAa;EACnC,QAAQ,SAAS,cAAc,OAAO;EACtC,MAAM,OAAO;EAEb,MAAM,YAAY,UAAiB;GACjC,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;GAEF,MAAM,SAAS,MAAM;GACrB,MAAM,QAAQ,OAAO;GACrB,WAAW,MAAM,KAAK;EACxB;EAEA,MAAM,gBAAgB,UAAU;EAEhC,MAAM,WAAW;EACjB,MAAM,SAAS;CACjB;CAEA,MAAM,aAAa;EACjB,IAAI,CAAC,OACH,OAAO,UAAU;EAGnB,MAAM,MAAM;CACd;CAEA,OAAO;EACL,OAAO,SAAS,KAAK;EACrB;CACF;AACF"}