feat(schema): add GroupRef-only architecture

src/components/editor/EditorTools.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useComponentsStore } from '@/store/components'
 
-const { editableToolsGroupName, editableTools, editableId } = useComponentsStore()
+const { editableToolsGroupName, editableToolsGroupLabel, editableTools, editableId }
+  = useComponentsStore()
 </script>
 
 <template>
@@ -10,7 +11,7 @@ const { editableToolsGroupName, editableTools, editableId } = useComponentsStore
     <EditorPanel v-if="editableToolsGroupName">
       <EditorPanelItem
         type="opened"
-        :title="editableToolsGroupName"
+        :title="editableToolsGroupLabel || editableToolsGroupName"
       >
         <EditorComponentTools
           v-if="editableTools"

src/components/editor/components/tree/TreeComponents.vue

@@ -12,7 +12,7 @@ const { installedToolsByGroup, installed } = useComponentsStore()
       :key="i.id"
       :index="index"
       :name="i.name"
-      :tools="i.tools"
+      :groups="i.groups"
     />
     <div
       v-if="!installed.length"

src/components/editor/components/tree/TreeComponentsItem.vue

@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import type { Tool } from '@/types/editor'
+import type { ToolGroupBucket } from '@/store/components/utils'
+import { computed } from 'vue'
 import { useComponentsStore } from '@/store/components'
 
 interface Props {
   id: string
   name: string
   index: number
-  tools: Record<string, Tool[]>
+  groups: ToolGroupBucket[]
 }
 
 const props = defineProps<Props>()
 
 const { onEditTool, editableToolsGroupName, editableId, removeComponent, duplicateComponent }
   = useComponentsStore()
 
+const layoutGroupId = computed(() => {
+  return props.groups.find(group => group.role === 'layout')?.id || props.groups[0]?.id
+})
+
 function onClick(type: 'copy' | 'remove') {
   if (type === 'remove')
     removeComponent(props.index)
 
   if (type === 'copy')
     duplicateComponent(props.index)
 }
+
+function onHeaderClick() {
+  if (!layoutGroupId.value)
+    return
+
+  onEditTool(layoutGroupId.value, props.index)
+}
 </script>
 
 <template>
@@ -33,7 +45,7 @@ function onClick(type: 'copy' | 'remove') {
     <div class="body">
       <div
         class="header"
-        @click="onEditTool('Layout', index)"
+        @click="onHeaderClick"
       >
         {{ name }}
         <div class="actions">
@@ -53,15 +65,15 @@ function onClick(type: 'copy' | 'remove') {
       </div>
       <div class="tools">
         <div
-          v-for="(_, k, idx) in tools"
-          :key="idx"
+          v-for="group in groups"
+          :key="group.id"
           class="tools__item"
           :class="{
-            'is-active': k === editableToolsGroupName && id === editableId,
+            'is-active': group.id === editableToolsGroupName && id === editableId,
           }"
-          @click="onEditTool(k, index)"
+          @click="onEditTool(group.id, index)"
         >
-          {{ k }}
+          {{ group.label }}
         </div>
       </div>
     </div>