@scalar/api-client 2.38.3 → 2.38.4

package/dist/{Server-BS4zjUdO.js.map → Server-CEKGIEfE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Server-BS4zjUdO.js","names":[],"sources":["../src/components/Server/ServerDropdownItem.vue","../src/components/Server/ServerDropdownItem.vue","../src/components/Server/ServerDropdown.vue","../src/components/Server/ServerDropdown.vue","../src/components/Server/ServerSelector.vue","../src/components/Server/ServerSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\nimport type { ServerVariables } from '@/components/Server/types'\nimport { useWorkspace } from '@/store/store'\n\nconst props = defineProps<{\n  collection: Collection\n  operation: Operation | undefined\n  server: Server | undefined\n  serverOption: {\n    id: Server['uid']\n    label: string\n  }\n  type: 'collection' | 'request'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:variable', key: string, value: string): void\n}>()\n\nconst formId = useId()\nconst { collectionMutators, requestMutators, servers } = useWorkspace()\n\n/** Update the currently selected server on the collection or request */\nconst updateSelectedServer = (serverUid: Server['uid'], event?: Event) => {\n  if (hasVariables(serverUid)) {\n    event?.stopPropagation()\n  }\n\n  // Handle selected server deselection\n  if (isSelectedServer.value) {\n    // Clear selected server if selected\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    if (props.type === 'collection') {\n      collectionMutators.edit(\n        props.collection.uid,\n        'selectedServerUid',\n        undefined,\n      )\n\n      emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n        value: undefined,\n        options: { disableOldStoreUpdate: true },\n      })\n    } else if (props.type === 'request' && props.operation) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    return\n  }\n\n  // Set selected server on Collection\n  if (props.type === 'collection' && props.collection) {\n    // Clear the selected server on the request so that the collection can be updated\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    collectionMutators.edit(\n      props.collection.uid,\n      'selectedServerUid',\n      serverUid,\n    )\n\n    emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n      value: servers[serverUid]?.url,\n      options: { disableOldStoreUpdate: true },\n    })\n  }\n  // Set on the operation\n  else if (props.type === 'request' && props.operation) {\n    requestMutators.edit(props.operation.uid, 'selectedServerUid', serverUid)\n  }\n}\n\n/** Set server checkbox in the dropdown */\nconst isSelectedServer = computed(() => {\n  if (props.type === 'collection') {\n    // Check selected collection unless operation level server is selected\n    return (\n      props.collection.selectedServerUid === props.serverOption.id &&\n      !props.operation?.selectedServerUid\n    )\n  }\n\n  if (props.type === 'request' && props.operation) {\n    return props.operation.selectedServerUid === props.serverOption.id\n  }\n\n  return false\n})\n\nconst hasVariables = (serverUid: string) => {\n  if (!serverUid) {\n    return false\n  }\n\n  const server = servers[serverUid]\n\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isExpanded = computed(\n  () => isSelectedServer.value && hasVariables(props.server?.uid ?? ''),\n)\n\nconst updateServerVariable = (key: string, value: string) => {\n  emit('update:variable', key, value)\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <div\n    ref=\"wrapper-ref\"\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"(e) => updateSelectedServer(serverOption.id, e)\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables as ServerVariables\"\n        @update:variable=\"updateServerVariable\" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\nimport type { ServerVariables } from '@/components/Server/types'\nimport { useWorkspace } from '@/store/store'\n\nconst props = defineProps<{\n  collection: Collection\n  operation: Operation | undefined\n  server: Server | undefined\n  serverOption: {\n    id: Server['uid']\n    label: string\n  }\n  type: 'collection' | 'request'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:variable', key: string, value: string): void\n}>()\n\nconst formId = useId()\nconst { collectionMutators, requestMutators, servers } = useWorkspace()\n\n/** Update the currently selected server on the collection or request */\nconst updateSelectedServer = (serverUid: Server['uid'], event?: Event) => {\n  if (hasVariables(serverUid)) {\n    event?.stopPropagation()\n  }\n\n  // Handle selected server deselection\n  if (isSelectedServer.value) {\n    // Clear selected server if selected\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    if (props.type === 'collection') {\n      collectionMutators.edit(\n        props.collection.uid,\n        'selectedServerUid',\n        undefined,\n      )\n\n      emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n        value: undefined,\n        options: { disableOldStoreUpdate: true },\n      })\n    } else if (props.type === 'request' && props.operation) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    return\n  }\n\n  // Set selected server on Collection\n  if (props.type === 'collection' && props.collection) {\n    // Clear the selected server on the request so that the collection can be updated\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    collectionMutators.edit(\n      props.collection.uid,\n      'selectedServerUid',\n      serverUid,\n    )\n\n    emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n      value: servers[serverUid]?.url,\n      options: { disableOldStoreUpdate: true },\n    })\n  }\n  // Set on the operation\n  else if (props.type === 'request' && props.operation) {\n    requestMutators.edit(props.operation.uid, 'selectedServerUid', serverUid)\n  }\n}\n\n/** Set server checkbox in the dropdown */\nconst isSelectedServer = computed(() => {\n  if (props.type === 'collection') {\n    // Check selected collection unless operation level server is selected\n    return (\n      props.collection.selectedServerUid === props.serverOption.id &&\n      !props.operation?.selectedServerUid\n    )\n  }\n\n  if (props.type === 'request' && props.operation) {\n    return props.operation.selectedServerUid === props.serverOption.id\n  }\n\n  return false\n})\n\nconst hasVariables = (serverUid: string) => {\n  if (!serverUid) {\n    return false\n  }\n\n  const server = servers[serverUid]\n\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isExpanded = computed(\n  () => isSelectedServer.value && hasVariables(props.server?.uid ?? ''),\n)\n\nconst updateServerVariable = (key: string, value: string) => {\n  emit('update:variable', key, value)\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <div\n    ref=\"wrapper-ref\"\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"(e) => updateSelectedServer(serverOption.id, e)\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables as ServerVariables\"\n        @update:variable=\"updateServerVariable\" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdownDivider,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n  ScalarPopover,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useWorkspace } from '@/store/store'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, collection, operation, server } = defineProps<{\n  collection: Collection\n  operation?: Operation\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { layout } = useLayout()\nconst { servers, collectionMutators, events, serverMutators } = useWorkspace()\n\nconst requestServerOptions = computed(() =>\n  operation?.servers?.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst collectionServerOptions = computed(() =>\n  // Filters out servers already present in the request\n  collection?.servers\n    ?.filter((serverUid) => !operation?.servers?.includes(serverUid))\n    .map((serverUid) => ({\n      id: serverUid,\n      label: servers[serverUid]?.url ?? 'Unknown server',\n    })),\n)\n\n/** If we have both request and collection servers we show the labels */\nconst showDropdownLabels = computed(\n  () =>\n    requestServerOptions.value?.length && collectionServerOptions.value?.length,\n)\n\n// Ensure we always have a selected server\nwatch([() => collection, () => operation], ([newCollection, newOperation]) => {\n  if (\n    !newCollection ||\n    newCollection.selectedServerUid ||\n    newOperation?.selectedServerUid\n  ) {\n    return\n  }\n\n  const firstServer = collection.servers?.[0]\n\n  if (firstServer) {\n    collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n  }\n})\n\n/** Add server */\nconst handleAddServer = () =>\n  events.commandPalette.emit({\n    commandName: 'Add Server',\n  })\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n\nconst updateServerVariable = (key: string, value: string) => {\n  if (!server) {\n    return\n  }\n\n  const variables = server.variables || {}\n  variables[key] = { ...variables[key], default: value }\n\n  serverMutators.edit(server.uid, 'variables', variables)\n\n  // Emit event to keep the new store in sync\n  emitCustomEvent(\n    wrapper.value?.$el,\n    'scalar-update-selected-server-variables',\n    { key, value },\n  )\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <ScalarPopover\n    ref=\"wrapper-ref\"\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template\n        v-if=\"operation?.selectedServerUid || collection.selectedServerUid\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"xs\" />\n      </template>\n    </ScalarButton>\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"serverOption in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:variable=\"updateServerVariable\" />\n        <template v-if=\"showDropdownLabels\">\n          <ScalarDropdownDivider />\n          <div class=\"text-xxs text-c-2 px-2.5 py-1\">Collection</div>\n        </template>\n        <!-- Collection -->\n        <ServerDropdownItem\n          v-for=\"serverOption in collectionServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"collection\"\n          @update:variable=\"updateServerVariable\" />\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"handleAddServer\">\n            <div class=\"flex h-4 w-4 items-center justify-center\">\n              <ScalarIcon\n                icon=\"Add\"\n                size=\"sm\" />\n            </div>\n            <span>Add Server</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop>\n      <ScalarFloatingBackdrop\n        class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdownDivider,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n  ScalarPopover,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useWorkspace } from '@/store/store'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, collection, operation, server } = defineProps<{\n  collection: Collection\n  operation?: Operation\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { layout } = useLayout()\nconst { servers, collectionMutators, events, serverMutators } = useWorkspace()\n\nconst requestServerOptions = computed(() =>\n  operation?.servers?.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst collectionServerOptions = computed(() =>\n  // Filters out servers already present in the request\n  collection?.servers\n    ?.filter((serverUid) => !operation?.servers?.includes(serverUid))\n    .map((serverUid) => ({\n      id: serverUid,\n      label: servers[serverUid]?.url ?? 'Unknown server',\n    })),\n)\n\n/** If we have both request and collection servers we show the labels */\nconst showDropdownLabels = computed(\n  () =>\n    requestServerOptions.value?.length && collectionServerOptions.value?.length,\n)\n\n// Ensure we always have a selected server\nwatch([() => collection, () => operation], ([newCollection, newOperation]) => {\n  if (\n    !newCollection ||\n    newCollection.selectedServerUid ||\n    newOperation?.selectedServerUid\n  ) {\n    return\n  }\n\n  const firstServer = collection.servers?.[0]\n\n  if (firstServer) {\n    collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n  }\n})\n\n/** Add server */\nconst handleAddServer = () =>\n  events.commandPalette.emit({\n    commandName: 'Add Server',\n  })\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n\nconst updateServerVariable = (key: string, value: string) => {\n  if (!server) {\n    return\n  }\n\n  const variables = server.variables || {}\n  variables[key] = { ...variables[key], default: value }\n\n  serverMutators.edit(server.uid, 'variables', variables)\n\n  // Emit event to keep the new store in sync\n  emitCustomEvent(\n    wrapper.value?.$el,\n    'scalar-update-selected-server-variables',\n    { key, value },\n  )\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <ScalarPopover\n    ref=\"wrapper-ref\"\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template\n        v-if=\"operation?.selectedServerUid || collection.selectedServerUid\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"xs\" />\n      </template>\n    </ScalarButton>\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"serverOption in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:variable=\"updateServerVariable\" />\n        <template v-if=\"showDropdownLabels\">\n          <ScalarDropdownDivider />\n          <div class=\"text-xxs text-c-2 px-2.5 py-1\">Collection</div>\n        </template>\n        <!-- Collection -->\n        <ServerDropdownItem\n          v-for=\"serverOption in collectionServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"collection\"\n          @update:variable=\"updateServerVariable\" />\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"handleAddServer\">\n            <div class=\"flex h-4 w-4 items-center justify-center\">\n              <ScalarIcon\n                icon=\"Add\"\n                size=\"sm\" />\n            </div>\n            <span>Add Server</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop>\n      <ScalarFloatingBackdrop\n        class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { Collection, Server } from '@scalar/oas-utils/entities/spec'\nimport { computed, watch } from 'vue'\n\nimport { useWorkspace } from '@/store/store'\n\ntype ServerOption = {\n  id: Server['uid']\n  label: string\n}\n\nconst { target, collection, server } = defineProps<{\n  /** The collection */\n  collection: Collection\n  /** The selected server */\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateServer', server: string): void\n}>()\n\nconst { servers, collectionMutators } = useWorkspace()\n\nconst serverOptions = computed<ServerOption[]>(() =>\n  collection?.servers.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst selectedServer = computed<ServerOption | undefined>({\n  get: () =>\n    server\n      ? serverOptions.value.find((option) => option.id === server.uid)\n      : undefined,\n  set: (option) => {\n    if (!option) {\n      return\n    }\n    collectionMutators.edit(\n      collection.uid,\n      'selectedServerUid',\n      option.id as Server['uid'],\n    )\n    const serverUrl = servers[option.id]?.url\n    if (serverUrl) {\n      emit('updateServer', serverUrl)\n    }\n  },\n})\n\n// Ensure we always have a selected server\nwatch(\n  () => collection,\n  (newCollection) => {\n    if (!newCollection || newCollection.selectedServerUid) {\n      return\n    }\n\n    const firstServer = collection.servers?.[0]\n\n    if (firstServer) {\n      collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n      if (servers[firstServer]?.url) {\n        emit('updateServer', servers[firstServer].url)\n      }\n    }\n  },\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    v-model=\"selectedServer\"\n    class=\"group\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">Server:</span>\n      <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap\">\n    <span class=\"sr-only\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { Collection, Server } from '@scalar/oas-utils/entities/spec'\nimport { computed, watch } from 'vue'\n\nimport { useWorkspace } from '@/store/store'\n\ntype ServerOption = {\n  id: Server['uid']\n  label: string\n}\n\nconst { target, collection, server } = defineProps<{\n  /** The collection */\n  collection: Collection\n  /** The selected server */\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateServer', server: string): void\n}>()\n\nconst { servers, collectionMutators } = useWorkspace()\n\nconst serverOptions = computed<ServerOption[]>(() =>\n  collection?.servers.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst selectedServer = computed<ServerOption | undefined>({\n  get: () =>\n    server\n      ? serverOptions.value.find((option) => option.id === server.uid)\n      : undefined,\n  set: (option) => {\n    if (!option) {\n      return\n    }\n    collectionMutators.edit(\n      collection.uid,\n      'selectedServerUid',\n      option.id as Server['uid'],\n    )\n    const serverUrl = servers[option.id]?.url\n    if (serverUrl) {\n      emit('updateServer', serverUrl)\n    }\n  },\n})\n\n// Ensure we always have a selected server\nwatch(\n  () => collection,\n  (newCollection) => {\n    if (!newCollection || newCollection.selectedServerUid) {\n      return\n    }\n\n    const firstServer = collection.servers?.[0]\n\n    if (firstServer) {\n      collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n      if (servers[firstServer]?.url) {\n        emit('updateServer', servers[firstServer].url)\n      }\n    }\n  },\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    v-model=\"selectedServer\"\n    class=\"group\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">Server:</span>\n      <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap\">\n    <span class=\"sr-only\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Server-CEKGIEfE.js","names":[],"sources":["../src/components/Server/ServerDropdownItem.vue","../src/components/Server/ServerDropdownItem.vue","../src/components/Server/ServerDropdown.vue","../src/components/Server/ServerDropdown.vue","../src/components/Server/ServerSelector.vue","../src/components/Server/ServerSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\nimport type { ServerVariables } from '@/components/Server/types'\nimport { useWorkspace } from '@/store/store'\n\nconst props = defineProps<{\n  collection: Collection\n  operation: Operation | undefined\n  server: Server | undefined\n  serverOption: {\n    id: Server['uid']\n    label: string\n  }\n  type: 'collection' | 'request'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:variable', key: string, value: string): void\n}>()\n\nconst formId = useId()\nconst { collectionMutators, requestMutators, servers } = useWorkspace()\n\n/** Update the currently selected server on the collection or request */\nconst updateSelectedServer = (serverUid: Server['uid'], event?: Event) => {\n  if (hasVariables(serverUid)) {\n    event?.stopPropagation()\n  }\n\n  // Handle selected server deselection\n  if (isSelectedServer.value) {\n    // Clear selected server if selected\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    if (props.type === 'collection') {\n      collectionMutators.edit(\n        props.collection.uid,\n        'selectedServerUid',\n        undefined,\n      )\n\n      emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n        value: undefined,\n        options: { disableOldStoreUpdate: true },\n      })\n    } else if (props.type === 'request' && props.operation) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    return\n  }\n\n  // Set selected server on Collection\n  if (props.type === 'collection' && props.collection) {\n    // Clear the selected server on the request so that the collection can be updated\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    collectionMutators.edit(\n      props.collection.uid,\n      'selectedServerUid',\n      serverUid,\n    )\n\n    emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n      value: servers[serverUid]?.url,\n      options: { disableOldStoreUpdate: true },\n    })\n  }\n  // Set on the operation\n  else if (props.type === 'request' && props.operation) {\n    requestMutators.edit(props.operation.uid, 'selectedServerUid', serverUid)\n  }\n}\n\n/** Set server checkbox in the dropdown */\nconst isSelectedServer = computed(() => {\n  if (props.type === 'collection') {\n    // Check selected collection unless operation level server is selected\n    return (\n      props.collection.selectedServerUid === props.serverOption.id &&\n      !props.operation?.selectedServerUid\n    )\n  }\n\n  if (props.type === 'request' && props.operation) {\n    return props.operation.selectedServerUid === props.serverOption.id\n  }\n\n  return false\n})\n\nconst hasVariables = (serverUid: string) => {\n  if (!serverUid) {\n    return false\n  }\n\n  const server = servers[serverUid]\n\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isExpanded = computed(\n  () => isSelectedServer.value && hasVariables(props.server?.uid ?? ''),\n)\n\nconst updateServerVariable = (key: string, value: string) => {\n  emit('update:variable', key, value)\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <div\n    ref=\"wrapper-ref\"\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"(e) => updateSelectedServer(serverOption.id, e)\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables as ServerVariables\"\n        @update:variable=\"updateServerVariable\" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\nimport type { ServerVariables } from '@/components/Server/types'\nimport { useWorkspace } from '@/store/store'\n\nconst props = defineProps<{\n  collection: Collection\n  operation: Operation | undefined\n  server: Server | undefined\n  serverOption: {\n    id: Server['uid']\n    label: string\n  }\n  type: 'collection' | 'request'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:variable', key: string, value: string): void\n}>()\n\nconst formId = useId()\nconst { collectionMutators, requestMutators, servers } = useWorkspace()\n\n/** Update the currently selected server on the collection or request */\nconst updateSelectedServer = (serverUid: Server['uid'], event?: Event) => {\n  if (hasVariables(serverUid)) {\n    event?.stopPropagation()\n  }\n\n  // Handle selected server deselection\n  if (isSelectedServer.value) {\n    // Clear selected server if selected\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    if (props.type === 'collection') {\n      collectionMutators.edit(\n        props.collection.uid,\n        'selectedServerUid',\n        undefined,\n      )\n\n      emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n        value: undefined,\n        options: { disableOldStoreUpdate: true },\n      })\n    } else if (props.type === 'request' && props.operation) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    return\n  }\n\n  // Set selected server on Collection\n  if (props.type === 'collection' && props.collection) {\n    // Clear the selected server on the request so that the collection can be updated\n    if (props.operation?.servers?.length) {\n      requestMutators.edit(props.operation.uid, 'selectedServerUid', null)\n    }\n    collectionMutators.edit(\n      props.collection.uid,\n      'selectedServerUid',\n      serverUid,\n    )\n\n    emitCustomEvent(wrapper.value, 'scalar-update-selected-server', {\n      value: servers[serverUid]?.url,\n      options: { disableOldStoreUpdate: true },\n    })\n  }\n  // Set on the operation\n  else if (props.type === 'request' && props.operation) {\n    requestMutators.edit(props.operation.uid, 'selectedServerUid', serverUid)\n  }\n}\n\n/** Set server checkbox in the dropdown */\nconst isSelectedServer = computed(() => {\n  if (props.type === 'collection') {\n    // Check selected collection unless operation level server is selected\n    return (\n      props.collection.selectedServerUid === props.serverOption.id &&\n      !props.operation?.selectedServerUid\n    )\n  }\n\n  if (props.type === 'request' && props.operation) {\n    return props.operation.selectedServerUid === props.serverOption.id\n  }\n\n  return false\n})\n\nconst hasVariables = (serverUid: string) => {\n  if (!serverUid) {\n    return false\n  }\n\n  const server = servers[serverUid]\n\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isExpanded = computed(\n  () => isSelectedServer.value && hasVariables(props.server?.uid ?? ''),\n)\n\nconst updateServerVariable = (key: string, value: string) => {\n  emit('update:variable', key, value)\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <div\n    ref=\"wrapper-ref\"\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"(e) => updateSelectedServer(serverOption.id, e)\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables as ServerVariables\"\n        @update:variable=\"updateServerVariable\" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdownDivider,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n  ScalarPopover,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useWorkspace } from '@/store/store'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, collection, operation, server } = defineProps<{\n  collection: Collection\n  operation?: Operation\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { layout } = useLayout()\nconst { servers, collectionMutators, events, serverMutators } = useWorkspace()\n\nconst requestServerOptions = computed(() =>\n  operation?.servers?.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst collectionServerOptions = computed(() =>\n  // Filters out servers already present in the request\n  collection?.servers\n    ?.filter((serverUid) => !operation?.servers?.includes(serverUid))\n    .map((serverUid) => ({\n      id: serverUid,\n      label: servers[serverUid]?.url ?? 'Unknown server',\n    })),\n)\n\n/** If we have both request and collection servers we show the labels */\nconst showDropdownLabels = computed(\n  () =>\n    requestServerOptions.value?.length && collectionServerOptions.value?.length,\n)\n\n// Ensure we always have a selected server\nwatch([() => collection, () => operation], ([newCollection, newOperation]) => {\n  if (\n    !newCollection ||\n    newCollection.selectedServerUid ||\n    newOperation?.selectedServerUid\n  ) {\n    return\n  }\n\n  const firstServer = collection.servers?.[0]\n\n  if (firstServer) {\n    collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n  }\n})\n\n/** Add server */\nconst handleAddServer = () =>\n  events.commandPalette.emit({\n    commandName: 'Add Server',\n  })\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n\nconst updateServerVariable = (key: string, value: string) => {\n  if (!server) {\n    return\n  }\n\n  const variables = server.variables || {}\n  variables[key] = { ...variables[key], default: value }\n\n  serverMutators.edit(server.uid, 'variables', variables)\n\n  // Emit event to keep the new store in sync\n  emitCustomEvent(\n    wrapper.value?.$el,\n    'scalar-update-selected-server-variables',\n    { key, value },\n  )\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <ScalarPopover\n    ref=\"wrapper-ref\"\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template\n        v-if=\"operation?.selectedServerUid || collection.selectedServerUid\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"xs\" />\n      </template>\n    </ScalarButton>\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"serverOption in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:variable=\"updateServerVariable\" />\n        <template v-if=\"showDropdownLabels\">\n          <ScalarDropdownDivider />\n          <div class=\"text-xxs text-c-2 px-2.5 py-1\">Collection</div>\n        </template>\n        <!-- Collection -->\n        <ServerDropdownItem\n          v-for=\"serverOption in collectionServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"collection\"\n          @update:variable=\"updateServerVariable\" />\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"handleAddServer\">\n            <div class=\"flex h-4 w-4 items-center justify-center\">\n              <ScalarIcon\n                icon=\"Add\"\n                size=\"sm\" />\n            </div>\n            <span>Add Server</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop>\n      <ScalarFloatingBackdrop\n        class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdownDivider,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n  ScalarPopover,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useWorkspace } from '@/store/store'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, collection, operation, server } = defineProps<{\n  collection: Collection\n  operation?: Operation\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { layout } = useLayout()\nconst { servers, collectionMutators, events, serverMutators } = useWorkspace()\n\nconst requestServerOptions = computed(() =>\n  operation?.servers?.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst collectionServerOptions = computed(() =>\n  // Filters out servers already present in the request\n  collection?.servers\n    ?.filter((serverUid) => !operation?.servers?.includes(serverUid))\n    .map((serverUid) => ({\n      id: serverUid,\n      label: servers[serverUid]?.url ?? 'Unknown server',\n    })),\n)\n\n/** If we have both request and collection servers we show the labels */\nconst showDropdownLabels = computed(\n  () =>\n    requestServerOptions.value?.length && collectionServerOptions.value?.length,\n)\n\n// Ensure we always have a selected server\nwatch([() => collection, () => operation], ([newCollection, newOperation]) => {\n  if (\n    !newCollection ||\n    newCollection.selectedServerUid ||\n    newOperation?.selectedServerUid\n  ) {\n    return\n  }\n\n  const firstServer = collection.servers?.[0]\n\n  if (firstServer) {\n    collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n  }\n})\n\n/** Add server */\nconst handleAddServer = () =>\n  events.commandPalette.emit({\n    commandName: 'Add Server',\n  })\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n\nconst updateServerVariable = (key: string, value: string) => {\n  if (!server) {\n    return\n  }\n\n  const variables = server.variables || {}\n  variables[key] = { ...variables[key], default: value }\n\n  serverMutators.edit(server.uid, 'variables', variables)\n\n  // Emit event to keep the new store in sync\n  emitCustomEvent(\n    wrapper.value?.$el,\n    'scalar-update-selected-server-variables',\n    { key, value },\n  )\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <ScalarPopover\n    ref=\"wrapper-ref\"\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template\n        v-if=\"operation?.selectedServerUid || collection.selectedServerUid\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"xs\" />\n      </template>\n    </ScalarButton>\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"serverOption in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:variable=\"updateServerVariable\" />\n        <template v-if=\"showDropdownLabels\">\n          <ScalarDropdownDivider />\n          <div class=\"text-xxs text-c-2 px-2.5 py-1\">Collection</div>\n        </template>\n        <!-- Collection -->\n        <ServerDropdownItem\n          v-for=\"serverOption in collectionServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"collection\"\n          @update:variable=\"updateServerVariable\" />\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"handleAddServer\">\n            <div class=\"flex h-4 w-4 items-center justify-center\">\n              <ScalarIcon\n                icon=\"Add\"\n                size=\"sm\" />\n            </div>\n            <span>Add Server</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop>\n      <ScalarFloatingBackdrop\n        class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { Collection, Server } from '@scalar/oas-utils/entities/spec'\nimport { computed, watch } from 'vue'\n\nimport { useWorkspace } from '@/store/store'\n\ntype ServerOption = {\n  id: Server['uid']\n  label: string\n}\n\nconst { target, collection, server } = defineProps<{\n  /** The collection */\n  collection: Collection\n  /** The selected server */\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateServer', server: string): void\n}>()\n\nconst { servers, collectionMutators } = useWorkspace()\n\nconst serverOptions = computed<ServerOption[]>(() =>\n  collection?.servers.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst selectedServer = computed<ServerOption | undefined>({\n  get: () =>\n    server\n      ? serverOptions.value.find((option) => option.id === server.uid)\n      : undefined,\n  set: (option) => {\n    if (!option) {\n      return\n    }\n    collectionMutators.edit(\n      collection.uid,\n      'selectedServerUid',\n      option.id as Server['uid'],\n    )\n    const serverUrl = servers[option.id]?.url\n    if (serverUrl) {\n      emit('updateServer', serverUrl)\n    }\n  },\n})\n\n// Ensure we always have a selected server\nwatch(\n  () => collection,\n  (newCollection) => {\n    if (!newCollection || newCollection.selectedServerUid) {\n      return\n    }\n\n    const firstServer = collection.servers?.[0]\n\n    if (firstServer) {\n      collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n      if (servers[firstServer]?.url) {\n        emit('updateServer', servers[firstServer].url)\n      }\n    }\n  },\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    v-model=\"selectedServer\"\n    class=\"group\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">Server:</span>\n      <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap\">\n    <span class=\"sr-only\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { Collection, Server } from '@scalar/oas-utils/entities/spec'\nimport { computed, watch } from 'vue'\n\nimport { useWorkspace } from '@/store/store'\n\ntype ServerOption = {\n  id: Server['uid']\n  label: string\n}\n\nconst { target, collection, server } = defineProps<{\n  /** The collection */\n  collection: Collection\n  /** The selected server */\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateServer', server: string): void\n}>()\n\nconst { servers, collectionMutators } = useWorkspace()\n\nconst serverOptions = computed<ServerOption[]>(() =>\n  collection?.servers.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst selectedServer = computed<ServerOption | undefined>({\n  get: () =>\n    server\n      ? serverOptions.value.find((option) => option.id === server.uid)\n      : undefined,\n  set: (option) => {\n    if (!option) {\n      return\n    }\n    collectionMutators.edit(\n      collection.uid,\n      'selectedServerUid',\n      option.id as Server['uid'],\n    )\n    const serverUrl = servers[option.id]?.url\n    if (serverUrl) {\n      emit('updateServer', serverUrl)\n    }\n  },\n})\n\n// Ensure we always have a selected server\nwatch(\n  () => collection,\n  (newCollection) => {\n    if (!newCollection || newCollection.selectedServerUid) {\n      return\n    }\n\n    const firstServer = collection.servers?.[0]\n\n    if (firstServer) {\n      collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n      if (servers[firstServer]?.url) {\n        emit('updateServer', servers[firstServer].url)\n      }\n    }\n  },\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    v-model=\"selectedServer\"\n    class=\"group\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">Server:</span>\n      <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap\">\n    <span class=\"sr-only\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/{Settings-BuLKHzRY.js → Settings-BaPvhJ8Y.js}

@@ -1,4 +1,4 @@
-import { r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { t as IntegrationLogo_default } from "./IntegrationLogo-B9EDW8db.js";
 import { t as ViewLayout_default } from "./ViewLayout-BOXN0IYo.js";
 import { t as ViewLayoutContent_default } from "./ViewLayoutContent-CvMoJYPF.js";
@@ -344,4 +344,4 @@ var Settings_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { Settings_default as default };
 
-//# sourceMappingURL=Settings-BuLKHzRY.js.map
+//# sourceMappingURL=Settings-BaPvhJ8Y.js.map

package/dist/{Settings-BuLKHzRY.js.map → Settings-BaPvhJ8Y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Settings-BuLKHzRY.js","names":["$slots"],"sources":["../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/Settings.vue","../src/views/Settings/Settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Settings-BaPvhJ8Y.js","names":["$slots"],"sources":["../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/Settings.vue","../src/views/Settings/Settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n"],"mappings":"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"}

package/dist/{Sidebar-Xl9_nFXX.js → Sidebar-CRxdl38Y.js}

@@ -1,4 +1,4 @@
-import { r as useWorkspace } from "./store-DaPoVtIS.js";
+import { r as useWorkspace } from "./store-DnlAQK5d.js";
 import { a as useLayout, r as useSidebar } from "./useSidebar-DLTwHDI-.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
 import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
@@ -70,4 +70,4 @@ var Sidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 //#endregion
 export { Sidebar_default as t };
 
-//# sourceMappingURL=Sidebar-Xl9_nFXX.js.map
+//# sourceMappingURL=Sidebar-CRxdl38Y.js.map

package/dist/{Sidebar-Xl9_nFXX.js.map → Sidebar-CRxdl38Y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Sidebar-Xl9_nFXX.js","names":[],"sources":["../src/components/Sidebar/Sidebar.vue","../src/components/Sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;ECYA,MAAM,EAAE,kBAAkB,YAAW;EACrC,MAAM,EAAE,cAAc,oBAAoB,cAAa;EACvD,MAAM,EAAE,WAAW,WAAU;EAC7B,MAAM,aAAa,IAAI,MAAK;EAE5B,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,EAAE,gBAAgB,gBAAe;EAEvC,MAAM,aAAa,UAAsB;AACvC,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;;GAErB,MAAM,aAAa,OAAO,SACxB,iBAAiB,WAAW,MAAO,CAAC,SAAS,aAAa,OAC1D,GACF;GAEA,MAAM,UAAU,cAA0B;AACxC,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,IAAI,WAAU;IACtC,IAAI,WAAW,aAAa,UAAU,UAAU;AAChD,QAAI,WAAW;;AAEb,eAAW,OAAO,WAAW,OAAO;AAEtC,QAAI,WAAW,IACb,YAAW;AAEb,oBAAgB,GAAG,SAAS,IAAG;;GAGjC,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,OAAO,WAAU;AACzC,aAAS,gBAAgB,oBAAoB,aAAa,QAAQ,MAAK;AACvE,aAAS,gBAAgB,oBAAoB,WAAW,UAAU,MAAK;;AAEvE,QAAI,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IAC5C,iBAAgB,QAAO;aACd,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IACnD,iBAAgB,QAAO;;AAI3B,YAAS,gBAAgB,iBAAiB,aAAa,QAAQ,MAAK;AACpE,YAAS,gBAAgB,iBAAiB,WAAW,UAAU,MAAK;;;uCAIpE,mBAiCQ,SAAA;aA/BF;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,yIAAuI,EAAA,UACzH,WAAA,OAAU,CAAA,CAAA;IAC7B,OAAK,eAAA,EAAA,OAAW,MAAA,YAAW,CAAC,KAAK,MAAA,aAAY,GAAA,QAAA,CAAA;;IAC9C,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA;IAEd,MAAA,OAAM,KAAA,WAAgB,QAAA,SAAA,WAAA,EAD9B,mBASM,OATN,YASM,CANJ,mBAEK,MAFL,YAEK,gBADA,QAAA,MAAK,EAAA,EAAA,EAAA,CAGD,MAAA,YAAW,CAAC,KADrB,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,KAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEpB,mBAMM,OAAA,EALJ,OAAK,eAAA,CAAC,8DAA4D,EAAA,gBAChC,MAAA,OAAM,KAAA,SAAA,CAAA,CAAA,EAAA,EAAA,CAGxC,WAAuB,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA;IAET,MAAA,YAAW,CAAC,MAAA,WAAA,EAA5B,mBAQW,UAAA,EAAA,KAAA,GAAA,EAAA,CAPT,mBAGM,OAHN,YAGM,CADJ,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,EAExB,mBAE2B,OAAA;KADzB,OAAM;KACL,aAAW;;oBA9BR,MAAA,cAAa,CAAA,CAAA,CAAA"}
+{"version":3,"file":"Sidebar-CRxdl38Y.js","names":[],"sources":["../src/components/Sidebar/Sidebar.vue","../src/components/Sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;ECYA,MAAM,EAAE,kBAAkB,YAAW;EACrC,MAAM,EAAE,cAAc,oBAAoB,cAAa;EACvD,MAAM,EAAE,WAAW,WAAU;EAC7B,MAAM,aAAa,IAAI,MAAK;EAE5B,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,EAAE,gBAAgB,gBAAe;EAEvC,MAAM,aAAa,UAAsB;AACvC,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;;GAErB,MAAM,aAAa,OAAO,SACxB,iBAAiB,WAAW,MAAO,CAAC,SAAS,aAAa,OAC1D,GACF;GAEA,MAAM,UAAU,cAA0B;AACxC,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,IAAI,WAAU;IACtC,IAAI,WAAW,aAAa,UAAU,UAAU;AAChD,QAAI,WAAW;;AAEb,eAAW,OAAO,WAAW,OAAO;AAEtC,QAAI,WAAW,IACb,YAAW;AAEb,oBAAgB,GAAG,SAAS,IAAG;;GAGjC,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,OAAO,WAAU;AACzC,aAAS,gBAAgB,oBAAoB,aAAa,QAAQ,MAAK;AACvE,aAAS,gBAAgB,oBAAoB,WAAW,UAAU,MAAK;;AAEvE,QAAI,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IAC5C,iBAAgB,QAAO;aACd,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IACnD,iBAAgB,QAAO;;AAI3B,YAAS,gBAAgB,iBAAiB,aAAa,QAAQ,MAAK;AACpE,YAAS,gBAAgB,iBAAiB,WAAW,UAAU,MAAK;;;uCAIpE,mBAiCQ,SAAA;aA/BF;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,yIAAuI,EAAA,UACzH,WAAA,OAAU,CAAA,CAAA;IAC7B,OAAK,eAAA,EAAA,OAAW,MAAA,YAAW,CAAC,KAAK,MAAA,aAAY,GAAA,QAAA,CAAA;;IAC9C,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA;IAEd,MAAA,OAAM,KAAA,WAAgB,QAAA,SAAA,WAAA,EAD9B,mBASM,OATN,YASM,CANJ,mBAEK,MAFL,YAEK,gBADA,QAAA,MAAK,EAAA,EAAA,EAAA,CAGD,MAAA,YAAW,CAAC,KADrB,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,KAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEpB,mBAMM,OAAA,EALJ,OAAK,eAAA,CAAC,8DAA4D,EAAA,gBAChC,MAAA,OAAM,KAAA,SAAA,CAAA,CAAA,EAAA,EAAA,CAGxC,WAAuB,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA;IAET,MAAA,YAAW,CAAC,MAAA,WAAA,EAA5B,mBAQW,UAAA,EAAA,KAAA,GAAA,EAAA,CAPT,mBAGM,OAHN,YAGM,CADJ,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,EAExB,mBAE2B,OAAA;KADzB,OAAM;KACL,aAAW;;oBA9BR,MAAA,cAAa,CAAA,CAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import type { Collection, Operation, Server } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { EnvVariable } from '@/store/active-entities';
+import type { EnvVariable } from '../../store/active-entities';
 type __VLS_Props = {
     collection: Collection;
     operation: Operation;

package/dist/components/AddressBar/index.js

@@ -1,5 +1,5 @@
 import "../../HttpMethod-rnWEgC3T.js";
-import "../../CodeInput-BN7uw3Bh.js";
-import "../../Server-BS4zjUdO.js";
-import { t as AddressBar_default } from "../../AddressBar-CX8xiYoe.js";
+import "../../CodeInput-BTN8cC5h.js";
+import "../../Server-CEKGIEfE.js";
+import { t as AddressBar_default } from "../../AddressBar-BOZGKSoz.js";
 export { AddressBar_default as AddressBar };

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

@@ -1,7 +1,7 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { type CodeMirrorLanguage, type Extension } from '@scalar/use-codemirror';
 import { type Ref } from 'vue';
-import type { EnvVariable } from '@/store/active-entities';
+import type { EnvVariable } from '../../store/active-entities';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/components/CodeInput/codeVariableWidget.d.ts

@@ -1,6 +1,6 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@scalar/use-codemirror';
-import { type EnvVariables } from '@/libs/env-helpers';
+import { type EnvVariables } from '../../libs/env-helpers';
 /**
  * Styles the active environment variable pill
  */

package/dist/components/CodeInput/index.js

@@ -1,2 +1,2 @@
-import { t as CodeInput_default } from "../../CodeInput-BN7uw3Bh.js";
+import { t as CodeInput_default } from "../../CodeInput-BTN8cC5h.js";
 export { CodeInput_default as CodeInput };

package/dist/components/CommandPalette/index.js

@@ -1,3 +1,3 @@
-import { t as TheCommandPalette_default } from "../../CommandPalette-BiA0IgO8.js";
+import { t as TheCommandPalette_default } from "../../CommandPalette-BxoEK8TY.js";
 import "../../HttpMethod-rnWEgC3T.js";
 export { TheCommandPalette_default as TheCommandPalette };

package/dist/components/DataTable/DataTableInput.vue.d.ts

@@ -1,6 +1,6 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
-import type { EnvVariable } from '@/store/active-entities';
-import type { VueClassProp } from '@/types/vue';
+import type { EnvVariable } from '../../store/active-entities';
+import type { VueClassProp } from '../../types/vue';
 type __VLS_Props = {
     id?: string;
     type?: string | undefined;

package/dist/components/DataTable/index.js

@@ -1,6 +1,6 @@
-import { n as DataTableInputSelect_default } from "../../CodeInput-BN7uw3Bh.js";
+import { n as DataTableInputSelect_default } from "../../CodeInput-BTN8cC5h.js";
 import { n as DataTableCell_default, r as DataTable_default, t as DataTableRow_default } from "../../DataTableRow-c3XveEUO.js";
 import { n as DataTableCheckbox_default, t as DataTableText_default } from "../../DataTable-BqbZKW3K.js";
 import { t as DataTableHeader_default } from "../../DataTableHeader-DJVB0jCZ.js";
-import { t as DataTableInput_default } from "../../DataTableInput-SkIUPlrB.js";
+import { t as DataTableInput_default } from "../../DataTableInput-RydMDjn2.js";
 export { DataTable_default as DataTable, DataTableCell_default as DataTableCell, DataTableCheckbox_default as DataTableCheckbox, DataTableHeader_default as DataTableHeader, DataTableInput_default as DataTableInput, DataTableInputSelect_default as DataTableInputSelect, DataTableRow_default as DataTableRow, DataTableText_default as DataTableText };

package/dist/components/Form/LabelInput.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ClientLayout } from '@/hooks/useLayout';
+import type { ClientLayout } from '../../hooks/useLayout';
 type __VLS_Props = {
     inputId: string;
     placeholder: string;

package/dist/components/ImportCollection/index.js

@@ -1,2 +1,2 @@
-import { t as ImportCollectionListener_default } from "../../ImportCollection-BIYMxB9Q.js";
+import { t as ImportCollectionListener_default } from "../../ImportCollection-CGjySEzP.js";
 export { ImportCollectionListener_default as ImportCollectionListener };

package/dist/components/ImportCollection/utils/import-collection.d.ts

@@ -1,6 +1,6 @@
 import type { Collection } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { WorkspaceStore } from '@/store';
+import type { WorkspaceStore } from '../../../store/index.js';
 export declare function importCollection({ store, workspace, source, watchMode, onSuccess, onError, }: {
     store: WorkspaceStore;
     workspace: Workspace | undefined;

package/dist/components/ImportCollection/utils/workspace-store-is-empty.d.ts

@@ -1,4 +1,4 @@
-import type { WorkspaceStore } from '@/store';
+import type { WorkspaceStore } from '../../../store/index.js';
 /**
  * Checks whether the store is empty.
  */

package/dist/components/Server/ServerVariablesForm.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ServerVariables, ServerVariableValues } from '@/components/Server/types';
+import type { ServerVariables, ServerVariableValues } from '../../components/Server/types';
 type __VLS_Props = {
     variables?: ServerVariables | undefined;
     values?: ServerVariableValues;

package/dist/components/Server/index.js

@@ -1,3 +1,3 @@
 import { t as ServerVariablesForm_default } from "../../ServerVariablesForm-BRZ9XC8o.js";
-import { n as ServerDropdown_default, t as ServerSelector_default } from "../../Server-BS4zjUdO.js";
+import { n as ServerDropdown_default, t as ServerSelector_default } from "../../Server-CEKGIEfE.js";
 export { ServerDropdown_default as ServerDropdown, ServerSelector_default as ServerSelector, ServerVariablesForm_default as ServerVariablesForm };

package/dist/components/Sidebar/index.js

@@ -1,2 +1,2 @@
-import { t as Sidebar_default } from "../../Sidebar-Xl9_nFXX.js";
+import { t as Sidebar_default } from "../../Sidebar-CRxdl38Y.js";
 export { Sidebar_default as Sidebar };