@yh-ui/flow 0.1.21

package/dist/components/AiNodeEditPanel.vue

@@ -0,0 +1,413 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+const props = defineProps({
+  node: { type: [Object, null], required: true },
+  visible: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update", "close"]);
+const localNode = ref({
+  label: "",
+  description: ""
+});
+const isAiWorkflowNode = computed(() => {
+  if (!props.node) return false;
+  const type = props.node.type;
+  return type?.startsWith("ai-");
+});
+const isAiLlmNode = computed(() => props.node?.type === "ai-llm");
+const isAiPromptNode = computed(() => props.node?.type === "ai-prompt");
+const isAiAgentNode = computed(() => props.node?.type === "ai-agent");
+const isAiToolNode = computed(() => props.node?.type === "ai-tool");
+const isAiConditionNode = computed(() => props.node?.type === "ai-condition");
+const isAiMemoryNode = computed(() => props.node?.type === "ai-memory");
+const llmModels = [
+  { value: "gpt-4", label: "GPT-4" },
+  { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
+  { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+  { value: "claude-3-opus", label: "Claude 3 Opus" },
+  { value: "claude-3-sonnet", label: "Claude 3 Sonnet" },
+  { value: "claude-3-haiku", label: "Claude 3 Haiku" }
+];
+const availableTools = [
+  { value: "search", label: "\u{1F50D} \u641C\u7D22" },
+  { value: "calculator", label: "\u{1F9EE} \u8BA1\u7B97\u5668" },
+  { value: "weather", label: "\u{1F324}\uFE0F \u5929\u6C14\u67E5\u8BE2" },
+  { value: "code_interpreter", label: "\u{1F4BB} \u4EE3\u7801\u6267\u884C" },
+  { value: "web_fetch", label: "\u{1F310} \u7F51\u9875\u83B7\u53D6" }
+];
+const memoryTypes = [
+  { value: "short", label: "\u77ED\u671F\u8BB0\u5FC6" },
+  { value: "long", label: "\u957F\u671F\u8BB0\u5FC6" },
+  { value: "session", label: "\u4F1A\u8BDD\u8BB0\u5FC6" }
+];
+watch(
+  () => props.node,
+  (node) => {
+    if (node) {
+      const data = node.data;
+      const displayLabel = data.label || data.title || data.name || data.text || node.id;
+      localNode.value = {
+        label: String(displayLabel),
+        description: data.description || data.desc || "",
+        style: { ...node.style },
+        width: node.width,
+        height: node.height,
+        type: node.type,
+        // AI workflow fields - explicitly cast to correct types
+        model: data?.model || "gpt-4",
+        prompt: data?.prompt || "",
+        temperature: data?.temperature ?? 0.7,
+        maxTokens: data?.maxTokens ?? 2e3,
+        tools: data?.tools || [],
+        toolName: data?.toolName || "",
+        condition: data?.condition || "",
+        memoryType: data?.memoryType || "short",
+        status: data?.status || "pending",
+        streamOutput: data?.streamOutput || ""
+      };
+    }
+  },
+  { immediate: true }
+);
+const updateField = (field, value) => {
+  const updateData = { ...props.node?.data };
+  updateData[field] = value;
+  emit("update", { data: updateData });
+};
+const handleLabelBlur = () => {
+  if (!props.node) return;
+  const data = { ...props.node.data };
+  if ("label" in data || !("title" in data || "name" in data || "text" in data)) {
+    data.label = localNode.value.label;
+  } else if ("title" in data) {
+    data.title = localNode.value.label;
+  } else if ("name" in data) {
+    data.name = localNode.value.label;
+  } else if ("text" in data) {
+    data.text = localNode.value.label;
+  }
+  emit("update", { data });
+};
+const handleModelChange = (event) => {
+  const value = event.target.value;
+  updateField("model", value);
+};
+const handlePromptBlur = () => {
+  updateField("prompt", localNode.value.prompt);
+};
+const handleTemperatureChange = (event) => {
+  const value = parseFloat(event.target.value);
+  updateField("temperature", value);
+};
+const handleMaxTokensChange = (event) => {
+  const value = parseInt(event.target.value);
+  updateField("maxTokens", value);
+};
+const toggleTool = (toolValue) => {
+  const currentTools = localNode.value.tools || [];
+  const newTools = currentTools.includes(toolValue) ? currentTools.filter((t) => t !== toolValue) : [...currentTools, toolValue];
+  localNode.value.tools = newTools;
+  updateField("tools", newTools);
+};
+const handleToolNameBlur = () => {
+  updateField("toolName", localNode.value.toolName);
+};
+const handleConditionBlur = () => {
+  updateField("condition", localNode.value.condition);
+};
+const handleMemoryTypeChange = (event) => {
+  const value = event.target.value;
+  updateField("memoryType", value);
+};
+const handleClose = () => {
+  emit("close");
+};
+const updateStyle = (key, value) => {
+  const newStyle = { ...props.node?.style, [key]: value };
+  emit("update", { style: newStyle });
+};
+const updateSize = () => {
+  emit("update", {
+    width: localNode.value.width,
+    height: localNode.value.height
+  });
+};
+const colors = [
+  "#fff",
+  "#f8f9fa",
+  "#e9ecef",
+  "#dee2e6",
+  "#ced4da",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6"
+];
+const borderColors = [
+  "#ddd",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#ec4899",
+  "#06b6d4"
+];
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="slide-fade">
+      <div v-if="visible && node" class="ai-node-edit-panel">
+        <div class="panel-header">
+          <span class="panel-title">
+            <span v-if="isAiLlmNode">🧠 LLM 配置</span>
+            <span v-else-if="isAiPromptNode">💬 提示词配置</span>
+            <span v-else-if="isAiAgentNode">🤖 Agent 配置</span>
+            <span v-else-if="isAiToolNode">🔧 工具配置</span>
+            <span v-else-if="isAiConditionNode">🔀 条件配置</span>
+            <span v-else-if="isAiMemoryNode">💾 记忆配置</span>
+            <span v-else>编辑节点</span>
+          </span>
+          <button class="close-btn" @click="handleClose">×</button>
+        </div>
+
+        <div class="panel-content">
+          <!-- 通用字段 -->
+          <div class="form-group">
+            <label>标签</label>
+            <input
+              v-model="localNode.label"
+              type="text"
+              placeholder="节点标签"
+              @blur="handleLabelBlur"
+              @keyup.enter="handleLabelBlur"
+            />
+          </div>
+
+          <!-- LLM 节点配置 -->
+          <template v-if="isAiLlmNode">
+            <div class="form-group">
+              <label>模型</label>
+              <select :value="localNode.model" class="form-select" @change="handleModelChange">
+                <option v-for="model in llmModels" :key="model.value" :value="model.value">
+                  {{ model.label }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label>Temperature ({{ localNode.temperature }})</label>
+              <input
+                :value="localNode.temperature"
+                type="range"
+                min="0"
+                max="2"
+                step="0.1"
+                @input="handleTemperatureChange"
+              />
+              <div class="range-labels">
+                <span>精确</span>
+                <span>创意</span>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>Max Tokens</label>
+              <input
+                :value="localNode.maxTokens"
+                type="number"
+                min="100"
+                max="32000"
+                @change="handleMaxTokensChange"
+              />
+            </div>
+
+            <div class="form-group">
+              <label>状态</label>
+              <div class="status-badges">
+                <span
+                  class="status-badge"
+                  :class="{
+  active: localNode.status === 'pending',
+  'status-pending': true
+}"
+                  >○ 待运行</span
+                >
+                <span
+                  class="status-badge"
+                  :class="{
+  active: localNode.status === 'running',
+  'status-running': true
+}"
+                  >● 运行中</span
+                >
+                <span
+                  class="status-badge"
+                  :class="{
+  active: localNode.status === 'success',
+  'status-success': true
+}"
+                  >✓ 成功</span
+                >
+                <span
+                  class="status-badge"
+                  :class="{
+  active: localNode.status === 'error',
+  'status-error': true
+}"
+                  >✗ 错误</span
+                >
+              </div>
+            </div>
+
+            <!-- 流式输出预览 -->
+            <div class="form-group" v-if="localNode.status === 'running'">
+              <label>流式输出</label>
+              <div class="stream-preview">
+                <span class="streaming-cursor">▊</span>
+                <span class="stream-text">{{ localNode.streamOutput || "\u6B63\u5728\u751F\u6210..." }}</span>
+              </div>
+            </div>
+          </template>
+
+          <!-- 提示词节点配置 -->
+          <template v-if="isAiPromptNode">
+            <div class="form-group">
+              <label>提示词内容</label>
+              <textarea
+                v-model="localNode.prompt"
+                placeholder="输入提示词模板，可以使用 &#123;&#123;variable&#125;&#125; 语法"
+                rows="6"
+                @blur="handlePromptBlur"
+              />
+              <div class="form-hint">支持 &#123;&#123;variable&#125;&#125; 变量语法</div>
+            </div>
+          </template>
+
+          <!-- Agent 节点配置 -->
+          <template v-if="isAiAgentNode">
+            <div class="form-group">
+              <label>选择工具</label>
+              <div class="tools-checkboxes">
+                <label v-for="tool in availableTools" :key="tool.value" class="tool-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="localNode.tools?.includes(tool.value)"
+                    @change="toggleTool(tool.value)"
+                  />
+                  <span>{{ tool.label }}</span>
+                </label>
+              </div>
+            </div>
+          </template>
+
+          <!-- 工具节点配置 -->
+          <template v-if="isAiToolNode">
+            <div class="form-group">
+              <label>工具名称</label>
+              <input
+                v-model="localNode.toolName"
+                type="text"
+                placeholder="输入工具名称"
+                @blur="handleToolNameBlur"
+              />
+            </div>
+          </template>
+
+          <!-- 条件节点配置 -->
+          <template v-if="isAiConditionNode">
+            <div class="form-group">
+              <label>条件表达式</label>
+              <input
+                v-model="localNode.condition"
+                type="text"
+                placeholder="例如: score > 60"
+                @blur="handleConditionBlur"
+              />
+              <div class="form-hint">满足条件走下方输出，不满足走右侧输出</div>
+            </div>
+          </template>
+
+          <!-- 记忆节点配置 -->
+          <template v-if="isAiMemoryNode">
+            <div class="form-group">
+              <label>记忆类型</label>
+              <select
+                :value="localNode.memoryType"
+                class="form-select"
+                @change="handleMemoryTypeChange"
+              >
+                <option v-for="mem in memoryTypes" :key="mem.value" :value="mem.value">
+                  {{ mem.label }}
+                </option>
+              </select>
+            </div>
+          </template>
+
+          <!-- 通用样式配置 -->
+          <template v-if="!isAiWorkflowNode">
+            <div class="form-group">
+              <label>尺寸</label>
+              <div class="size-inputs">
+                <input
+                  v-model.number="localNode.width"
+                  type="number"
+                  min="50"
+                  max="800"
+                  @blur="updateSize"
+                />
+                <span>×</span>
+                <input
+                  v-model.number="localNode.height"
+                  type="number"
+                  min="30"
+                  max="600"
+                  @blur="updateSize"
+                />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>背景色</label>
+              <div class="color-picker">
+                <button
+                  v-for="color in colors"
+                  :key="color"
+                  class="color-swatch"
+                  :class="{
+  active: node.style?.backgroundColor === color
+}"
+                  :style="{
+  backgroundColor: color
+}"
+                  @click="updateStyle('backgroundColor', color)"
+                />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>边框颜色</label>
+              <div class="color-picker">
+                <button
+                  v-for="color in borderColors"
+                  :key="color"
+                  class="color-swatch"
+                  :style="{
+  backgroundColor: color
+}"
+                  @click="updateStyle('border', `1px solid ${color}`)"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ai-node-edit-panel{background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);position:fixed;right:20px;top:100px;width:320px;z-index:1000}.panel-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #eee;border-radius:12px 12px 0 0;color:#fff;display:flex;justify-content:space-between;padding:14px 18px}.panel-title{font-size:14px;font-weight:600}.close-btn{background:hsla(0,0%,100%,.2);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:18px;line-height:1;padding:4px 8px}.close-btn:hover{background:hsla(0,0%,100%,.3)}.panel-content{max-height:70vh;overflow-y:auto;padding:18px}.form-group{margin-bottom:18px}.form-group label{color:#374151;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.form-group input[type=number],.form-group input[type=text],.form-group textarea,.form-select{border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;font-size:13px;padding:10px 12px;transition:border-color .2s,box-shadow .2s;width:100%}.form-group input:focus,.form-group textarea:focus,.form-select:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.1);outline:none}.form-group textarea{font-family:Monaco,Consolas,monospace;resize:vertical}.form-hint{color:#9ca3af;font-size:11px;margin-top:4px}.form-group input[type=range]{width:100%}.range-labels{color:#9ca3af;display:flex;font-size:11px;justify-content:space-between;margin-top:4px}.status-badges{display:flex;flex-wrap:wrap;gap:8px}.status-badge{border-radius:12px;cursor:pointer;font-size:12px;opacity:.5;padding:4px 10px;transition:all .2s}.status-badge.active{opacity:1}.status-badge.status-pending{background:#f3f4f6;color:#6b7280}.status-badge.status-running{background:#fef3c7;color:#d97706}.status-badge.status-success{background:#d1fae5;color:#059669}.status-badge.status-error{background:#fee2e2;color:#dc2626}.stream-preview{background:#1f2937;border-radius:6px;color:#10b981;font-family:monospace;font-size:12px;min-height:60px;padding:12px}.streaming-cursor{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.tools-checkboxes{display:flex;flex-direction:column;gap:8px}.tool-checkbox{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:8px}.tool-checkbox input{width:auto}.size-inputs{align-items:center;display:flex;gap:8px}.size-inputs input{flex:1}.size-inputs span{color:#9ca3af}.color-picker{display:flex;flex-wrap:wrap;gap:6px}.color-swatch{border:2px solid transparent;border-radius:6px;cursor:pointer;height:28px;padding:0;transition:transform .2s;width:28px}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#8b5cf6}.slide-fade-enter-active,.slide-fade-leave-active{transition:all .3s ease}.slide-fade-enter-from,.slide-fade-leave-to{opacity:0;transform:translateX(20px)}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Node, NodeData } from '../types';
+type __VLS_Props = {
+    node: Node | null;
+    visible: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (node: Partial<Node<NodeData>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((node: Partial<Node<NodeData>>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { Edge, EdgeTypes } from '../types';
+type __VLS_Props = {
+    edge: Edge | null;
+    visible: boolean;
+    edgeTypes?: EdgeTypes;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (edge: Partial<Edge<import("../types").EdgeData>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((edge: Partial<Edge<import("../types").EdgeData>>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/EdgeEditPanel.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { getAllCustomEdges, getAllEdgeTemplates } from "../utils/custom-types";
+const props = defineProps({
+  edge: { type: [Object, null], required: true },
+  visible: { type: Boolean, required: true },
+  edgeTypes: { type: Object, required: false }
+});
+const emit = defineEmits(["update", "close"]);
+const localEdge = ref({});
+watch(
+  () => props.edge,
+  (edge) => {
+    if (edge) {
+      localEdge.value = {
+        label: edge.label || "",
+        type: edge.type || "bezier",
+        animated: edge.animated || false,
+        style: { ...edge.style },
+        labelStyle: { ...edge.labelStyle },
+        labelColor: edge.labelColor || "#000000",
+        labelShowBg: !!edge.labelShowBg,
+        labelBgColor: edge.labelBgColor || "#ffffff"
+      };
+    }
+  },
+  { immediate: true }
+);
+const updateLabel = () => {
+  emit("update", { label: localEdge.value.label });
+};
+const updateType = () => {
+  emit("update", { type: localEdge.value.type });
+};
+const updateAnimated = () => {
+  emit("update", { animated: localEdge.value.animated });
+};
+const updateStyle = (key, value) => {
+  const newStyle = { ...props.edge?.style, [key]: value };
+  emit("update", { style: newStyle });
+};
+const updateLabelColor = (color) => {
+  localEdge.value.labelColor = color;
+  emit("update", { labelColor: color });
+};
+const updateLabelBg = (color) => {
+  if (color === null) {
+    localEdge.value.labelShowBg = false;
+    emit("update", { labelShowBg: false });
+  } else {
+    localEdge.value.labelShowBg = true;
+    localEdge.value.labelBgColor = color;
+    emit("update", { labelShowBg: true, labelBgColor: color });
+  }
+};
+const handleClose = () => {
+  emit("close");
+};
+const handleStrokeWidth = (event) => {
+  const value = parseFloat(event.target.value);
+  updateStyle("strokeWidth", value);
+};
+const allEdgeTypes = computed(() => {
+  const typeMap = /* @__PURE__ */ new Map();
+  const presets = [
+    { value: "bezier", label: "\u8D1D\u585E\u5C14\u66F2\u7EBF" },
+    { value: "smoothstep", label: "\u5E73\u6ED1\u9636\u68AF" },
+    { value: "step", label: "\u9636\u68AF" },
+    { value: "straight", label: "\u76F4\u7EBF" }
+  ];
+  presets.forEach((p) => typeMap.set(p.value, p));
+  getAllCustomEdges().forEach((e) => {
+    if (!typeMap.has(e.type)) {
+      typeMap.set(e.type, { value: e.type, label: e.label || `\u81EA\u5B9A\u4E49: ${e.type}` });
+    }
+  });
+  getAllEdgeTemplates().forEach((t) => {
+    if (!typeMap.has(t.type)) {
+      typeMap.set(t.type, { value: t.type, label: t.label || `\u6A21\u677F: ${t.type}` });
+    }
+  });
+  if (props.edgeTypes) {
+    Object.keys(props.edgeTypes).forEach((type) => {
+      if (!typeMap.has(type)) {
+        typeMap.set(type, { value: type, label: `\u5C40\u90E8\u7EC4\u4EF6: ${type}` });
+      }
+    });
+  }
+  if (props.edge?.type && !typeMap.has(props.edge.type)) {
+    typeMap.set(props.edge.type, { value: props.edge.type, label: `\u672A\u77E5\u7C7B\u578B: ${props.edge.type}` });
+  }
+  return Array.from(typeMap.values());
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="slide-fade">
+      <div v-if="visible && edge" class="edge-edit-panel">
+        <div class="panel-header">
+          <span class="panel-title">编辑连线</span>
+          <button class="close-btn" @click="handleClose">×</button>
+        </div>
+
+        <div class="panel-content">
+          <div class="form-group">
+            <label>标签</label>
+            <input
+              v-model="localEdge.label"
+              type="text"
+              placeholder="连线标签"
+              @blur="updateLabel"
+              @keyup.enter="updateLabel"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>连线类型</label>
+            <select v-model="localEdge.type" @change="updateType">
+              <option v-for="t in allEdgeTypes" :key="t.value" :value="t.value">
+                {{ t.label }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label class="checkbox-label">
+              <input v-model="localEdge.animated" type="checkbox" @change="updateAnimated" />
+              动画连线
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label>线条颜色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="edge.style?.stroke || '#b1b1b7'"
+                class="modern-color-picker"
+                @input="e => updateStyle('stroke', e.target.value)"
+              />
+              <span class="color-value">{{ edge.style?.stroke || "#b1b1b7" }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>线条宽度</label>
+            <input
+              :value="edge.style?.strokeWidth || 1.5"
+              type="range"
+              min="1"
+              max="6"
+              step="0.5"
+              @input="handleStrokeWidth"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>标签文字颜色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="localEdge.labelColor"
+                class="modern-color-picker"
+                @input="e => updateLabelColor(e.target.value)"
+              />
+              <span class="color-value">{{ localEdge.labelColor }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>标签背景颜色</label>
+            <div class="color-picker-row">
+              <button
+                class="color-swatch none-swatch"
+                :class="{
+  active: !localEdge.labelShowBg
+}"
+                @click="updateLabelBg(null)"
+              >
+                ×
+              </button>
+              <template v-if="localEdge.labelShowBg">
+                <input
+                  type="color"
+                  v-model="localEdge.labelBgColor"
+                  class="modern-color-picker"
+                  @input="updateLabelBg(localEdge.labelBgColor || '#ffffff')"
+                />
+                <span class="color-value">{{ localEdge.labelBgColor }}</span>
+              </template>
+              <button v-else class="add-bg-btn" @click="updateLabelBg('#ffffff')">
+                启用背景
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.edge-edit-panel{background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);position:fixed;right:20px;top:100px;width:280px;z-index:1000}.panel-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:12px 16px}.panel-title{color:#333;font-size:14px;font-weight:600}.close-btn{background:none;border:none;color:#999;cursor:pointer;font-size:20px;line-height:1;padding:0}.close-btn:hover{color:#333}.panel-content{max-height:70vh;overflow-y:auto;padding:16px}.form-group{margin-bottom:16px}.form-group label{color:#666;display:block;font-size:12px;margin-bottom:6px}.form-group input[type=text],.form-group select{border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:13px;padding:8px 10px;width:100%}.form-group input:focus,.form-group select:focus{border-color:#3b82f6;outline:none}.checkbox-label{align-items:center;cursor:pointer;display:flex!important;gap:8px}.checkbox-label input[type=checkbox]{width:auto}.color-picker-row{align-items:center;display:flex;gap:12px}.modern-color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;height:36px;padding:0;width:36px}.modern-color-picker::-webkit-color-swatch{border:1px solid #e2e8f0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.modern-color-picker::-moz-color-swatch{border:1px solid #e2e8f0;border-radius:6px}.color-value{color:#64748b;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;text-transform:uppercase}.add-bg-btn{background:#fff;border:1px solid #3b82f6;border-radius:4px;color:#3b82f6;cursor:pointer;font-size:12px;padding:6px 12px;transition:all .2s}.add-bg-btn:hover{background:#eff6ff;border-color:#2563eb;color:#2563eb}.color-swatch{border:2px solid transparent;border-radius:4px;cursor:pointer;height:32px;padding:0;width:32px}.color-swatch.active{border-color:#3b82f6!important;box-shadow:0 0 0 2px rgba(59,130,246,.3)}.none-swatch{align-items:center;background:#f8f9fa;border:1px dashed #ccc!important;color:#999;display:flex;font-size:16px;font-weight:700;justify-content:center}.form-group input[type=range]{width:100%}.form-group input[type=color]{border:1px solid #ddd;border-radius:4px;cursor:pointer;height:32px;padding:2px;width:100%}.slide-fade-enter-active,.slide-fade-leave-active{transition:all .3s ease}.slide-fade-enter-from,.slide-fade-leave-to{opacity:0;transform:translateX(20px)}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Edge, EdgeTypes } from '../types';
+type __VLS_Props = {
+    edge: Edge | null;
+    visible: boolean;
+    edgeTypes?: EdgeTypes;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (edge: Partial<Edge<import("../types").EdgeData>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((edge: Partial<Edge<import("../types").EdgeData>>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { Node, NodeData } from '../types';
+type __VLS_Props = {
+    node: Node | null;
+    visible: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (node: Partial<Node<NodeData>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((node: Partial<Node<NodeData>>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;