sillyspec 3.20.3 → 3.20.4

package/packages/dashboard/src/components/DetailPanel.vue

@@ -1,137 +1,137 @@
-<template>
-  <div
-    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
-    style="background: #F5F5F7;"
-  >
-    <!-- Header -->
-    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #F0F0F3;">
-      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ detailType ? detailTitle : '详情' }}</h2>
-      <n-button quaternary size="tiny" @click="handleClose">
-        <template #icon>
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </template>
-      </n-button>
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto">
-      <!-- Empty state -->
-      <n-empty v-if="!activeStep && !detailType" description="选择一个步骤" style="margin: auto; padding: 48px 0;" />
-
-      <!-- Detail views -->
-      <template v-if="detailType === 'git'">
-        <GitDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'tech'">
-        <TechDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'docs'">
-        <DocsDetail :data="detailData" @open-file="$emit('open-doc-file', $event)" />
-      </template>
-
-      <!-- Step detail (original) -->
-      <div v-else-if="activeStep">
-        <!-- Title -->
-        <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #D97706;">
-            {{ activeStep.title || activeStep.name }}
-          </h3>
-          <div v-if="activeStep.status" class="mt-2">
-            <StageBadge :status="activeStep.status" />
-          </div>
-        </div>
-
-        <!-- Description -->
-        <div v-if="activeStep.description || activeStep.summary" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">描述</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #636366;">{{ activeStep.description || activeStep.summary }}</p>
-        </div>
-
-        <!-- Conclusion -->
-        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">结论</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.conclusion }}</p>
-        </div>
-
-        <!-- Decision -->
-        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">决策</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.decision }}</p>
-        </div>
-
-        <!-- User Query -->
-        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">用户提问</h4>
-          <div class="px-3 py-2 rounded-md" style="background: #F5F5F7; border: 1px solid #F0F0F3;">
-            <p class="text-[11px] italic" style="color: #636366;">"{{ activeStep.userQuery }}"</p>
-          </div>
-        </div>
-
-        <!-- Metadata -->
-        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">元信息</h4>
-          <div class="space-y-1 text-[11px]" style="color: #6B7280;">
-            <div v-if="activeStep.duration"><span style="color: #636366;">耗时：</span> {{ activeStep.duration }}</div>
-            <div v-if="activeStep.timestamp"><span style="color: #636366;">时间：</span> {{ formatTimestamp(activeStep.timestamp) }}</div>
-          </div>
-        </div>
-
-        <!-- Output -->
-        <div v-if="activeStep.output || activeStep.files" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">输出</h4>
-          <n-code v-if="activeStep.output" :code="activeStep.output" language="text" word-wrap style="max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 4px; background: #F5F5F7;" />
-          <div v-if="activeStep.files" class="mt-2 space-y-1">
-            <div v-for="(file, i) in activeStep.files" :key="i" class="flex items-center gap-2 text-[10px]" style="color: #6B7280;">
-              <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-              </svg>
-              <span class="truncate">{{ file }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Log Stream -->
-    <div class="flex-shrink-0" style="height: 200px; border-top: 1px solid #F0F0F3;">
-      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import StageBadge from './StageBadge.vue'
-import LogStream from './LogStream.vue'
-import GitDetail from './detail/GitDetail.vue'
-import TechDetail from './detail/TechDetail.vue'
-import DocsDetail from './detail/DocsDetail.vue'
-
-const props = defineProps({
-  isOpen: { type: Boolean, default: true },
-  activeStep: { type: Object, default: null },
-  logs: { type: Array, default: () => [] },
-  detailType: { type: String, default: null },
-  detailData: { type: [Object, Array], default: null }
-})
-
-const emit = defineEmits(['close', 'clear-logs', 'open-doc-file'])
-
-const detailTitle = computed(() => {
-  if (props.detailType === 'git') return 'Git 详情'
-  if (props.detailType === 'tech') return '技术栈详情'
-  if (props.detailType === 'docs') return '文档列表'
-  return '详情'
-})
-
-function handleClose() {
-  emit('close')
-}
-
-function formatTimestamp(ts) {
-  if (!ts) return ''
-  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
-}
-</script>
+<template>
+  <div
+    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
+    style="background: #F5F5F7;"
+  >
+    <!-- Header -->
+    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #F0F0F3;">
+      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ detailType ? detailTitle : '详情' }}</h2>
+      <n-button quaternary size="tiny" @click="handleClose">
+        <template #icon>
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </template>
+      </n-button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto">
+      <!-- Empty state -->
+      <n-empty v-if="!activeStep && !detailType" description="选择一个步骤" style="margin: auto; padding: 48px 0;" />
+
+      <!-- Detail views -->
+      <template v-if="detailType === 'git'">
+        <GitDetail :data="detailData" />
+      </template>
+      <template v-else-if="detailType === 'tech'">
+        <TechDetail :data="detailData" />
+      </template>
+      <template v-else-if="detailType === 'docs'">
+        <DocsDetail :data="detailData" @open-file="$emit('open-doc-file', $event)" />
+      </template>
+
+      <!-- Step detail (original) -->
+      <div v-else-if="activeStep">
+        <!-- Title -->
+        <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #D97706;">
+            {{ activeStep.title || activeStep.name }}
+          </h3>
+          <div v-if="activeStep.status" class="mt-2">
+            <StageBadge :status="activeStep.status" />
+          </div>
+        </div>
+
+        <!-- Description -->
+        <div v-if="activeStep.description || activeStep.summary" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">描述</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #636366;">{{ activeStep.description || activeStep.summary }}</p>
+        </div>
+
+        <!-- Conclusion -->
+        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">结论</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.conclusion }}</p>
+        </div>
+
+        <!-- Decision -->
+        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">决策</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.decision }}</p>
+        </div>
+
+        <!-- User Query -->
+        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">用户提问</h4>
+          <div class="px-3 py-2 rounded-md" style="background: #F5F5F7; border: 1px solid #F0F0F3;">
+            <p class="text-[11px] italic" style="color: #636366;">"{{ activeStep.userQuery }}"</p>
+          </div>
+        </div>
+
+        <!-- Metadata -->
+        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">元信息</h4>
+          <div class="space-y-1 text-[11px]" style="color: #6B7280;">
+            <div v-if="activeStep.duration"><span style="color: #636366;">耗时：</span> {{ activeStep.duration }}</div>
+            <div v-if="activeStep.timestamp"><span style="color: #636366;">时间：</span> {{ formatTimestamp(activeStep.timestamp) }}</div>
+          </div>
+        </div>
+
+        <!-- Output -->
+        <div v-if="activeStep.output || activeStep.files" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">输出</h4>
+          <n-code v-if="activeStep.output" :code="activeStep.output" language="text" word-wrap style="max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 4px; background: #F5F5F7;" />
+          <div v-if="activeStep.files" class="mt-2 space-y-1">
+            <div v-for="(file, i) in activeStep.files" :key="i" class="flex items-center gap-2 text-[10px]" style="color: #6B7280;">
+              <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
+              <span class="truncate">{{ file }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Log Stream -->
+    <div class="flex-shrink-0" style="height: 200px; border-top: 1px solid #F0F0F3;">
+      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StageBadge from './StageBadge.vue'
+import LogStream from './LogStream.vue'
+import GitDetail from './detail/GitDetail.vue'
+import TechDetail from './detail/TechDetail.vue'
+import DocsDetail from './detail/DocsDetail.vue'
+
+const props = defineProps({
+  isOpen: { type: Boolean, default: true },
+  activeStep: { type: Object, default: null },
+  logs: { type: Array, default: () => [] },
+  detailType: { type: String, default: null },
+  detailData: { type: [Object, Array], default: null }
+})
+
+const emit = defineEmits(['close', 'clear-logs', 'open-doc-file'])
+
+const detailTitle = computed(() => {
+  if (props.detailType === 'git') return 'Git 详情'
+  if (props.detailType === 'tech') return '技术栈详情'
+  if (props.detailType === 'docs') return '文档列表'
+  return '详情'
+})
+
+function handleClose() {
+  emit('close')
+}
+
+function formatTimestamp(ts) {
+  if (!ts) return ''
+  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+</script>

package/packages/dashboard/src/components/DocPreview.vue

@@ -1,29 +1,59 @@
 <template>
-  <div class="h-full overflow-y-auto px-6 py-4">
-    <div v-if="!content && !loading" class="flex items-center justify-center h-full">
-      <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #636366;">选择一个文档查看内容</p>
+  <div class="doc-preview-shell">
+    <div v-if="!content && !loading" class="doc-empty">
+      <p>选择一个文档查看内容</p>
     </div>
-    <div v-else-if="loading" class="flex items-center justify-center h-full">
-      <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #636366;">加载中...</p>
+    <div v-else-if="loading" class="doc-empty">
+      <p>加载中...</p>
     </div>
-    <div v-else class="doc-preview" v-html="renderedContent"></div>
+    <template v-else>
+      <div class="doc-toolbar">
+        <div class="doc-title" :title="fileTitle">{{ fileTitle }}</div>
+        <n-button size="tiny" type="primary" @click="isModalOpen = true">弹窗阅读</n-button>
+      </div>
+      <div class="doc-preview-scroll">
+        <div class="doc-preview" v-html="renderedContent"></div>
+      </div>
+    </template>
+
+    <n-modal
+      v-model:show="isModalOpen"
+      preset="card"
+      :title="fileTitle"
+      style="width: min(920px, calc(100vw - 48px));"
+    >
+      <div class="doc-modal-body">
+        <div class="doc-preview doc-preview-large" v-html="renderedContent"></div>
+      </div>
+    </n-modal>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { marked } from 'marked'
 
 const props = defineProps({
   content: { type: String, default: '' },
-  loading: { type: Boolean, default: false }
+  loading: { type: Boolean, default: false },
+  selectedFile: { type: Object, default: null }
 })
 
+const isModalOpen = ref(false)
+
 marked.setOptions({
   breaks: true,
   gfm: true
 })
 
+watch(() => props.selectedFile?.path, () => {
+  isModalOpen.value = false
+})
+
+const fileTitle = computed(() => {
+  return props.selectedFile?.title || props.selectedFile?.name || '文档'
+})
+
 const renderedContent = computed(() => {
   if (!props.content) return ''
   return marked.parse(props.content)
@@ -31,10 +61,69 @@ const renderedContent = computed(() => {
 </script>
 
 <style scoped>
+.doc-preview-shell {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+
+.doc-empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: #636366;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.doc-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #F0F0F3;
+}
+
+.doc-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1C1C1E;
+}
+
+.doc-preview-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 16px 22px;
+}
+
+.doc-modal-body {
+  max-height: min(72vh, 760px);
+  overflow: auto;
+  padding-right: 4px;
+}
+
 .doc-preview {
   font-size: 13px;
   line-height: 1.7;
   color: #374151;
+  overflow-wrap: anywhere;
+}
+
+.doc-preview-large {
+  font-size: 14px;
+  line-height: 1.75;
 }
 
 .doc-preview :deep(h1) {
@@ -46,6 +135,10 @@ const renderedContent = computed(() => {
   padding-bottom: 8px;
 }
 
+.doc-preview-large :deep(h1) {
+  font-size: 22px;
+}
+
 .doc-preview :deep(h2) {
   color: #1C1C1E;
   font-size: 15px;
@@ -53,6 +146,10 @@ const renderedContent = computed(() => {
   margin: 20px 0 10px;
 }
 
+.doc-preview-large :deep(h2) {
+  font-size: 17px;
+}
+
 .doc-preview :deep(h3) {
   color: #D97706;
   font-size: 14px;

package/packages/dashboard/src/components/DocTree.vue

@@ -1,22 +1,31 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="doc-tree">
+    <div class="doc-tree-search">
+      <n-input
+        v-model:value="query"
+        size="small"
+        clearable
+        placeholder="搜索文档"
+      />
+    </div>
+
     <n-empty v-if="groups.length === 0" description="暂无文档" style="margin: auto;" />
+    <n-empty v-else-if="treeData.length === 0" description="无匹配文档" style="margin: auto;" />
     <n-tree
       v-else
+      class="doc-tree-list"
       :data="treeData"
       :selected-keys="selectedKeys"
       :default-expand-all="true"
       selectable
       block-line
       @update:selected-keys="handleSelect"
-      style="padding: 8px 12px;"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, h } from 'vue'
-import { NIcon } from 'naive-ui'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   groups: { type: Array, default: () => [] },
@@ -24,30 +33,48 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['select-file'])
+const query = ref('')
 
 const selectedKeys = computed(() => {
   return props.selectedFile?.path ? [props.selectedFile.path] : []
 })
 
 const groupIcons = {
-  '设计文档': '📋',
-  '实现计划': '📐',
-  '归档': '📦',
-  ' proposals': '📝'
+  design: '📋',
+  plan: '🧾',
+  archive: '📦',
+  changes: '⚙️',
+  scan: '🔍',
+  quicklog: '⚡'
 }
 
 const treeData = computed(() => {
-  return props.groups.map(group => ({
-    key: `group-${group.key}`,
-    label: group.project ? `${group.label} (${group.project})` : group.label,
-    prefix: () => groupIcons[group.label] || '📄',
-    children: group.files.map(file => ({
-      key: file.path,
-      label: file.title,
-      prefix: () => '📄',
-      data: file
-    }))
-  }))
+  const keyword = query.value.trim().toLowerCase()
+
+  return props.groups
+    .map(group => {
+      const groupLabel = group.project ? `${group.label} (${group.project})` : group.label
+      const groupMatched = !keyword || groupLabel.toLowerCase().includes(keyword)
+      const files = group.files.filter(file => {
+        if (groupMatched) return true
+        return `${file.title || ''} ${file.name || ''}`.toLowerCase().includes(keyword)
+      })
+
+      if (files.length === 0) return null
+
+      return {
+        key: `group-${group.key}`,
+        label: groupLabel,
+        prefix: () => groupIcons[group.key] || '📄',
+        children: files.map(file => ({
+          key: file.path,
+          label: file.title || file.name,
+          prefix: () => '📄',
+          data: file
+        }))
+      }
+    })
+    .filter(Boolean)
 })
 
 function handleSelect(keys, option) {
@@ -56,3 +83,32 @@ function handleSelect(keys, option) {
   }
 }
 </script>
+
+<style scoped>
+.doc-tree {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+
+.doc-tree-search {
+  flex-shrink: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid #F0F0F3;
+}
+
+.doc-tree-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 12px 14px;
+}
+
+.doc-tree-list :deep(.n-tree-node-content__text) {
+  white-space: normal;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+</style>

package/packages/dashboard/src/components/HResizeHandle.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="h-resize-handle"
+    :class="{ 'dragging': isDragging }"
+    @mousedown="handleMouseDown"
+  ></div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isDragging: { type: Boolean, default: false },
+  colIndex: { type: Number, required: true }
+})
+
+const emit = defineEmits(['drag-start', 'drag-end', 'resize'])
+
+function handleMouseDown(e) {
+  e.preventDefault()
+  emit('drag-start', { type: 'horizontal', colIndex: props.colIndex, startX: e.clientX })
+
+  const onMove = (ev) => {
+    emit('resize', { deltaX: ev.clientX - e.clientX })
+  }
+
+  const onUp = () => {
+    emit('drag-end')
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+</script>
+
+<style scoped>
+.h-resize-handle {
+  width: 4px;
+  background: #E5E7EB;
+  cursor: col-resize;
+  transition: background 0.2s;
+}
+
+.h-resize-handle:hover,
+.h-resize-handle.dragging {
+  background: #D97706;
+}
+</style>