@scalar/api-client 3.8.1 → 3.8.3

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,GAAE;EACnB,MAAM,gBAAgB,IAAI,cAAa;;AAGvC,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;AAG5D,QAAI,QAAA,2BAA2B,aAAa;AAC1C,UAAK,QAAQ,QAAA;AACb,mBAAc,QAAQ,YAAY;WAI/B;AACH,UAAK,QAAQ;AACb,mBAAc,QAAQ;;;IAI9B;;;;;EAMA,MAAM,qBAAqB,UAAwB;AACjD,iBAAc,QAAQ;;;EAIxB,MAAM,qBAA2B;AAE/B,OAAI,QAAA,wBACF,SAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,OACtB;IACD,iBAAiB,KAAK,MAAM,MAAM;IAClC,gBAAa,QAAA;IACd,CAAA;OAID,SAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,MAAM;IAClC,SAAS,EACP,OAAO,cAAc,OACtB;IACD,gBAAa,QAAA;IACd,CAAA;AAGH,WAAA,MAAM,MAAK;;;EAIb,MAAM,kBAAkB,eAAe;AACrC,OAAI,QAAA,wBACF,QACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;AAIjD,UAAO,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;IACrD;;uBAIC,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,MAAA,0BAAA,EAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,MAAI,IAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,MAAA,GAAsB,iBAClD,EAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,MAAA,2BAAA,EAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAE2B,6CAE3B,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,GAAE;EACnB,MAAM,gBAAgB,IAAI,cAAa;;AAGvC,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;AAG5D,QAAI,QAAA,2BAA2B,aAAa;AAC1C,UAAK,QAAQ,QAAA;AACb,mBAAc,QAAQ,YAAY;WAI/B;AACH,UAAK,QAAQ;AACb,mBAAc,QAAQ;;;IAI9B;;;;;EAMA,MAAM,qBAAqB,UAAwB;AACjD,iBAAc,QAAQ;;;EAIxB,MAAM,qBAA2B;AAE/B,OAAI,QAAA,wBACF,SAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,OACtB;IACD,iBAAiB,KAAK,MAAM,MAAM;IAClC,gBAAa,QAAA;IACd,CAAA;OAID,SAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,MAAM;IAClC,SAAS,EACP,OAAO,cAAc,OACtB;IACD,gBAAa,QAAA;IACd,CAAA;AAGH,WAAA,MAAM,MAAK;;;EAIb,MAAM,kBAAkB,eAAe;AACrC,OAAI,QAAA,wBACF,QACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;AAIjD,UAAO,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;IACrD;;uBAIC,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,MAAA,0BAAA,EAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,MAAI,IAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,MAAA,GAAsB,iBAClD,EAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,MAAA,2BAAA,EAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAE2B,6CAE3B,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ModalState } from '@scalar/components';
+import { type ModalState } from '@scalar/components/modal';
 type __VLS_Props = {
     state: ModalState;
     name: string | null;

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AAqDA,OAAO,EAA6B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/E,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AA4HF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AAuDA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAEvE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AA4HF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarModal, type ModalState } from '@scalar/components'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentDeleteModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,6 @@
 import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
-import { ScalarButton, ScalarModal } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
+import { ScalarModal } from "@scalar/components/modal";
 //#region src/v2/features/environments/components/EnvironmentDeleteModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex justify-between" };
 var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarModal, type ModalState } from '@scalar/components'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,+CAA6C,EAAC,qFAGvD,GAAA,GACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,GAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,+CAA6C,EAAC,qFAGvD,GAAA,GACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,GAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,GAAA,CAAA,EAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AA6PA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC9D,CAAC;AAqYF,QAAA,MAAM,YAAY;gCAnQiB,IAAI,GAAG,MAAM;;;;;;;;kFAuQ9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AA+PA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC9D,CAAC;AAqYF,QAAA,MAAM,YAAY;gCAnQiB,IAAI,GAAG,MAAM;;;;;;;;kFAuQ9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

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

@@ -1,7 +1,8 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
-import { ScalarButton, ScalarTeleport } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconPlus } from "@scalar/icons";
 import { POPULAR_CONTEXT_FUNCTION_KEYS } from "@scalar/workspace-store/request-example";
+import { ScalarTeleport } from "@scalar/components/teleport";
 import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
 //#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue?vue&type=script&setup=true&lang.ts

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkHA,IAAM,iBAAiB;;;;;;;;;;;EAxFvB,MAAM,OAAO;EAKb,MAAM,SAAS,IAAI,KAAI;EACvB,MAAM,cAAc,IAAwB,KAAI;EAChD,MAAM,wBAAwB,IAAI,EAAC;EAEnC,MAAM,8BAA8B;AAClC,QAAK,WAAU;AACf,UAAO,QAAQ;;;EAIjB,MAAM,sBAAsB,gBACzB,QAAA,aAAa,aAAa,EAAE,EAAE,KAAK,OAAO;GACzC,KAAK,EAAE;GACP,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;GACxD,EAAE,CACL;EAEA,MAAM,cAAc,eAClB,QAAA,qBAAqB,KAAK,UAAU;GAClC,MAAM;GACN,KAAK,KAAK;GACV,WAAW,KAAK;GACjB,EAAE,CACL;EAEA,MAAM,UAAU,eACd,oBAAoB,MACjB,QAAQ,EAAE,KAAK,YAAY,QAAQ,MAAM,UAAU,GAAE,CACrD,KAAK,EAAE,KAAK,aAAa;GACxB,MAAM;GACN;GACA,WAAW;GACZ,EAAE,CACP;EAIA,MAAM,gBAAgB,eACpB,QAAQ,MAAM,KAAK,SAAS;GAC1B,GAAG;GACH,UAAU,GAAG,IAAI,IAAI,GAAG,IAAI;GAC7B,EAAE,CACL;EAEA,MAAM,oBAAoB,eACxB,YAAY,MAAM,KAAK,SAAS;GAC9B,GAAG;GACH,UAAU,GAAG,IAAI,IAAI,GAAG,IAAI;GAC7B,EAAE,CACL;EAEA,MAAM,UAAU,eAEZ,IAAI,KAAK,cAAc,OAAO;GAC5B,MAAM,CAAC,WAAW;GAClB,WAAW;GACZ,CAAC,CACN;EAEA,MAAM,cAAc,eAEhB,IAAI,KAAK,kBAAkB,OAAO;GAChC,MAAM,CAAC,WAAW;GAClB,WAAW;GACZ,CAAC,CACN;EAEA,MAAM,qBAAqB,eAA8B;GACvD,MAAM,QAAQ,IAAI,IAAI,QAAA,qBAAqB,KAAK,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;AACjE,UAAO,8BAA8B,SAAS,QAAQ;IACpD,MAAM,OAAO,MAAM,IAAI,IAAG;AAC1B,WAAO,OACH,CACE;KACE,MAAM;KACN,KAAK,KAAK;KACV,WAAW,KAAK;KACjB,CACH,GACA,EAAC;KACN;IACF;EAID,MAAM,oBAAoB,eAA8B;AACtD,OAAI,CAAC,QAAA,MAAM,MAAM,CAEf,QAAO,CAAC,GADS,QAAQ,MAAM,MAAM,GAAE,EAClB,GAAG,mBAAmB,MAAK;GAGlD,MAAM,IAAI,QAAA,MAAM,MAAK;GACrB,MAAM,aAAa,QAAQ,MACxB,OAAO,GAAG,EAAE,OAAO,gBAAgB,CAAA,CACnC,KAAK,QAAQ;IACZ,MAAM,EAAE,MAAM,KAAK,cAAc,IAAI;AACrC,WAAO;KAAE;KAAM;KAAK;KAAU;KAC/B;GAEH,MAAM,YAAY,iBAAiB,WAAW;GAC9C,MAAM,iBACJ,YAAY,IACR,YAAY,MAAM,OAAO,GAAG,EAAE,OAAO,WAAW,CAAC,CAAC,KAAK,QAAQ;IAC7D,MAAM,EAAE,MAAM,KAAK,cAAc,IAAI;AACrC,WAAO;KAAE;KAAM;KAAK;KAAU;KAC/B,GACD,EAAC;AAEP,UAAO,CAAC,GAAG,YAAY,GAAG,eAAc;IACzC;EAED,MAAM,kBAAkB,gBAA8B;AACpD,QAAK,UAAU,YAAW;;EAG5B,MAAM,kBAAkB,cAA6B;GACnD,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,kBAAkB,MAAM;AAEvC,OAAI,WAAW,EACb;AAGF,yBAAsB,SACnB,sBAAsB,QAAQ,SAAS,UAAU;;EAGtD,MAAM,qBAAqB;AACzB,OAAI,sBAAsB,SAAS,GAAG;IACpC,MAAM,mBACJ,kBAAkB,MAAM,sBAAsB;AAChD,QAAI,iBACF,gBAAe,iBAAiB,IAAG;;;AAKzC,WAAa;GACX;GACA;GACD,CAAA;AAED,kBAAgB;AAEd,yBAAsB,QAAQ;IAC/B;EAED,MAAM,gBAAgB,eAA8B;AAClD,UAAO;IACL,OAAO,QAAA,kBAAkB,QAAQ,KAAK;IAEtC,MAAM,QAAA,kBAAkB,OAAO,KAAK,IAAI;IAC1C;IACD;AAED,iBACE,mBACM;AACJ,UAAO,QAAQ;KAEjB,EAAE,QAAQ,CAAC,YAAY,EAAE,CAC3B;;UAIU,OAAA,SAAA,WAAA,EADR,YAkDiB,MAAA,eAAA,EAAA;;IAhDf,OAAM;;2BA+CA,CA9CN,mBA8CM,OAAA;cA7CA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,cAAA,MAAa;QAEb,kBAAA,MAAkB,UAAA,WAAA,EAD1B,mBA8BK,MA9BL,YA8BK,EAAA,UAAA,KAAA,EA3BH,mBA0BW,UAAA,MAAA,WAzBe,kBAAA,QAAhB,MAAM,UAAK;yBAEnB,mBAsBK,MAAA;cAvBI,KAAK,KAAI,GAAI,KAAK;MAEzB,OAAK,eAAA,CAAC,6IAA2I,EAAA,UAC7H,UAAU,sBAAA,OAAqB,CAAA,CAAA;MAClD,UAAK,WAAE,eAAe,KAAK,IAAG;SAC/B,mBAaM,OAbN,YAaM,CAXI,KAAK,SAAI,SAAA,WAAA,EADjB,mBAKO,QAAA;;MAHL,OAAM;MACL,OAAK,eAAA,EAAA,iBAAuC,QAAA,aAAa,OAAA,CAAA;kCAG5D,mBAIO,QAJP,YAE6H,OAE7H,GAAA,gBAAO,MACP,gBAAG,KAAK,IAAG,EAAA,EAAA,CAAA,CAAA,EAEb,mBAGO,QAHP,YAGO,gBADF,KAAK,UAAS,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA;iCAKzB,YAOe,MAAA,aAAA,EAAA;;KALb,OAAM;KACN,SAAQ;KACP,SAAO;;4BACyB,CAAjC,YAAiC,MAAA,eAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,kBAEnC,GAAA,EAAA,CAAA;;mCAEA,mBAC6E,OAAA,EAA3E,OAAM,oEAAkE,EAAA,MAAA,GAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmHA,IAAM,iBAAiB;;;;;;;;;;;EAxFvB,MAAM,OAAO;EAKb,MAAM,SAAS,IAAI,KAAI;EACvB,MAAM,cAAc,IAAwB,KAAI;EAChD,MAAM,wBAAwB,IAAI,EAAC;EAEnC,MAAM,8BAA8B;AAClC,QAAK,WAAU;AACf,UAAO,QAAQ;;;EAIjB,MAAM,sBAAsB,gBACzB,QAAA,aAAa,aAAa,EAAE,EAAE,KAAK,OAAO;GACzC,KAAK,EAAE;GACP,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;GACxD,EAAE,CACL;EAEA,MAAM,cAAc,eAClB,QAAA,qBAAqB,KAAK,UAAU;GAClC,MAAM;GACN,KAAK,KAAK;GACV,WAAW,KAAK;GACjB,EAAE,CACL;EAEA,MAAM,UAAU,eACd,oBAAoB,MACjB,QAAQ,EAAE,KAAK,YAAY,QAAQ,MAAM,UAAU,GAAE,CACrD,KAAK,EAAE,KAAK,aAAa;GACxB,MAAM;GACN;GACA,WAAW;GACZ,EAAE,CACP;EAIA,MAAM,gBAAgB,eACpB,QAAQ,MAAM,KAAK,SAAS;GAC1B,GAAG;GACH,UAAU,GAAG,IAAI,IAAI,GAAG,IAAI;GAC7B,EAAE,CACL;EAEA,MAAM,oBAAoB,eACxB,YAAY,MAAM,KAAK,SAAS;GAC9B,GAAG;GACH,UAAU,GAAG,IAAI,IAAI,GAAG,IAAI;GAC7B,EAAE,CACL;EAEA,MAAM,UAAU,eAEZ,IAAI,KAAK,cAAc,OAAO;GAC5B,MAAM,CAAC,WAAW;GAClB,WAAW;GACZ,CAAC,CACN;EAEA,MAAM,cAAc,eAEhB,IAAI,KAAK,kBAAkB,OAAO;GAChC,MAAM,CAAC,WAAW;GAClB,WAAW;GACZ,CAAC,CACN;EAEA,MAAM,qBAAqB,eAA8B;GACvD,MAAM,QAAQ,IAAI,IAAI,QAAA,qBAAqB,KAAK,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;AACjE,UAAO,8BAA8B,SAAS,QAAQ;IACpD,MAAM,OAAO,MAAM,IAAI,IAAG;AAC1B,WAAO,OACH,CACE;KACE,MAAM;KACN,KAAK,KAAK;KACV,WAAW,KAAK;KACjB,CACH,GACA,EAAC;KACN;IACF;EAID,MAAM,oBAAoB,eAA8B;AACtD,OAAI,CAAC,QAAA,MAAM,MAAM,CAEf,QAAO,CAAC,GADS,QAAQ,MAAM,MAAM,GAAE,EAClB,GAAG,mBAAmB,MAAK;GAGlD,MAAM,IAAI,QAAA,MAAM,MAAK;GACrB,MAAM,aAAa,QAAQ,MACxB,OAAO,GAAG,EAAE,OAAO,gBAAgB,CAAA,CACnC,KAAK,QAAQ;IACZ,MAAM,EAAE,MAAM,KAAK,cAAc,IAAI;AACrC,WAAO;KAAE;KAAM;KAAK;KAAU;KAC/B;GAEH,MAAM,YAAY,iBAAiB,WAAW;GAC9C,MAAM,iBACJ,YAAY,IACR,YAAY,MAAM,OAAO,GAAG,EAAE,OAAO,WAAW,CAAC,CAAC,KAAK,QAAQ;IAC7D,MAAM,EAAE,MAAM,KAAK,cAAc,IAAI;AACrC,WAAO;KAAE;KAAM;KAAK;KAAU;KAC/B,GACD,EAAC;AAEP,UAAO,CAAC,GAAG,YAAY,GAAG,eAAc;IACzC;EAED,MAAM,kBAAkB,gBAA8B;AACpD,QAAK,UAAU,YAAW;;EAG5B,MAAM,kBAAkB,cAA6B;GACnD,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,kBAAkB,MAAM;AAEvC,OAAI,WAAW,EACb;AAGF,yBAAsB,SACnB,sBAAsB,QAAQ,SAAS,UAAU;;EAGtD,MAAM,qBAAqB;AACzB,OAAI,sBAAsB,SAAS,GAAG;IACpC,MAAM,mBACJ,kBAAkB,MAAM,sBAAsB;AAChD,QAAI,iBACF,gBAAe,iBAAiB,IAAG;;;AAKzC,WAAa;GACX;GACA;GACD,CAAA;AAED,kBAAgB;AAEd,yBAAsB,QAAQ;IAC/B;EAED,MAAM,gBAAgB,eAA8B;AAClD,UAAO;IACL,OAAO,QAAA,kBAAkB,QAAQ,KAAK;IAEtC,MAAM,QAAA,kBAAkB,OAAO,KAAK,IAAI;IAC1C;IACD;AAED,iBACE,mBACM;AACJ,UAAO,QAAQ;KAEjB,EAAE,QAAQ,CAAC,YAAY,EAAE,CAC3B;;UAIU,OAAA,SAAA,WAAA,EADR,YAkDiB,MAAA,eAAA,EAAA;;IAhDf,OAAM;;2BA+CA,CA9CN,mBA8CM,OAAA;cA7CA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,cAAA,MAAa;QAEb,kBAAA,MAAkB,UAAA,WAAA,EAD1B,mBA8BK,MA9BL,YA8BK,EAAA,UAAA,KAAA,EA3BH,mBA0BW,UAAA,MAAA,WAzBe,kBAAA,QAAhB,MAAM,UAAK;yBAEnB,mBAsBK,MAAA;cAvBI,KAAK,KAAI,GAAI,KAAK;MAEzB,OAAK,eAAA,CAAC,6IAA2I,EAAA,UAC7H,UAAU,sBAAA,OAAqB,CAAA,CAAA;MAClD,UAAK,WAAE,eAAe,KAAK,IAAG;SAC/B,mBAaM,OAbN,YAaM,CAXI,KAAK,SAAI,SAAA,WAAA,EADjB,mBAKO,QAAA;;MAHL,OAAM;MACL,OAAK,eAAA,EAAA,iBAAuC,QAAA,aAAa,OAAA,CAAA;kCAG5D,mBAIO,QAJP,YAE6H,OAE7H,GAAA,gBAAO,MACP,gBAAG,KAAK,IAAG,EAAA,EAAA,CAAA,CAAA,EAEb,mBAGO,QAHP,YAGO,gBADF,KAAK,UAAS,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA;iCAKzB,YAOe,MAAA,aAAA,EAAA;;KALb,OAAM;KACN,SAAQ;KACP,SAAO;;4BACyB,CAAjC,YAAiC,MAAA,eAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,kBAEnC,GAAA,EAAA,CAAA;;mCAEA,mBAC6E,OAAA,EAA3E,OAAM,oEAAkE,EAAA,MAAA,GAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default from "./EnvironmentVariablesTable.vue.script.js";
 /* empty css                                        */
 //#region src/v2/features/environments/components/EnvironmentVariablesTable.vue
-var EnvironmentVariablesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-28c8509c"]]);
+var EnvironmentVariablesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-69be2d6c"]]);
 //#endregion
 export { EnvironmentVariablesTable_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesTable.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentVariablesTable.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":""}

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

@@ -4,7 +4,7 @@ import DataTableCell_default from "../../../components/data-table/DataTableCell.
 import DataTableHeader_default from "../../../components/data-table/DataTableHeader.vue.js";
 import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
-import { ScalarButton } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconTrash } from "@scalar/icons";
 //#region src/v2/features/environments/components/EnvironmentVariablesTable.vue?vue&type=script&setup=true&lang.ts
 var EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesTable.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,UAAU;GAAC;GAAO;GAAO;GAAM;;EAGrC,MAAM,cAAc,eAKZ;;GAEN,MAAM,eAAe,QAAA,YAAY,UAAU,KAAK,OAAO;IACrD,MAAM,EAAE;IACR,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;IACxD,EAAC;GAEF,MAAM,UAAU,QAAA,YAAY,UAAU,GAAG,GAAE;GAC3C,MAAM,sBACJ,YAAY,QAAQ,SAAS,MAAM,QAAQ,UAAU;AAGvD,OAAI,CAAC,WAAW,oBACd,QAAO,CAAC,GAAG,cAAc;IAAE,MAAM;IAAI,OAAO;IAAI,CAAA;AAGlD,UAAO;IACR;;EAGD,MAAM,wBACJ,MACA,OACA,UACS;GACT,MAAM,gBAAgB,SAAS,QAAA,YAAY,UAAU;;;;;AAMrD,OAAI,CAAC,QAAQ,cACX;AAIF,OAAI,SAAS,QAAA,YAAY,UAAU,QAAQ;AACzC,YAAA,SAAS,KAAK,2CAA2C;KACvD,iBAAc,QAAA;KACd,UAAU;MAAE;MAAM;MAAO;KACzB,gBAAa,QAAA;KACd,CAAA;AACD;;AAIF,WAAA,SAAS,KAAK,2CAA2C;IACvD,iBAAc,QAAA;IACd,UAAU;KAAE;KAAM;KAAO;IACzB;IACA,gBAAa,QAAA;IACd,CAAA;;;EAIH,MAAM,wBAAwB,UAC5B,QAAA,SAAS,KAAK,2CAA2C;GACvD,iBAAc,QAAA;GACd;GACA,gBAAa,QAAA;GACd,CAAA;;uBAID,YAwDY,MAAA,kBAAA,EAAA;IAvDV,OAAM;IACL,SAAS;;2BAMK,CAJf,YAIe,MAAA,qBAAA,EAAA,EAJD,OAAM,kBAAgB,EAAA;4BACK;MAAvC,YAAuC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;MACrB,YAAwC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;;;MACtB,YAA0C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;;;;;0BAI1B,mBA4Ce,UAAA,MAAA,WA3CU,YAAA,QAAf,KAAK,UAAK;yBADpB,YA4Ce,MAAA,qBAAA,EAAA;MA1CZ,KAAK;MACN,OAAM;;6BAcU;OAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CAVN,YAUM,MAAA,kBAAA,EAAA;SATJ,cAAW;SACX,sBAAA;SACA,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,SAAS,qBAAqB,MAAM,IAAI,OAAO,MAAK;;;;OAM1F,YAWgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CATN,YASM,MAAA,kBAAA,EAAA;SARJ,cAAW;SACX,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,UAAU,qBAAqB,IAAI,MAAM,OAAO,MAAK;;;;OAM3F,YASgB,MAAA,sBAAA,EAAA,EATD,OAAM,oCAAkC,EAAA;+BAQtC,CANP,QAAQ,QAAA,YAAY,UAAU,UAAA,WAAA,EADtC,YAOe,MAAA,aAAA,EAAA;;SALb,OAAM;SACN,MAAK;SACL,SAAQ;SACP,UAAK,WAAE,qBAAqB,MAAK;;gCACE,CAApC,YAAoC,MAAA,gBAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA"}
+{"version":3,"file":"EnvironmentVariablesTable.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Environment Variable Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,UAAU;GAAC;GAAO;GAAO;GAAM;;EAGrC,MAAM,cAAc,eAKZ;;GAEN,MAAM,eAAe,QAAA,YAAY,UAAU,KAAK,OAAO;IACrD,MAAM,EAAE;IACR,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;IACxD,EAAC;GAEF,MAAM,UAAU,QAAA,YAAY,UAAU,GAAG,GAAE;GAC3C,MAAM,sBACJ,YAAY,QAAQ,SAAS,MAAM,QAAQ,UAAU;AAGvD,OAAI,CAAC,WAAW,oBACd,QAAO,CAAC,GAAG,cAAc;IAAE,MAAM;IAAI,OAAO;IAAI,CAAA;AAGlD,UAAO;IACR;;EAGD,MAAM,wBACJ,MACA,OACA,UACS;GACT,MAAM,gBAAgB,SAAS,QAAA,YAAY,UAAU;;;;;AAMrD,OAAI,CAAC,QAAQ,cACX;AAIF,OAAI,SAAS,QAAA,YAAY,UAAU,QAAQ;AACzC,YAAA,SAAS,KAAK,2CAA2C;KACvD,iBAAc,QAAA;KACd,UAAU;MAAE;MAAM;MAAO;KACzB,gBAAa,QAAA;KACd,CAAA;AACD;;AAIF,WAAA,SAAS,KAAK,2CAA2C;IACvD,iBAAc,QAAA;IACd,UAAU;KAAE;KAAM;KAAO;IACzB;IACA,gBAAa,QAAA;IACd,CAAA;;;EAIH,MAAM,wBAAwB,UAC5B,QAAA,SAAS,KAAK,2CAA2C;GACvD,iBAAc,QAAA;GACd;GACA,gBAAa,QAAA;GACd,CAAA;;uBAID,YAwDY,MAAA,kBAAA,EAAA;IAvDV,OAAM;IACL,SAAS;;2BAMK,CAJf,YAIe,MAAA,qBAAA,EAAA,EAJD,OAAM,kBAAgB,EAAA;4BACK;MAAvC,YAAuC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;MACrB,YAAwC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;;;MACtB,YAA0C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;;;;;0BAI1B,mBA4Ce,UAAA,MAAA,WA3CU,YAAA,QAAf,KAAK,UAAK;yBADpB,YA4Ce,MAAA,qBAAA,EAAA;MA1CZ,KAAK;MACN,OAAM;;6BAcU;OAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CAVN,YAUM,MAAA,kBAAA,EAAA;SATJ,cAAW;SACX,sBAAA;SACA,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,SAAS,qBAAqB,MAAM,IAAI,OAAO,MAAK;;;;OAM1F,YAWgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CATN,YASM,MAAA,kBAAA,EAAA;SARJ,cAAW;SACX,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,UAAU,qBAAqB,IAAI,MAAM,OAAO,MAAK;;;;OAM3F,YASgB,MAAA,sBAAA,EAAA,EATD,OAAM,oCAAkC,EAAA;+BAQtC,CANP,QAAQ,QAAA,YAAY,UAAU,UAAA,WAAA,EADtC,YAOe,MAAA,aAAA,EAAA;;SALb,OAAM;SACN,MAAK;SACL,SAAQ;SACP,UAAK,WAAE,qBAAqB,MAAK;;gCACE,CAApC,YAAoC,MAAA,gBAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-import { type ModalState } from '@scalar/components';
+import type { ModalState } from '@scalar/components/modal';
 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';

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA4MA,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,oBAAoB,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AACnG,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG/E,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qGAAqG;IACrG,QAAQ,EAAE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IAC7C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGA0Q3E,CAAC"}
+{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA8MA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AACnG,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG/E,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qGAAqG;IACrG,QAAQ,EAAE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IAC7C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGA0Q3E,CAAC"}

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  /** 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 ModalState, type ScalarListboxOption } from '@scalar/components'\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']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :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  /** 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']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :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  /** 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 ModalState, type ScalarListboxOption } from '@scalar/components'\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']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA8CuB,8BAAA,EA9CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAkCO,QAlCP,YAkCO;KA/BL,YAEoD,MAAA,sBAAA,EAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAcoB,mBAAA;MAbA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}
+{"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  /** 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']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA8CuB,8BAAA,EA9CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAkCO,QAlCP,YAkCO;KA/BL,YAEoD,MAAA,sBAAA,EAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAcoB,mBAAA;MAbA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-import { type ModalState } from '@scalar/components';
+import { type ModalState } from '@scalar/components/modal';
 import { type ClientPlugin } from '@scalar/oas-utils/helpers';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';

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

@@ -1 +1 @@
-{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,KAAK,YAAY,EAAyB,MAAM,2BAA2B,CAAA;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAEhG,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAA6D,MAAM,KAAK,CAAA;AAEhH,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAuB,MAAM,oBAAoB,CAAA;AAE/E,KAAK,sBAAsB,GAAG;IAC5B,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3E,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,sBAAsB,KAAG,cAgJ3B,CAAA"}
+{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,0BAA0B,CAAA;AACpE,OAAO,EAAE,KAAK,YAAY,EAAyB,MAAM,2BAA2B,CAAA;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,gCAAgC,CAAA;AAEhG,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAA6D,MAAM,KAAK,CAAA;AAEhH,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAuB,MAAM,oBAAoB,CAAA;AAE/E,KAAK,sBAAsB,GAAG;IAC5B,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,wGAAwG;IACxG,OAAO,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3E,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,wEASlC,sBAAsB,KAAG,cAgJ3B,CAAA"}

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

@@ -2,7 +2,7 @@ import { resolveRouteParameters } from "./resolve-route-parameters.js";
 import { useModalSidebar } from "../hooks/use-modal-sidebar.js";
 import Modal_default from "../Modal.vue.js";
 import { computed, createApp, isRef, reactive, ref, toValue, watch } from "vue";
-import { useModal } from "@scalar/components";
+import { useModal } from "@scalar/components/modal";
 import { subscribePluginEvents } from "@scalar/oas-utils/helpers";
 import { createWorkspaceEventBus } from "@scalar/workspace-store/events";
 import { isOpenApiDocument } from "@scalar/workspace-store/schemas/type-guards";

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'\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 * 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  }\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  /** The document from the workspace store. 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    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    method,\n    modalState,\n    path,\n    plugins,\n    requestBodyCompositionSelection,\n    sidebarState,\n    workspaceStore,\n    options: optionsRef,\n  } satisfies ModalProps)\n\n  /** Restore the workspace store when the modal is closed. */\n  const handleModalClose = () => {\n    requestBodyCompositionSelection.value = {}\n  }\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  watch(\n    () => modalState.open,\n    (open) => (open ? null : handleModalClose()),\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  app.config.idPrefix = 'scalar-client'\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n    /**\n     * 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":";;;;;;;;;;;;;;;AAiDA,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,OACD,CAAC,EACF,oBAAoB,MACpB,UAAU,EAAE,EACZ,gBACA,UAAU,EAAE,OACgC;CAC5C,MAAM,kCAAkC,IAA4B,EAAE,CAAC;;CAGvE,MAAM,aAAc,MAAM,QAAQ,GAAG,UAAU,IAAI,QAAQ,QAAQ,CAAC;CAEpE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,MAAM,aAAa,SAA0B,EAAE,GAAG,iBAAiB,CAAC;;CAGpE,MAAM,SAAS,YAAgC;AAC7C,SAAO,OAAO,YAAY,iBAAiB,QAAQ;;;CAIrD,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,WAAW,CAAC;CAC7F,MAAM,eAAe,eAAe,mBAAmB,MAAM,aAAa;CAC1E,MAAM,OAAO,eAAe,mBAAmB,MAAM,KAAK;CAC1D,MAAM,SAAS,eAAe,mBAAmB,MAAM,OAAO;CAC9D,MAAM,cAAc,eAAe,mBAAmB,MAAM,QAAQ;;CAEpE,MAAM,WAAW,eAAe;EAC9B,MAAM,MAAM,eAAe,UAAU,UAAU,aAAa,SAAS;AACrE,SAAO,kBAAkB,IAAI,GAAG,MAAM;GACtC;;CAGF,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACD,CAAC;CAEF,MAAM,aAAa,UAAU;CAE7B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;EACV,CAAsB;;CAGvB,MAAM,yBAAyB;AAC7B,kCAAgC,QAAQ,EAAE;;;CAI5C,MAAM,qBAAqC,EAAE;AAC7C,MAAK,MAAM,UAAU,SAAS;AAC5B,SAAO,WAAW,UAAU;AAE5B,qBAAmB,KAAK,sBAAsB,UAAU,OAAO,CAAC;;;AAIlE,KAAI,gBAAgB;AAClB,OAAK,MAAM,SAAS,mBAClB,QAAO;AAET,OAAK,MAAM,UAAU,QACnB,QAAO,WAAW,aAAa;GAEjC;AAEF,aACQ,WAAW,OAChB,SAAU,OAAO,OAAO,kBAAkB,CAC5C;AAGD,aACQ,QAAQ,WAAW,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,YAAY,EAC5E,EAAE,WAAW,MAAM,CACpB;AAGD,KAAI,OAAO,WAAW;;CAGtB,MAAM,SAAS,aAAiC,OAAa;AAC3D,MAAI,CAAC,YAAY;AACf,WAAQ,MACN,+DACA,kCACA,4EACD;AACD;;AAEF,MAAI,MAAM,WAAW;;AAGvB,KAAI,kBACF,QAAO;AAGT,QAAO;EAEL;EAEA,OAAO,YAAiC;AACtC,cAAW,OAAO;AAClB,OAAI,QACF,OAAM,QAAQ;;EAIlB;EAEA;EAEA;EAOA,gBAAgB,YAA8B,YAAY,UAAgB;AACxE,cAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;IACJ;;EAER"}
+{"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 * 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  }\n\n  const parameters = reactive<DefaultEntities>({ ...defaultEntities })\n\n  /** Navigate to the specified path, method, and example. */\n  const route = (payload: RoutePayload): void => {\n    Object.assign(parameters, defaultEntities, payload)\n  }\n\n  /** Resolved parameters from the workspace store. */\n  const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters))\n  const documentSlug = computed(() => resolvedParameters.value.documentSlug)\n  const path = computed(() => resolvedParameters.value.path)\n  const method = computed(() => resolvedParameters.value.method)\n  const exampleName = computed(() => resolvedParameters.value.example)\n  /** The document from the workspace store. 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    route,\n  })\n\n  const modalState = useModal()\n\n  const app = createApp(Modal, {\n    document,\n    eventBus,\n    exampleName,\n    method,\n    modalState,\n    path,\n    plugins,\n    requestBodyCompositionSelection,\n    sidebarState,\n    workspaceStore,\n    options: optionsRef,\n  } satisfies ModalProps)\n\n  /** Restore the workspace store when the modal is closed. */\n  const handleModalClose = () => {\n    requestBodyCompositionSelection.value = {}\n  }\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  watch(\n    () => modalState.open,\n    (open) => (open ? null : handleModalClose()),\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  app.config.idPrefix = 'scalar-client'\n\n  /** Mount the modal to a given element. */\n  const mount = (mountingEl: HTMLElement | null = el): void => {\n    if (!mountingEl) {\n      console.error(\n        '[@scalar/api-client] Could not create the API client Modal.',\n        'Invalid HTML element provided.',\n        'Read more: https://github.com/scalar/scalar/tree/main/packages/api-client',\n      )\n      return\n    }\n    app.mount(mountingEl)\n  }\n\n  if (mountOnInitialize) {\n    mount()\n  }\n\n  return {\n    /** The Vue app instance for the modal. Use with caution. */\n    app,\n    /** Open the modal and optionally navigate to a specific route. */\n    open: (payload?: RoutePayload): void => {\n      modalState.open = true\n      if (payload) {\n        route(payload)\n      }\n    },\n    /** Mount the modal to a given element. */\n    mount,\n    /** Navigate to the specified path, method, and example. */\n    route,\n    /** Controls the visibility of the modal. */\n    modalState,\n    /**\n     * 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":";;;;;;;;;;;;;;;AAiDA,IAAa,wBAAwB,EACnC,IACA,WAAW,wBAAwB,EACjC,OAAA,OACD,CAAC,EACF,oBAAoB,MACpB,UAAU,EAAE,EACZ,gBACA,UAAU,EAAE,OACgC;CAC5C,MAAM,kCAAkC,IAA4B,EAAE,CAAC;;CAGvE,MAAM,aAAc,MAAM,QAAQ,GAAG,UAAU,IAAI,QAAQ,QAAQ,CAAC;CAEpE,MAAM,kBAAmC;EACvC,MAAM;EACN,QAAQ;EACR,SAAS;EACT,cAAc,eAAe,UAAU,+BAA+B;EACvE;CAED,MAAM,aAAa,SAA0B,EAAE,GAAG,iBAAiB,CAAC;;CAGpE,MAAM,SAAS,YAAgC;AAC7C,SAAO,OAAO,YAAY,iBAAiB,QAAQ;;;CAIrD,MAAM,qBAAqB,eAAe,uBAAuB,gBAAgB,WAAW,CAAC;CAC7F,MAAM,eAAe,eAAe,mBAAmB,MAAM,aAAa;CAC1E,MAAM,OAAO,eAAe,mBAAmB,MAAM,KAAK;CAC1D,MAAM,SAAS,eAAe,mBAAmB,MAAM,OAAO;CAC9D,MAAM,cAAc,eAAe,mBAAmB,MAAM,QAAQ;;CAEpE,MAAM,WAAW,eAAe;EAC9B,MAAM,MAAM,eAAe,UAAU,UAAU,aAAa,SAAS;AACrE,SAAO,kBAAkB,IAAI,GAAG,MAAM;GACtC;;CAGF,MAAM,eAAe,gBAAgB;EACnC;EACc;EACR;EACE;EACK;EACb;EACD,CAAC;CAEF,MAAM,aAAa,UAAU;CAE7B,MAAM,MAAM,UAAU,eAAO;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;EACV,CAAsB;;CAGvB,MAAM,yBAAyB;AAC7B,kCAAgC,QAAQ,EAAE;;;CAI5C,MAAM,qBAAqC,EAAE;AAC7C,MAAK,MAAM,UAAU,SAAS;AAC5B,SAAO,WAAW,UAAU;AAE5B,qBAAmB,KAAK,sBAAsB,UAAU,OAAO,CAAC;;;AAIlE,KAAI,gBAAgB;AAClB,OAAK,MAAM,SAAS,mBAClB,QAAO;AAET,OAAK,MAAM,UAAU,QACnB,QAAO,WAAW,aAAa;GAEjC;AAEF,aACQ,WAAW,OAChB,SAAU,OAAO,OAAO,kBAAkB,CAC5C;AAGD,aACQ,QAAQ,WAAW,CAAC,WACzB,gBAAgB,eAAe,OAAO,yBAAyB,YAAY,EAC5E,EAAE,WAAW,MAAM,CACpB;AAGD,KAAI,OAAO,WAAW;;CAGtB,MAAM,SAAS,aAAiC,OAAa;AAC3D,MAAI,CAAC,YAAY;AACf,WAAQ,MACN,+DACA,kCACA,4EACD;AACD;;AAEF,MAAI,MAAM,WAAW;;AAGvB,KAAI,kBACF,QAAO;AAGT,QAAO;EAEL;EAEA,OAAO,YAAiC;AACtC,cAAW,OAAO;AAClB,OAAI,QACF,OAAM,QAAQ;;EAIlB;EAEA;EAEA;EAOA,gBAAgB,YAA8B,YAAY,UAAgB;AACxE,cAAW,QAAQ,YACf,aACA;IACE,GAAG,WAAW;IACd,GAAG;IACJ;;EAER"}

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

@@ -1,4 +1,4 @@
-import type { ModalState } from '@scalar/components';
+import type { ModalState } from '@scalar/components/modal';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 import { type Ref } from 'vue';

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,oBAAoB,CAAA;AACpD,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;AAKxF,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,QAqEA"}
+{"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;AAKxF,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,QAqEA"}

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'\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\nconst EMPTY_REQUEST_BODY_COMPOSITION_SELECTION = {} 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    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    requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n\n    // Just open the modal\n    if (!payload) {\n      modalState.show()\n      return\n    }\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    modalState.show()\n  })\n}\n"],"mappings":";;;;AAUA,IAAM,2CAA2C,EAAE;AAEnD,SAAgB,sBAAsB,EACpC,UACA,eACA,iCACA,cACA,YACA,SAQC;;AAED,kCAAiC;EAC/B;EACA,OAAO,IAAI,MAAM;EACjB,OAAO,EAAE;EACV,CAAC;AAKF,UAAS,GAAG,uBAAuB,EAAE,SAAS,aAAa,iBAAiB,GAAG,CAAC;AAKhF,UAAS,GAAG,2BAA4B,cAAc,QAAQ,CAAC,cAAc,MAAO;AACpF,UAAS,GAAG,+BAA+B,WAAW,MAAM,CAAC;AAC7D,UAAS,GAAG,yBAAyB,YAAY;AAO/C,kCAAgC,QAL9B,WAAW,qCAAqC,WAAW,QAAQ,kCAC/D,QAAQ,kCACR;AAMN,MAAI,CAAC,SAAS;AACZ,cAAW,MAAM;AACjB;;AAIF,MAAI,QAAQ,WAAW,QAAQ,IAAI;GACjC,IAAI,WAAW,QAAQ;AAGvB,OAAI,iBAAiB,WAAW,QAAQ,aAAa;IACnD,MAAM,iBAAiB,aAAa,MAAM,aAAa,QAAQ,GAAG;AAGlE,QAAI,kBAAkB,cAAc,kBAAkB,eAAe,UAAU;KAC7E,MAAM,eAAe,eAAe,SAAS,MAC1C,UAA0B,MAAM,SAAS,aAAa,MAAM,SAAS,QAAQ,YAC/E;AACD,SAAI,aACF,YAAW,aAAa;;;AAK9B,gBAAa,iBAAiB,SAAS;aAGhC,YAAY,WAAW,UAAU,SAAS;GACjD,MAAM,YAAY,MAAM,UAAU;AAClC,gBAAa,iBACX,aAAa,mBAAmB;IAC9B,UAAU,kBAAkB,UAAU,GAAI,UAAU,wBAAwB,MAAM,KAAM;IACxF,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,SAAS,QAAQ;IAClB,CAAC,EAAE,MAAM,GACX;;AAGH,aAAW,MAAM;GACjB"}
+{"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\nconst EMPTY_REQUEST_BODY_COMPOSITION_SELECTION = {} 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    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    requestBodyCompositionSelection.value = nextRequestBodyCompositionSelection\n\n    // Just open the modal\n    if (!payload) {\n      modalState.show()\n      return\n    }\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    modalState.show()\n  })\n}\n"],"mappings":";;;;AAUA,IAAM,2CAA2C,EAAE;AAEnD,SAAgB,sBAAsB,EACpC,UACA,eACA,iCACA,cACA,YACA,SAQC;;AAED,kCAAiC;EAC/B;EACA,OAAO,IAAI,MAAM;EACjB,OAAO,EAAE;EACV,CAAC;AAKF,UAAS,GAAG,uBAAuB,EAAE,SAAS,aAAa,iBAAiB,GAAG,CAAC;AAKhF,UAAS,GAAG,2BAA4B,cAAc,QAAQ,CAAC,cAAc,MAAO;AACpF,UAAS,GAAG,+BAA+B,WAAW,MAAM,CAAC;AAC7D,UAAS,GAAG,yBAAyB,YAAY;AAO/C,kCAAgC,QAL9B,WAAW,qCAAqC,WAAW,QAAQ,kCAC/D,QAAQ,kCACR;AAMN,MAAI,CAAC,SAAS;AACZ,cAAW,MAAM;AACjB;;AAIF,MAAI,QAAQ,WAAW,QAAQ,IAAI;GACjC,IAAI,WAAW,QAAQ;AAGvB,OAAI,iBAAiB,WAAW,QAAQ,aAAa;IACnD,MAAM,iBAAiB,aAAa,MAAM,aAAa,QAAQ,GAAG;AAGlE,QAAI,kBAAkB,cAAc,kBAAkB,eAAe,UAAU;KAC7E,MAAM,eAAe,eAAe,SAAS,MAC1C,UAA0B,MAAM,SAAS,aAAa,MAAM,SAAS,QAAQ,YAC/E;AACD,SAAI,aACF,YAAW,aAAa;;;AAK9B,gBAAa,iBAAiB,SAAS;aAGhC,YAAY,WAAW,UAAU,SAAS;GACjD,MAAM,YAAY,MAAM,UAAU;AAClC,gBAAa,iBACX,aAAa,mBAAmB;IAC9B,UAAU,kBAAkB,UAAU,GAAI,UAAU,wBAAwB,MAAM,KAAM;IACxF,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,SAAS,QAAQ;IAClB,CAAC,EAAE,MAAM,GACX;;AAGH,aAAW,MAAM;GACjB"}

package/dist/v2/features/search/components/DocumentSearchModal.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ModalState } from '@scalar/components';
+import { type ModalState } from '@scalar/components/modal';
 import type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
 type __VLS_Props = {
     /** Controls the visibility of the search modal. */

package/dist/v2/features/search/components/DocumentSearchModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentSearchModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/search/components/DocumentSearchModal.vue"],"names":[],"mappings":"AA4JA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAQnG,KAAK,WAAW,GAAG;IACjB,mDAAmD;IACnD,UAAU,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAA;CACtC,CAAC;AAgQF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DocumentSearchModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/search/components/DocumentSearchModal.vue"],"names":[],"mappings":"AAyJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAQnG,KAAK,WAAW,GAAG;IACjB,mDAAmD;IACnD,UAAU,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAA;CACtC,CAAC;AAgQF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/search/components/DocumentSearchModal.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import DocumentSearchModal_vue_vue_type_script_setup_true_lang_default from "./DocumentSearchModal.vue.script.js";
 /* empty css                                  */
 //#region src/v2/features/search/components/DocumentSearchModal.vue
-var DocumentSearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DocumentSearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a00657cc"]]);
+var DocumentSearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DocumentSearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d1af4404"]]);
 //#endregion
 export { DocumentSearchModal_default as default };
 

package/dist/v2/features/search/components/DocumentSearchModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentSearchModal.vue.js","names":[],"sources":["../../../../../src/v2/features/search/components/DocumentSearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarModal,\n  ScalarSearchInput,\n  ScalarSearchResultList,\n  type ModalState,\n} from '@scalar/components'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useDocumentSearch } from '@/v2/features/search/hooks/use-document-search'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  /** Controls the visibility of the search modal. */\n  modalState: ModalState\n  /** The document whose entries should be searched. */\n  document: OpenApiDocument | undefined\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user picks a result, passing the navigation id. */\n  (e: 'select', id: string): void\n}>()\n\n/** Base id for the search form. */\nconst id = nanoid()\nconst listboxId = `${id}-search-result`\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useDocumentSearch(() => props.document)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/**\n * Reset the query every time the modal is opened so users always start from a\n * clean state. Matches the reference search modal behaviour.\n */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n      selectedIndex.value = undefined\n    }\n  },\n)\n\n/** Keyboard navigation, wrapping around the ends of the result list. */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n  if (length === 0) {\n    return\n  }\n\n  if (typeof selectedIndex.value === 'number') {\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n    return\n  }\n\n  selectedIndex.value = offset === -1 ? length - 1 : 0\n}\n\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  emit('select', result.item.id)\n}\n\n/**\n * aria-activedescendant for the combobox. Each result item must render the\n * matching id for assistive tech to announce the selection correctly.\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n\n<template>\n  <ScalarModal\n    aria-label=\"Document Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Document Search Results\"\n      class=\"custom-scroll px-1 pb-1\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"DocumentSearchModal.vue.js","names":[],"sources":["../../../../../src/v2/features/search/components/DocumentSearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarSearchResultList } from '@scalar/components/search-results'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useDocumentSearch } from '@/v2/features/search/hooks/use-document-search'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  /** Controls the visibility of the search modal. */\n  modalState: ModalState\n  /** The document whose entries should be searched. */\n  document: OpenApiDocument | undefined\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user picks a result, passing the navigation id. */\n  (e: 'select', id: string): void\n}>()\n\n/** Base id for the search form. */\nconst id = nanoid()\nconst listboxId = `${id}-search-result`\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useDocumentSearch(() => props.document)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/**\n * Reset the query every time the modal is opened so users always start from a\n * clean state. Matches the reference search modal behaviour.\n */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n      selectedIndex.value = undefined\n    }\n  },\n)\n\n/** Keyboard navigation, wrapping around the ends of the result list. */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n  if (length === 0) {\n    return\n  }\n\n  if (typeof selectedIndex.value === 'number') {\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n    return\n  }\n\n  selectedIndex.value = offset === -1 ? length - 1 : 0\n}\n\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  emit('select', result.item.id)\n}\n\n/**\n * aria-activedescendant for the combobox. Each result item must render the\n * matching id for assistive tech to announce the selection correctly.\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n\n<template>\n  <ScalarModal\n    aria-label=\"Document Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Document Search Results\"\n      class=\"custom-scroll px-1 pb-1\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}