@andrewyang/ai-workflow-editor 0.1.0

package/src/components/editor/PropertyPanel.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="flex h-full flex-col bg-white border-l border-gray-200 w-80 shadow-[-4px_0_24px_rgba(0,0,0,0.08)] z-20 relative">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b border-gray-100 p-3 bg-gray-50/50">
+      <div class="font-bold text-gray-800">{{ $t('propertyPanel.title') }}</div>
+      <el-button link class="!text-gray-400 hover:!text-gray-600 !p-1" @click="$emit('close')">
+        <div class="i-lucide-x w-4 h-4" />
+      </el-button>
+    </div>
+
+    <!-- Tabs -->
+    <div class="flex border-b border-gray-200 bg-gray-50">
+      <button
+        v-for="tab in ['style', 'text', 'arrange']"
+        :key="tab"
+        @click="currentTab = tab"
+        :class="[
+          'flex-1 py-2 text-xs font-medium transition-colors relative',
+          currentTab === tab ? 'text-gray-900 bg-white' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+        ]"
+      >
+        {{ $t(`propertyPanel.tabs.${tab}`) }}
+        <div v-if="currentTab === tab" class="absolute bottom-0 left-0 right-0 h-0.5 bg-purple-600" />
+      </button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
+      <template v-if="selectedNode">
+        
+        <!-- Style Tab -->
+        <div v-show="currentTab === 'style'" class="space-y-4">
+          <!-- Fill -->
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <el-checkbox v-model="hasFill" :label="$t('propertyPanel.style.fill')" />
+              <div class="flex items-center gap-2">
+                 <el-color-picker v-model="nodeStyle.backgroundColor" show-alpha size="small" />
+              </div>
+            </div>
+            <!-- Presets -->
+            <div class="flex gap-1 flex-wrap mb-2">
+               <button 
+                 v-for="color in presetColors" 
+                 :key="color"
+                 class="w-6 h-6 rounded border border-gray-200 cursor-pointer hover:scale-110 transition-transform"
+                 :style="{ backgroundColor: color }"
+                 @click="nodeStyle.backgroundColor = color"
+               />
+            </div>
+          </div>
+
+          <div class="h-px bg-gray-100" />
+
+          <!-- Stroke -->
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <el-checkbox v-model="hasStroke" :label="$t('propertyPanel.style.stroke')" />
+              <el-color-picker v-model="nodeStyle.borderColor" show-alpha size="small" />
+            </div>
+            <div class="grid grid-cols-2 gap-2">
+               <el-select v-model="nodeStyle.borderStyle" size="small">
+                 <el-option value="solid" label="Solid" />
+                 <el-option value="dashed" label="Dashed" />
+                 <el-option value="dotted" label="Dotted" />
+               </el-select>
+               <el-input-number v-model="borderWidth" size="small" :min="0" :max="20" controls-position="right">
+                  <template #suffix>pt</template>
+               </el-input-number>
+            </div>
+          </div>
+
+          <div class="h-px bg-gray-100" />
+
+          <!-- Opacity -->
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-500">{{ $t('propertyPanel.style.opacity') }}</span>
+            <el-input-number v-model="opacity" size="small" :min="0" :max="100" controls-position="right">
+               <template #suffix>%</template>
+            </el-input-number>
+          </div>
+
+          <!-- Radius & Shadow -->
+          <div class="grid grid-cols-2 gap-2">
+            <el-checkbox v-model="hasShadow" :label="$t('propertyPanel.style.shadow')" />
+            <el-checkbox v-model="isRounded" :label="$t('propertyPanel.style.rounded')" />
+          </div>
+        </div>
+
+        <!-- Text Tab -->
+        <div v-show="currentTab === 'text'" class="space-y-4">
+          <!-- Content -->
+           <div>
+            <label class="text-xs text-gray-500 mb-1 block">{{ $t('propertyPanel.text.content') }}</label>
+            <el-input v-model="nodeData.label" type="textarea" :rows="2" resize="none" />
+          </div>
+
+          <!-- Font -->
+          <div class="grid grid-cols-2 gap-2">
+             <el-select v-model="textStyle.fontFamily" size="small">
+               <el-option value="sans-serif" label="Sans Serif" />
+               <el-option value="serif" label="Serif" />
+               <el-option value="monospace" label="Monospace" />
+             </el-select>
+             <el-input-number v-model="fontSize" size="small" :min="8" :max="72" controls-position="right">
+                <template #suffix>px</template>
+             </el-input-number>
+          </div>
+
+          <!-- Style Buttons -->
+          <div class="flex bg-gray-100 rounded p-1 gap-1 justify-between">
+            <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.fontWeight === 'bold' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="toggleFontWeight"
+            >
+              <div class="i-lucide-bold w-4 h-4" />
+            </button>
+            <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.fontStyle === 'italic' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="toggleFontStyle"
+            >
+              <div class="i-lucide-italic w-4 h-4" />
+            </button>
+            <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.textDecoration === 'underline' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="toggleTextDecoration"
+            >
+              <div class="i-lucide-underline w-4 h-4" />
+            </button>
+            <div class="w-px bg-gray-300 my-0.5" />
+             <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.textAlign === 'left' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="textStyle.textAlign = 'left'"
+            >
+              <div class="i-lucide-align-left w-4 h-4" />
+            </button>
+             <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.textAlign === 'center' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="textStyle.textAlign = 'center'"
+            >
+              <div class="i-lucide-align-center w-4 h-4" />
+            </button>
+             <button 
+              :class="['p-1 rounded hover:bg-white transition-colors', textStyle.textAlign === 'right' ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-500']"
+              @click="textStyle.textAlign = 'right'"
+            >
+              <div class="i-lucide-align-right w-4 h-4" />
+            </button>
+          </div>
+
+           <!-- Color -->
+           <div class="flex items-center justify-between">
+              <el-checkbox v-model="hasTextColor" :label="$t('propertyPanel.text.color')" />
+              <el-color-picker v-model="textStyle.color" size="small" />
+           </div>
+        </div>
+
+        <!-- Arrange Tab -->
+        <div v-show="currentTab === 'arrange'" class="space-y-4">
+           <!-- Z-Order -->
+           <div class="grid grid-cols-2 gap-2">
+             <el-button size="small" @click="bringToFront">{{ $t('propertyPanel.arrange.front') }}</el-button>
+             <el-button size="small" @click="sendToBack">{{ $t('propertyPanel.arrange.back') }}</el-button>
+           </div>
+
+           <div class="h-px bg-gray-100" />
+
+           <!-- Size -->
+           <div>
+             <div class="text-xs font-bold text-gray-800 mb-2">{{ $t('propertyPanel.arrange.size') }}</div>
+             <div class="grid grid-cols-2 gap-2">
+                <el-input-number v-model="nodeWidth" size="small" controls-position="right">
+                   <template #prefix>W</template>
+                </el-input-number>
+                 <el-input-number v-model="nodeHeight" size="small" controls-position="right">
+                   <template #prefix>H</template>
+                </el-input-number>
+             </div>
+           </div>
+
+           <!-- Position -->
+           <div>
+             <div class="text-xs font-bold text-gray-800 mb-2">{{ $t('propertyPanel.arrange.position') }}</div>
+             <div class="grid grid-cols-2 gap-2">
+                <el-input-number v-model="nodeX" size="small" controls-position="right">
+                   <template #prefix>X</template>
+                </el-input-number>
+                 <el-input-number v-model="nodeY" size="small" controls-position="right">
+                   <template #prefix>Y</template>
+                </el-input-number>
+             </div>
+           </div>
+        </div>
+
+      </template>
+      <div v-else class="flex flex-col items-center justify-center h-full text-gray-400">
+        <div class="i-lucide-mouse-pointer-2 text-3xl mb-2" />
+        <span class="text-sm">{{ $t('propertyPanel.noSelection') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useVueFlow } from '@vue-flow/core';
+
+const props = defineProps<{
+  selectedNode: any;
+}>();
+
+const emit = defineEmits(['close']);
+const { applyNodeChanges } = useVueFlow();
+
+const currentTab = ref('style');
+
+// Presets
+const presetColors = ['#ffffff', '#f8fafc', '#dbeafe', '#dcfce7', '#fef9c3', '#fae8ff', '#ffe4e6'];
+
+// Computed proxies for Node Data
+const nodeData = computed(() => props.selectedNode?.data || {});
+const nodeStyle = computed(() => props.selectedNode?.data?.style || {});
+const textStyle = computed(() => props.selectedNode?.data?.textStyle || {});
+const position = computed(() => props.selectedNode?.position || { x: 0, y: 0 });
+const dimensions = computed(() => props.selectedNode?.dimensions || { width: 0, height: 0 });
+
+// Helper to init styles if missing
+watch(() => props.selectedNode, (node) => {
+  if (node) {
+    if (!node.data.style) node.data.style = {};
+    if (!node.data.textStyle) node.data.textStyle = { 
+      fontSize: '12px', 
+      fontFamily: 'sans-serif',
+      color: '#374151',
+      textAlign: 'center'
+    };
+  }
+}, { immediate: true });
+
+// --- Style Getters/Setters ---
+const hasFill = computed({
+  get: () => !!nodeStyle.value.backgroundColor && nodeStyle.value.backgroundColor !== 'transparent',
+  set: (val) => {
+    if (!val) nodeStyle.value.backgroundColor = 'transparent';
+    else nodeStyle.value.backgroundColor = '#ffffff';
+  }
+});
+
+const hasStroke = computed({
+  get: () => nodeStyle.value.borderWidth !== '0px',
+  set: (val) => {
+    if (!val) nodeStyle.value.borderWidth = '0px';
+    else nodeStyle.value.borderWidth = '1px';
+  }
+});
+
+const borderWidth = computed({
+  get: () => parseInt(nodeStyle.value.borderWidth || '0'),
+  set: (val) => nodeStyle.value.borderWidth = `${val}px`
+});
+
+const opacity = computed({
+  get: () => (nodeStyle.value.opacity ?? 1) * 100,
+  set: (val) => nodeStyle.value.opacity = val / 100
+});
+
+const hasShadow = computed({
+  get: () => !!nodeStyle.value.boxShadow,
+  set: (val) => {
+    if (val) nodeStyle.value.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
+    else nodeStyle.value.boxShadow = 'none';
+  }
+});
+
+const isRounded = computed({
+  get: () => nodeStyle.value.borderRadius !== '0px',
+  set: (val) => {
+    if (val) nodeStyle.value.borderRadius = '0.5rem';
+    else nodeStyle.value.borderRadius = '0px';
+  }
+});
+
+// --- Text Getters/Setters ---
+const fontSize = computed({
+  get: () => parseInt(textStyle.value.fontSize || '12'),
+  set: (val) => textStyle.value.fontSize = `${val}px`
+});
+
+const hasTextColor = computed({
+  get: () => !!textStyle.value.color,
+  set: (val) => {
+    if (!val) textStyle.value.color = undefined;
+    else textStyle.value.color = '#374151';
+  }
+});
+
+const toggleFontWeight = () => {
+  textStyle.value.fontWeight = textStyle.value.fontWeight === 'bold' ? 'normal' : 'bold';
+};
+const toggleFontStyle = () => {
+  textStyle.value.fontStyle = textStyle.value.fontStyle === 'italic' ? 'normal' : 'italic';
+};
+const toggleTextDecoration = () => {
+  textStyle.value.textDecoration = textStyle.value.textDecoration === 'underline' ? 'none' : 'underline';
+};
+
+// --- Arrange Getters/Setters ---
+const nodeX = computed({
+  get: () => Math.round(position.value.x),
+  set: (val) => props.selectedNode.position.x = val
+});
+const nodeY = computed({
+  get: () => Math.round(position.value.y),
+  set: (val) => props.selectedNode.position.y = val
+});
+
+// Resizing is tricky because Vue Flow nodes usually auto-size or use style width/height
+// We will update the style width/height if set
+const nodeWidth = computed({
+  get: () => parseInt(nodeStyle.value.width || dimensions.value.width || '160'),
+  set: (val) => nodeStyle.value.width = `${val}px`
+});
+const nodeHeight = computed({
+  get: () => parseInt(nodeStyle.value.height || dimensions.value.height || '40'),
+  set: (val) => nodeStyle.value.height = `${val}px`
+});
+
+const bringToFront = () => {
+  props.selectedNode.zIndex = (props.selectedNode.zIndex || 0) + 1;
+};
+const sendToBack = () => {
+  props.selectedNode.zIndex = (props.selectedNode.zIndex || 0) - 1;
+};
+
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 4px;
+}
+</style>

package/src/components/editor/Toolbar.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="h-12 border-b border-gray-200 bg-white/80 backdrop-blur-xl flex items-center justify-between px-4 shadow-sm z-30 relative">
+    <!-- Left: Actions -->
+    <div class="flex items-center gap-1">
+      <el-button text @click="console.log('Draw')">{{ $t('toolbar.draw') }}</el-button>
+      <el-button text @click="console.log('Shape')">{{ $t('toolbar.shape') }}</el-button>
+      <el-button text @click="console.log('Style')">{{ $t('toolbar.style') }}</el-button>
+      <el-button text @click="console.log('Insert')">{{ $t('toolbar.insert') }}</el-button>
+      <div class="w-px h-4 bg-gray-200 mx-2" />
+      <el-button text @click="$emit('save')" class="!p-1.5" :title="$t('toolbar.save')">
+        <div class="i-lucide-save w-4 h-4" />
+      </el-button>
+      <el-button text @click="$emit('import')" class="!p-1.5" :title="$t('toolbar.import')">
+        <div class="i-lucide-upload w-4 h-4" />
+      </el-button>
+      <div class="w-px h-4 bg-gray-200 mx-2" />
+      <el-button text class="!p-1.5" :title="$t('toolbar.undo')">
+        <div class="i-lucide-undo-2 w-4 h-4" />
+      </el-button>
+      <el-button text class="!p-1.5" :title="$t('toolbar.redo')">
+        <div class="i-lucide-redo-2 w-4 h-4" />
+      </el-button>
+    </div>
+
+    <!-- Center: Title/Status (Optional) -->
+    <div class="absolute left-1/2 -translate-x-1/2 text-sm font-medium text-gray-400 select-none pointer-events-none">
+      {{ $t('toolbar.untitled') }}
+    </div>
+
+    <!-- Right: Zoom/View -->
+    <div class="flex items-center gap-1 z-30">
+      <el-button text @click="$emit('zoom-out')" class="!p-1.5" :title="$t('toolbar.zoomOut')">
+        <div class="i-lucide-minus w-4 h-4" />
+      </el-button>
+      <span class="text-xs text-gray-500 w-8 text-center select-none">100%</span>
+      <el-button text @click="$emit('zoom-in')" class="!p-1.5" :title="$t('toolbar.zoomIn')">
+        <div class="i-lucide-plus w-4 h-4" />
+      </el-button>
+      <div class="w-px h-4 bg-gray-200 mx-2" />
+      <el-button text @click="$emit('fit-view')" class="!p-1.5" :title="$t('toolbar.fitView')">
+        <div class="i-lucide-maximize w-4 h-4" />
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(['save', 'import', 'zoom-in', 'zoom-out', 'fit-view']);
+</script>

package/src/components/editor/nodes/AiNode.vue

@@ -0,0 +1,77 @@
+<template>
+  <div 
+    class="ai-node group relative min-w-[160px] h-full transition-all"
+    :style="containerStyle"
+  >
+    <NodeResizer :is-visible="selected" :min-width="100" :min-height="30" />
+    <Handle type="target" position="top" class="!bg-purple-500 !w-2.5 !h-2.5 !border-2 !border-white" />
+    
+    <div class="flex items-center gap-3 h-full">
+      <div class="flex h-8 w-8 items-center justify-center rounded-md bg-purple-50 text-purple-600 group-hover:bg-purple-100 transition-colors">
+        <div class="i-lucide-brain-circuit text-lg" />
+      </div>
+      <div class="flex flex-col flex-1 min-w-0">
+        <span class="text-[10px] font-bold text-purple-600 uppercase tracking-wide leading-none mb-0.5">AI Node</span>
+        <textarea
+          v-if="data.isEditing"
+          v-model="data.label"
+          ref="textareaRef"
+          class="nodrag w-full bg-white border border-purple-300 rounded px-1 py-0.5 text-xs font-semibold text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-200 resize-none overflow-hidden"
+          :style="data.textStyle"
+          rows="1"
+          @blur="stopEditing"
+          @keydown.enter.prevent="stopEditing"
+          @vue:mounted="focusInput"
+        />
+        <span 
+          v-else 
+          class="text-xs font-semibold text-gray-800 leading-tight break-words whitespace-pre-wrap" 
+          :style="data.textStyle"
+        >{{ data.label }}</span>
+      </div>
+    </div>
+    
+    <!-- Status indicator (optional) -->
+    <div class="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-green-500 border border-white opacity-0 group-hover:opacity-100 transition-opacity" />
+    
+    <Handle type="source" position="bottom" class="!bg-purple-500 !w-2.5 !h-2.5 !border-2 !border-white" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import { Handle } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+  data: { label: string; style?: any; textStyle?: any; isEditing?: boolean };
+  selected?: boolean;
+}>();
+
+const textareaRef = ref<HTMLTextAreaElement>();
+
+const focusInput = () => {
+  nextTick(() => {
+    textareaRef.value?.focus();
+    textareaRef.value?.select();
+  });
+};
+
+const stopEditing = () => {
+  if (props.data) {
+    props.data.isEditing = false;
+  }
+};
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.data.style?.backgroundColor || '#ffffff',
+  borderColor: props.selected ? '#a855f7' : (props.data.style?.borderColor || '#e5e7eb'),
+  borderWidth: props.data.style?.borderWidth || '1px',
+  borderStyle: props.data.style?.borderStyle || 'solid',
+  borderRadius: props.data.style?.borderRadius || '0.5rem',
+  boxShadow: props.selected ? '0 4px 6px -1px rgba(168, 85, 247, 0.2)' : (props.data.style?.boxShadow || '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  opacity: props.data.style?.opacity !== undefined ? props.data.style.opacity : 1,
+  padding: '0.75rem',
+}));
+</script>

package/src/components/editor/nodes/NormalNode.vue

@@ -0,0 +1,75 @@
+<template>
+  <div 
+    class="normal-node group relative min-w-[160px] h-full transition-all"
+    :style="containerStyle"
+  >
+    <NodeResizer :is-visible="selected" :min-width="100" :min-height="30" />
+    <Handle type="target" position="top" class="!bg-blue-500 !w-2.5 !h-2.5 !border-2 !border-white" />
+    
+    <div class="flex items-center gap-3 h-full">
+      <div class="flex h-8 w-8 items-center justify-center rounded-md bg-blue-50 text-blue-600 group-hover:bg-blue-100 transition-colors">
+        <div class="i-lucide-square-activity text-lg" />
+      </div>
+      <div class="flex flex-col flex-1 min-w-0">
+        <span class="text-[10px] font-bold text-blue-600 uppercase tracking-wide leading-none mb-0.5">Action</span>
+        
+        <textarea
+          v-if="data.isEditing"
+          v-model="data.label"
+          ref="textareaRef"
+          class="nodrag w-full bg-white border border-blue-300 rounded px-1 py-0.5 text-xs font-semibold text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none overflow-hidden"
+          :style="data.textStyle"
+          rows="1"
+          @blur="stopEditing"
+          @keydown.enter.prevent="stopEditing"
+          @vue:mounted="focusInput"
+        />
+        <span 
+          v-else 
+          class="text-xs font-semibold text-gray-800 leading-tight break-words whitespace-pre-wrap" 
+          :style="data.textStyle"
+        >{{ data.label }}</span>
+      </div>
+    </div>
+    
+    <Handle type="source" position="bottom" class="!bg-blue-500 !w-2.5 !h-2.5 !border-2 !border-white" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import { Handle } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+  data: { label: string; style?: any; textStyle?: any; isEditing?: boolean };
+  selected?: boolean;
+}>();
+
+const textareaRef = ref<HTMLTextAreaElement>();
+
+const focusInput = () => {
+  nextTick(() => {
+    textareaRef.value?.focus();
+    textareaRef.value?.select();
+  });
+};
+
+const stopEditing = () => {
+  if (props.data) {
+    props.data.isEditing = false;
+  }
+};
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.data.style?.backgroundColor || '#ffffff',
+  borderColor: props.selected ? '#60a5fa' : (props.data.style?.borderColor || '#e5e7eb'),
+  borderWidth: props.data.style?.borderWidth || '1px',
+  borderStyle: props.data.style?.borderStyle || 'solid',
+  borderRadius: props.data.style?.borderRadius || '0.5rem',
+  boxShadow: props.selected ? '0 4px 6px -1px rgba(96, 165, 250, 0.2)' : (props.data.style?.boxShadow || '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  opacity: props.data.style?.opacity !== undefined ? props.data.style.opacity : 1,
+  padding: '0.75rem',
+}));
+</script>

package/src/components/editor/nodes/SysmlBlockNode.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="sysml-block-node group relative min-w-[160px] h-full transition-all" :style="containerStyle">
+    <NodeResizer :is-visible="selected" :min-width="100" :min-height="60" />
+    <Handle type="target" position="top" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+    
+    <div class="flex flex-col h-full">
+      <!-- Stereotype -->
+      <div class="px-2 pt-1 text-center text-[10px] italic text-gray-500 font-mono">
+        &laquo;block&raquo;
+      </div>
+      <!-- Name -->
+      <div v-if="data.isEditing" class="px-2 pb-2 border-b border-gray-300">
+         <input
+          v-model="data.label"
+          ref="inputRef"
+          class="nodrag w-full text-center text-sm font-bold text-gray-800 bg-white border border-blue-300 rounded px-1 focus:outline-none focus:ring-2 focus:ring-blue-200"
+          :style="data.textStyle"
+          @blur="stopEditing"
+          @keydown.enter.prevent="stopEditing"
+          @vue:mounted="focusInput"
+        />
+      </div>
+      <div v-else class="px-2 pb-2 text-center text-sm font-bold text-gray-800 border-b border-gray-300 break-words" :style="data.textStyle">
+        {{ data.label }}
+      </div>
+      <!-- Attributes/Operations Placeholder -->
+      <div class="p-2 min-h-[40px] text-[10px] text-gray-400 flex-1">
+        <div class="italic">properties...</div>
+        <div class="italic mt-1">operations...</div>
+      </div>
+    </div>
+    
+    <Handle type="source" position="bottom" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import { Handle } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+  data: { label: string; style?: any; textStyle?: any; isEditing?: boolean };
+  selected?: boolean;
+}>();
+
+const inputRef = ref<HTMLInputElement>();
+
+const focusInput = () => {
+  nextTick(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+  });
+};
+
+const stopEditing = () => {
+  if (props.data) {
+    props.data.isEditing = false;
+  }
+};
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.data.style?.backgroundColor || '#ffffff',
+  borderColor: props.selected ? '#3b82f6' : (props.data.style?.borderColor || '#374151'),
+  borderWidth: props.data.style?.borderWidth || '2px',
+  borderStyle: props.data.style?.borderStyle || 'solid',
+  borderRadius: props.data.style?.borderRadius || '0.125rem',
+  boxShadow: props.selected ? '0 4px 6px -1px rgba(59, 130, 246, 0.2)' : (props.data.style?.boxShadow || '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  opacity: props.data.style?.opacity !== undefined ? props.data.style.opacity : 1,
+}));
+</script>