@redvars/peacock 3.8.6 → 3.9.1

package/dist/flow.js

@@ -0,0 +1,762 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b, A, w } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  --flow-background: var(--color-surface-container-lowest, #f4f5f8);
+  --flow-dot-color: var(--color-outline-variant, #e1e3e8);
+  --flow-line-color: var(--color-outline, #75777c);
+  --flow-hover-color: var(--color-primary, #005FAF);
+  --flow-node-bg: var(--color-surface-container-low, #f8f9fc);
+  --flow-node-border: var(--color-outline-variant, #c5c6cb);
+  --flow-node-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  --flow-node-active-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.flow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--flow-background);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: 16px;
+  overflow: auto;
+}
+
+.flow-workspace {
+  position: relative;
+}
+
+.flow-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+#dot-grid circle {
+  fill: var(--flow-dot-color);
+}
+
+.flow-edge {
+  transition: stroke 150ms ease, stroke-width 150ms ease;
+  pointer-events: stroke;
+  cursor: pointer;
+}
+.flow-edge:hover {
+  stroke: var(--flow-hover-color);
+  stroke-width: 3;
+}
+.flow-edge.variant-dashed {
+  stroke-dasharray: 5 5;
+}
+.flow-edge.variant-animated-dashed {
+  stroke-dasharray: 5 5;
+  animation: flow-dash-flow 1s linear infinite;
+}
+
+.flow-edge-preview {
+  stroke-dasharray: 5 5;
+  animation: flow-dash-flow 1s linear infinite;
+  pointer-events: none;
+}
+
+.flow-nodes {
+  pointer-events: none;
+}
+.flow-nodes > * {
+  pointer-events: auto;
+}
+
+.flow-node {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--flow-node-bg);
+  border: 1px solid var(--flow-node-border);
+  box-shadow: var(--flow-node-shadow);
+  border-radius: 12px;
+  min-width: 150px;
+  min-height: 70px;
+  cursor: grab;
+  user-select: none;
+  z-index: 5;
+  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+.flow-node:active {
+  cursor: grabbing;
+  box-shadow: var(--flow-node-active-shadow);
+  border-color: var(--flow-hover-color);
+  transform: translateY(-1px);
+}
+
+.flow-node-content {
+  width: 100%;
+  height: 100%;
+  padding: 12px 16px;
+}
+
+.flow-node-default-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.flow-node-title {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-on-surface);
+}
+
+.handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-surface, #ffffff);
+  border: 2px solid var(--color-outline, #75777c);
+  z-index: 10;
+  cursor: crosshair;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+.handle:hover {
+  transform: scale(1.4);
+  background-color: var(--flow-hover-color);
+  border-color: var(--flow-hover-color);
+  box-shadow: 0 0 8px rgba(0, 95, 175, 0.5);
+}
+.handle:active {
+  transform: scale(1.2);
+  background-color: var(--flow-hover-color);
+  border-color: var(--flow-hover-color);
+}
+
+.handle-position-left {
+  left: -7px;
+  top: calc(50% - 6px);
+}
+
+.handle-position-right {
+  right: -7px;
+  top: calc(50% - 6px);
+}
+
+.handle-position-top {
+  top: -7px;
+  left: calc(50% - 6px);
+}
+
+.handle-position-bottom {
+  bottom: -7px;
+  left: calc(50% - 6px);
+}
+
+@keyframes flow-dash-flow {
+  to {
+    stroke-dashoffset: -20;
+  }
+}
+.flow-node-custom {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
+.flow-node-custom .flow-node-content {
+  padding: 0 !important;
+}`;
+
+/**
+ * @label Flow
+ * @tag wc-flow
+ * @rawTag flow
+ * @summary An interactive node editor canvas with draggable nodes, custom HTML element rendering, and mouse-based edge connection creation on a dotted grid.
+ *
+ * @example
+ * ```html
+ * <wc-flow id="my-flow"></wc-flow>
+ * <script>
+ *   const flow = document.getElementById('my-flow');
+ *   flow.nodes = [
+ *     { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },
+ *     { id: '2', position: { x: 250, y: 50 }, data: { label: 'Node 2' } }
+ *   ];
+ *   flow.edges = [
+ *     { id: 'e1-2', source: '1', target: '2' }
+ *   ];
+ * </script>
+ * ```
+ *
+ * @cssprop --flow-background - Background color for the canvas wrapper. Defaults to surface-container-low.
+ * @cssprop --flow-dot-color - Color of the background grid dots. Defaults to outline-variant.
+ * @cssprop --flow-line-color - Default stroke color for lines and connectors. Defaults to on-surface.
+ * @cssprop --flow-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.
+ * @cssprop --flow-arrow-color - Stroke color for arrow markers. Defaults to on-surface.
+ */
+let Flow = class Flow extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.nodes = [];
+        this.edges = [];
+        this.zoom = 1;
+        this.padding = 50;
+        // Node dimensions tracking
+        this.nodeDimensions = new Map();
+        // Drag node state
+        this.draggingNodeId = null;
+        this.dragStartMouseX = 0;
+        this.dragStartMouseY = 0;
+        this.dragStartNodeX = 0;
+        this.dragStartNodeY = 0;
+        // Connection drag state
+        this.isDrawingConnection = false;
+        this.draggingSourceId = null;
+        this.draggingSourceHandle = null;
+        this.connectionStartX = 0;
+        this.connectionStartY = 0;
+        this.currentMouseX = 0;
+        this.currentMouseY = 0;
+        this.onNodeMouseMove = (event) => {
+            if (!this.draggingNodeId)
+                return;
+            const deltaX = (event.clientX - this.dragStartMouseX) / this.zoom;
+            const deltaY = (event.clientY - this.dragStartMouseY) / this.zoom;
+            const node = this.nodes.find((n) => n.id === this.draggingNodeId);
+            if (node) {
+                node.position = {
+                    x: this.dragStartNodeX + deltaX,
+                    y: this.dragStartNodeY + deltaY,
+                };
+                this.dispatchEvent(new CustomEvent("node-drag", {
+                    detail: { id: node.id, position: node.position },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.requestUpdate();
+            }
+        };
+        this.onNodeMouseUp = () => {
+            this.draggingNodeId = null;
+            window.removeEventListener("mousemove", this.onNodeMouseMove);
+            window.removeEventListener("mouseup", this.onNodeMouseUp);
+        };
+        this.onConnectionMouseMove = (event) => {
+            if (!this.isDrawingConnection)
+                return;
+            const workspaceEl = this.shadowRoot?.querySelector(".flow-workspace");
+            if (workspaceEl) {
+                const rect = workspaceEl.getBoundingClientRect();
+                const bounds = this.getBounds();
+                const viewBoxX = bounds.minX - this.padding;
+                const viewBoxY = bounds.minY - this.padding;
+                this.currentMouseX = viewBoxX + (event.clientX - rect.left) / this.zoom;
+                this.currentMouseY = viewBoxY + (event.clientY - rect.top) / this.zoom;
+                this.requestUpdate();
+            }
+        };
+        this.onConnectionMouseUp = (event) => {
+            if (!this.isDrawingConnection)
+                return;
+            this.isDrawingConnection = false;
+            window.removeEventListener("mousemove", this.onConnectionMouseMove);
+            window.removeEventListener("mouseup", this.onConnectionMouseUp);
+            const target = this.shadowRoot?.elementFromPoint(event.clientX, event.clientY);
+            const inputHandle = target?.closest(".handle-input");
+            if (inputHandle) {
+                const targetNodeId = inputHandle.getAttribute("data-node-id");
+                const targetHandle = inputHandle.getAttribute("data-position");
+                if (targetNodeId && targetNodeId !== this.draggingSourceId) {
+                    this.dispatchEvent(new CustomEvent("connect", {
+                        detail: {
+                            source: this.draggingSourceId,
+                            target: targetNodeId,
+                            sourceHandle: this.draggingSourceHandle,
+                            targetHandle: targetHandle,
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            }
+            this.draggingSourceId = null;
+            this.draggingSourceHandle = null;
+            this.requestUpdate();
+        };
+    }
+    updated() {
+        let dimensionsChanged = false;
+        this.shadowRoot?.querySelectorAll(".flow-node").forEach((el) => {
+            const id = el.getAttribute("data-id");
+            if (id) {
+                const current = this.nodeDimensions.get(id);
+                const w = el.offsetWidth || 150;
+                const h = el.offsetHeight || 70;
+                if (!current || current.width !== w || current.height !== h) {
+                    this.nodeDimensions.set(id, { width: w, height: h });
+                    dimensionsChanged = true;
+                }
+            }
+        });
+        if (dimensionsChanged) {
+            this.requestUpdate();
+        }
+    }
+    // --- Node Dragging Handlers ---
+    onNodeMouseDown(event, node) {
+        const target = event.target;
+        if (target.closest(".handle") ||
+            target.closest("button") ||
+            target.closest("input") ||
+            target.closest("a")) {
+            return;
+        }
+        event.preventDefault();
+        this.draggingNodeId = node.id;
+        this.dragStartMouseX = event.clientX;
+        this.dragStartMouseY = event.clientY;
+        this.dragStartNodeX = node.position.x;
+        this.dragStartNodeY = node.position.y;
+        window.addEventListener("mousemove", this.onNodeMouseMove);
+        window.addEventListener("mouseup", this.onNodeMouseUp);
+    }
+    // --- Handle Helpers ---
+    getNodeInputs(node) {
+        if (node.inputs && Array.isArray(node.inputs)) {
+            return node.inputs;
+        }
+        if (node.data && typeof node.data === "object" && Array.isArray(node.data.inputs)) {
+            return node.data.inputs;
+        }
+        return ["left"];
+    }
+    getNodeOutputs(node) {
+        if (node.outputs && Array.isArray(node.outputs)) {
+            return node.outputs;
+        }
+        if (node.data && typeof node.data === "object" && Array.isArray(node.data.outputs)) {
+            return node.data.outputs;
+        }
+        return ["right"];
+    }
+    getHandleCoordinates(node, position, dim) {
+        const x = node.position.x;
+        const y = node.position.y;
+        const w = dim.width;
+        const h = dim.height;
+        switch (position) {
+            case "top":
+                return { x: x + w / 2, y };
+            case "bottom":
+                return { x: x + w / 2, y: y + h };
+            case "left":
+                return { x, y: y + h / 2 };
+            case "right":
+            default:
+                return { x: x + w, y: y + h / 2 };
+        }
+    }
+    // --- Connection Dragging Handlers ---
+    onHandleMouseDown(event, node, position) {
+        event.stopPropagation();
+        event.preventDefault();
+        const dim = this.nodeDimensions.get(node.id) || { width: 150, height: 70 };
+        this.draggingSourceId = node.id;
+        this.draggingSourceHandle = position;
+        const coords = this.getHandleCoordinates(node, position, dim);
+        this.connectionStartX = coords.x;
+        this.connectionStartY = coords.y;
+        this.isDrawingConnection = true;
+        this.currentMouseX = this.connectionStartX;
+        this.currentMouseY = this.connectionStartY;
+        window.addEventListener("mousemove", this.onConnectionMouseMove);
+        window.addEventListener("mouseup", this.onConnectionMouseUp);
+    }
+    // --- Path Builders ---
+    getRoundedPath(points, radius = 12) {
+        if (points.length < 3) {
+            return points.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(" ");
+        }
+        let path = `M ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length - 1; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const next = points[i + 1];
+            const dxp = prev.x - curr.x;
+            const dyp = prev.y - curr.y;
+            const lenp = Math.hypot(dxp, dyp);
+            const dxn = next.x - curr.x;
+            const dyn = next.y - curr.y;
+            const lenn = Math.hypot(dxn, dyn);
+            if (lenp === 0 || lenn === 0) {
+                path += ` L ${curr.x} ${curr.y}`;
+                continue;
+            }
+            const r = Math.min(radius, lenp / 2, lenn / 2);
+            if (r > 0) {
+                const x1 = curr.x + (dxp / lenp) * r;
+                const y1 = curr.y + (dyp / lenp) * r;
+                const x2 = curr.x + (dxn / lenn) * r;
+                const y2 = curr.y + (dyn / lenn) * r;
+                path += ` L ${x1} ${y1} Q ${curr.x} ${curr.y} ${x2} ${y2}`;
+            }
+            else {
+                path += ` L ${curr.x} ${curr.y}`;
+            }
+        }
+        const last = points[points.length - 1];
+        path += ` L ${last.x} ${last.y}`;
+        return path;
+    }
+    getSmoothStepPath(x1, y1, x2, y2, sourceHandle = "right", targetHandle = "left") {
+        const isSourceHorizontal = sourceHandle === "left" || sourceHandle === "right";
+        const isTargetHorizontal = targetHandle === "left" || targetHandle === "right";
+        let points = [];
+        if (isSourceHorizontal && isTargetHorizontal) {
+            const midX = x1 + (x2 - x1) / 2;
+            points = [
+                { x: x1, y: y1 },
+                { x: midX, y: y1 },
+                { x: midX, y: y2 },
+                { x: x2, y: y2 },
+            ];
+        }
+        else if (!isSourceHorizontal && !isTargetHorizontal) {
+            const midY = y1 + (y2 - y1) / 2;
+            points = [
+                { x: x1, y: y1 },
+                { x: x1, y: midY },
+                { x: x2, y: midY },
+                { x: x2, y: y2 },
+            ];
+        }
+        else if (isSourceHorizontal && !isTargetHorizontal) {
+            points = [
+                { x: x1, y: y1 },
+                { x: x2, y: y1 },
+                { x: x2, y: y2 },
+            ];
+        }
+        else {
+            points = [
+                { x: x1, y: y1 },
+                { x: x1, y: y2 },
+                { x: x2, y: y2 },
+            ];
+        }
+        return this.getRoundedPath(points, 12);
+    }
+    getBezierPath(x1, y1, x2, y2, sourceHandle = "right", targetHandle = "left") {
+        const normals = {
+            left: { x: -1, y: 0 },
+            right: { x: 1, y: 0 },
+            top: { x: 0, y: -1 },
+            bottom: { x: 0, y: 1 },
+        };
+        const sNormal = normals[sourceHandle] || { x: 1, y: 0 };
+        const tNormal = normals[targetHandle] || { x: -1, y: 0 };
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const dist = Math.hypot(dx, dy);
+        const offset = Math.max(dist / 2, 50);
+        const cx1 = x1 + sNormal.x * offset;
+        const cy1 = y1 + sNormal.y * offset;
+        const cx2 = x2 + tNormal.x * offset;
+        const cy2 = y2 + tNormal.y * offset;
+        return `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+    }
+    getStraightPath(x1, y1, x2, y2) {
+        return `M ${x1} ${y1} L ${x2} ${y2}`;
+    }
+    drawPath(sourceId, targetId, type, sourceHandle, targetHandle) {
+        const sourceNode = this.nodes.find((n) => n.id === sourceId);
+        const targetNode = this.nodes.find((n) => n.id === targetId);
+        if (!sourceNode || !targetNode)
+            return "";
+        const sDim = this.nodeDimensions.get(sourceId) || { width: 150, height: 70 };
+        const tDim = this.nodeDimensions.get(targetId) || { width: 150, height: 70 };
+        const sHandle = sourceHandle || this.getNodeOutputs(sourceNode)[0] || "right";
+        const tHandle = targetHandle || this.getNodeInputs(targetNode)[0] || "left";
+        const startCoords = this.getHandleCoordinates(sourceNode, sHandle, sDim);
+        const endCoords = this.getHandleCoordinates(targetNode, tHandle, tDim);
+        const edgeType = type || "smoothstep";
+        if (edgeType === "bezier") {
+            return this.getBezierPath(startCoords.x, startCoords.y, endCoords.x, endCoords.y, sHandle, tHandle);
+        }
+        if (edgeType === "straight") {
+            return this.getStraightPath(startCoords.x, startCoords.y, endCoords.x, endCoords.y);
+        }
+        return this.getSmoothStepPath(startCoords.x, startCoords.y, endCoords.x, endCoords.y, sHandle, tHandle);
+    }
+    // --- Auto viewbox math ---
+    getBounds() {
+        if (this.nodes.length === 0) {
+            return { minX: 0, minY: 0, maxX: 400, maxY: 300 };
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        this.nodes.forEach((node) => {
+            const dim = this.nodeDimensions.get(node.id) ||
+                { width: 150, height: 70 };
+            const x = node.position.x;
+            const y = node.position.y;
+            if (x < minX)
+                minX = x;
+            if (y < minY)
+                minY = y;
+            if (x + dim.width > maxX)
+                maxX = x + dim.width;
+            if (y + dim.height > maxY)
+                maxY = y + dim.height;
+        });
+        return { minX, minY, maxX, maxY };
+    }
+    // --- Content Renderers ---
+    isCustomNode(node) {
+        if (node.data instanceof HTMLElement) {
+            return true;
+        }
+        if (node.data &&
+            typeof node.data === "object" &&
+            node.data.element instanceof HTMLElement) {
+            return true;
+        }
+        return false;
+    }
+    renderNodeContent(node) {
+        if (node.data instanceof HTMLElement) {
+            return node.data;
+        }
+        if (node.data &&
+            typeof node.data === "object" &&
+            node.data.element instanceof HTMLElement) {
+            return node.data.element;
+        }
+        const label = node.data && typeof node.data === "object"
+            ? node.data.label || node.id
+            : String(node.data);
+        return b `
+      <div class="flow-node-default-card">
+        <div class="flow-node-title">${label}</div>
+      </div>
+    `;
+    }
+    render() {
+        const bounds = this.getBounds();
+        const viewBoxX = bounds.minX - this.padding;
+        const viewBoxY = bounds.minY - this.padding;
+        const viewBoxWidth = bounds.maxX - bounds.minX + 2 * this.padding;
+        const viewBoxHeight = bounds.maxY - bounds.minY + 2 * this.padding;
+        const svgViewBox = `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`;
+        return b `
+      <div class="flow-container">
+        <div
+          class="flow-scroller"
+          style="width: ${viewBoxWidth * this.zoom}px; height: ${viewBoxHeight * this.zoom}px; position: relative;"
+        >
+          <div
+            class="flow-workspace"
+            style="transform: scale(${this.zoom}); transform-origin: top left; width: ${viewBoxWidth}px; height: ${viewBoxHeight}px; position: absolute; left: 0; top: 0;"
+          >
+          <!-- SVG canvas for rendering grid and paths -->
+          <svg class="flow-svg" viewBox="${svgViewBox}">
+            <defs>
+              <pattern
+                id="dot-grid"
+                width="20"
+                height="20"
+                patternUnits="userSpaceOnUse"
+              >
+                <circle cx="1" cy="1" r="1" />
+              </pattern>
+              <marker
+                id="arrowhead"
+                markerWidth="8"
+                markerHeight="8"
+                refX="7"
+                refY="4"
+                orient="auto"
+              >
+                <polygon
+                  points="0 0, 8 4, 0 8"
+                  fill="var(--flow-line-color, var(--color-outline))"
+                />
+              </marker>
+            </defs>
+
+            <!-- Background Grid -->
+            <rect
+              x="${viewBoxX}"
+              y="${viewBoxY}"
+              width="${viewBoxWidth}"
+              height="${viewBoxHeight}"
+              fill="url(#dot-grid)"
+            />
+
+            <!-- Connection Edges -->
+            ${this.edges.map((edge) => {
+            const pathString = this.drawPath(edge.source, edge.target, edge.type, edge.sourceHandle, edge.targetHandle);
+            const color = edge.color ||
+                "var(--flow-line-color, var(--color-outline))";
+            const variant = edge.variant || "solid";
+            return w `
+                <path
+                  class="${e({
+                "flow-edge": true,
+                "variant-dashed": variant === "dashed" ||
+                    variant === "animated-dashed",
+                "variant-animated-dashed": variant === "animated-dashed",
+            })}"
+                  d="${pathString}"
+                  stroke="${color}"
+                  fill="none"
+                  stroke-width="2"
+                  marker-end="url(#arrowhead)"
+                />
+              `;
+        })}
+
+            <!-- Connection Draft line preview -->
+            ${this.isDrawingConnection && this.draggingSourceHandle
+            ? w `
+                <path
+                  class="flow-edge-preview"
+                  d="${this.getBezierPath(this.connectionStartX, this.connectionStartY, this.currentMouseX, this.currentMouseY, this.draggingSourceHandle, ({
+                left: "right",
+                right: "left",
+                top: "bottom",
+                bottom: "top",
+            })[this.draggingSourceHandle])}"
+                  stroke="var(--flow-hover-color, var(--color-primary))"
+                  fill="none"
+                  stroke-width="2"
+                  stroke-dasharray="4 4"
+                />
+              `
+            : A}
+          </svg>
+
+          <!-- Nodes Workspace -->
+          <div
+            class="flow-nodes"
+            style="position: absolute; left: ${-viewBoxX}px; top: ${-viewBoxY}px;"
+          >
+            ${this.nodes.map((node) => {
+            const inputs = this.getNodeInputs(node);
+            const outputs = this.getNodeOutputs(node);
+            return b `
+                <div
+                  class="${e({
+                "flow-node": true,
+                "flow-node-custom": this.isCustomNode(node),
+            })}"
+                  data-id="${node.id}"
+                  style="position: absolute; left: ${node.position
+                .x}px; top: ${node.position.y}px;"
+                  @mousedown="${(e) => this.onNodeMouseDown(e, node)}"
+                >
+                  <!-- Input connection handles -->
+                  ${inputs.map((pos) => b `
+                    <div
+                      class="handle handle-input handle-position-${pos}"
+                      data-node-id="${node.id}"
+                      data-position="${pos}"
+                    >
+                    </div>
+                  `)}
+
+                  <!-- Node Inner Content -->
+                  <div class="flow-node-content">
+                    ${this.renderNodeContent(node)}
+                  </div>
+
+                  <!-- Output connection handles -->
+                  ${outputs.map((pos) => b `
+                    <div
+                      class="handle handle-output handle-position-${pos}"
+                      data-node-id="${node.id}"
+                      data-position="${pos}"
+                      @mousedown="${(e) => this.onHandleMouseDown(e, node, pos)}"
+                    >
+                    </div>
+                  `)}
+                </div>
+              `;
+        })}
+          </div>
+        </div>
+      </div>
+    </div>
+    `;
+    }
+};
+Flow.styles = [css_248z];
+__decorate([
+    n({ type: Array })
+], Flow.prototype, "nodes", void 0);
+__decorate([
+    n({ type: Array })
+], Flow.prototype, "edges", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Flow.prototype, "zoom", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Flow.prototype, "padding", void 0);
+__decorate([
+    r()
+], Flow.prototype, "draggingNodeId", void 0);
+__decorate([
+    r()
+], Flow.prototype, "isDrawingConnection", void 0);
+__decorate([
+    r()
+], Flow.prototype, "draggingSourceId", void 0);
+__decorate([
+    r()
+], Flow.prototype, "draggingSourceHandle", void 0);
+__decorate([
+    r()
+], Flow.prototype, "connectionStartX", void 0);
+__decorate([
+    r()
+], Flow.prototype, "connectionStartY", void 0);
+__decorate([
+    r()
+], Flow.prototype, "currentMouseX", void 0);
+__decorate([
+    r()
+], Flow.prototype, "currentMouseY", void 0);
+Flow = __decorate([
+    IndividualComponent
+], Flow);
+
+export { Flow };
+//# sourceMappingURL=flow.js.map