@scalar/api-reference 1.58.0 → 1.59.0

package/dist/features/Operation/layouts/ModernLayout.vue.script.js

@@ -1,9 +1,6 @@
 import Badge_default from "../../../components/Badge/Badge.vue.js";
 import Section_default from "../../../components/Section/Section.vue.js";
-import SectionColumn_default from "../../../components/Section/SectionColumn.vue.js";
-import SectionColumns_default from "../../../components/Section/SectionColumns.vue.js";
 import SectionContent_default from "../../../components/Section/SectionContent.vue.js";
-import SectionHeader_default from "../../../components/Section/SectionHeader.vue.js";
 import SectionHeaderTag_default from "../../../components/Section/SectionHeaderTag.vue.js";
 import Anchor_default from "../../../components/Anchor/Anchor.vue.js";
 import { getXKeysFromObject } from "../../specification-extension/helpers.js";
@@ -31,10 +28,12 @@ import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref
 var _hoisted_1 = { class: "flex flex-row justify-between gap-1" };
 var _hoisted_2 = { class: "flex gap-1" };
 var _hoisted_3 = { class: "flex gap-1" };
-var _hoisted_4 = { class: "operation-header" };
-var _hoisted_5 = { class: "operation-details" };
-var _hoisted_6 = { class: "examples" };
-var _hoisted_7 = { class: "flex" };
+var _hoisted_4 = { class: "operation-layout" };
+var _hoisted_5 = { class: "operation-auth" };
+var _hoisted_6 = { class: "operation-description" };
+var _hoisted_7 = { class: "operation-details" };
+var _hoisted_8 = { class: "examples" };
+var _hoisted_9 = { class: "flex" };
 var ModernLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModernLayout",
 	props: {
@@ -49,7 +48,8 @@ var ModernLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		operation: {},
 		selectedServer: {},
 		selectedSecuritySchemes: {},
-		requiredSecurity: {}
+		requiredSecurity: {},
+		document: {}
 	},
 	setup(__props) {
 		const operationTitle = computed(() => __props.operation.summary || __props.path || "");
@@ -71,183 +71,177 @@ var ModernLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				onIntersecting: _cache[2] || (_cache[2] = () => __props.eventBus?.emit("intersecting:nav-item", { id: __props.id }))
 			}, {
 				default: withCtx(() => [createVNode(unref(SectionContent_default), null, {
-					default: withCtx(() => [
-						createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
-							__props.options?.showOperationId && __props.operation.operationId ? (openBlock(), createBlock(unref(Badge_default), { key: 0 }, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.operation.operationId), 1)]),
-								_: 1
-							})) : createCommentVNode("", true),
-							unref(getOperationStability)(__props.operation) ? (openBlock(), createBlock(unref(Badge_default), {
-								key: 1,
-								class: normalizeClass(["capitalize", unref(getOperationStabilityColor)(__props.operation)])
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+						__props.options?.showOperationId && __props.operation.operationId ? (openBlock(), createBlock(unref(Badge_default), { key: 0 }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.operation.operationId), 1)]),
+							_: 1
+						})) : createCommentVNode("", true),
+						unref(getOperationStability)(__props.operation) ? (openBlock(), createBlock(unref(Badge_default), {
+							key: 1,
+							class: normalizeClass(["capitalize", unref(getOperationStabilityColor)(__props.operation)])
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(getOperationStability)(__props.operation)), 1)]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("", true),
+						__props.isWebhook ? (openBlock(), createBlock(unref(Badge_default), {
+							key: 2,
+							class: "font-code text-green flex w-fit items-center justify-center gap-1"
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarIconWebhooksLogo), { weight: "bold" }), _cache[3] || (_cache[3] = createTextVNode("Webhook ", -1))]),
+							_: 1
+						})) : createCommentVNode("", true),
+						createVNode(unref(XBadges_default), {
+							badges: __props.operation["x-badges"],
+							position: "before"
+						}, null, 8, ["badges"])
+					]), createElementVNode("div", _hoisted_3, [createVNode(unref(XBadges_default), {
+						badges: __props.operation["x-badges"],
+						position: "after"
+					}, null, 8, ["badges"])])]), createElementVNode("div", _hoisted_4, [
+						createElementVNode("div", { class: normalizeClass(["operation-title", unref(isOperationDeprecated)(__props.operation) && "deprecated"]) }, [createVNode(unref(Anchor_default), { onCopyAnchorUrl: _cache[0] || (_cache[0] = () => __props.eventBus?.emit("copy-url:nav-item", { id: __props.id })) }, {
+							default: withCtx(() => [createVNode(unref(SectionHeaderTag_default), {
+								id: unref(labelId),
+								level: 3
 							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(unref(getOperationStability)(__props.operation)), 1)]),
+								default: withCtx(() => [createTextVNode(toDisplayString(operationTitle.value), 1)]),
 								_: 1
-							}, 8, ["class"])) : createCommentVNode("", true),
-							__props.isWebhook ? (openBlock(), createBlock(unref(Badge_default), {
-								key: 2,
-								class: "font-code text-green flex w-fit items-center justify-center gap-1"
-							}, {
-								default: withCtx(() => [createVNode(unref(ScalarIconWebhooksLogo), { weight: "bold" }), _cache[3] || (_cache[3] = createTextVNode("Webhook ", -1))]),
+							}, 8, ["id"])]),
+							_: 1
+						})], 2),
+						createElementVNode("div", _hoisted_5, [createVNode(SecurityRequirementBadge_default, { requiredSecurity: __props.requiredSecurity }, null, 8, ["requiredSecurity"])]),
+						createElementVNode("div", _hoisted_6, [createVNode(SpecificationExtension_default, { value: operationExtensions.value }, null, 8, ["value"]), createVNode(unref(ScalarMarkdown), {
+							anchorPrefix: __props.id,
+							"aria-label": "Operation Description",
+							role: "group",
+							transformType: "heading",
+							value: __props.operation.description,
+							withAnchors: "",
+							withImages: ""
+						}, null, 8, ["anchorPrefix", "value"])]),
+						createElementVNode("div", _hoisted_7, [
+							createVNode(OperationParameters_default, {
+								selectedContentType: selectedRequestBodyContentType.value,
+								"onUpdate:selectedContentType": _cache[1] || (_cache[1] = ($event) => selectedRequestBodyContentType.value = $event),
+								breadcrumb: [__props.id],
+								document: __props.document,
+								eventBus: __props.eventBus,
+								options: __props.options,
+								parameters: __props.operation.parameters,
+								requestBody: unref(getResolvedRef)(__props.operation.requestBody)
+							}, null, 8, [
+								"selectedContentType",
+								"breadcrumb",
+								"document",
+								"eventBus",
+								"options",
+								"parameters",
+								"requestBody"
+							]),
+							createVNode(OperationResponses_default, {
+								breadcrumb: [__props.id],
+								collapsableItems: !__props.options.expandAllResponses,
+								document: __props.document,
+								eventBus: __props.eventBus,
+								options: __props.options,
+								responses: __props.operation.responses
+							}, null, 8, [
+								"breadcrumb",
+								"collapsableItems",
+								"document",
+								"eventBus",
+								"options",
+								"responses"
+							]),
+							createVNode(unref(ScalarErrorBoundary), null, {
+								default: withCtx(() => [__props.operation.callbacks ? (openBlock(), createBlock(Callbacks_default, {
+									key: 0,
+									callbacks: __props.operation.callbacks,
+									class: "mt-6",
+									document: __props.document,
+									eventBus: __props.eventBus,
+									options: __props.options,
+									path: __props.path
+								}, null, 8, [
+									"callbacks",
+									"document",
+									"eventBus",
+									"options",
+									"path"
+								])) : createCommentVNode("", true)]),
 								_: 1
-							})) : createCommentVNode("", true),
-							createVNode(unref(XBadges_default), {
-								badges: __props.operation["x-badges"],
-								position: "before"
-							}, null, 8, ["badges"])
-						]), createElementVNode("div", _hoisted_3, [createVNode(unref(XBadges_default), {
-							badges: __props.operation["x-badges"],
-							position: "after"
-						}, null, 8, ["badges"])])]),
-						createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(unref(isOperationDeprecated)(__props.operation) && "deprecated") }, [createVNode(unref(SectionHeader_default), { removeMargin: "" }, {
-							default: withCtx(() => [createVNode(unref(Anchor_default), { onCopyAnchorUrl: _cache[0] || (_cache[0] = () => __props.eventBus?.emit("copy-url:nav-item", { id: __props.id })) }, {
-								default: withCtx(() => [createVNode(unref(SectionHeaderTag_default), {
-									id: unref(labelId),
-									level: 3
-								}, {
-									default: withCtx(() => [createTextVNode(toDisplayString(operationTitle.value), 1)]),
-									_: 1
-								}, 8, ["id"])]),
+							})
+						]),
+						createElementVNode("div", _hoisted_8, [
+							__props.operation.externalDocs ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
+								default: withCtx(() => [createVNode(unref(ExternalDocs_default), { value: __props.operation.externalDocs }, null, 8, ["value"])]),
 								_: 1
-							})]),
-							_: 1
-						})], 2), createVNode(SecurityRequirementBadge_default, { requiredSecurity: __props.requiredSecurity }, null, 8, ["requiredSecurity"])]),
-						createVNode(unref(SectionColumns_default), null, {
-							default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
-								default: withCtx(() => [createElementVNode("div", _hoisted_5, [
-									createVNode(SpecificationExtension_default, { value: operationExtensions.value }, null, 8, ["value"]),
-									createVNode(unref(ScalarMarkdown), {
-										anchorPrefix: __props.id,
-										"aria-label": "Operation Description",
-										role: "group",
-										transformType: "heading",
-										value: __props.operation.description,
-										withAnchors: "",
-										withImages: ""
-									}, null, 8, ["anchorPrefix", "value"]),
-									createVNode(OperationParameters_default, {
-										selectedContentType: selectedRequestBodyContentType.value,
-										"onUpdate:selectedContentType": _cache[1] || (_cache[1] = ($event) => selectedRequestBodyContentType.value = $event),
-										breadcrumb: [__props.id],
-										eventBus: __props.eventBus,
-										options: __props.options,
-										parameters: __props.operation.parameters,
-										requestBody: unref(getResolvedRef)(__props.operation.requestBody)
-									}, null, 8, [
-										"selectedContentType",
-										"breadcrumb",
-										"eventBus",
-										"options",
-										"parameters",
-										"requestBody"
-									]),
-									createVNode(OperationResponses_default, {
-										breadcrumb: [__props.id],
-										collapsableItems: !__props.options.expandAllResponses,
+							})) : createCommentVNode("", true),
+							createVNode(unref(ScalarErrorBoundary), null, {
+								default: withCtx(() => [(openBlock(), createBlock(unref(OperationCodeSample), {
+									key: requestBodyCompositionSelectionKey.value,
+									clientOptions: __props.clientOptions,
+									eventBus: __props.eventBus,
+									fallback: "",
+									isWebhook: __props.isWebhook,
+									method: __props.method,
+									operation: __props.operation,
+									path: __props.path,
+									requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value,
+									securitySchemes: __props.selectedSecuritySchemes,
+									selectedClient: __props.selectedClient,
+									selectedContentType: selectedRequestBodyContentType.value,
+									selectedServer: __props.selectedServer
+								}, createSlots({
+									header: withCtx(() => [createVNode(OperationPath_default, {
+										class: "font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_em]:not-italic",
+										deprecated: __props.operation?.deprecated,
+										path: __props.path
+									}, null, 8, ["deprecated", "path"])]),
+									_: 2
+								}, [!__props.isWebhook ? {
+									name: "footer",
+									fn: withCtx(({ exampleName }) => [createElementVNode("div", _hoisted_9, [createVNode(AskAgentButton_default), !__props.options.hideTestRequestButton ? (openBlock(), createBlock(unref(TestRequestButton_default), {
+										key: 0,
+										id: __props.id,
 										eventBus: __props.eventBus,
-										options: __props.options,
-										responses: __props.operation.responses
+										exampleName,
+										method: __props.method,
+										path: __props.path,
+										requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value
 									}, null, 8, [
-										"breadcrumb",
-										"collapsableItems",
+										"id",
 										"eventBus",
-										"options",
-										"responses"
-									]),
-									createVNode(unref(ScalarErrorBoundary), null, {
-										default: withCtx(() => [__props.operation.callbacks ? (openBlock(), createBlock(Callbacks_default, {
-											key: 0,
-											callbacks: __props.operation.callbacks,
-											class: "mt-6",
-											eventBus: __props.eventBus,
-											options: __props.options,
-											path: __props.path
-										}, null, 8, [
-											"callbacks",
-											"eventBus",
-											"options",
-											"path"
-										])) : createCommentVNode("", true)]),
-										_: 1
-									})
-								])]),
+										"exampleName",
+										"method",
+										"path",
+										"requestBodyCompositionSelection"
+									])) : createCommentVNode("", true)])]),
+									key: "0"
+								} : void 0]), 1032, [
+									"clientOptions",
+									"eventBus",
+									"isWebhook",
+									"method",
+									"operation",
+									"path",
+									"requestBodyCompositionSelection",
+									"securitySchemes",
+									"selectedClient",
+									"selectedContentType",
+									"selectedServer"
+								]))]),
 								_: 1
-							}), createVNode(unref(SectionColumn_default), null, {
-								default: withCtx(() => [createElementVNode("div", _hoisted_6, [
-									__props.operation.externalDocs ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
-										default: withCtx(() => [createVNode(unref(ExternalDocs_default), { value: __props.operation.externalDocs }, null, 8, ["value"])]),
-										_: 1
-									})) : createCommentVNode("", true),
-									createVNode(unref(ScalarErrorBoundary), null, {
-										default: withCtx(() => [(openBlock(), createBlock(unref(OperationCodeSample), {
-											key: requestBodyCompositionSelectionKey.value,
-											clientOptions: __props.clientOptions,
-											eventBus: __props.eventBus,
-											fallback: "",
-											isWebhook: __props.isWebhook,
-											method: __props.method,
-											operation: __props.operation,
-											path: __props.path,
-											requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value,
-											securitySchemes: __props.selectedSecuritySchemes,
-											selectedClient: __props.selectedClient,
-											selectedContentType: selectedRequestBodyContentType.value,
-											selectedServer: __props.selectedServer
-										}, createSlots({
-											header: withCtx(() => [createVNode(OperationPath_default, {
-												class: "font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_em]:not-italic",
-												deprecated: __props.operation?.deprecated,
-												path: __props.path
-											}, null, 8, ["deprecated", "path"])]),
-											_: 2
-										}, [!__props.isWebhook ? {
-											name: "footer",
-											fn: withCtx(({ exampleName }) => [createElementVNode("div", _hoisted_7, [createVNode(AskAgentButton_default), !__props.options.hideTestRequestButton ? (openBlock(), createBlock(unref(TestRequestButton_default), {
-												key: 0,
-												id: __props.id,
-												eventBus: __props.eventBus,
-												exampleName,
-												method: __props.method,
-												path: __props.path,
-												requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value
-											}, null, 8, [
-												"id",
-												"eventBus",
-												"exampleName",
-												"method",
-												"path",
-												"requestBodyCompositionSelection"
-											])) : createCommentVNode("", true)])]),
-											key: "0"
-										} : void 0]), 1032, [
-											"clientOptions",
-											"eventBus",
-											"isWebhook",
-											"method",
-											"operation",
-											"path",
-											"requestBodyCompositionSelection",
-											"securitySchemes",
-											"selectedClient",
-											"selectedContentType",
-											"selectedServer"
-										]))]),
-										_: 1
-									}),
-									createVNode(unref(ScalarErrorBoundary), null, {
-										default: withCtx(() => [__props.operation.responses ? (openBlock(), createBlock(unref(ExampleResponses_default), {
-											key: 0,
-											responses: __props.operation.responses,
-											style: { "margin-top": "12px" }
-										}, null, 8, ["responses"])) : createCommentVNode("", true)]),
-										_: 1
-									})
-								])]),
+							}),
+							createVNode(unref(ScalarErrorBoundary), null, {
+								default: withCtx(() => [__props.operation.responses ? (openBlock(), createBlock(unref(ExampleResponses_default), {
+									key: 0,
+									responses: __props.operation.responses,
+									style: { "margin-top": "12px" }
+								}, null, 8, ["responses"])) : createCommentVNode("", true)]),
 								_: 1
-							})]),
-							_: 1
-						})
-					]),
+							})
+						])
+					])]),
 					_: 1
 				})]),
 				_: 1

package/dist/features/Operation/layouts/ModernLayout.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    | 'document'\n    | 'pathValue'\n    | 'server'\n    | 'isCollapsed'\n    | 'securitySchemes'\n    | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n  <Section\n    :id=\"id\"\n    :aria-labelledby=\"labelId\"\n    :label=\"operationTitle\"\n    tabindex=\"-1\"\n    @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n    <SectionContent>\n      <!-- Badges -->\n      <div class=\"flex flex-row justify-between gap-1\">\n        <!-- Left -->\n        <div class=\"flex gap-1\">\n          <!-- Operation ID -->\n          <Badge v-if=\"options?.showOperationId && operation.operationId\">\n            {{ operation.operationId }}\n          </Badge>\n          <!-- Stability badge -->\n          <Badge\n            v-if=\"getOperationStability(operation)\"\n            class=\"capitalize\"\n            :class=\"getOperationStabilityColor(operation)\">\n            {{ getOperationStability(operation) }}\n          </Badge>\n          <!-- Webhook badge -->\n          <Badge\n            v-if=\"isWebhook\"\n            class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n            <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n          </Badge>\n          <!-- x-badges before -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"before\" />\n        </div>\n        <!-- Right -->\n        <div class=\"flex gap-1\">\n          <!-- x-badges after -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"after\" />\n        </div>\n      </div>\n      <div class=\"operation-header\">\n        <div :class=\"isOperationDeprecated(operation) && 'deprecated'\">\n          <SectionHeader removeMargin>\n            <Anchor\n              @copyAnchorUrl=\"\n                () => eventBus?.emit('copy-url:nav-item', { id })\n              \">\n              <SectionHeaderTag\n                :id=\"labelId\"\n                :level=\"3\">\n                {{ operationTitle }}\n              </SectionHeaderTag>\n            </Anchor>\n          </SectionHeader>\n        </div>\n\n        <!-- Required auth badge -->\n        <SecurityRequirementBadge :requiredSecurity />\n      </div>\n\n      <SectionColumns>\n        <SectionColumn>\n          <div class=\"operation-details\">\n            <SpecificationExtension :value=\"operationExtensions\" />\n            <ScalarMarkdown\n              :anchorPrefix=\"id\"\n              aria-label=\"Operation Description\"\n              role=\"group\"\n              transformType=\"heading\"\n              :value=\"operation.description\"\n              withAnchors\n              withImages />\n            <OperationParameters\n              v-model:selectedContentType=\"selectedRequestBodyContentType\"\n              :breadcrumb=\"[id]\"\n              :eventBus\n              :options\n              :parameters=\"operation.parameters\"\n              :requestBody=\"getResolvedRef(operation.requestBody)\" />\n            <OperationResponses\n              :breadcrumb=\"[id]\"\n              :collapsableItems=\"!options.expandAllResponses\"\n              :eventBus\n              :options\n              :responses=\"operation.responses\" />\n\n            <!-- Callbacks -->\n            <ScalarErrorBoundary>\n              <Callbacks\n                v-if=\"operation.callbacks\"\n                :callbacks=\"operation.callbacks\"\n                class=\"mt-6\"\n                :eventBus\n                :options\n                :path />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n        <SectionColumn>\n          <div class=\"examples\">\n            <!-- External Docs -->\n            <LinkList v-if=\"operation.externalDocs\">\n              <ExternalDocs :value=\"operation.externalDocs\" />\n            </LinkList>\n\n            <!-- New Example Request -->\n            <ScalarErrorBoundary>\n              <OperationCodeSample\n                :key=\"requestBodyCompositionSelectionKey\"\n                :clientOptions\n                :eventBus\n                fallback\n                :isWebhook\n                :method\n                :operation\n                :path\n                :requestBodyCompositionSelection=\"\n                  requestBodyCompositionSelectionForCodeSample\n                \"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :selectedClient\n                :selectedContentType=\"selectedRequestBodyContentType\"\n                :selectedServer>\n                <template #header>\n                  <OperationPath\n                    class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_em]:not-italic\"\n                    :deprecated=\"operation?.deprecated\"\n                    :path=\"path\" />\n                </template>\n                <template\n                  v-if=\"!isWebhook\"\n                  #footer=\"{ exampleName }\">\n                  <div class=\"flex\">\n                    <AskAgentButton />\n                    <TestRequestButton\n                      v-if=\"!options.hideTestRequestButton\"\n                      :id\n                      :eventBus\n                      :exampleName\n                      :method\n                      :path\n                      :requestBodyCompositionSelection=\"\n                        requestBodyCompositionSelectionForCodeSample\n                      \" />\n                  </div>\n                </template>\n              </OperationCodeSample>\n            </ScalarErrorBoundary>\n\n            <ScalarErrorBoundary>\n              <ExampleResponses\n                v-if=\"operation.responses\"\n                :responses=\"operation.responses\"\n                style=\"margin-top: 12px\" />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n.examples {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > * {\n  max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n  position: relative;\n}\n\n.examples > *:first-of-type:last-of-type {\n  max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/*\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n */\n@media (max-width: 600px) {\n  .examples > * {\n    max-height: unset;\n  }\n}\n.deprecated * {\n  text-decoration: line-through;\n}\n\n.operation-header {\n  margin-bottom: 12px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n    align-items: center;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { Section, SectionContent, SectionHeaderTag } from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    | 'document'\n    | 'pathValue'\n    | 'server'\n    | 'isCollapsed'\n    | 'securitySchemes'\n    | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n  <Section\n    :id=\"id\"\n    :aria-labelledby=\"labelId\"\n    :label=\"operationTitle\"\n    tabindex=\"-1\"\n    @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n    <SectionContent>\n      <!-- Badges -->\n      <div class=\"flex flex-row justify-between gap-1\">\n        <!-- Left -->\n        <div class=\"flex gap-1\">\n          <!-- Operation ID -->\n          <Badge v-if=\"options?.showOperationId && operation.operationId\">\n            {{ operation.operationId }}\n          </Badge>\n          <!-- Stability badge -->\n          <Badge\n            v-if=\"getOperationStability(operation)\"\n            class=\"capitalize\"\n            :class=\"getOperationStabilityColor(operation)\">\n            {{ getOperationStability(operation) }}\n          </Badge>\n          <!-- Webhook badge -->\n          <Badge\n            v-if=\"isWebhook\"\n            class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n            <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n          </Badge>\n          <!-- x-badges before -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"before\" />\n        </div>\n        <!-- Right -->\n        <div class=\"flex gap-1\">\n          <!-- x-badges after -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"after\" />\n        </div>\n      </div>\n      <div class=\"operation-layout\">\n        <!-- Title -->\n        <div\n          class=\"operation-title\"\n          :class=\"isOperationDeprecated(operation) && 'deprecated'\">\n          <Anchor\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <SectionHeaderTag\n              :id=\"labelId\"\n              :level=\"3\">\n              {{ operationTitle }}\n            </SectionHeaderTag>\n          </Anchor>\n        </div>\n\n        <!-- Required auth badge -->\n        <div class=\"operation-auth\">\n          <SecurityRequirementBadge :requiredSecurity />\n        </div>\n\n        <!-- Description -->\n        <div class=\"operation-description\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n          <ScalarMarkdown\n            :anchorPrefix=\"id\"\n            aria-label=\"Operation Description\"\n            role=\"group\"\n            transformType=\"heading\"\n            :value=\"operation.description\"\n            withAnchors\n            withImages />\n        </div>\n\n        <!--\n          Parameters, request body, responses and callbacks.\n\n          This block is kept before the examples in source order on purpose: the\n          request body schema (via SchemaComposition) seeds the shared\n          requestBodyCompositionSelection on mount, which drives the\n          OperationCodeSample's :key. Mounting the details first means the code\n          sample reads the final key on its first render and is never remounted —\n          a remount would reset the selected client and tear down an open client\n          picker. The grid (see grid-template-areas below) still paints the\n          examples on the right, independent of this source order.\n        -->\n        <div class=\"operation-details\">\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :breadcrumb=\"[id]\"\n            :document\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n          <OperationResponses\n            :breadcrumb=\"[id]\"\n            :collapsableItems=\"!options.expandAllResponses\"\n            :document\n            :eventBus\n            :options\n            :responses=\"operation.responses\" />\n\n          <!-- Callbacks -->\n          <ScalarErrorBoundary>\n            <Callbacks\n              v-if=\"operation.callbacks\"\n              :callbacks=\"operation.callbacks\"\n              class=\"mt-6\"\n              :document\n              :eventBus\n              :options\n              :path />\n          </ScalarErrorBoundary>\n        </div>\n\n        <!-- Example request and responses -->\n        <div class=\"examples\">\n          <!-- External Docs -->\n          <LinkList v-if=\"operation.externalDocs\">\n            <ExternalDocs :value=\"operation.externalDocs\" />\n          </LinkList>\n\n          <!-- New Example Request -->\n          <ScalarErrorBoundary>\n            <OperationCodeSample\n              :key=\"requestBodyCompositionSelectionKey\"\n              :clientOptions\n              :eventBus\n              fallback\n              :isWebhook\n              :method\n              :operation\n              :path\n              :requestBodyCompositionSelection=\"\n                requestBodyCompositionSelectionForCodeSample\n              \"\n              :securitySchemes=\"selectedSecuritySchemes\"\n              :selectedClient\n              :selectedContentType=\"selectedRequestBodyContentType\"\n              :selectedServer>\n              <template #header>\n                <OperationPath\n                  class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_em]:not-italic\"\n                  :deprecated=\"operation?.deprecated\"\n                  :path=\"path\" />\n              </template>\n              <template\n                v-if=\"!isWebhook\"\n                #footer=\"{ exampleName }\">\n                <div class=\"flex\">\n                  <AskAgentButton />\n                  <TestRequestButton\n                    v-if=\"!options.hideTestRequestButton\"\n                    :id\n                    :eventBus\n                    :exampleName\n                    :method\n                    :path\n                    :requestBodyCompositionSelection=\"\n                      requestBodyCompositionSelectionForCodeSample\n                    \" />\n                </div>\n              </template>\n            </OperationCodeSample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :responses=\"operation.responses\"\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </div>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n/*\n * The operation is a single grid so the request example can sit beside the\n * details on wide screens, then be lifted directly under the description when\n * the layout collapses (see the container query below). Vertical rhythm comes\n * from element margins rather than row-gap, because the details block carries\n * its own leading margin (mt-6) that already spaces it from whatever precedes\n * it — a row-gap would double that gap.\n */\n.operation-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'heading     badge'\n    'description examples'\n    'details     examples';\n  column-gap: 48px;\n  row-gap: 0;\n}\n\n.operation-title {\n  grid-area: heading;\n  margin-bottom: 12px;\n\n  /* Mirror the shared section header typography (see SectionHeader.vue) */\n  font-size: var(--font-size, var(--scalar-heading-1));\n  font-weight: var(--font-weight, var(--scalar-bold));\n  color: var(--scalar-color-1);\n  line-height: 1.45;\n}\n\n.operation-auth {\n  grid-area: badge;\n  justify-self: end;\n  align-self: start;\n}\n\n.operation-description {\n  grid-area: description;\n  min-width: 0;\n}\n\n.operation-details {\n  grid-area: details;\n  min-width: 0;\n}\n\n.examples {\n  grid-area: examples;\n  min-width: 0;\n\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > * {\n  max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n  position: relative;\n}\n\n.examples > *:first-of-type:last-of-type {\n  max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/*\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n */\n@media (max-width: 600px) {\n  .examples > * {\n    max-height: unset;\n  }\n}\n\n.deprecated * {\n  text-decoration: line-through;\n}\n\n/*\n * On narrow containers the layout collapses to a single column: the request\n * example is lifted directly under the description, and the auth badge becomes\n * an eyebrow above the title.\n */\n@container narrow-references-container (max-width: 900px) {\n  .operation-layout {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'badge'\n      'heading'\n      'description'\n      'examples'\n      'details';\n    column-gap: 0;\n  }\n\n  .operation-auth {\n    justify-self: start;\n    margin-bottom: 4px;\n  }\n\n  .operation-title {\n    margin-bottom: 24px;\n  }\n\n  .operation-description {\n    margin-bottom: 24px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Search/components/SearchButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/components/SearchButton.vue"],"names":[],"mappings":"AA+GA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,QAAQ,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAA;IAC7C,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA0KF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SearchButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/components/SearchButton.vue"],"names":[],"mappings":"AA4HA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,QAAQ,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAA;IAC7C,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAuLF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Search/components/SearchButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchButton.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSidebarSearchButton } from '@scalar/components/sidebar'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  DEFAULT_MODELS_SECTION_LABEL,\n  type ModelsSectionLabel,\n} from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst {\n  searchHotKey = 'k',\n  modelsSectionLabel = DEFAULT_MODELS_SECTION_LABEL,\n} = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  modelsSectionLabel?: ModelsSectionLabel\n  document?: OpenApiDocument | AsyncApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMacOS()\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :modalState=\"modalState\"\n    :modelsSectionLabel=\"modelsSectionLabel\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"SearchButton.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSidebarSearchButton } from '@scalar/components/sidebar'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  DEFAULT_MODELS_SECTION_LABEL,\n  type ModelsSectionLabel,\n} from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst {\n  searchHotKey = 'k',\n  modelsSectionLabel = DEFAULT_MODELS_SECTION_LABEL,\n} = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  modelsSectionLabel?: ModelsSectionLabel\n  document?: OpenApiDocument | AsyncApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\n/**\n * Whether the user is on macOS, used to show the correct shortcut symbol.\n *\n * This must default to `false` so the server-rendered markup and the first\n * client render agree. Detecting the platform relies on `navigator`, which is\n * unavailable during SSR, so we resolve it after mount to avoid a hydration\n * mismatch.\n */\nconst isMac = ref(false)\nonMounted(() => {\n  isMac.value = isMacOS()\n})\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMac\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :modalState=\"modalState\"\n    :modelsSectionLabel=\"modelsSectionLabel\" />\n</template>\n"],"mappings":""}

package/dist/features/Search/components/SearchButton.vue.script.js

@@ -20,6 +20,18 @@ var SearchButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	setup(__props) {
 		const button = ref();
 		const modalState = useModal();
+		/**
+		* Whether the user is on macOS, used to show the correct shortcut symbol.
+		*
+		* This must default to `false` so the server-rendered markup and the first
+		* client render agree. Detecting the platform relies on `navigator`, which is
+		* unavailable during SSR, so we resolve it after mount to avoid a hydration
+		* mismatch.
+		*/
+		const isMac = ref(false);
+		onMounted(() => {
+			isMac.value = isMacOS();
+		});
 		const handleHotKey = (e) => {
 			if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === __props.searchHotKey) {
 				e.preventDefault();
@@ -52,7 +64,7 @@ var SearchButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				class: normalizeClass(["w-full", _ctx.$attrs.class]),
 				onClick: handleClick
 			}, {
-				shortcut: withCtx(() => [unref(isMacOS)() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "Command", -1)), _cache[1] || (_cache[1] = createElementVNode("span", { "aria-hidden": "true" }, "⌘", -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "CTRL", -1)), _cache[3] || (_cache[3] = createElementVNode("span", { "aria-hidden": "true" }, "⌃", -1))], 64)), createTextVNode(" " + toDisplayString(__props.searchHotKey), 1)]),
+				shortcut: withCtx(() => [isMac.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "Command", -1)), _cache[1] || (_cache[1] = createElementVNode("span", { "aria-hidden": "true" }, "⌘", -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "CTRL", -1)), _cache[3] || (_cache[3] = createElementVNode("span", { "aria-hidden": "true" }, "⌃", -1))], 64)), createTextVNode(" " + toDisplayString(__props.searchHotKey), 1)]),
 				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("span", { class: "sr-only" }, "Open Search", -1)), _cache[5] || (_cache[5] = createElementVNode("span", {
 					"aria-hidden": "true",
 					class: "sidebar-search-placeholder"

package/dist/features/Search/components/SearchButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchButton.vue.script.js","names":["$attrs"],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSidebarSearchButton } from '@scalar/components/sidebar'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  DEFAULT_MODELS_SECTION_LABEL,\n  type ModelsSectionLabel,\n} from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst {\n  searchHotKey = 'k',\n  modelsSectionLabel = DEFAULT_MODELS_SECTION_LABEL,\n} = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  modelsSectionLabel?: ModelsSectionLabel\n  document?: OpenApiDocument | AsyncApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMacOS()\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :modalState=\"modalState\"\n    :modelsSectionLabel=\"modelsSectionLabel\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,KAAoD;EACnE,MAAM,aAAa,UAAS;EAE5B,MAAM,gBAAgB,MAAqB;AACzC,QAAK,SAAS,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,QAAA,cAAc;AACjE,MAAE,gBAAe;AACjB,MAAE,iBAAgB;AAElB,QAAI,WAAW,KACb,YAAW,MAAK;QAEhB,YAAW,MAAK;;;AAKtB,cACQ,WAAW,MACjB,OAAO,MAAM,SAAS;AAEpB,OAAI,CAAC,QAAQ,MAAM;AACjB,UAAM,UAAS;AACf,WAAO,OAAO,IAAI,OAAM;;IAG9B;AAKA,kBAAgB,OAAO,iBAAiB,WAAW,aAAa,CAAA;AAChE,wBAAsB,OAAO,oBAAoB,WAAW,aAAa,CAAA;EAEzE,SAAS,cAAc;AACrB,cAAW,MAAK;;;2DAKR,QAAA,aAAA,WAAA,EADR,YAIyB,MAAA,iBAAA,EAAA;;IAFtB,MAAM,MAAA,0BAAyB;IAChC,OAAM;IACL,SAAO;0CACV,YAuB4B,MAAA,0BAAA,EAAA;;aArBtB;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,UACEA,KAAAA,OAAO,MAAK,CAAA;IACnB,SAAO;;IAOG,UAAQ,cAIN,CAHK,MAAA,QAAO,EAAA,IAAA,WAAA,EAAvB,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,OAAA,OAAA,OAAA,KAC7B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,KAAA,WAAA,EAE5B,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAiC,QAAA,EAA3B,OAAM,WAAS,EAAC,QAAI,GAAA,GAAA,OAAA,OAAA,OAAA,KAC1B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,GAAA,gBACjB,MACX,gBAAG,QAAA,aAAY,EAAA,EAAA,CAAA,CAAA;2BAfuB,CAAA,OAAA,OAAA,OAAA,KAAxC,mBAAwC,QAAA,EAAlC,OAAM,WAAS,EAAC,eAAW,GAAA,GAAA,OAAA,OAAA,OAAA,KACjC,mBAIO,QAAA;KAHL,eAAY;KACZ,OAAM;OAA6B,YAErC,GAAA,EAAA,CAAA;;sBAcF,YAI6C,qBAAA;IAH1C,UAAA,QAAA;IACA,UAAU,QAAA;IACV,YAAY,MAAA,WAAU;IACtB,oBAAoB,QAAA"}
+{"version":3,"file":"SearchButton.vue.script.js","names":["$attrs"],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSidebarSearchButton } from '@scalar/components/sidebar'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  DEFAULT_MODELS_SECTION_LABEL,\n  type ModelsSectionLabel,\n} from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst {\n  searchHotKey = 'k',\n  modelsSectionLabel = DEFAULT_MODELS_SECTION_LABEL,\n} = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  modelsSectionLabel?: ModelsSectionLabel\n  document?: OpenApiDocument | AsyncApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\n/**\n * Whether the user is on macOS, used to show the correct shortcut symbol.\n *\n * This must default to `false` so the server-rendered markup and the first\n * client render agree. Detecting the platform relies on `navigator`, which is\n * unavailable during SSR, so we resolve it after mount to avoid a hydration\n * mismatch.\n */\nconst isMac = ref(false)\nonMounted(() => {\n  isMac.value = isMacOS()\n})\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMac\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :modalState=\"modalState\"\n    :modelsSectionLabel=\"modelsSectionLabel\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,KAAoD;EACnE,MAAM,aAAa,UAAS;;;;;;;;;EAU5B,MAAM,QAAQ,IAAI,MAAK;AACvB,kBAAgB;AACd,SAAM,QAAQ,SAAQ;IACvB;EAED,MAAM,gBAAgB,MAAqB;AACzC,QAAK,SAAS,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,QAAA,cAAc;AACjE,MAAE,gBAAe;AACjB,MAAE,iBAAgB;AAElB,QAAI,WAAW,KACb,YAAW,MAAK;QAEhB,YAAW,MAAK;;;AAKtB,cACQ,WAAW,MACjB,OAAO,MAAM,SAAS;AAEpB,OAAI,CAAC,QAAQ,MAAM;AACjB,UAAM,UAAS;AACf,WAAO,OAAO,IAAI,OAAM;;IAG9B;AAKA,kBAAgB,OAAO,iBAAiB,WAAW,aAAa,CAAA;AAChE,wBAAsB,OAAO,oBAAoB,WAAW,aAAa,CAAA;EAEzE,SAAS,cAAc;AACrB,cAAW,MAAK;;;2DAKR,QAAA,aAAA,WAAA,EADR,YAIyB,MAAA,iBAAA,EAAA;;IAFtB,MAAM,MAAA,0BAAyB;IAChC,OAAM;IACL,SAAO;0CACV,YAuB4B,MAAA,0BAAA,EAAA;;aArBtB;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,UACEA,KAAAA,OAAO,MAAK,CAAA;IACnB,SAAO;;IAOG,UAAQ,cAIN,CAHK,MAAA,SAAA,WAAA,EAAhB,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,OAAA,OAAA,OAAA,KAC7B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,KAAA,WAAA,EAE5B,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAiC,QAAA,EAA3B,OAAM,WAAS,EAAC,QAAI,GAAA,GAAA,OAAA,OAAA,OAAA,KAC1B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,GAAA,gBACjB,MACX,gBAAG,QAAA,aAAY,EAAA,EAAA,CAAA,CAAA;2BAfuB,CAAA,OAAA,OAAA,OAAA,KAAxC,mBAAwC,QAAA,EAAlC,OAAM,WAAS,EAAC,eAAW,GAAA,GAAA,OAAA,OAAA,OAAA,KACjC,mBAIO,QAAA;KAHL,eAAY;KACZ,OAAM;OAA6B,YAErC,GAAA,EAAA,CAAA;;sBAcF,YAI6C,qBAAA;IAH1C,UAAA,QAAA;IACA,UAAU,QAAA;IACV,YAAY,MAAA,WAAU;IACtB,oBAAoB,QAAA"}

package/dist/features/Search/components/SearchModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchModal.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/components/SearchModal.vue"],"names":[],"mappings":"AAwJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAQnG,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,eAAe,GAAG,gBAAgB,GAAG,SAAS,CAAA;IACxD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC,CAAC;AA4PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SearchModal.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Search/components/SearchModal.vue"],"names":[],"mappings":"AAuJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAOnG,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,eAAe,GAAG,gBAAgB,GAAG,SAAS,CAAA;IACxD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC,CAAC;AA4PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Search/components/SearchModal.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import SearchModal_vue_vue_type_script_setup_true_lang_default from "./SearchModal.vue.script.js";
 /* empty css                          */
 //#region src/features/Search/components/SearchModal.vue
-var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c66e857d"]]);
+var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-25f2d34f"]]);
 //#endregion
 export { SearchModal_default as default };
 

package/dist/features/Search/components/SearchModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchModal.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarSearchResultList } from '@scalar/components/search-results'\nimport type { ModelsSectionLabel } from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  modalState: ModalState\n  document: OpenApiDocument | AsyncApiDocument | undefined\n  eventBus: WorkspaceEventBus\n  modelsSectionLabel?: ModelsSectionLabel\n}>()\n\n/** Base id for the search form */\nconst id = nanoid()\n/** An id for the results listbox */\nconst listboxId = `${id}-search-result`\n/** An id for the results instructions */\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(\n  () => props.document,\n  () => props.modelsSectionLabel,\n)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/** Clear the query value when the modal is opened */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n    }\n  },\n)\n\n/** Keyboard navigation */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n\n  if (typeof selectedIndex.value === 'number') {\n    // Ensures we loop around the array by using the remainder\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n  } else {\n    // If no index is selected, we select the first or last item depending on the direction\n\n    selectedIndex.value = offset === -1 ? length - 1 : 0\n  }\n}\n\n/** Handle the selection of a search result */\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/**\n * Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n  <ScalarModal\n    aria-label=\"Reference Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Reference Search Results\"\n      class=\"custom-scroll px-1 pb-1\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :modelsSectionLabel=\"props.modelsSectionLabel\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SearchModal.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarSearchResultList } from '@scalar/components/search-results'\nimport type { ModelsSectionLabel } from '@scalar/types/api-reference'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  modalState: ModalState\n  document: OpenApiDocument | AsyncApiDocument | undefined\n  eventBus: WorkspaceEventBus\n  modelsSectionLabel?: ModelsSectionLabel\n}>()\n\n/** Base id for the search form */\nconst id = useId()\n/** An id for the results listbox */\nconst listboxId = `${id}-search-result`\n/** An id for the results instructions */\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(\n  () => props.document,\n  () => props.modelsSectionLabel,\n)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/** Clear the query value when the modal is opened */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n    }\n  },\n)\n\n/** Keyboard navigation */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n\n  if (typeof selectedIndex.value === 'number') {\n    // Ensures we loop around the array by using the remainder\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n  } else {\n    // If no index is selected, we select the first or last item depending on the direction\n\n    selectedIndex.value = offset === -1 ? length - 1 : 0\n  }\n}\n\n/** Handle the selection of a search result */\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/**\n * Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n  <ScalarModal\n    aria-label=\"Reference Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Reference Search Results\"\n      class=\"custom-scroll px-1 pb-1\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :modelsSectionLabel=\"props.modelsSectionLabel\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}