@scalar/api-client 3.17.0 → 3.19.0

package/dist/v2/components/layout/CollapsibleSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border-x border-t'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;CAOE,MAAM;;;;;;;;;;;EAwBR,MAAM,OAAO;EAIb,MAAM,YAAY,MAAM;;uBAItB,YA2Ea,MAAA,UAAA,GAAA;IAzEX,IAAG;IACH,OAAK,eAAA,CAAC,yEAAuE;8CACpB,QAAA;kBAA6B,QAAA;;IAIrF,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAZhD,WAAI,CAUd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,SAAA;KAClB,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,gCAAA,CAAA,EAAA,GAAA,CAEhB,YAkCmB,MAAA,gBAAA,GAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,OAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,UAAA,GADT,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,SAAA;MACL,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,KAAI,CAAA,GAAA,CAEJ,QAAA,UAAA,GADT,mBAIO,QAJP,YAEkB,eAElB,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,GAAA,CAKO,QAAQ,QAAA,aAAA,UAAA,GADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,SAAS,IAAG,KACf,CAAA,GAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,GAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,GAKjB,YAIkB,MAAA,eAAA,GAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,6CAA4C,CAAA,GAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
+{"version":3,"file":"CollapsibleSection.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border-x border-t'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;CAOE,MAAM;;;;;;;;;;;EAwBR,MAAM,OAAO;EAIb,MAAM,YAAY,MAAM;;uBAItB,YA2Ea,MAAA,UAAA,GAAA;IAzEX,IAAG;IACH,OAAK,eAAA,CAAC,yEAAuE;8CACpB,QAAA;kBAA6B,QAAA;;IAIrF,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAZhD,WAAI,CAUd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,SAAA;KAClB,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,gCAAA,CAAA,EAAA,GAAA,CAEhB,YAkCmB,MAAA,gBAAA,GAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,OAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,UAAA,GADT,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,SAAA;MACL,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,KAAI,CAAA,GAAA,CAEJ,QAAA,UAAA,GADT,mBAIO,QAJP,YAEkB,eAElB,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,GAAA,CAKO,QAAQ,QAAA,aAAA,UAAA,GADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,SAAS,IAAG,KACf,CAAA,GAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,GAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,GAKjB,YAIkB,MAAA,eAAA,GAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,6CAA4C,CAAA,GAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}

package/dist/v2/components/server/ServerDropdown.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ServerMeta } from '@scalar/workspace-store/events';
-import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 import type { ClientLayout } from '../../../v2/types/layout';
 /**
  * ServerDropdown component

package/dist/v2/components/server/ServerDropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdown.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarFloatingBackdrop } from '@scalar/components/floating'\nimport { ScalarPopover } from '@scalar/components/popover'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap @3xl:ml-0.75\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerDropdown.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarFloatingBackdrop } from '@scalar/components/floating'\nimport { ScalarPopover } from '@scalar/components/popover'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap @3xl:ml-0.75\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":""}

package/dist/v2/components/server/ServerDropdown.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdown.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarFloatingBackdrop } from '@scalar/components/floating'\nimport { ScalarPopover } from '@scalar/components/popover'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap @3xl:ml-0.75\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;CAME,MAAM;;;;;;;;;;;;;;;EAmCR,MAAM,OAAO;EAeb,MAAM,uBAAuB,eAC3B,QAAA,QAAQ,KAAK,OAAO;GAClB,IAAI,EAAE;GACN,OAAO,EAAE,OAAO;EAClB,EAAE,CACJ;EAEA,MAAM,gCAAgC,eAAe;GACnD,IAAI,QAAA,QAAQ,KAAK,SAAS,GAAG,GAC3B,OAAO,QAAA,OAAO,IAAI,MAAM,GAAG,EAAE;GAE/B,OAAO,QAAA,QAAQ,OAAO;EACxB,CAAC;;uBAGC,YA8DgB,MAAA,aAAA,GAAA;IA7Dd,OAAM;IACN,OAAA;IACC,QAAQ;IACT,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,UAAQ,IAAM,QAAA;;IAcJ,SAAO,SA8BV,EA9Bc,YAAK,CACzB,mBA6BM,OAAA;KA5BJ,OAAM;KACL,SAAO;0BAER,mBAWM,UAAA,MAAA,WAV4B,qBAAA,QAAxB,cAAc,UAAK;yBAD7B,YAWM,4BAAA;MATH,KAAK,aAAa;MAClB,QAAQ,QAAA;MACM;MACf,MAAK;MACJ,4BAAqB,WAAe,KAAI,yBAAA;OAAA,KAAiC,aAAa;OAAE,MAAE,QAAA;MAAI,CAAA;MAG9F,sBAA+B,KAAK,UAAU,KAAI,mBAAA;OAAsB;OAAO;OAAK;OAAK,MAAE,QAAA;MAAI,CAAA;;;;;;;eAKlF,QAAA,WAAM,WAAA,UAAA,GACpB,mBAQS,UAAA;;KAPP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;QACZ,mBAEM,OAFN,YAEM,CADJ,YAAyC,MAAA,sBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAExC,mBAA2B,QAAA,MAArB,kBAAc,EAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA;IAKjB,UAAQ,SAKyB,EALrB,WAAI,CAEzB,YAG0C,sBAAA;KAFvC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,eAAgB,KAAK;KAC5C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAA,KAAA;4BAEhB,YAAuE,MAAA,sBAAA,GAAA,EAA/C,OAAM,uCAAsC,CAAA,CAAA,CAAA;2BAzCvD,CAXf,YAWe,MAAA,YAAA,GAAA;KAVb,OAAM;KACN,SAAQ;;4BAIG,CAHK,QAAA,UAAA,UAAA,GAAhB,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,UAAS,GAAC,WAAO,EAAA,IAAA,gBAAO,MACpC,gBAAG,8BAAA,KAA6B,GAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAElC,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAuC,QAAA,EAAjC,OAAM,UAAS,GAAC,cAAU,EAAA,IAChC,YAAiC,MAAA,cAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA"}
+{"version":3,"file":"ServerDropdown.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarFloatingBackdrop } from '@scalar/components/floating'\nimport { ScalarPopover } from '@scalar/components/popover'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap @3xl:ml-0.75\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;CAME,MAAM;;;;;;;;;;;;;;;EAmCR,MAAM,OAAO;EAeb,MAAM,uBAAuB,eAC3B,QAAA,QAAQ,KAAK,OAAO;GAClB,IAAI,EAAE;GACN,OAAO,EAAE,OAAO;EAClB,EAAE,CACJ;EAEA,MAAM,gCAAgC,eAAe;GACnD,IAAI,QAAA,QAAQ,KAAK,SAAS,GAAG,GAC3B,OAAO,QAAA,OAAO,IAAI,MAAM,GAAG,EAAE;GAE/B,OAAO,QAAA,QAAQ,OAAO;EACxB,CAAC;;uBAGC,YA8DgB,MAAA,aAAA,GAAA;IA7Dd,OAAM;IACN,OAAA;IACC,QAAQ;IACT,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,UAAQ,IAAM,QAAA;;IAcJ,SAAO,SA8BV,EA9Bc,YAAK,CACzB,mBA6BM,OAAA;KA5BJ,OAAM;KACL,SAAO;0BAER,mBAWM,UAAA,MAAA,WAV4B,qBAAA,QAAxB,cAAc,UAAK;yBAD7B,YAWM,4BAAA;MATH,KAAK,aAAa;MAClB,QAAQ,QAAA;MACM;MACf,MAAK;MACJ,4BAAqB,WAAe,KAAI,yBAAA;OAAA,KAAiC,aAAa;OAAE,MAAE,QAAA;MAAI,CAAA;MAG9F,sBAA+B,KAAK,UAAU,KAAI,mBAAA;OAAsB;OAAO;OAAK;OAAK,MAAE,QAAA;MAAI,CAAA;;;;;;;eAKlF,QAAA,WAAM,WAAA,UAAA,GACpB,mBAQS,UAAA;;KAPP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;QACZ,mBAEM,OAFN,YAEM,CADJ,YAAyC,MAAA,sBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAExC,mBAA2B,QAAA,MAArB,kBAAc,EAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA;IAKjB,UAAQ,SAKyB,EALrB,WAAI,CAEzB,YAG0C,sBAAA;KAFvC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,eAAgB,KAAK;KAC5C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAA,KAAA;4BAEhB,YAAuE,MAAA,sBAAA,GAAA,EAA/C,OAAM,uCAAsC,CAAA,CAAA,CAAA;2BAzCvD,CAXf,YAWe,MAAA,YAAA,GAAA;KAVb,OAAM;KACN,SAAQ;;4BAIG,CAHK,QAAA,UAAA,UAAA,GAAhB,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,UAAS,GAAC,WAAO,EAAA,IAAA,gBAAO,MACpC,gBAAG,8BAAA,KAA6B,GAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAElC,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAuC,QAAA,EAAjC,OAAM,UAAS,GAAC,cAAU,EAAA,IAChC,YAAiC,MAAA,cAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA"}

package/dist/v2/components/server/ServerDropdownItem.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 type __VLS_Props = {
     server: ServerObject | null;
     serverOption: {

package/dist/v2/components/server/ServerDropdownItem.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ServerDropdownItem_vue_vue_type_script_setup_true_lang_default from "./ServerDropdownItem.vue.script.js";
 /* empty css                                 */
 //#region src/v2/components/server/ServerDropdownItem.vue
-var ServerDropdownItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ServerDropdownItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-649f9a0d"]]);
+var ServerDropdownItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ServerDropdownItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9775eaaf"]]);
 //#endregion
 export { ServerDropdownItem_default as default };
 

package/dist/v2/components/server/ServerDropdownItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdownItem.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ServerDropdownItem.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":""}

package/dist/v2/components/server/ServerDropdownItem.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdownItem.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;EAOb,MAAM,SAAS,MAAM;EAErB,MAAM,qBAAqB;GACzB,OAAO,OAAO,KAAK,QAAA,QAAQ,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;EACvD;EAEA,MAAM,mBAAmB,eAAe,QAAA,aAAa,OAAO,QAAA,QAAQ,GAAG;EACvE,MAAM,aAAa,eAAe,iBAAiB,SAAS,aAAa,CAAC;;uBAGxE,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,qDAAmD,EAAA,sBAAA,CACxB,iBAAA,MAAgB,CAAA,CAAA,EAAA,GAAA,CACjD,mBAWS,UAXT,WACU,WAUD,QAVW,EAAA,iBAAsB,MAAA,MAAA,EAAM,IAAA,CAAA,GAAA;IAC7C,iBAAe,WAAA;IAChB,OAAK,CAAC,mEACE,iBAAA,QAAgB,oBAAA,cAAA;IACxB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,uBAAA;QACZ,YAAsD,MAAA,qBAAA,GAAA,EAA9B,UAAU,iBAAA,MAAgB,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,GAClD,mBAEO,QAFP,YAEO,gBADF,QAAA,aAAa,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,GAKjB,WAAA,SAAA,UAAA,GADR,mBAgBM,OAAA;;IAdH,IAAI,MAAA,MAAA;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;OACX,YAIM,6BAAA;IAHH,WAAW,QAAA,QAAQ;IACnB,qBAAe,OAAA,OAAA,OAAA,MAAc,KAAK,UAAU,KAAI,mBAAoB,KAAK,KAAK;+BAItE,QAAA,QAAQ,eAAA,UAAA,GAAnB,mBAIM,OAAA,YAAA,CAHJ,mBAEM,OAFN,YAEM,CADJ,YAA8C,MAAA,cAAA,GAAA,EAA7B,OAAO,QAAA,OAAO,YAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ServerDropdownItem.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;EAOb,MAAM,SAAS,MAAM;EAErB,MAAM,qBAAqB;GACzB,OAAO,OAAO,KAAK,QAAA,QAAQ,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;EACvD;EAEA,MAAM,mBAAmB,eAAe,QAAA,aAAa,OAAO,QAAA,QAAQ,GAAG;EACvE,MAAM,aAAa,eAAe,iBAAiB,SAAS,aAAa,CAAC;;uBAGxE,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,qDAAmD,EAAA,sBAAA,CACxB,iBAAA,MAAgB,CAAA,CAAA,EAAA,GAAA,CACjD,mBAWS,UAXT,WACU,WAUD,QAVW,EAAA,iBAAsB,MAAA,MAAA,EAAM,IAAA,CAAA,GAAA;IAC7C,iBAAe,WAAA;IAChB,OAAK,CAAC,mEACE,iBAAA,QAAgB,oBAAA,cAAA;IACxB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,uBAAA;QACZ,YAAsD,MAAA,qBAAA,GAAA,EAA9B,UAAU,iBAAA,MAAgB,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,GAClD,mBAEO,QAFP,YAEO,gBADF,QAAA,aAAa,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,GAKjB,WAAA,SAAA,UAAA,GADR,mBAgBM,OAAA;;IAdH,IAAI,MAAA,MAAA;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;OACX,YAIM,6BAAA;IAHH,WAAW,QAAA,QAAQ;IACnB,qBAAe,OAAA,OAAA,OAAA,MAAc,KAAK,UAAU,KAAI,mBAAoB,KAAK,KAAK;+BAItE,QAAA,QAAQ,eAAA,UAAA,GAAnB,mBAIM,OAAA,YAAA,CAHJ,mBAEM,OAFN,YAEM,CADJ,YAA8C,MAAA,cAAA,GAAA,EAA7B,OAAO,QAAA,OAAO,YAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}

package/dist/v2/constants.js

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.17.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.19.0";
 //#endregion
 export { APP_VERSION };
 

package/dist/v2/features/command-palette/components/CommandActionInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandActionInput.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"CommandActionInput.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !(event.target instanceof HTMLTextAreaElement)) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":""}

package/dist/v2/features/command-palette/components/CommandActionInput.vue.script.js

@@ -38,7 +38,7 @@ var CommandActionInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		* Shift+Enter is ignored to allow multi-line input if needed.
 		*/
 		const handleEnter = (event) => {
-			if (event.shiftKey || !event.target) return;
+			if (event.shiftKey || !(event.target instanceof HTMLTextAreaElement)) return;
 			event.preventDefault();
 			const target = event.target;
 			const submitEvent = new Event("submit", { cancelable: true });

package/dist/v2/features/command-palette/components/CommandActionInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandActionInput.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":";;;;CAkBE,MAAM;;;;;;;;;;;;EAoBR,MAAM,OAAO;EASb,MAAM,QAAQ,IAAgC,IAAI;;;;;EAMlD,MAAM,QAAQ,SAAiB;GAC7B,WAAW,QAAA,cAAc;GACzB,MAAM,UAAU,KAAK,qBAAqB,KAAK;EACjD,CAAC;;;;;EAMD,gBAAgB;GACd,eAAe;IACb,IAAI,QAAA,WACF,MAAM,OAAO,MAAM;GAEvB,CAAC;EACH,CAAC;;;;;EAMD,MAAM,eAAe,UAA+B;GAClD,IAAI,MAAM,YAAY,CAAC,MAAM,QAC3B;GAGF,MAAM,eAAe;GAErB,MAAM,SAAS,MAAM;GACrB,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,YAAY,KAAK,CAAC;GAC5D,OAAO,MAAM,cAAc,WAAW;EACxC;;;;;EAMA,MAAM,gBAAgB,UAA+B;GACnD,IAAI,MAAM,UAAU,IAClB;GAGF,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,KAAK,UAAU,KAAK;EACtB;;uCAIE,mBASiC,YATjC,WASiC;IAR/B,IAAG;aACC;IAAJ,KAAI;uEACU,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACzB,MAAK;MACGA,KAAAA,QAAM,EACb,WAAO,CAAA,SAAS,cAAY,CAAA,QAAA,CAAA,GAAA,SACb,aAAW,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,MAAA,IAAA,UAAA,IAAA,CAAA,CAAA,YANlB,MAAA,KAAK,CAAA,CAAA"}
+{"version":3,"file":"CommandActionInput.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !(event.target instanceof HTMLTextAreaElement)) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":";;;;CAkBE,MAAM;;;;;;;;;;;;EAoBR,MAAM,OAAO;EASb,MAAM,QAAQ,IAAgC,IAAI;;;;;EAMlD,MAAM,QAAQ,SAAiB;GAC7B,WAAW,QAAA,cAAc;GACzB,MAAM,UAAU,KAAK,qBAAqB,KAAK;EACjD,CAAC;;;;;EAMD,gBAAgB;GACd,eAAe;IACb,IAAI,QAAA,WACF,MAAM,OAAO,MAAM;GAEvB,CAAC;EACH,CAAC;;;;;EAMD,MAAM,eAAe,UAA+B;GAClD,IAAI,MAAM,YAAY,EAAE,MAAM,kBAAkB,sBAC9C;GAGF,MAAM,eAAe;GAErB,MAAM,SAAS,MAAM;GACrB,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,YAAY,KAAK,CAAC;GAC5D,OAAO,MAAM,cAAc,WAAW;EACxC;;;;;EAMA,MAAM,gBAAgB,UAA+B;GACnD,IAAI,MAAM,UAAU,IAClB;GAGF,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,KAAK,UAAU,KAAK;EACtB;;uCAIE,mBASiC,YATjC,WASiC;IAR/B,IAAG;aACC;IAAJ,KAAI;uEACU,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACzB,MAAK;MACGA,KAAAA,QAAM,EACb,WAAO,CAAA,SAAS,cAAY,CAAA,QAAA,CAAA,GAAA,SACb,aAAW,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,MAAA,IAAA,UAAA,IAAA,CAAA,CAAA,YANlB,MAAA,KAAK,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentColors.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentColors.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.includes(activeColor as (typeof colorOptions)[number]),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentColors.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.some((color) => color === activeColor),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/EnvironmentColors.vue.script.js

@@ -38,7 +38,7 @@ var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			"#FFC0CB"
 		];
 		/** Default gradient shown when no custom color is selected. */
-		const isPresetColor = computed(() => colorOptions.includes(__props.activeColor));
+		const isPresetColor = computed(() => colorOptions.some((color) => color === __props.activeColor));
 		/** Check if a custom color is being used (not in the preset list). */
 		const isCustomColor = computed(() => __props.activeColor && !isPresetColor.value && !showCustomInput.value);
 		/** Check if the given color matches the currently active color. */

package/dist/v2/features/environments/components/EnvironmentColors.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.includes(activeColor as (typeof colorOptions)[number]),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAM,mBACJ;;;;;;;EA1BF,MAAM,OAAO;EAIb,MAAM,cAAc,IAAI,EAAE;EAC1B,MAAM,sBAAsB,IAA6B,IAAI;EAC7D,MAAM,kBAAkB,IAAI,KAAK;EACjC,MAAM,eAAe,IAAI,KAAK;;;;;EAM9B,MAAM,eAAe;GACnB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;;EAOA,MAAM,gBAAgB,eACpB,aAAa,SAAS,QAAA,WAA4C,CACpE;;EAGA,MAAM,gBAAgB,eACd,QAAA,eAAe,CAAC,cAAc,SAAS,CAAC,gBAAgB,KAChE;;EAGA,MAAM,iBAAiB,UAA2B,QAAA,gBAAgB;;;;;EAMlE,MAAM,oBAAoB,eAAe;GACvC,MAAM,eAAe,YAAY,SAAS,QAAA;GAC1C,OAAO,cAAc,SAAS,YAAY,QACtC,qBAAqB,aAAa,KAClC,eAAe,iBAAiB;EACtC,CAAC;;;;;EAMD,MAAM,oBAAoB,YAAY;GACpC,gBAAgB,QAAQ,CAAC,gBAAgB;GACzC,aAAa,QAAQ;GAErB,IAAI,CAAC,gBAAgB,OACnB;GAGF,MAAM,SAAS;GACf,oBAAoB,OAAO,MAAM;EACnC;;EAGA,MAAM,uBAA6B;GACjC,aAAa,QAAQ,CAAC,aAAa;EACrC;;;;;EAMA,MAAM,eAAe,UAAwB;GAC3C,MAAM,iBAAiB,SAAS,CAAC,MAAM,WAAW,GAAG,IAAI,IAAI,UAAU;GACvE,KAAK,UAAU,cAAc;GAC7B,aAAa,QAAQ;EACvB;;;;;EAMA,MAAM,+BAAqC;GACzC,IAAI,CAAC,YAAY,OACf;GAGF,MAAM,iBAAiB,YAAY,MAAM,WAAW,GAAG,IACnD,YAAY,QACZ,IAAI,YAAY;GAEpB,YAAY,QAAQ;GACpB,YAAY,cAAc;EAC5B;;uBAGE,mBAyEM,OAAA,MAAA;KAtEK,gBAAA,SAAe,CAAK,aAAA,SAAA,UAAA,GAD7B,mBAUM,OAAA;;KARJ,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAW,CAAA;KACrC,SAAO;QAEA,QAAA,eAAA,UAAA,GADR,YAIc,MAAA,UAAA,GAAA;;KAFZ,OAAM;KACN,MAAK;KACL,MAAK;;KAKA,gBAAA,SAAmB,aAAA,SAAA,UAAA,GAD5B,mBAgCM,OAhCN,YAgCM;mBA5BJ,mBAWM,UAAA,MAAA,WAVa,eAAV,WAAM;aADf,mBAWM,OAAA;OATH,KAAK;OACN,OAAM;OACL,OAAK,eAAA,EAAA,iBAAqB,OAAM,CAAA;OAChC,UAAK,WAAE,YAAY,MAAM;UAElB,cAAc,MAAM,KAAA,UAAA,GAD5B,YAIc,MAAA,UAAA,GAAA;;OAFZ,OAAM;OACN,MAAK;OACL,MAAK;;;+BAIT,mBAA8C,MAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA;KAG3C,mBAUS,UAAA;MATP,OAAM;MACL,OAAK,eAAE,kBAAA,KAAiB;MACzB,MAAK;MACJ,SAAO;SAEA,cAAA,SAAA,UAAA,GADR,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;;;IAMH,gBAAA,SAAA,UAAA,GADR,mBAsBM,OAtBN,YAsBM;+BAnBJ,mBAAmE,QAAA,EAA7D,OAAM,qDAAoD,GAAA,MAAA,EAAA;KAChE,mBAE+B,QAAA;MAD7B,OAAM;MACL,OAAK,eAAE,kBAAA,KAAiB;;oBAC3B,mBAMoC,SAAA;eAL9B;MAAJ,KAAI;+EACgB,QAAA;MACpB,OAAM;MACL,aAAa,QAAA,eAAW;MACzB,MAAK;MACJ,SAAO;6CAJC,YAAA,KAAW,CAAA,CAAA;KAKtB,mBAOS,UAAA;MANP,OAAM;MACN,MAAK;MACJ,SAAO;SACR,YAEc,MAAA,UAAA,GAAA;MADZ,MAAK;MACL,MAAK"}
+{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.some((color) => color === activeColor),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAM,mBACJ;;;;;;;EA1BF,MAAM,OAAO;EAIb,MAAM,cAAc,IAAI,EAAE;EAC1B,MAAM,sBAAsB,IAA6B,IAAI;EAC7D,MAAM,kBAAkB,IAAI,KAAK;EACjC,MAAM,eAAe,IAAI,KAAK;;;;;EAM9B,MAAM,eAAe;GACnB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;;EAOA,MAAM,gBAAgB,eACpB,aAAa,MAAM,UAAU,UAAU,QAAA,WAAW,CACpD;;EAGA,MAAM,gBAAgB,eACd,QAAA,eAAe,CAAC,cAAc,SAAS,CAAC,gBAAgB,KAChE;;EAGA,MAAM,iBAAiB,UAA2B,QAAA,gBAAgB;;;;;EAMlE,MAAM,oBAAoB,eAAe;GACvC,MAAM,eAAe,YAAY,SAAS,QAAA;GAC1C,OAAO,cAAc,SAAS,YAAY,QACtC,qBAAqB,aAAa,KAClC,eAAe,iBAAiB;EACtC,CAAC;;;;;EAMD,MAAM,oBAAoB,YAAY;GACpC,gBAAgB,QAAQ,CAAC,gBAAgB;GACzC,aAAa,QAAQ;GAErB,IAAI,CAAC,gBAAgB,OACnB;GAGF,MAAM,SAAS;GACf,oBAAoB,OAAO,MAAM;EACnC;;EAGA,MAAM,uBAA6B;GACjC,aAAa,QAAQ,CAAC,aAAa;EACrC;;;;;EAMA,MAAM,eAAe,UAAwB;GAC3C,MAAM,iBAAiB,SAAS,CAAC,MAAM,WAAW,GAAG,IAAI,IAAI,UAAU;GACvE,KAAK,UAAU,cAAc;GAC7B,aAAa,QAAQ;EACvB;;;;;EAMA,MAAM,+BAAqC;GACzC,IAAI,CAAC,YAAY,OACf;GAGF,MAAM,iBAAiB,YAAY,MAAM,WAAW,GAAG,IACnD,YAAY,QACZ,IAAI,YAAY;GAEpB,YAAY,QAAQ;GACpB,YAAY,cAAc;EAC5B;;uBAGE,mBAyEM,OAAA,MAAA;KAtEK,gBAAA,SAAe,CAAK,aAAA,SAAA,UAAA,GAD7B,mBAUM,OAAA;;KARJ,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAW,CAAA;KACrC,SAAO;QAEA,QAAA,eAAA,UAAA,GADR,YAIc,MAAA,UAAA,GAAA;;KAFZ,OAAM;KACN,MAAK;KACL,MAAK;;KAKA,gBAAA,SAAmB,aAAA,SAAA,UAAA,GAD5B,mBAgCM,OAhCN,YAgCM;mBA5BJ,mBAWM,UAAA,MAAA,WAVa,eAAV,WAAM;aADf,mBAWM,OAAA;OATH,KAAK;OACN,OAAM;OACL,OAAK,eAAA,EAAA,iBAAqB,OAAM,CAAA;OAChC,UAAK,WAAE,YAAY,MAAM;UAElB,cAAc,MAAM,KAAA,UAAA,GAD5B,YAIc,MAAA,UAAA,GAAA;;OAFZ,OAAM;OACN,MAAK;OACL,MAAK;;;+BAIT,mBAA8C,MAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA;KAG3C,mBAUS,UAAA;MATP,OAAM;MACL,OAAK,eAAE,kBAAA,KAAiB;MACzB,MAAK;MACJ,SAAO;SAEA,cAAA,SAAA,UAAA,GADR,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;;;IAMH,gBAAA,SAAA,UAAA,GADR,mBAsBM,OAtBN,YAsBM;+BAnBJ,mBAAmE,QAAA,EAA7D,OAAM,qDAAoD,GAAA,MAAA,EAAA;KAChE,mBAE+B,QAAA;MAD7B,OAAM;MACL,OAAK,eAAE,kBAAA,KAAiB;;oBAC3B,mBAMoC,SAAA;eAL9B;MAAJ,KAAI;+EACgB,QAAA;MACpB,OAAM;MACL,aAAa,QAAA,eAAW;MACzB,MAAK;MACJ,SAAO;6CAJC,YAAA,KAAW,CAAA,CAAA;KAKtB,mBAOS,UAAA;MANP,OAAM;MACN,MAAK;MACJ,SAAO;SACR,YAEc,MAAA,UAAA,GAAA;MADZ,MAAK;MACL,MAAK"}

package/dist/v2/features/modal/Modal.vue.d.ts

@@ -3,7 +3,7 @@ import type { HttpMethod } from '@scalar/helpers/http/http-methods';
 import type { ClientPlugin } from '@scalar/oas-utils/helpers';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
-import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
 import { type UseModalSidebarReturn } from '../../../v2/features/modal/hooks/use-modal-sidebar.js';
 import type { ApiClientOptions, ApiClientOptionsRef } from '../../../v2/types/options';

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;EACN;;EAGA,MAAM,gBAAgB,IAAI,KAAK;;EAG/B,sBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;EACT,CAAC;;EAGD,iBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,IAAI;;EAG1D,MAAM,gBAAgB;GACpB,QAAA,SAAS,KAAK,0BAA0B;EAC1C;EAEA,MAAM,WAAW,oBAAoB;GACnC,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,SAAS;GAEzB,OAAO;EACT,CAAC;EAED,YACQ,QAAA,WAAW,OAChB,SAAS;GAER,SAAS,QAAQ;GAEjB,IAAI,CAAC,MACH,QAAQ;EAEZ,CACF;EAGA,sBAAsB,QAAQ,CAAC;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,qBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,KAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,KAAK,CAAC,CAAC,WAC7D;EAEA,SAAa;GACX;GACA;EACF,CAAC;;uBAIC,YA+CuB,8BAAA,EA/CA,YAAA,QAAA,WAAU,GAAA;2BAEf,CAAhB,YAAgB,MAAA,YAAA,CAAA,GAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,UAAA,GADjD,mBAmCO,QAnCP,YAmCO;KAhCL,YAEoD,MAAA,qBAAA,GAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,eAAA,GAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,wBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,KAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,CAAA;MACZ,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,KAAa,CAAA,CAAA;KAYvB,YAeoB,mBAAA;MAdA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,sBAAA,EAAyB,QAAI;MACzD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC1B,WAAW,QAAA,UAAU;MACtB,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,WAAU,GAAC,wBAAoB,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;EACN;;EAGA,MAAM,gBAAgB,IAAI,KAAK;;EAG/B,sBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;EACT,CAAC;;EAGD,iBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,IAAI;;EAG1D,MAAM,gBAAgB;GACpB,QAAA,SAAS,KAAK,0BAA0B;EAC1C;EAEA,MAAM,WAAW,oBAAoB;GACnC,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,SAAS;GAEzB,OAAO;EACT,CAAC;EAED,YACQ,QAAA,WAAW,OAChB,SAAS;GAER,SAAS,QAAQ;GAEjB,IAAI,CAAC,MACH,QAAQ;EAEZ,CACF;EAGA,sBAAsB,QAAQ,CAAC;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,qBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,KAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,KAAK,CAAC,CAAC,WAC7D;EAEA,SAAa;GACX;GACA;EACF,CAAC;;uBAIC,YA+CuB,8BAAA,EA/CA,YAAA,QAAA,WAAU,GAAA;2BAEf,CAAhB,YAAgB,MAAA,YAAA,CAAA,GAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,UAAA,GADjD,mBAmCO,QAnCP,YAmCO;KAhCL,YAEoD,MAAA,qBAAA,GAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,eAAA,GAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,wBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,KAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,CAAA;MACZ,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,KAAa,CAAA,CAAA;KAYvB,YAeoB,mBAAA;MAdA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,sBAAA,EAAyB,QAAI;MACzD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC1B,WAAW,QAAA,UAAU;MACtB,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,WAAU,GAAC,wBAAoB,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"create-api-client-modal.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"sourcesContent":["import { type ModalState, useModal } from '@scalar/components/modal'\nimport { type ClientPlugin, subscribePluginEvents } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus, createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { type App, type MaybeRefOrGetter, computed, createApp, isRef, reactive, ref, toValue, watch } from 'vue'\n\nimport {\n  type DefaultEntities,\n  type RoutePayload,\n  resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport { useModalSidebar } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport Modal, { type ModalProps } from '@/v2/features/modal/Modal.vue'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\ntype CreateApiClientOptions = {\n  /** Element to mount the client modal to. */\n  el: HTMLElement | null\n  /**\n   * Will attempt to mount the references immediately.\n   * For SSR this may need to be disabled and handled manually on the client side.\n   */\n  mountOnInitialize?: boolean\n  /** You can pass in an event bus if you have one already, or we will create one */\n  eventBus?: WorkspaceEventBus\n  /** The workspace store must be initialized and passed in. */\n  workspaceStore: WorkspaceStore\n  /** Api client plugins to include in the modal */\n  plugins?: ClientPlugin[]\n  /** Subset of the configuration options for the modal, if you want it to be reactive ensure its a ref */\n  options?: MaybeRefOrGetter<ApiClientOptions>\n}\n\nexport type ApiClientModal = {\n  app: App\n  open: (payload?: RoutePayload) => void\n  mount: (mountingEl: HTMLElement | null) => void\n  route: (payload: RoutePayload) => void\n  updateOptions: (nextOptions: ApiClientOptions, overwrite?: boolean) => void\n  modalState: ModalState\n}\n\n/**\n * Monotonic counter used to give every modal Vue app a unique `idPrefix`.\n *\n * Vue derives `useId()` values (and therefore our teleport target ids) from the app's\n * `idPrefix`. When more than one client app mounts on the same page — for example, the\n * API reference embeds this modal alongside another client instance — a shared prefix\n * makes both apps emit identical ids. A teleported popover then resolves to the first\n * matching target in the DOM, which can be a hidden app, so the popover never appears.\n * A per-app suffix keeps the ids unique across instances.\n */\nlet modalAppCount = 0\n\n/**\n * Creates the API Client Modal.\n *\n * The modal does not require a router. Instead, navigation is handled by setting\n * active entities directly through the returned `route` function.\n */\nexport const createApiClientModal = ({\n  el,\n  eventBus = createWorkspaceEventBus({\n    debug: import.meta.env.DEV,\n  }),\n  mountOnInitialize = true,\n  plugins = [],\n  workspaceStore,\n  options = {},\n}: CreateApiClientOptions): ApiClientModal => {\n  const requestBodyCompositionSelection = ref<Record<string, number>>({})\n\n  /** This is to ensure that the options are a ref if they are not already, useful for react */\n  const optionsRef = (isRef(options) ? options : ref(toValue(options))) as ApiClientOptionsRef\n\n  const defaultEntities: DefaultEntities = {\n    path: 'default',\n    method: 'default',\n    example: 'default',\n    documentSlug: workspaceStore.workspace['x-scalar-active-document'] || 'default',\n    isWebhook: false,\n  }\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  const isWebhook = computed(() => resolvedParameters.value.isWebhook ?? false)\n  /** The document from the workspace store. Modal is OpenAPI-only; AsyncAPI docs surface as null. */\n  const document = computed(() => {\n    const doc = workspaceStore.workspace.documents[documentSlug.value ?? '']\n    return isOpenApiDocument(doc) ? doc : null\n  })\n\n  /** Sidebar state and selection handling. */\n  const sidebarState = useModalSidebar({\n    workspaceStore,\n    documentSlug: documentSlug,\n    path: path,\n    method: method,\n    exampleName: exampleName,\n    isWebhook,\n    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    isWebhook,\n    method,\n    modalState,\n    path,\n    plugins,\n    requestBodyCompositionSelection,\n    sidebarState,\n    workspaceStore,\n    options: optionsRef,\n  } satisfies ModalProps)\n\n  /** Initialize plugins and subscribe to event bus events */\n  const pluginUnsubscribes: (() => void)[] = []\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onInit?.()\n\n    pluginUnsubscribes.push(subscribePluginEvents(eventBus, plugin))\n  }\n\n  /** Clean up plugin lifecycle and event bus subscriptions when the app is unmounted */\n  app.onUnmount(() => {\n    for (const unsub of pluginUnsubscribes) {\n      unsub()\n    }\n    for (const plugin of plugins) {\n      plugin.lifecycle?.onDestroy?.()\n    }\n  })\n\n  // Update the active proxy when the proxyUrl changes\n  watch(\n    () => toValue(optionsRef).proxyUrl,\n    (newProxyUrl) => workspaceStore.update('x-scalar-active-proxy', newProxyUrl),\n    { immediate: true },\n  )\n\n  // Use a unique id prefix to prevent collisions with other Vue apps on the page.\n  // The suffix keeps the prefix unique even when several client apps mount together.\n  app.config.idPrefix = `scalar-client-${modalAppCount++}`\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      // This path does not carry a composition selection, so clear any selection left over from a\n      // previously opened operation. (The event-driven open path re-establishes it from its payload.)\n      requestBodyCompositionSelection.value = {}\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n    /**\n     * Merge new options into the current modal options.\n     *\n     * @param newOptions - The new options to merge into the current modal options.\n     * @param overwrite - Whether to overwrite the current modal options with the new options. If false, the new options will be merged with the current options.\n     */\n    updateOptions: (newOptions: ApiClientOptions, overwrite = false): void => {\n      optionsRef.value = overwrite\n        ? newOptions\n        : {\n            ...optionsRef.value,\n            ...newOptions,\n          }\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqDA,IAAI,gBAAgB;;;;;;;AAQpB,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,MACF,CAAC,GACD,oBAAoB,MACpB,UAAU,CAAC,GACX,gBACA,UAAU,CAAC,QACiC;CAC5C,MAAM,kCAAkC,IAA4B,CAAC,CAAC;;CAGtE,MAAM,aAAc,MAAM,OAAO,IAAI,UAAU,IAAI,QAAQ,OAAO,CAAC;CAEnE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACtE,WAAW;CACb;CAEA,MAAM,aAAa,SAA0B,EAAE,GAAG,gBAAgB,CAAC;;CAGnE,MAAM,SAAS,YAAgC;EAC7C,OAAO,OAAO,YAAY,iBAAiB,OAAO;CACpD;;CAGA,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,UAAU,CAAC;CAC5F,MAAM,eAAe,eAAe,mBAAmB,MAAM,YAAY;CACzE,MAAM,OAAO,eAAe,mBAAmB,MAAM,IAAI;CACzD,MAAM,SAAS,eAAe,mBAAmB,MAAM,MAAM;CAC7D,MAAM,cAAc,eAAe,mBAAmB,MAAM,OAAO;CACnE,MAAM,YAAY,eAAe,mBAAmB,MAAM,aAAa,KAAK;;CAE5E,MAAM,WAAW,eAAe;EAC9B,MAAM,MAAM,eAAe,UAAU,UAAU,aAAa,SAAS;EACrE,OAAO,kBAAkB,GAAG,IAAI,MAAM;CACxC,CAAC;;CAGD,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACA;CACF,CAAC;CAED,MAAM,aAAa,SAAS;CAE5B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;CACX,CAAsB;;CAGtB,MAAM,qBAAqC,CAAC;CAC5C,KAAK,MAAM,UAAU,SAAS;EAC5B,OAAO,WAAW,SAAS;EAE3B,mBAAmB,KAAK,sBAAsB,UAAU,MAAM,CAAC;CACjE;;CAGA,IAAI,gBAAgB;EAClB,KAAK,MAAM,SAAS,oBAClB,MAAM;EAER,KAAK,MAAM,UAAU,SACnB,OAAO,WAAW,YAAY;CAElC,CAAC;CAGD,YACQ,QAAQ,UAAU,CAAC,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,WAAW,GAC3E,EAAE,WAAW,KAAK,CACpB;CAIA,IAAI,OAAO,WAAW,iBAAiB;;CAGvC,MAAM,SAAS,aAAiC,OAAa;EAC3D,IAAI,CAAC,YAAY;GACf,QAAQ,MACN,+DACA,kCACA,2EACF;GACA;EACF;EACA,IAAI,MAAM,UAAU;CACtB;CAEA,IAAI,mBACF,MAAM;CAGR,OAAO;;EAEL;;EAEA,OAAO,YAAiC;GAGtC,gCAAgC,QAAQ,CAAC;GACzC,WAAW,OAAO;GAClB,IAAI,SACF,MAAM,OAAO;EAEjB;;EAEA;;EAEA;;EAEA;;;;;;;EAOA,gBAAgB,YAA8B,YAAY,UAAgB;GACxE,WAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;GACL;EACN;CACF;AACF"}
+{"version":3,"file":"create-api-client-modal.js","names":[],"sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"sourcesContent":["import { type ModalState, useModal } from '@scalar/components/modal'\nimport { type ClientPlugin, subscribePluginEvents } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus, createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { type App, type MaybeRefOrGetter, computed, createApp, isRef, reactive, ref, toValue, watch } from 'vue'\n\nimport {\n  type DefaultEntities,\n  type RoutePayload,\n  resolveRouteParameters,\n} from '@/v2/features/modal/helpers/resolve-route-parameters'\nimport { useModalSidebar } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport Modal, { type ModalProps } from '@/v2/features/modal/Modal.vue'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\ntype CreateApiClientOptions = {\n  /** Element to mount the client modal to. */\n  el: HTMLElement | null\n  /**\n   * Will attempt to mount the references immediately.\n   * For SSR this may need to be disabled and handled manually on the client side.\n   */\n  mountOnInitialize?: boolean\n  /** You can pass in an event bus if you have one already, or we will create one */\n  eventBus?: WorkspaceEventBus\n  /** The workspace store must be initialized and passed in. */\n  workspaceStore: WorkspaceStore\n  /** Api client plugins to include in the modal */\n  plugins?: ClientPlugin[]\n  /** Subset of the configuration options for the modal, if you want it to be reactive ensure its a ref */\n  options?: MaybeRefOrGetter<ApiClientOptions>\n}\n\nexport type ApiClientModal = {\n  app: App\n  open: (payload?: RoutePayload) => void\n  mount: (mountingEl: HTMLElement | null) => void\n  route: (payload: RoutePayload) => void\n  updateOptions: (nextOptions: ApiClientOptions, overwrite?: boolean) => void\n  modalState: ModalState\n}\n\n/**\n * Monotonic counter used to give every modal Vue app a unique `idPrefix`.\n *\n * Vue derives `useId()` values (and therefore our teleport target ids) from the app's\n * `idPrefix`. When more than one client app mounts on the same page — for example, the\n * API reference embeds this modal alongside another client instance — a shared prefix\n * makes both apps emit identical ids. A teleported popover then resolves to the first\n * matching target in the DOM, which can be a hidden app, so the popover never appears.\n * A per-app suffix keeps the ids unique across instances.\n */\nlet modalAppCount = 0\n\n/**\n * Creates the API Client Modal.\n *\n * The modal does not require a router. Instead, navigation is handled by setting\n * active entities directly through the returned `route` function.\n */\nexport const createApiClientModal = ({\n  el,\n  eventBus = createWorkspaceEventBus({\n    debug: import.meta.env.DEV,\n  }),\n  mountOnInitialize = true,\n  plugins = [],\n  workspaceStore,\n  options = {},\n}: CreateApiClientOptions): ApiClientModal => {\n  const requestBodyCompositionSelection = ref<Record<string, number>>({})\n\n  /** This is to ensure that the options are a ref if they are not already, useful for react */\n  const optionsRef: ApiClientOptionsRef = isRef(options) ? options : ref(toValue(options))\n\n  const defaultEntities: DefaultEntities = {\n    path: 'default',\n    method: 'default',\n    example: 'default',\n    documentSlug: workspaceStore.workspace['x-scalar-active-document'] || 'default',\n    isWebhook: false,\n  }\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  const isWebhook = computed(() => resolvedParameters.value.isWebhook ?? false)\n  /** The document from the workspace store. Modal is OpenAPI-only; AsyncAPI docs surface as null. */\n  const document = computed(() => {\n    const doc = workspaceStore.workspace.documents[documentSlug.value ?? '']\n    return isOpenApiDocument(doc) ? doc : null\n  })\n\n  /** Sidebar state and selection handling. */\n  const sidebarState = useModalSidebar({\n    workspaceStore,\n    documentSlug: documentSlug,\n    path: path,\n    method: method,\n    exampleName: exampleName,\n    isWebhook,\n    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    isWebhook,\n    method,\n    modalState,\n    path,\n    plugins,\n    requestBodyCompositionSelection,\n    sidebarState,\n    workspaceStore,\n    options: optionsRef,\n  } satisfies ModalProps)\n\n  /** Initialize plugins and subscribe to event bus events */\n  const pluginUnsubscribes: (() => void)[] = []\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onInit?.()\n\n    pluginUnsubscribes.push(subscribePluginEvents(eventBus, plugin))\n  }\n\n  /** Clean up plugin lifecycle and event bus subscriptions when the app is unmounted */\n  app.onUnmount(() => {\n    for (const unsub of pluginUnsubscribes) {\n      unsub()\n    }\n    for (const plugin of plugins) {\n      plugin.lifecycle?.onDestroy?.()\n    }\n  })\n\n  // Update the active proxy when the proxyUrl changes\n  watch(\n    () => toValue(optionsRef).proxyUrl,\n    (newProxyUrl) => workspaceStore.update('x-scalar-active-proxy', newProxyUrl),\n    { immediate: true },\n  )\n\n  // Use a unique id prefix to prevent collisions with other Vue apps on the page.\n  // The suffix keeps the prefix unique even when several client apps mount together.\n  app.config.idPrefix = `scalar-client-${modalAppCount++}`\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      // This path does not carry a composition selection, so clear any selection left over from a\n      // previously opened operation. (The event-driven open path re-establishes it from its payload.)\n      requestBodyCompositionSelection.value = {}\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n    /**\n     * Merge new options into the current modal options.\n     *\n     * @param newOptions - The new options to merge into the current modal options.\n     * @param overwrite - Whether to overwrite the current modal options with the new options. If false, the new options will be merged with the current options.\n     */\n    updateOptions: (newOptions: ApiClientOptions, overwrite = false): void => {\n      optionsRef.value = overwrite\n        ? newOptions\n        : {\n            ...optionsRef.value,\n            ...newOptions,\n          }\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqDA,IAAI,gBAAgB;;;;;;;AAQpB,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,MACF,CAAC,GACD,oBAAoB,MACpB,UAAU,CAAC,GACX,gBACA,UAAU,CAAC,QACiC;CAC5C,MAAM,kCAAkC,IAA4B,CAAC,CAAC;;CAGtE,MAAM,aAAkC,MAAM,OAAO,IAAI,UAAU,IAAI,QAAQ,OAAO,CAAC;CAEvF,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACtE,WAAW;CACb;CAEA,MAAM,aAAa,SAA0B,EAAE,GAAG,gBAAgB,CAAC;;CAGnE,MAAM,SAAS,YAAgC;EAC7C,OAAO,OAAO,YAAY,iBAAiB,OAAO;CACpD;;CAGA,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,UAAU,CAAC;CAC5F,MAAM,eAAe,eAAe,mBAAmB,MAAM,YAAY;CACzE,MAAM,OAAO,eAAe,mBAAmB,MAAM,IAAI;CACzD,MAAM,SAAS,eAAe,mBAAmB,MAAM,MAAM;CAC7D,MAAM,cAAc,eAAe,mBAAmB,MAAM,OAAO;CACnE,MAAM,YAAY,eAAe,mBAAmB,MAAM,aAAa,KAAK;;CAE5E,MAAM,WAAW,eAAe;EAC9B,MAAM,MAAM,eAAe,UAAU,UAAU,aAAa,SAAS;EACrE,OAAO,kBAAkB,GAAG,IAAI,MAAM;CACxC,CAAC;;CAGD,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACA;CACF,CAAC;CAED,MAAM,aAAa,SAAS;CAE5B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;CACX,CAAsB;;CAGtB,MAAM,qBAAqC,CAAC;CAC5C,KAAK,MAAM,UAAU,SAAS;EAC5B,OAAO,WAAW,SAAS;EAE3B,mBAAmB,KAAK,sBAAsB,UAAU,MAAM,CAAC;CACjE;;CAGA,IAAI,gBAAgB;EAClB,KAAK,MAAM,SAAS,oBAClB,MAAM;EAER,KAAK,MAAM,UAAU,SACnB,OAAO,WAAW,YAAY;CAElC,CAAC;CAGD,YACQ,QAAQ,UAAU,CAAC,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,WAAW,GAC3E,EAAE,WAAW,KAAK,CACpB;CAIA,IAAI,OAAO,WAAW,iBAAiB;;CAGvC,MAAM,SAAS,aAAiC,OAAa;EAC3D,IAAI,CAAC,YAAY;GACf,QAAQ,MACN,+DACA,kCACA,2EACF;GACA;EACF;EACA,IAAI,MAAM,UAAU;CACtB;CAEA,IAAI,mBACF,MAAM;CAGR,OAAO;;EAEL;;EAEA,OAAO,YAAiC;GAGtC,gCAAgC,QAAQ,CAAC;GACzC,WAAW,OAAO;GAClB,IAAI,SACF,MAAM,OAAO;EAEjB;;EAEA;;EAEA;;EAEA;;;;;;;EAOA,gBAAgB,YAA8B,YAAY,UAAgB;GACxE,WAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;GACL;EACN;CACF;AACF"}

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

@@ -1,7 +1,7 @@
+import { getOperationEntries } from "@scalar/workspace-store/navigation";
 import { isOpenApiDocument } from "@scalar/workspace-store/schemas/type-guards";
 import { getResolvedPathItem } from "@scalar/workspace-store/helpers/for-each-path-item-operation";
 import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
-import { getOperationEntries } from "@scalar/workspace-store/navigation";
 //#region src/v2/features/modal/helpers/resolve-route-parameters.ts
 /** Type guard to check if an entry is an example. */
 var isExample = (entry) => entry.type === "example";

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

@@ -1,8 +1,8 @@
 import { generateLocationId } from "../../../helpers/generate-location-id.js";
 import { computed, toValue, watch } from "vue";
+import { getParentEntry } from "@scalar/workspace-store/navigation";
 import { isOpenApiDocument } from "@scalar/workspace-store/schemas/type-guards";
 import { createSidebarState, generateReverseIndex, getChildEntry } from "@scalar/sidebar";
-import { getParentEntry } from "@scalar/workspace-store/navigation";
 //#region src/v2/features/modal/hooks/use-modal-sidebar.ts
 /**
 * useSidebarState - Custom hook to manage the sidebar state and navigation logic in the Scalar API client

package/dist/v2/features/modal/modal-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-events.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/modal-events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAGvE,OAAO,EAAE,KAAK,GAAG,EAAO,MAAM,KAAK,CAAA;AAEnC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAOxF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,aAAa,EACb,+BAA+B,EAC/B,YAAY,EACZ,UAAU,EACV,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC3B,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,YAAY,EAAE,qBAAqB,CAAA;IACnC,UAAU,EAAE,UAAU,CAAA;IACtB,KAAK,EAAE,cAAc,CAAA;CACtB,QAkFA"}
+{"version":3,"file":"modal-events.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/modal-events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAGvE,OAAO,EAAE,KAAK,GAAG,EAAO,MAAM,KAAK,CAAA;AAEnC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAOxF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,aAAa,EACb,+BAA+B,EAC/B,YAAY,EACZ,UAAU,EACV,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC3B,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,YAAY,EAAE,qBAAqB,CAAA;IACnC,UAAU,EAAE,UAAU,CAAA;IACtB,KAAK,EAAE,cAAc,CAAA;CACtB,QAiGA"}

package/dist/v2/features/modal/modal-events.js

@@ -8,7 +8,16 @@ function initializeModalEvents({ eventBus, isSidebarOpen, requestBodyComposition
 	initializeWorkspaceEventHandlers({
 		eventBus,
 		store: ref(store),
-		hooks: {}
+		hooks: { "operation:create:draft-example": { onAfterExecute: ({ documentName, meta: { path, method }, exampleName }) => {
+			store.buildSidebar(documentName);
+			const entry = sidebarState.getEntryByLocation({
+				document: documentName,
+				path,
+				method,
+				example: exampleName
+			});
+			if (entry) sidebarState.handleSelectItem(entry.id);
+		} } }
 	});
 	eventBus.on("scroll-to:nav-item", ({ id }) => sidebarState.handleSelectItem(id));
 	eventBus.on("ui:toggle:sidebar", () => isSidebarOpen.value = !isSidebarOpen.value);

package/dist/v2/features/modal/modal-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-events.js","names":[],"sources":["../../../../src/v2/features/modal/modal-events.ts"],"sourcesContent":["import type { ModalState } from '@scalar/components/modal'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { type Ref, ref } from 'vue'\n\nimport type { UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeWorkspaceEventHandlers } from '@/v2/workspace-events'\n\n// Frozen so this shared fallback cannot be mutated in place, which would leak a stale selection into\n// every future open that falls back to empty. Callers only ever reassign the ref, never mutate it.\nconst EMPTY_REQUEST_BODY_COMPOSITION_SELECTION = Object.freeze({}) as Record<string, number>\n\nexport function initializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store,\n}: {\n  eventBus: WorkspaceEventBus\n  isSidebarOpen: Ref<boolean>\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  sidebarState: UseModalSidebarReturn\n  modalState: ModalState\n  store: WorkspaceStore\n}) {\n  /** Initialize workspace event handlers */\n  initializeWorkspaceEventHandlers({\n    eventBus,\n    store: ref(store),\n    hooks: {},\n  })\n\n  //------------------------------------------------------------------------------------\n  // Navigation Event Handlers\n  //------------------------------------------------------------------------------------\n  eventBus.on('scroll-to:nav-item', ({ id }) => sidebarState.handleSelectItem(id))\n\n  //------------------------------------------------------------------------------------\n  // UI Related Event Handlers\n  //------------------------------------------------------------------------------------\n  eventBus.on('ui:toggle:sidebar', () => (isSidebarOpen.value = !isSidebarOpen.value))\n  eventBus.on('ui:close:client-modal', () => modalState.hide())\n  eventBus.on('ui:open:client-modal', (payload) => {\n    // Every open re-establishes the selection (falling back to empty), so the modal no longer needs\n    // to reset it on close.\n    const nextRequestBodyCompositionSelection = (\n      payload && 'requestBodyCompositionSelection' in payload && payload.requestBodyCompositionSelection\n        ? payload.requestBodyCompositionSelection\n        : EMPTY_REQUEST_BODY_COMPOSITION_SELECTION\n    ) as Record<string, number>\n\n    // Just open the modal\n    if (!payload) {\n      requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n      modalState.show()\n      return\n    }\n\n    const previousSelectedId = sidebarState.state.selectedItem.value\n\n    // We route to the exact ID\n    if ('id' in payload && payload.id) {\n      let targetId = payload.id\n\n      // If exampleName is provided, try to find the specific example entry\n      if ('exampleName' in payload && payload.exampleName) {\n        const operationEntry = sidebarState.state.getEntryById(payload.id)\n\n        // Try to find the specific example in the operation's children\n        if (operationEntry && 'children' in operationEntry && operationEntry.children) {\n          const exampleEntry = operationEntry.children.find(\n            (child: TraversedEntry) => child.type === 'example' && child.name === payload.exampleName,\n          )\n          if (exampleEntry) {\n            targetId = exampleEntry.id\n          }\n        }\n      }\n\n      sidebarState.handleSelectItem(targetId)\n    }\n    // We must find the ID first from the entries\n    else if ('method' in payload && 'path' in payload) {\n      const activeDoc = store.workspace.activeDocument\n      sidebarState.handleSelectItem(\n        sidebarState.getEntryByLocation({\n          document: isOpenApiDocument(activeDoc) ? (activeDoc['x-scalar-navigation']?.id ?? '') : '',\n          path: payload.path,\n          method: payload.method,\n          example: payload.exampleName,\n        })?.id ?? '',\n      )\n    }\n\n    // Apply the selection after routing so the request body compares it with the selection used\n    // for this operation, rather than briefly resetting the operation that was previously open.\n    // Reopening the entry already on screen routes nowhere, so a new selection would read as a\n    // manual branch switch and discard the edited body.\n    const isReopeningVisibleEntry = modalState.open && sidebarState.state.selectedItem.value === previousSelectedId\n\n    if (!isReopeningVisibleEntry) {\n      requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n    }\n\n    modalState.show()\n  })\n}\n"],"mappings":";;;;AAYA,IAAM,2CAA2C,OAAO,OAAO,CAAC,CAAC;AAEjE,SAAgB,sBAAsB,EACpC,UACA,eACA,iCACA,cACA,YACA,SAQC;;CAED,iCAAiC;EAC/B;EACA,OAAO,IAAI,KAAK;EAChB,OAAO,CAAC;CACV,CAAC;CAKD,SAAS,GAAG,uBAAuB,EAAE,SAAS,aAAa,iBAAiB,EAAE,CAAC;CAK/E,SAAS,GAAG,2BAA4B,cAAc,QAAQ,CAAC,cAAc,KAAM;CACnF,SAAS,GAAG,+BAA+B,WAAW,KAAK,CAAC;CAC5D,SAAS,GAAG,yBAAyB,YAAY;EAG/C,MAAM,sCACJ,WAAW,qCAAqC,WAAW,QAAQ,kCAC/D,QAAQ,kCACR;EAIN,IAAI,CAAC,SAAS;GACZ,gCAAgC,QAAQ;GACxC,WAAW,KAAK;GAChB;EACF;EAEA,MAAM,qBAAqB,aAAa,MAAM,aAAa;EAG3D,IAAI,QAAQ,WAAW,QAAQ,IAAI;GACjC,IAAI,WAAW,QAAQ;GAGvB,IAAI,iBAAiB,WAAW,QAAQ,aAAa;IACnD,MAAM,iBAAiB,aAAa,MAAM,aAAa,QAAQ,EAAE;IAGjE,IAAI,kBAAkB,cAAc,kBAAkB,eAAe,UAAU;KAC7E,MAAM,eAAe,eAAe,SAAS,MAC1C,UAA0B,MAAM,SAAS,aAAa,MAAM,SAAS,QAAQ,WAChF;KACA,IAAI,cACF,WAAW,aAAa;IAE5B;GACF;GAEA,aAAa,iBAAiB,QAAQ;EACxC,OAEK,IAAI,YAAY,WAAW,UAAU,SAAS;GACjD,MAAM,YAAY,MAAM,UAAU;GAClC,aAAa,iBACX,aAAa,mBAAmB;IAC9B,UAAU,kBAAkB,SAAS,IAAK,UAAU,sBAAsB,EAAE,MAAM,KAAM;IACxF,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,SAAS,QAAQ;GACnB,CAAC,CAAC,EAAE,MAAM,EACZ;EACF;EAQA,IAAI,EAF4B,WAAW,QAAQ,aAAa,MAAM,aAAa,UAAU,qBAG3F,gCAAgC,QAAQ;EAG1C,WAAW,KAAK;CAClB,CAAC;AACH"}
+{"version":3,"file":"modal-events.js","names":[],"sources":["../../../../src/v2/features/modal/modal-events.ts"],"sourcesContent":["import type { ModalState } from '@scalar/components/modal'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { type Ref, ref } from 'vue'\n\nimport type { UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeWorkspaceEventHandlers } from '@/v2/workspace-events'\n\n// Frozen so this shared fallback cannot be mutated in place, which would leak a stale selection into\n// every future open that falls back to empty. Callers only ever reassign the ref, never mutate it.\nconst EMPTY_REQUEST_BODY_COMPOSITION_SELECTION: Record<string, number> = Object.freeze({})\n\nexport function initializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store,\n}: {\n  eventBus: WorkspaceEventBus\n  isSidebarOpen: Ref<boolean>\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  sidebarState: UseModalSidebarReturn\n  modalState: ModalState\n  store: WorkspaceStore\n}) {\n  /** Initialize workspace event handlers */\n  initializeWorkspaceEventHandlers({\n    eventBus,\n    store: ref(store),\n    hooks: {\n      'operation:create:draft-example': {\n        onAfterExecute: ({ documentName, meta: { path, method }, exampleName }): void => {\n          // The new example must be in the sidebar before its location can be selected.\n          store.buildSidebar(documentName)\n          const entry = sidebarState.getEntryByLocation({\n            document: documentName,\n            path,\n            method,\n            example: exampleName,\n          })\n          if (entry) {\n            sidebarState.handleSelectItem(entry.id)\n          }\n        },\n      },\n    },\n  })\n\n  //------------------------------------------------------------------------------------\n  // Navigation Event Handlers\n  //------------------------------------------------------------------------------------\n  eventBus.on('scroll-to:nav-item', ({ id }) => sidebarState.handleSelectItem(id))\n\n  //------------------------------------------------------------------------------------\n  // UI Related Event Handlers\n  //------------------------------------------------------------------------------------\n  eventBus.on('ui:toggle:sidebar', () => (isSidebarOpen.value = !isSidebarOpen.value))\n  eventBus.on('ui:close:client-modal', () => modalState.hide())\n  eventBus.on('ui:open:client-modal', (payload) => {\n    // Every open re-establishes the selection (falling back to empty), so the modal no longer needs\n    // to reset it on close.\n    const nextRequestBodyCompositionSelection: Record<string, number> =\n      payload && 'requestBodyCompositionSelection' in payload && payload.requestBodyCompositionSelection\n        ? payload.requestBodyCompositionSelection\n        : EMPTY_REQUEST_BODY_COMPOSITION_SELECTION\n\n    // Just open the modal\n    if (!payload) {\n      requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n      modalState.show()\n      return\n    }\n\n    const previousSelectedId = sidebarState.state.selectedItem.value\n\n    // We route to the exact ID\n    if ('id' in payload && payload.id) {\n      let targetId = payload.id\n\n      // If exampleName is provided, try to find the specific example entry\n      if ('exampleName' in payload && payload.exampleName) {\n        const operationEntry = sidebarState.state.getEntryById(payload.id)\n\n        // Try to find the specific example in the operation's children\n        if (operationEntry && 'children' in operationEntry && operationEntry.children) {\n          const exampleEntry = operationEntry.children.find(\n            (child: TraversedEntry) => child.type === 'example' && child.name === payload.exampleName,\n          )\n          if (exampleEntry) {\n            targetId = exampleEntry.id\n          }\n        }\n      }\n\n      sidebarState.handleSelectItem(targetId)\n    }\n    // We must find the ID first from the entries\n    else if ('method' in payload && 'path' in payload) {\n      const activeDoc = store.workspace.activeDocument\n      sidebarState.handleSelectItem(\n        sidebarState.getEntryByLocation({\n          document: isOpenApiDocument(activeDoc) ? (activeDoc['x-scalar-navigation']?.id ?? '') : '',\n          path: payload.path,\n          method: payload.method,\n          example: payload.exampleName,\n        })?.id ?? '',\n      )\n    }\n\n    // Apply the selection after routing so the request body compares it with the selection used\n    // for this operation, rather than briefly resetting the operation that was previously open.\n    // Reopening the entry already on screen routes nowhere, so a new selection would read as a\n    // manual branch switch and discard the edited body.\n    const isReopeningVisibleEntry = modalState.open && sidebarState.state.selectedItem.value === previousSelectedId\n\n    if (!isReopeningVisibleEntry) {\n      requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n    }\n\n    modalState.show()\n  })\n}\n"],"mappings":";;;;AAYA,IAAM,2CAAmE,OAAO,OAAO,CAAC,CAAC;AAEzF,SAAgB,sBAAsB,EACpC,UACA,eACA,iCACA,cACA,YACA,SAQC;;CAED,iCAAiC;EAC/B;EACA,OAAO,IAAI,KAAK;EAChB,OAAO,EACL,kCAAkC,EAChC,iBAAiB,EAAE,cAAc,MAAM,EAAE,MAAM,UAAU,kBAAwB;GAE/E,MAAM,aAAa,YAAY;GAC/B,MAAM,QAAQ,aAAa,mBAAmB;IAC5C,UAAU;IACV;IACA;IACA,SAAS;GACX,CAAC;GACD,IAAI,OACF,aAAa,iBAAiB,MAAM,EAAE;EAE1C,EACF,EACF;CACF,CAAC;CAKD,SAAS,GAAG,uBAAuB,EAAE,SAAS,aAAa,iBAAiB,EAAE,CAAC;CAK/E,SAAS,GAAG,2BAA4B,cAAc,QAAQ,CAAC,cAAc,KAAM;CACnF,SAAS,GAAG,+BAA+B,WAAW,KAAK,CAAC;CAC5D,SAAS,GAAG,yBAAyB,YAAY;EAG/C,MAAM,sCACJ,WAAW,qCAAqC,WAAW,QAAQ,kCAC/D,QAAQ,kCACR;EAGN,IAAI,CAAC,SAAS;GACZ,gCAAgC,QAAQ;GACxC,WAAW,KAAK;GAChB;EACF;EAEA,MAAM,qBAAqB,aAAa,MAAM,aAAa;EAG3D,IAAI,QAAQ,WAAW,QAAQ,IAAI;GACjC,IAAI,WAAW,QAAQ;GAGvB,IAAI,iBAAiB,WAAW,QAAQ,aAAa;IACnD,MAAM,iBAAiB,aAAa,MAAM,aAAa,QAAQ,EAAE;IAGjE,IAAI,kBAAkB,cAAc,kBAAkB,eAAe,UAAU;KAC7E,MAAM,eAAe,eAAe,SAAS,MAC1C,UAA0B,MAAM,SAAS,aAAa,MAAM,SAAS,QAAQ,WAChF;KACA,IAAI,cACF,WAAW,aAAa;IAE5B;GACF;GAEA,aAAa,iBAAiB,QAAQ;EACxC,OAEK,IAAI,YAAY,WAAW,UAAU,SAAS;GACjD,MAAM,YAAY,MAAM,UAAU;GAClC,aAAa,iBACX,aAAa,mBAAmB;IAC9B,UAAU,kBAAkB,SAAS,IAAK,UAAU,sBAAsB,EAAE,MAAM,KAAM;IACxF,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,SAAS,QAAQ;GACnB,CAAC,CAAC,EAAE,MAAM,EACZ;EACF;EAQA,IAAI,EAF4B,WAAW,QAAQ,aAAa,MAAM,aAAa,UAAU,qBAG3F,gCAAgC,QAAQ;EAG1C,WAAW,KAAK;CAClB,CAAC;AACH"}

package/dist/v2/features/operation/Operation.vue.d.ts

@@ -3,7 +3,7 @@ import type { ClientPlugin } from '@scalar/oas-utils/helpers';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
-import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 import { type MaybeRefOrGetter } from 'vue';
 import type { ClientLayout } from '../../../v2/types/layout';
 import type { ApiClientOptions } from '../../../v2/types/options';