@yh-ui/flow 0.1.21

package/dist/renderer/Background.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="yh-flow-background" :style="backgroundStyle">
+    <canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { useFlowContext } from "../core/FlowContext";
+const props = defineProps({
+  type: { type: String, required: false },
+  color: { type: String, required: false },
+  gap: { type: Number, required: false }
+});
+const canvasRef = ref();
+const canvasWidth = ref(2e3);
+const canvasHeight = ref(2e3);
+const flowInstance = useFlowContext();
+const viewport = flowInstance.viewport;
+const backgroundStyle = computed(() => ({
+  backgroundColor: "var(--flow-background-color, #f8f9fa)"
+}));
+const drawBackground = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const rootStyles = getComputedStyle(canvas);
+  const themeGridColor = rootStyles.getPropertyValue("--flow-grid-color").trim();
+  const type = props.type || "dots";
+  const color = props.color || themeGridColor || (type === "dots" ? "#b1b1b7" : "#e5e7eb");
+  const gap = props.gap || 20;
+  const zoom = viewport.value.zoom;
+  const offset = { x: viewport.value.x, y: viewport.value.y };
+  const container = flowInstance.$el;
+  if (container) {
+    const w = container.clientWidth || 2e3;
+    const h = container.clientHeight || 2e3;
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      canvasWidth.value = w;
+      canvasHeight.value = h;
+    }
+  }
+  const width = canvas.width;
+  const height = canvas.height;
+  ctx.clearRect(0, 0, width, height);
+  const scaledGap = gap * zoom;
+  const offsetX = offset.x % scaledGap;
+  const offsetY = offset.y % scaledGap;
+  if (type === "dots") {
+    ctx.fillStyle = color;
+    for (let x = offsetX; x < width; x += scaledGap) {
+      for (let y = offsetY; y < height; y += scaledGap) {
+        ctx.beginPath();
+        ctx.arc(x, y, 0.7 * zoom, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  } else if (type === "grid") {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 0.5;
+    for (let x = offsetX; x < width; x += scaledGap) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, height);
+      ctx.stroke();
+    }
+    for (let y = offsetY; y < height; y += scaledGap) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+  }
+};
+onMounted(drawBackground);
+watch([viewport, () => props.type, () => props.color, () => props.gap], drawBackground, {
+  deep: true
+});
+</script>
+
+<style scoped>
+.yh-flow-background{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}.yh-flow-background canvas{display:block}
+</style>

package/dist/renderer/Background.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    type?: 'dots' | 'grid' | 'none';
+    color?: string;
+    gap?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/Controls.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showInteractive?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    showZoom: boolean;
+    showFitView: boolean;
+    showInteractive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/Controls.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="yh-flow-controls" :class="[position]">
+    <button v-if="showZoom" class="yh-flow-controls__btn" :title="t('flow.zoomIn')" @click="zoomIn">
+      <svg viewBox="0 0 24 24" width="16" height="16">
+        <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+      </svg>
+    </button>
+    <button
+      v-if="showZoom"
+      class="yh-flow-controls__btn"
+      :title="t('flow.zoomOut')"
+      @click="zoomOut"
+    >
+      <svg viewBox="0 0 24 24" width="16" height="16">
+        <path fill="currentColor" d="M19 13H5v-2h14v2z" />
+      </svg>
+    </button>
+    <div v-if="showZoom && showFitView" class="yh-flow-controls__divider" />
+    <button
+      v-if="showFitView"
+      class="yh-flow-controls__btn"
+      :title="t('flow.fitView')"
+      @click="handleFitView"
+    >
+      <svg viewBox="0 0 24 24" width="16" height="16">
+        <path
+          fill="currentColor"
+          d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"
+        />
+      </svg>
+    </button>
+    <button
+      v-if="showInteractive"
+      class="yh-flow-controls__btn"
+      :title="t('flow.lock')"
+      @click="toggleLock"
+      :class="{
+  'is-active': isLocked
+}"
+    >
+      <svg v-if="isLocked" viewBox="0 0 24 24" width="16" height="16">
+        <path
+          fill="currentColor"
+          d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+        />
+      </svg>
+      <svg v-else viewBox="0 0 24 24" width="16" height="16">
+        <path
+          fill="currentColor"
+          d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useLocale } from "@yh-ui/hooks";
+import { useFlowContext } from "../core/FlowContext";
+defineProps({
+  position: { type: String, required: false, default: "bottom-right" },
+  showZoom: { type: Boolean, required: false, default: true },
+  showFitView: { type: Boolean, required: false, default: true },
+  showInteractive: { type: Boolean, required: false, default: true }
+});
+const { t } = useLocale();
+const flowInstance = useFlowContext();
+const isLocked = computed(() => flowInstance.isLocked?.value || false);
+const zoomIn = () => flowInstance.zoomIn();
+const zoomOut = () => flowInstance.zoomOut();
+const handleFitView = () => flowInstance.fitView();
+const toggleLock = () => {
+  if (flowInstance.setInteractive) {
+    flowInstance.setInteractive(isLocked.value);
+  }
+};
+</script>
+
+<style scoped>
+.yh-flow-controls{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.75);border:1px solid rgba(0,0,0,.08);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.08);display:flex;gap:4px;padding:5px;position:absolute;z-index:10}.yh-flow-controls.bottom-right{bottom:16px;right:16px}.yh-flow-controls.top-right{right:16px;top:16px}.yh-flow-controls.bottom-left{bottom:16px;left:16px}.yh-flow-controls.top-left{left:16px;top:16px}.yh-flow-controls__btn{align-items:center;background:transparent;border:none;border-radius:8px;color:#4b5563;cursor:pointer;display:flex;height:30px;justify-content:center;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);width:30px}.yh-flow-controls__btn:hover{background:rgba(0,0,0,.05);color:#111827;transform:translateY(-1px)}.yh-flow-controls__btn.is-active{background:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.4);color:#fff}.yh-flow-controls__divider{background:rgba(0,0,0,.1);height:18px;margin:0 2px;width:1px}
+</style>

package/dist/renderer/Controls.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showInteractive?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    showZoom: boolean;
+    showFitView: boolean;
+    showInteractive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/EdgeHandlesRenderer.d.vue.ts

@@ -0,0 +1,11 @@
+import type { Edge, Node, HandleType } from '../types';
+type __VLS_Props = {
+    edges: Edge[];
+    nodes: Node[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "edge-update-start": (event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onEdge-update-start"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/EdgeHandlesRenderer.vue

@@ -0,0 +1,75 @@
+<template>
+  <svg
+    class="yh-flow-edge-handles"
+    style="
+      overflow: visible;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 10;
+    "
+  >
+    <g v-for="ed in selectedUpdatableEdges" :key="ed.edge.id">
+      <!-- Source Handle with interaction overlay -->
+      <g
+        v-if="ed.edge.updatable === true || ed.edge.updatable === 'source'"
+        class="yh-flow-edge-handle-group"
+        style="cursor: crosshair; pointer-events: auto"
+        @mousedown.stop="emit('edge-update-start', $event, ed.edge, 'source')"
+      >
+        <circle :cx="ed.sourceX" :cy="ed.sourceY" r="10" fill="transparent" />
+        <circle :cx="ed.sourceX" :cy="ed.sourceY" r="4" fill="#3b82f6" />
+      </g>
+      <!-- Target Handle with interaction overlay -->
+      <g
+        v-if="ed.edge.updatable === true || ed.edge.updatable === 'target'"
+        class="yh-flow-edge-handle-group"
+        style="cursor: crosshair; pointer-events: auto"
+        @mousedown.stop="emit('edge-update-start', $event, ed.edge, 'target')"
+      >
+        <circle :cx="ed.targetX" :cy="ed.targetY" r="10" fill="transparent" />
+        <circle :cx="ed.targetX" :cy="ed.targetY" r="4" fill="#1a192b" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { getHandlePosition } from "../utils/edge";
+const props = defineProps({
+  edges: { type: Array, required: true },
+  nodes: { type: Array, required: true }
+});
+const emit = defineEmits(["edge-update-start"]);
+const nodeMap = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  props.nodes.forEach((n) => m.set(n.id, n));
+  return m;
+});
+const selectedUpdatableEdges = computed(() => {
+  const result = [];
+  for (const edge of props.edges) {
+    if (edge && edge.selected && edge.updatable) {
+      const sourceNode = nodeMap.value.get(edge.source);
+      const targetNode = nodeMap.value.get(edge.target);
+      if (!sourceNode || !targetNode) continue;
+      const sPosDesc = edge.sourceHandle || "right";
+      const tPosDesc = edge.targetHandle || "left";
+      const sPos = getHandlePosition(sourceNode, sPosDesc, edge.sourceHandle);
+      const tPos = getHandlePosition(targetNode, tPosDesc, edge.targetHandle);
+      result.push({
+        edge,
+        sourceX: sPos.x,
+        sourceY: sPos.y,
+        targetX: tPos.x,
+        targetY: tPos.y
+      });
+    }
+  }
+  return result;
+});
+</script>

package/dist/renderer/EdgeHandlesRenderer.vue.d.ts

@@ -0,0 +1,11 @@
+import type { Edge, Node, HandleType } from '../types';
+type __VLS_Props = {
+    edges: Edge[];
+    nodes: Node[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "edge-update-start": (event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onEdge-update-start"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/EdgeRenderer.d.vue.ts

@@ -0,0 +1,39 @@
+import type { Edge, Node, HandleType, EdgeTypes } from '../types';
+type __VLS_Props = {
+    edges: Edge[];
+    nodes: Node[];
+    edgeTypes?: EdgeTypes;
+    transform?: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    connectingEdge?: {
+        path: string;
+        tx: number;
+        ty: number;
+    } | null;
+    updatingEdgeId?: string | null;
+};
+declare var __VLS_1: any;
+type __VLS_Slots = {} & {
+    edge?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "edge-click": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-dblclick": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-contextmenu": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-update-start": (event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onEdge-click"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-dblclick"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-contextmenu"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-update-start"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/renderer/EdgeRenderer.vue

@@ -0,0 +1,204 @@
+<template>
+  <svg
+    class="yh-flow-edges"
+    style="
+      overflow: visible;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 5;
+    "
+  >
+    <defs>
+      <!-- Dynamic masks to create a true gap in the line behind the label -->
+      <mask
+        v-for="ed in edgeData"
+        :key="`mask-${ed.edge.id}`"
+        :id="`yh-mask-${ed.edge.id.replace(/\s/g, '')}`"
+      >
+        <rect x="-5000" y="-5000" width="10000" height="10000" fill="white" />
+        <rect
+          :x="ed.labelX - ed.labelWidth / 2 - 4"
+          :y="ed.labelY - 10"
+          :width="ed.labelWidth + 8"
+          height="20"
+          fill="black"
+        />
+      </mask>
+    </defs>
+    <g
+      v-for="ed in edgeData"
+      :key="ed.edge.id"
+      class="yh-flow-edge-group"
+      :class="{
+  'is-selected': ed.edge.selected,
+  'is-animated': ed.edge.animated
+}"
+      :data-edge-id="ed.edge.id"
+      :style="{
+  color: ed.stroke,
+  pointerEvents: 'auto',
+  cursor: 'pointer',
+  '--stroke-width': ed.strokeWidth + 'px'
+}"
+      @click.stop="emit('edge-click', $event, ed.edge)"
+      @dblclick.stop="emit('edge-dblclick', $event, ed.edge)"
+      @contextmenu.stop.prevent="emit('edge-contextmenu', $event, ed.edge)"
+    >
+      <slot name="edge" v-bind="ed">
+        <!-- Automatic Custom Edge Component -->
+        <component
+          v-if="getComponent(ed.edge.type || 'default')"
+          :is="getComponent(ed.edge.type || 'default')"
+          v-bind="ed"
+        />
+        <template v-else>
+          <!-- Interaction Path (Hitbox) -->
+          <path
+            :d="ed.path"
+            stroke="transparent"
+            stroke-width="20"
+            fill="none"
+            style="cursor: pointer; pointer-events: all"
+          />
+
+          <!-- Visible Path -->
+          <path
+            :d="ed.path"
+            :stroke="ed.stroke"
+            :stroke-width="ed.strokeWidth"
+            fill="none"
+            :class="{
+  'yh-flow-edge-path': true,
+  'is-animated': ed.edge.animated
+}"
+            :mask="ed.edge.label ? `url(#yh-mask-${ed.edge.id.replace(/\s/g, '')})` : void 0"
+            :style="{
+  pointerEvents: 'none',
+  transition: 'stroke 0.2s, stroke-width 0.2s',
+  stroke: ed.stroke
+}"
+          />
+
+          <!-- Default Label -->
+          <foreignObject
+            v-if="ed.edge.label"
+            :x="ed.labelX - 75"
+            :y="ed.labelY - 15"
+            width="150"
+            height="30"
+            style="pointer-events: auto"
+          >
+            <div
+              style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+            >
+              <div class="yh-flow-edge-label" :style="getLabelStyle(ed.edge)">{{
+                ed.edge.label
+              }}</div>
+            </div>
+          </foreignObject>
+        </template>
+      </slot>
+    </g>
+  </svg>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { getEdgePath, getEdgeCenter, getHandlePosition } from "../utils/edge";
+import { getCustomEdge } from "../utils/custom-types";
+const props = defineProps({
+  edges: { type: Array, required: true },
+  nodes: { type: Array, required: true },
+  edgeTypes: { type: Object, required: false },
+  transform: { type: Object, required: false },
+  connectingEdge: { type: [Object, null], required: false },
+  updatingEdgeId: { type: [String, null], required: false }
+});
+const getComponent = (type) => {
+  if (props.edgeTypes && props.edgeTypes[type]) {
+    return props.edgeTypes[type];
+  }
+  return getCustomEdge(type || "default")?.component;
+};
+const emit = defineEmits(["edge-click", "edge-dblclick", "edge-contextmenu", "edge-update-start"]);
+const nodeMap = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  props.nodes.forEach((n) => m.set(n.id, n));
+  return m;
+});
+const getLabelStyle = (edge) => {
+  if (!edge) return {};
+  const styles = {
+    color: edge.labelColor || "var(--flow-edge-label-color, #000)",
+    ...edge.labelStyle
+  };
+  if (edge.labelShowBg === true) {
+    styles.backgroundColor = edge.labelBgColor || "var(--flow-edge-label-background, #f1f5f9)";
+    styles.padding = "0 6px";
+    styles.borderRadius = "2px";
+    styles.border = "1px solid var(--flow-edge-stroke, #ddd)";
+  } else {
+    styles.backgroundColor = "transparent";
+  }
+  return styles;
+};
+const edgeData = computed(() => {
+  const result = [];
+  for (const edge of props.edges) {
+    if (!edge || edge.hidden) continue;
+    if (props.updatingEdgeId && edge.id === props.updatingEdgeId) continue;
+    const sourceNode = nodeMap.value.get(edge.source);
+    const targetNode = nodeMap.value.get(edge.target);
+    if (!sourceNode || !targetNode) continue;
+    const sPosDesc = edge.sourceHandle || "right";
+    const tPosDesc = edge.targetHandle || "left";
+    const sPos = getHandlePosition(sourceNode, sPosDesc, edge.sourceHandle);
+    const tPos = getHandlePosition(targetNode, tPosDesc, edge.targetHandle);
+    const pathParams = {
+      sourceX: sPos.x,
+      sourceY: sPos.y,
+      targetX: tPos.x,
+      targetY: tPos.y,
+      sourcePosition: sPosDesc,
+      targetPosition: tPosDesc
+    };
+    const type = edge.type || "bezier";
+    const path = getEdgePath(type, pathParams);
+    const center = getEdgeCenter({ ...pathParams, type });
+    const labelText = edge.label || "";
+    const strippedLabel = labelText.replace(/<[^>]*>/g, "");
+    const labelWidth = Math.min(strippedLabel.length * 7, 120);
+    const stroke = edge.style?.stroke || (edge.selected ? "var(--flow-edge-selected-stroke, #3b82f6)" : "var(--flow-edge-stroke, #b1b1b7)");
+    const strokeWidth = edge.style?.strokeWidth ?? 1.5;
+    result.push({
+      edge,
+      style: edge.style,
+      path,
+      sourceX: sPos.x,
+      sourceY: sPos.y,
+      targetX: tPos.x,
+      targetY: tPos.y,
+      labelX: center.x,
+      labelY: center.y,
+      labelWidth,
+      stroke,
+      strokeWidth
+    });
+  }
+  return result;
+});
+</script>
+
+<style scoped>
+.yh-flow-edge-label{align-items:center;color:var(--flow-edge-label-color,#000);cursor:pointer;display:inline-flex;font-family:Courier New,Courier,monospace;font-size:11px;font-weight:400;height:100%;justify-content:center;max-width:120px;overflow:hidden;padding:0 4px;pointer-events:auto;text-overflow:ellipsis;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.yh-flow-edge-label:hover{color:var(--flow-edge-selected-stroke,#3b82f6);font-weight:600}.yh-flow-edge-group:hover .yh-flow-edge-path{stroke-width:2.5}.is-animated{animation:dash 1s linear infinite;stroke-dasharray:5}@keyframes dash{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}.yh-flow-edge-group .yh-flow-edge-path{transition:stroke .2s,stroke-width .2s,filter .2s}.yh-flow-edge-group.is-selected .yh-flow-edge-path{filter:drop-shadow(0 0 2px rgba(59,130,246,.4));stroke:var(--flow-edge-selected-stroke,#3b82f6);stroke-width:calc(var(--stroke-width, 1.5px)*1.5 + 1px)!important}
+</style>

package/dist/renderer/EdgeRenderer.vue.d.ts

@@ -0,0 +1,39 @@
+import type { Edge, Node, HandleType, EdgeTypes } from '../types';
+type __VLS_Props = {
+    edges: Edge[];
+    nodes: Node[];
+    edgeTypes?: EdgeTypes;
+    transform?: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    connectingEdge?: {
+        path: string;
+        tx: number;
+        ty: number;
+    } | null;
+    updatingEdgeId?: string | null;
+};
+declare var __VLS_1: any;
+type __VLS_Slots = {} & {
+    edge?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "edge-click": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-dblclick": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-contextmenu": (event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any;
+    "edge-update-start": (event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onEdge-click"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-dblclick"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-contextmenu"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>) => any) | undefined;
+    "onEdge-update-start"?: ((event: MouseEvent, edge: Edge<import("../types").EdgeData>, handleType: HandleType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/renderer/FlowBackground.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ViewportTransform } from '../types';
+type __VLS_Props = {
+    type?: 'dots' | 'grid';
+    color?: string;
+    gap?: number;
+};
+declare function updateViewport(t: ViewportTransform): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    updateViewport: typeof updateViewport;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;