fix: 修改交互逻辑

card是5是slide_bone的key生成说明.txt

@@ -0,0 +1,50 @@
+ "slide_knob":{
+"score1":"G","score2":"P","score3":"T","score4":"B","score5":"Y","score6":"R",
+"blue":[
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"key":"002000","music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}],
+"green":[
+{"is_break":1,"key":"000001","music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}],
+"purple":[
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"key":"000050","music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}],
+"red":[
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}
+,{"is_break":1,"key":"600000","music_name":"hnyx.mp3"}],
+"tangerine":[
+{"is_break":1,"music_name":"hnyx.mp3"}
+,{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"key":"000300","music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}],
+"yellow":[
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"},
+{"is_break":1,"key":"040000","music_name":"hnyx.mp3"},
+{"is_break":1,"music_name":"hnyx.mp3"}]},
+
+
+json说明，"score1":"G","score2":"P","score3":"T","score4":"B","score5":"Y","score6":"R" 说明正确的滑钮答案。
+"key":"000001" key值的说明，key必须是长度为6的字符串，代表六个滑钮的位置，最右边代表第一个位置，最左边代表第六为。
+字符的值代表颜色 1：绿色 2：蓝色 3：橘色 4：黄色 5：紫色 6：红色。
+颜色的数组也是六个元素，代表滑钮的六个位置，最上面是第一个位置，最下面是第六个位置。

package.json

@@ -36,6 +36,7 @@
     "highlight": "^0.2.4",
     "html2canvas": "^1.4.1",
     "inquirer": "^8.2.6",
+    "json-editor-vue3": "^1.1.1",
     "markdown-it": "^14.1.0",
     "minimist": "^1.2.8",
     "mitt": "^3.0.0",

src/controller/CardController.ts

@@ -97,7 +97,7 @@ export class CardController {
       return { data: {}, cardType: '' }
     }
 
-    const dataJson = JSON.parse(data)
+    const dataJson = data as any
     console.log('卡片数据详情:', dataJson)
 
     if (dataJson.header.card_type === 5) {

src/layout/components/Sidebar/index.vue

@@ -19,7 +19,7 @@
       :openKeys="openKeys"
       mode="inline"
       :inlineCollapsed="false"
-      :style="{ borderRight: 0 }"
+      :style="{ borderRight: 0, paddingBottom: '160px'}"
     >
       <sidebar-item
         :item="route"

src/pages/card/components/card-21-json-panel.vue

@@ -0,0 +1,76 @@
+<template>
+ <a-drawer
+    :width="600"
+    title="卡片JSON"
+    placement="left"
+    :open="open"
+    :closable="false"
+    @close="onClose"
+    :keyboard="false"
+    :mask="false"
+ >
+    <template #extra>
+      <a-space>
+        <a-button  @click="onClose">取消</a-button>
+        <a-button type="primary" load @click="save">保存</a-button>
+      </a-space>
+    </template>
+    <JsonEditorVue
+      v-model="cacheJson"
+      @change="handleChange"
+      :options="editorOptions"
+      style="height: 96%"
+    />
+ </a-drawer>
+</template>
+<script lang='ts'  setup >
+import { CardController } from '@/controller/index'
+import { ref, watch } from 'vue'
+import JsonEditorVue from 'json-editor-vue3'
+
+interface IProps {
+  jsonData,
+  open
+}
+
+const cacheJson = ref()
+
+const props = defineProps<IProps>()
+
+const emits = defineEmits(['change', 'close', 'save'])
+
+const handleChange = () => {
+  emits('change', props.jsonData.value)
+}
+
+watch(
+  () => open,
+  () => {
+    cacheJson.value = props.jsonData
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const editorOptions = {
+  mode: 'tree',
+  modes: ['tree', 'code', 'form', 'text', 'view']
+}
+
+const onClose = () => emits('close')
+
+const save = () => {
+  CardController.add({
+    ...cacheJson.value
+  }).then(r => {
+    emits('close')
+  })
+  // emits('save', cacheJson.value)
+}
+
+</script>
+<style lang='less' scoped >
+
+</style>

src/pages/card/components/config-game.vue

@@ -95,7 +95,7 @@
           >
             <a-col
               style="height: 120px;"
-              :span="7"
+              :span="8"
               class="config-game-item"
               v-for="(item, index) in cardJson.game_list[currentGameIndex].items"
               :key="index"
@@ -105,11 +105,11 @@
 
               <div class="folder-footer">
                 <a-space>
-                  <!-- <div>游戏 {{ index + 1 }}</div> -->
+                  <div>游戏 {{ index + 1 }}</div>
                   <div class="folder-info">
-                    <div v-if="item.sub_subject?.music_name" class="music-badge">
+                    <div v-if="item.sub_subject?.ok" class="music-badge">
                       <sound-outlined />
-                      <span class="music-name">{{ item.sub_subject.music_name }}</span>
+                      <span class="music-name">{{ item.sub_subject.ok }}</span>
                     </div>
                   </div>
                 </a-space>
@@ -164,15 +164,15 @@
     <a-form :model="subItemForm" layout="vertical">
       <a-form-item label="子主题音乐">
         <SelectAudioNew
-          v-model="subItemForm.sub_subject.music_name"
+          v-model="subItemForm.sub_subject.ok"
           placeholder="请选择子主题音乐"
         />
 
         <!-- 已选择的音乐名称展示区域 -->
-        <div v-if="subItemForm.sub_subject.music_name" class="selected-music-display">
+        <div v-if="subItemForm.sub_subject.ok" class="selected-music-display">
           <div class="music-info">
             <sound-outlined />
-            <span class="music-name">{{ subItemForm.sub_subject.music_name }}</span>
+            <span class="music-name">{{ subItemForm.sub_subject.ok }}</span>
           </div>
         </div>
       </a-form-item>
@@ -190,15 +190,15 @@
     <a-form :model="editSubItemForm" layout="vertical">
       <a-form-item label="子主题音乐">
         <SelectAudioNew
-          v-model="editSubItemForm.sub_subject.music_name"
+          v-model="editSubItemForm.sub_subject.ok"
           placeholder="请选择子主题音乐"
         />
 
         <!-- 已选择的音乐名称展示区域 -->
-        <div v-if="editSubItemForm.sub_subject.music_name" class="selected-music-display">
+        <div v-if="editSubItemForm.sub_subject.ok" class="selected-music-display">
           <div class="music-info">
             <sound-outlined />
-            <span class="music-name">{{ editSubItemForm.sub_subject.music_name }}</span>
+            <span class="music-name">{{ editSubItemForm.sub_subject.ok }}</span>
           </div>
         </div>
       </a-form-item>
@@ -233,17 +233,17 @@
             />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <!-- <a-col :span="12">
           <a-form-item label="顺序多选错误音乐:">
             <SelectAudioNew
               v-model="editForm.ordered_multiple_err.music_name"
               placeholder="请选择顺序多选错误音乐"
             />
           </a-form-item>
-        </a-col>
+        </a-col> -->
       </a-row>
 
-      <a-row :gutter="16">
+      <!-- <a-row :gutter="16">
         <a-col :span="12">
           <a-form-item label="重复单击音乐:">
             <SelectAudioNew
@@ -291,9 +291,9 @@
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <!-- 空列，保持对称 -->
+
         </a-col>
-      </a-row>
+      </a-row> -->
     </a-form>
   </a-modal>
 </template>

src/pages/card/components/game-stage-3.vue

@@ -9,7 +9,7 @@
             </div>
           </template>
           <a-form layout="horizontal" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-            <div class="form-row">
+            <!-- <div class="form-row">
               <div class="form-label">
                 <a-space>
                   <div>空白按钮音频:</div>
@@ -34,12 +34,12 @@
                   placeholder="刷新按钮音频"
                   class="audio-select"
                 />
-            </div>
+            </div> -->
             <div class="form-row">
               <div class="form-label">
                 <a-space>
                   <div>提示按钮音频:</div>
-                  <select-break :bordered="false" v-model:value="touch_keys[2][0].is_break" class="break-select-inline" />
+                  <!-- <select-break :bordered="false" v-model:value="touch_keys[2][0].is_break" class="break-select-inline" /> -->
                 </a-space>
               </div>
                <SelectAudioNew
@@ -82,10 +82,10 @@
                       <span class="detail-label">音频:</span>
                       <strong class="audio-name"  @click="showAddStepModal('success')" >{{ element.music_name || '点击选择音频' }}</strong>
                     </div>
-                    <div class="step-detail-row break-row">
+                    <!-- <div class="step-detail-row break-row">
                       <span class="detail-label">播放权重:</span>
                       <select-break v-model:value="element.is_break" class="break-select" />
-                    </div>
+                    </div> -->
                   </div>
                 </div>
                 <div class="step-actions">
@@ -136,10 +136,10 @@
                       <span class="detail-label">音频:</span>
                       <strong class="audio-name"   @click="showAddStepModal('error')">{{ element.music_name || '点击选择音频'}}</strong>
                     </div>
-                    <div class="step-detail-row break-row">
+                    <!-- <div class="step-detail-row break-row">
                       <span class="detail-label">播放权重:</span>
                       <select-break v-model:value="element.is_break" class="break-select" />
-                    </div>
+                    </div> -->
                   </div>
                 </div>
                 <div class="step-actions">
@@ -208,6 +208,7 @@
              v-for="item in steps.ok_key"
           >
             <SelectAudioNew
+              :buttonLabel="getButtonLabel(item.value)"
               v-model="item.music_name"
               :placeholder="'请选择' + getButtonLabel(item.value) + '音频'"
             />
@@ -235,6 +236,7 @@
             :key="item.value"
           >
             <SelectAudioNew
+              :buttonLabel="getButtonLabel(item.value)"
               v-model="item.music_name"
               :placeholder="'请选择' + getButtonLabel(item.value) + '音频'"
             />
@@ -314,7 +316,7 @@ const btnMode = ref<'success' | 'error'>('success')
 const buttonOptions = (() => {
   const options: {label: string, value: number}[] = []
   const letters = ['A', 'B', 'C', 'D', 'E', 'F']
-  let value = 3
+  let value = 4
   for (const letter of letters) {
     for (let i = 1; i <= 6; i++) {
       options.push({
@@ -368,26 +370,26 @@ const selectButton = (btn: { label: string, value: number }) => {
 }
 
 const handleAddStep = () => {
-  if (getBtnRuleByRule.value === 'single' && steps.value.ok_key.length === 0) {
-    message.error('请至少选择一个正确按钮')
-    return
-  } else {
-    for (let index = 0; index < steps.value.ok_key.length; index++) {
-      const item = steps.value.ok_key[index]
-      if (!item.music_name) {
-        message.error('请选择语音')
-        return
-      }
-    }
-
-    for (let index = 0; index < steps.value.err_key.length; index++) {
-      const item = steps.value.err_key[index]
-      if (!item.music_name) {
-        message.error('请选择语音')
-        return
-      }
-    }
-  }
+  // if (getBtnRuleByRule.value === 'single' && steps.value.ok_key.length === 0) {
+  //   message.error('请至少选择一个正确按钮')
+  //   return
+  // } else {
+  //   for (let index = 0; index < steps.value.ok_key.length; index++) {
+  //     const item = steps.value.ok_key[index]
+  //     if (!item.music_name) {
+  //       message.error('请选择语音')
+  //       return
+  //     }
+  //   }
+
+  //   for (let index = 0; index < steps.value.err_key.length; index++) {
+  //     const item = steps.value.err_key[index]
+  //     if (!item.music_name) {
+  //       message.error('请选择语音')
+  //       return
+  //     }
+  //   }
+  // }
 
   emits('update:modelValue', steps.value)
 

src/pages/card/components/select-audio-new.vue

@@ -20,7 +20,7 @@
       @click="showAudioModal = true"
     >
       <div class="selected-info">
-        <div class="selected-name">{{ selectedValue }}</div>
+        <div class="selected-name"><span v-if="buttonLabel">{{buttonLabel}}:</span> {{ selectedValue }}</div>
         <div class="selected-action">点击更换音频</div>
       </div>
       <div class="selected-controls">
@@ -118,11 +118,13 @@ import AudioDataManager from '@/utils/AudioDataManager'
 interface Props {
   modelValue?: string
   placeholder?: string
+  buttonLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
-  placeholder: '请选择音频'
+  placeholder: '请选择音频',
+  buttonLabel: ''
 })
 
 const emits = defineEmits<{

src/pages/card/index.vue

@@ -26,7 +26,8 @@
     </div>
     <a-space>
       <a-button v-if="Number(cardType) === 5" @click="openDefaultConfig(5)">基础配置</a-button>
-      <a-button v-if="Number(cardType) === 21"  @click="openDefaultConfig(21)">基础配置</a-button>
+      <!-- <a-button v-if="Number(cardType) === 21"  @click="openDefaultConfig(21)">基础配置</a-button> -->
+      <a-button v-if="Number(cardType) === 21"  @click="openState.jsonPanelOpen = !openState.jsonPanelOpen">JSON面板</a-button>
       <a-button v-if="Number(cardType) === 5" type="primary" @click="openConfigCard(5)">打开配置板</a-button>
       <a-button v-if="Number(cardType) === 21" type="primary" @click="openConfigCard(21)">打开配置板</a-button>
     </a-space>
@@ -161,6 +162,11 @@
     </div>
   </a-modal>
 
+  <CardJsonPanel
+    :open="openState.jsonPanelOpen"
+    :jsonData="cardJson21"
+    @close="openState.jsonPanelOpen = false"
+  />
 </template>
 <script lang='ts'  setup >
 import { InfoCircleOutlined } from '@ant-design/icons-vue'
@@ -175,6 +181,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { CardController } from '@/controller'
 import { message } from 'ant-design-vue'
 import ConfigGame from './components/config-game.vue'
+import CardJsonPanel from './components/card-21-json-panel.vue'
 
 const operationTip = `
   1. 点击矩形可以选中，选中后进行配置<br>
@@ -196,7 +203,8 @@ const openState = reactive({
   configGameOpen: false,
   defaultConfigOpen: false,
   defaultConfig21Open: false,
-  cardTypeOpen: false
+  cardTypeOpen: false,
+  jsonPanelOpen: false
 })
 
 const isValids = reactive({
@@ -305,7 +313,7 @@ const saveDefault21Config = async () => {
 }
 
 const openConfigCard = (type: 5 | 21) => {
-  type === 5 ? openState.configCardOpen = true : openState.configGameOpen = true
+  type === 5 ? openState.configCardOpen = !openState.configCardOpen : openState.configGameOpen = !openState.configGameOpen
 }
 
 const openDefaultConfig = (type: 5 | 21) => {

yarn.lock

@@ -1465,6 +1465,11 @@
   resolved "https://registry.npmmirror.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@sphinxxxx/color-conversion@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.npmmirror.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
+  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
+
 "@ssthouse/tree-chart-core@^1.1.0":
   version "1.1.2"
   resolved "https://registry.npmmirror.com/@ssthouse/tree-chart-core/-/tree-chart-core-1.1.2.tgz"
@@ -2460,6 +2465,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.31.1:
+  version "1.43.4"
+  resolved "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.43.4.tgz#126830ba77424f5f73cf48faa352e5fa3b345a90"
+  integrity sha512-8hAxVfo2ImICd69BWlZwZlxe9rxDGDjuUhh+WeWgGDvfBCE+r3lkynkQvIovDz4jcMi8O7bsEaFygaDT+h9sBA==
+
 acorn-import-assertions@^1.9.0:
   version "1.9.0"
   resolved "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz"
@@ -2517,7 +2527,7 @@ ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.12.6:
   version "6.12.6"
   resolved "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5611,6 +5621,11 @@ isobject@^3.0.1:
   resolved "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.npmmirror.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
+
 javascript-stringify@^2.0.1:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz"
@@ -5634,6 +5649,11 @@ jest-worker@^28.0.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jmespath@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.npmmirror.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076"
+  integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
+
 joi@^17.4.0:
   version "17.9.2"
   resolved "https://registry.npmmirror.com/joi/-/joi-17.9.2.tgz"
@@ -5683,6 +5703,13 @@ json-buffer@3.0.1:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-editor-vue3@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/json-editor-vue3/-/json-editor-vue3-1.1.1.tgz#fe328c042a9b42980ec3985ceb09fa00ac83a401"
+  integrity sha512-3qslVNZAY+roVfL10ukuaAw1ia9YpWdLO9PnBL+4SuM5a6R3oWCSQU6dLTTPd/dVtqhIefNn4QmthAioYOBHeA==
+  dependencies:
+    jsoneditor "^9.5.6"
+
 json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz"
@@ -5703,6 +5730,11 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
+json-source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmmirror.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
+  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
@@ -5725,6 +5757,21 @@ json5@^2.1.2, json5@^2.2.2:
   resolved "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsoneditor@^9.5.6:
+  version "9.10.5"
+  resolved "https://registry.npmmirror.com/jsoneditor/-/jsoneditor-9.10.5.tgz#9aeb3a1482850299826f8f292cec22b0f71d975c"
+  integrity sha512-fVZ0NMt+zm4rqTKBv2x7zPdLeaRyKo1EjJkaR1QjK4gEM1rMwICILYSW1OPxSc1qqyAoDaA/eeNrluKoxOocCA==
+  dependencies:
+    ace-builds "^1.31.1"
+    ajv "^6.12.6"
+    javascript-natural-sort "^0.7.1"
+    jmespath "^0.16.0"
+    json-source-map "^0.6.1"
+    jsonrepair "3.1.0"
+    mobius1-selectr "^2.4.13"
+    picomodal "^3.0.0"
+    vanilla-picker "^2.12.2"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
@@ -5741,6 +5788,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonrepair@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.1.0.tgz#02488882080930e6a37a7b080bc77546f2e12676"
+  integrity sha512-idqReg23J0PVRAADmZMc5xQM3xeOX5bTB6OTyMnzq33IXJXmn9iJuWIEvGmrN80rQf4d7uLTMEDwpzujNcI0Rg==
+
 keyv@^4.0.0:
   version "4.5.2"
   resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.2.tgz"
@@ -6199,6 +6251,11 @@ mkdirp@^0.5.6:
   dependencies:
     minimist "^1.2.6"
 
+mobius1-selectr@^2.4.13:
+  version "2.4.13"
+  resolved "https://registry.npmmirror.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
+  integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
+
 module-alias@^2.2.2:
   version "2.2.3"
   resolved "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz"
@@ -6663,6 +6720,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomodal@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
+  integrity sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw==
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz"
@@ -8275,6 +8337,13 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vanilla-picker@^2.12.2:
+  version "2.12.3"
+  resolved "https://registry.npmmirror.com/vanilla-picker/-/vanilla-picker-2.12.3.tgz#1cc47b641a2b9c9afc5ac3a9a02febace0f1b17a"
+  integrity sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==
+  dependencies:
+    "@sphinxxxx/color-conversion" "^2.2.2"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz"