snice 4.8.0 → 4.10.0

package/dist/components/flow/snice-flow.js

@@ -0,0 +1,755 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, dispatch, ready, watch, dispose, render, styles, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%}.flow{position:relative;width:100%;height:100%;min-height:25rem;overflow:hidden;background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:4px}.flow__grid{position:absolute;inset:0;pointer-events:none}.flow__svg{display:block;width:100%;height:100%;cursor:grab;position:absolute;inset:0}.flow__svg:active{cursor:grabbing}.flow__edge{fill:none;stroke:var(--snice-color-border,rgb(226 226 226));stroke-width:2px;cursor:pointer;transition:stroke var(--snice-transition-fast, 150ms) ease}.flow__edge:hover{stroke:var(--snice-color-primary,rgb(37 99 235));stroke-width:3px}.flow__edge--selected{stroke:var(--snice-color-primary,rgb(37 99 235));stroke-width:2px}.flow__edge--animated{stroke-dasharray:5 5;animation:.5s linear infinite flow-dash}@keyframes flow-dash{to{stroke-dashoffset:-10}}.flow__edge-label{font-size:.6875rem;fill:var(--snice-color-text-secondary,rgb(82 82 82));text-anchor:middle;pointer-events:none;dominant-baseline:central}.flow__arrow{fill:var(--snice-color-border,rgb(226 226 226))}.flow__edge-preview{fill:none;stroke:var(--snice-color-primary,rgb(37 99 235));stroke-width:2px;stroke-dasharray:6 3;pointer-events:none}.flow__nodes{position:absolute;inset:0;pointer-events:none}.flow__node{position:absolute;pointer-events:auto;background:var(--snice-color-background-element,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:4px;min-width:8.75rem;box-shadow:var(--snice-shadow-sm,0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1));user-select:none;cursor:grab;transition:box-shadow var(--snice-transition-fast, 150ms) ease,border-color var(--snice-transition-fast, 150ms) ease}.flow__node:hover{box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.flow__node--selected{border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 2px var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.flow__node--dragging{cursor:grabbing;z-index:10;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1))}.flow__node-header{padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));font-size:.75rem;font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));border-radius:3px 3px 0 0;display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem)}.flow__node-type{font-size:.625rem;color:var(--snice-color-text-tertiary,rgb(115 115 115));font-weight:var(--snice-font-weight-medium,500);text-transform:uppercase;letter-spacing:.05em}.flow__node-body{padding:var(--snice-spacing-2xs,.25rem) 0;display:flex;justify-content:space-between;gap:var(--snice-spacing-xs,.5rem)}.flow__node-inputs,.flow__node-outputs{display:flex;flex-direction:column;gap:var(--snice-spacing-3xs,.125rem)}.flow__node-outputs{align-items:flex-end}.flow__port{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);font-size:.6875rem;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:crosshair;position:relative}.flow__port-dot{width:.625rem;height:.625rem;border-radius:50%;background:var(--snice-color-border,rgb(226 226 226));border:2px solid var(--snice-color-background,rgb(255 255 255));box-shadow:0 0 0 1px var(--snice-color-border,rgb(226 226 226));transition:background var(--snice-transition-fast, 150ms) ease,transform var(--snice-transition-fast, 150ms) ease;flex-shrink:0}.flow__port:hover .flow__port-dot{background:var(--snice-color-primary,rgb(37 99 235));transform:scale(1.3);box-shadow:0 0 0 1px var(--snice-color-primary,rgb(37 99 235))}.flow__port--connected .flow__port-dot{background:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 1px var(--snice-color-primary,rgb(37 99 235))}.flow__port--output{flex-direction:row-reverse}.flow__minimap{position:absolute;bottom:var(--snice-spacing-xs,.5rem);right:var(--snice-spacing-xs,.5rem);width:9.375rem;height:6.25rem;background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:4px;overflow:hidden;box-shadow:var(--snice-shadow-sm,0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1));opacity:.9;z-index:20}.flow__minimap-svg{display:block;width:100%;height:100%}.flow__minimap-node{fill:var(--snice-color-primary,rgb(37 99 235));opacity:.6}.flow__minimap-edge{stroke:var(--snice-color-border,rgb(226 226 226));stroke-width:1px;fill:none}.flow__minimap-viewport{fill:var(--snice-color-primary,rgb(37 99 235));fill-opacity:0.08;stroke:var(--snice-color-primary,rgb(37 99 235));stroke-width:1px}";
+
+const DEFAULT_NODE_WIDTH = 160;
+const DEFAULT_NODE_HEIGHT = 80;
+let SniceFlow = (() => {
+    let _classDecorators = [element('snice-flow')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _nodes_decorators;
+    let _nodes_initializers = [];
+    let _nodes_extraInitializers = [];
+    let _edges_decorators;
+    let _edges_initializers = [];
+    let _edges_extraInitializers = [];
+    let _snapToGrid_decorators;
+    let _snapToGrid_initializers = [];
+    let _snapToGrid_extraInitializers = [];
+    let _gridSize_decorators;
+    let _gridSize_initializers = [];
+    let _gridSize_extraInitializers = [];
+    let _zoomEnabled_decorators;
+    let _zoomEnabled_initializers = [];
+    let _zoomEnabled_extraInitializers = [];
+    let _panEnabled_decorators;
+    let _panEnabled_initializers = [];
+    let _panEnabled_extraInitializers = [];
+    let _minimap_decorators;
+    let _minimap_initializers = [];
+    let _minimap_extraInitializers = [];
+    let _editable_decorators;
+    let _editable_initializers = [];
+    let _editable_extraInitializers = [];
+    let _containerEl_decorators;
+    let _containerEl_initializers = [];
+    let _containerEl_extraInitializers = [];
+    let _svgEl_decorators;
+    let _svgEl_initializers = [];
+    let _svgEl_extraInitializers = [];
+    let _nodesContainerEl_decorators;
+    let _nodesContainerEl_initializers = [];
+    let _nodesContainerEl_extraInitializers = [];
+    let _minimapSvgEl_decorators;
+    let _minimapSvgEl_initializers = [];
+    let _minimapSvgEl_extraInitializers = [];
+    let _emitNodeDrag_decorators;
+    let _emitNodeSelect_decorators;
+    let _emitEdgeConnect_decorators;
+    let _emitEdgeDisconnect_decorators;
+    let _emitCanvasClick_decorators;
+    let _init_decorators;
+    let _onNodesChange_decorators;
+    let _onEdgesChange_decorators;
+    let _onMinimapChange_decorators;
+    let _cleanup_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.nodes = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _nodes_initializers, []));
+            this.edges = (__runInitializers(this, _nodes_extraInitializers), __runInitializers(this, _edges_initializers, []));
+            this.snapToGrid = (__runInitializers(this, _edges_extraInitializers), __runInitializers(this, _snapToGrid_initializers, true));
+            this.gridSize = (__runInitializers(this, _snapToGrid_extraInitializers), __runInitializers(this, _gridSize_initializers, 20));
+            this.zoomEnabled = (__runInitializers(this, _gridSize_extraInitializers), __runInitializers(this, _zoomEnabled_initializers, true));
+            this.panEnabled = (__runInitializers(this, _zoomEnabled_extraInitializers), __runInitializers(this, _panEnabled_initializers, true));
+            this.minimap = (__runInitializers(this, _panEnabled_extraInitializers), __runInitializers(this, _minimap_initializers, true));
+            this.editable = (__runInitializers(this, _minimap_extraInitializers), __runInitializers(this, _editable_initializers, true));
+            this.containerEl = (__runInitializers(this, _editable_extraInitializers), __runInitializers(this, _containerEl_initializers, void 0));
+            this.svgEl = (__runInitializers(this, _containerEl_extraInitializers), __runInitializers(this, _svgEl_initializers, void 0));
+            this.nodesContainerEl = (__runInitializers(this, _svgEl_extraInitializers), __runInitializers(this, _nodesContainerEl_initializers, void 0));
+            this.minimapSvgEl = (__runInitializers(this, _nodesContainerEl_extraInitializers), __runInitializers(this, _minimapSvgEl_initializers, void 0));
+            // SVG groups (created manually for SVG namespace)
+            this.transformGroupEl = __runInitializers(this, _minimapSvgEl_extraInitializers);
+            // Transform state
+            this.zoomScale = 1;
+            this.panX = 0;
+            this.panY = 0;
+            // Drag state
+            this.dragNode = null;
+            this.dragOffsetX = 0;
+            this.dragOffsetY = 0;
+            // Pan state
+            this.isPanning = false;
+            this.panStartX = 0;
+            this.panStartY = 0;
+            this.panStartPanX = 0;
+            this.panStartPanY = 0;
+            // Edge drawing state
+            this.drawingEdge = false;
+            this.drawSourceNodeId = '';
+            this.drawSourcePortId = '';
+            this.drawSourceIsOutput = true;
+            this.drawEndX = 0;
+            this.drawEndY = 0;
+            // Selection
+            this.selectedNodeId = '';
+            this.selectedEdgeId = '';
+            // Sizing
+            this.containerWidth = 800;
+            this.containerHeight = 500;
+            this.resizeObserver = null;
+            // Bound handlers
+            this.boundMouseMove = this.handleMouseMove.bind(this);
+            this.boundMouseUp = this.handleMouseUp.bind(this);
+            this.initialized = false;
+            this.listenersAttached = false;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _nodes_decorators = [property({ type: Array, attribute: false })];
+            _edges_decorators = [property({ type: Array, attribute: false })];
+            _snapToGrid_decorators = [property({ type: Boolean, attribute: 'snap-to-grid' })];
+            _gridSize_decorators = [property({ type: Number, attribute: 'grid-size' })];
+            _zoomEnabled_decorators = [property({ type: Boolean, attribute: 'zoom-enabled' })];
+            _panEnabled_decorators = [property({ type: Boolean, attribute: 'pan-enabled' })];
+            _minimap_decorators = [property({ type: Boolean })];
+            _editable_decorators = [property({ type: Boolean })];
+            _containerEl_decorators = [query('.flow')];
+            _svgEl_decorators = [query('.flow__svg')];
+            _nodesContainerEl_decorators = [query('.flow__nodes')];
+            _minimapSvgEl_decorators = [query('.flow__minimap-svg')];
+            _emitNodeDrag_decorators = [dispatch('node-drag', { bubbles: true, composed: true })];
+            _emitNodeSelect_decorators = [dispatch('node-select', { bubbles: true, composed: true })];
+            _emitEdgeConnect_decorators = [dispatch('edge-connect', { bubbles: true, composed: true })];
+            _emitEdgeDisconnect_decorators = [dispatch('edge-disconnect', { bubbles: true, composed: true })];
+            _emitCanvasClick_decorators = [dispatch('canvas-click', { bubbles: true, composed: true })];
+            _init_decorators = [ready()];
+            _onNodesChange_decorators = [watch('nodes')];
+            _onEdgesChange_decorators = [watch('edges')];
+            _onMinimapChange_decorators = [watch('minimap')];
+            _cleanup_decorators = [dispose()];
+            _renderContent_decorators = [render({ once: true })];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _emitNodeDrag_decorators, { kind: "method", name: "emitNodeDrag", static: false, private: false, access: { has: obj => "emitNodeDrag" in obj, get: obj => obj.emitNodeDrag }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitNodeSelect_decorators, { kind: "method", name: "emitNodeSelect", static: false, private: false, access: { has: obj => "emitNodeSelect" in obj, get: obj => obj.emitNodeSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitEdgeConnect_decorators, { kind: "method", name: "emitEdgeConnect", static: false, private: false, access: { has: obj => "emitEdgeConnect" in obj, get: obj => obj.emitEdgeConnect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitEdgeDisconnect_decorators, { kind: "method", name: "emitEdgeDisconnect", static: false, private: false, access: { has: obj => "emitEdgeDisconnect" in obj, get: obj => obj.emitEdgeDisconnect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCanvasClick_decorators, { kind: "method", name: "emitCanvasClick", static: false, private: false, access: { has: obj => "emitCanvasClick" in obj, get: obj => obj.emitCanvasClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onNodesChange_decorators, { kind: "method", name: "onNodesChange", static: false, private: false, access: { has: obj => "onNodesChange" in obj, get: obj => obj.onNodesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onEdgesChange_decorators, { kind: "method", name: "onEdgesChange", static: false, private: false, access: { has: obj => "onEdgesChange" in obj, get: obj => obj.onEdgesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onMinimapChange_decorators, { kind: "method", name: "onMinimapChange", static: false, private: false, access: { has: obj => "onMinimapChange" in obj, get: obj => obj.onMinimapChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _nodes_decorators, { kind: "field", name: "nodes", static: false, private: false, access: { has: obj => "nodes" in obj, get: obj => obj.nodes, set: (obj, value) => { obj.nodes = value; } }, metadata: _metadata }, _nodes_initializers, _nodes_extraInitializers);
+            __esDecorate(null, null, _edges_decorators, { kind: "field", name: "edges", static: false, private: false, access: { has: obj => "edges" in obj, get: obj => obj.edges, set: (obj, value) => { obj.edges = value; } }, metadata: _metadata }, _edges_initializers, _edges_extraInitializers);
+            __esDecorate(null, null, _snapToGrid_decorators, { kind: "field", name: "snapToGrid", static: false, private: false, access: { has: obj => "snapToGrid" in obj, get: obj => obj.snapToGrid, set: (obj, value) => { obj.snapToGrid = value; } }, metadata: _metadata }, _snapToGrid_initializers, _snapToGrid_extraInitializers);
+            __esDecorate(null, null, _gridSize_decorators, { kind: "field", name: "gridSize", static: false, private: false, access: { has: obj => "gridSize" in obj, get: obj => obj.gridSize, set: (obj, value) => { obj.gridSize = value; } }, metadata: _metadata }, _gridSize_initializers, _gridSize_extraInitializers);
+            __esDecorate(null, null, _zoomEnabled_decorators, { kind: "field", name: "zoomEnabled", static: false, private: false, access: { has: obj => "zoomEnabled" in obj, get: obj => obj.zoomEnabled, set: (obj, value) => { obj.zoomEnabled = value; } }, metadata: _metadata }, _zoomEnabled_initializers, _zoomEnabled_extraInitializers);
+            __esDecorate(null, null, _panEnabled_decorators, { kind: "field", name: "panEnabled", static: false, private: false, access: { has: obj => "panEnabled" in obj, get: obj => obj.panEnabled, set: (obj, value) => { obj.panEnabled = value; } }, metadata: _metadata }, _panEnabled_initializers, _panEnabled_extraInitializers);
+            __esDecorate(null, null, _minimap_decorators, { kind: "field", name: "minimap", static: false, private: false, access: { has: obj => "minimap" in obj, get: obj => obj.minimap, set: (obj, value) => { obj.minimap = value; } }, metadata: _metadata }, _minimap_initializers, _minimap_extraInitializers);
+            __esDecorate(null, null, _editable_decorators, { kind: "field", name: "editable", static: false, private: false, access: { has: obj => "editable" in obj, get: obj => obj.editable, set: (obj, value) => { obj.editable = value; } }, metadata: _metadata }, _editable_initializers, _editable_extraInitializers);
+            __esDecorate(null, null, _containerEl_decorators, { kind: "field", name: "containerEl", static: false, private: false, access: { has: obj => "containerEl" in obj, get: obj => obj.containerEl, set: (obj, value) => { obj.containerEl = value; } }, metadata: _metadata }, _containerEl_initializers, _containerEl_extraInitializers);
+            __esDecorate(null, null, _svgEl_decorators, { kind: "field", name: "svgEl", static: false, private: false, access: { has: obj => "svgEl" in obj, get: obj => obj.svgEl, set: (obj, value) => { obj.svgEl = value; } }, metadata: _metadata }, _svgEl_initializers, _svgEl_extraInitializers);
+            __esDecorate(null, null, _nodesContainerEl_decorators, { kind: "field", name: "nodesContainerEl", static: false, private: false, access: { has: obj => "nodesContainerEl" in obj, get: obj => obj.nodesContainerEl, set: (obj, value) => { obj.nodesContainerEl = value; } }, metadata: _metadata }, _nodesContainerEl_initializers, _nodesContainerEl_extraInitializers);
+            __esDecorate(null, null, _minimapSvgEl_decorators, { kind: "field", name: "minimapSvgEl", static: false, private: false, access: { has: obj => "minimapSvgEl" in obj, get: obj => obj.minimapSvgEl, set: (obj, value) => { obj.minimapSvgEl = value; } }, metadata: _metadata }, _minimapSvgEl_initializers, _minimapSvgEl_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        emitNodeDrag(node, x, y) {
+            return { node, x, y };
+        }
+        emitNodeSelect(node) {
+            return { node };
+        }
+        emitEdgeConnect(edge) {
+            return { edge };
+        }
+        emitEdgeDisconnect(edge) {
+            return { edge };
+        }
+        emitCanvasClick(x, y) {
+            return { x, y };
+        }
+        init() {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.containerWidth = entry.contentRect.width || 800;
+                    this.containerHeight = entry.contentRect.height || 500;
+                    if (this.initialized)
+                        this.rebuild();
+                }
+            });
+            this.resizeObserver.observe(this);
+            requestAnimationFrame(() => {
+                this.ensureSvgSetup();
+                this.attachListeners();
+                this.initialized = true;
+                this.rebuild();
+            });
+        }
+        onNodesChange() {
+            if (this.initialized)
+                this.rebuild();
+        }
+        onEdgesChange() {
+            if (this.initialized)
+                this.rebuild();
+        }
+        onMinimapChange() {
+            if (this.initialized)
+                this.updateMinimap();
+        }
+        cleanup() {
+            document.removeEventListener('mousemove', this.boundMouseMove);
+            document.removeEventListener('mouseup', this.boundMouseUp);
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        }
+        // --- Public API ---
+        addNode(node) {
+            this.nodes = [...this.nodes, node];
+        }
+        removeNode(id) {
+            this.nodes = this.nodes.filter(n => n.id !== id);
+            this.edges = this.edges.filter(e => e.source !== id && e.target !== id);
+            if (this.selectedNodeId === id) {
+                this.selectedNodeId = '';
+                this.emitNodeSelect(null);
+            }
+        }
+        addEdge(edge) {
+            this.edges = [...this.edges, edge];
+        }
+        removeEdge(id) {
+            const edge = this.edges.find(e => e.id === id);
+            this.edges = this.edges.filter(e => e.id !== id);
+            if (edge)
+                this.emitEdgeDisconnect(edge);
+        }
+        fitView() {
+            if (this.nodes.length === 0)
+                return;
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            for (const node of this.nodes) {
+                const w = node.width || DEFAULT_NODE_WIDTH;
+                const h = node.height || DEFAULT_NODE_HEIGHT;
+                minX = Math.min(minX, node.x);
+                minY = Math.min(minY, node.y);
+                maxX = Math.max(maxX, node.x + w);
+                maxY = Math.max(maxY, node.y + h);
+            }
+            const padding = 40;
+            const contentW = maxX - minX + padding * 2;
+            const contentH = maxY - minY + padding * 2;
+            const scaleX = this.containerWidth / contentW;
+            const scaleY = this.containerHeight / contentH;
+            this.zoomScale = Math.min(scaleX, scaleY, 1.5);
+            this.panX = (this.containerWidth - contentW * this.zoomScale) / 2 - minX * this.zoomScale + padding * this.zoomScale;
+            this.panY = (this.containerHeight - contentH * this.zoomScale) / 2 - minY * this.zoomScale + padding * this.zoomScale;
+            this.rebuild();
+        }
+        // --- SVG Setup ---
+        ensureSvgSetup() {
+            if (this.edgesGroupEl && this.transformGroupEl)
+                return true;
+            const svg = this.svgEl;
+            if (!svg)
+                return false;
+            const ns = 'http://www.w3.org/2000/svg';
+            // Defs for arrow marker
+            this.defsEl = document.createElementNS(ns, 'defs');
+            const marker = document.createElementNS(ns, 'marker');
+            marker.setAttribute('id', 'flow-arrow');
+            marker.setAttribute('viewBox', '0 0 10 10');
+            marker.setAttribute('refX', '10');
+            marker.setAttribute('refY', '5');
+            marker.setAttribute('markerWidth', '8');
+            marker.setAttribute('markerHeight', '8');
+            marker.setAttribute('orient', 'auto-start-reverse');
+            const path = document.createElementNS(ns, 'path');
+            path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+            path.setAttribute('class', 'flow__arrow');
+            marker.appendChild(path);
+            this.defsEl.appendChild(marker);
+            svg.appendChild(this.defsEl);
+            // Transform group
+            this.transformGroupEl = document.createElementNS(ns, 'g');
+            this.edgesGroupEl = document.createElementNS(ns, 'g');
+            this.previewGroupEl = document.createElementNS(ns, 'g');
+            this.transformGroupEl.appendChild(this.edgesGroupEl);
+            this.transformGroupEl.appendChild(this.previewGroupEl);
+            svg.appendChild(this.transformGroupEl);
+            return true;
+        }
+        attachListeners() {
+            if (this.listenersAttached)
+                return;
+            const svg = this.svgEl;
+            if (!svg)
+                return;
+            this.listenersAttached = true;
+            svg.addEventListener('mousedown', (e) => this.handleSvgMouseDown(e));
+            svg.addEventListener('wheel', (e) => this.handleWheel(e), { passive: false });
+            svg.addEventListener('click', (e) => {
+                // Only fire canvas click if clicking on the SVG background
+                if (e.target === svg || e.target.closest('.flow__svg') === svg && !e.target.closest('.flow__edge')) {
+                    const pos = this.screenToCanvas(e.clientX, e.clientY);
+                    this.selectedNodeId = '';
+                    this.selectedEdgeId = '';
+                    this.emitNodeSelect(null);
+                    this.emitCanvasClick(pos.x, pos.y);
+                    this.rebuild();
+                }
+            });
+            // Edge click
+            svg.addEventListener('click', (e) => {
+                const edgePath = e.target.closest('.flow__edge');
+                if (edgePath) {
+                    e.stopPropagation();
+                    const edgeId = edgePath.getAttribute('data-edge-id');
+                    if (edgeId) {
+                        this.selectedEdgeId = edgeId;
+                        this.selectedNodeId = '';
+                        this.rebuild();
+                    }
+                }
+            });
+        }
+        // --- Coordinate transforms ---
+        screenToCanvas(sx, sy) {
+            const svg = this.svgEl;
+            if (!svg)
+                return { x: sx, y: sy };
+            const rect = svg.getBoundingClientRect();
+            return {
+                x: (sx - rect.left - this.panX) / this.zoomScale,
+                y: (sy - rect.top - this.panY) / this.zoomScale,
+            };
+        }
+        snap(v) {
+            if (!this.snapToGrid)
+                return v;
+            return Math.round(v / this.gridSize) * this.gridSize;
+        }
+        // --- Port positions ---
+        getPortPosition(nodeId, portId, isOutput) {
+            const node = this.nodes.find(n => n.id === nodeId);
+            if (!node)
+                return { x: 0, y: 0 };
+            const w = node.width || DEFAULT_NODE_WIDTH;
+            const h = node.height || DEFAULT_NODE_HEIGHT;
+            const ports = isOutput ? (node.outputs || []) : (node.inputs || []);
+            const idx = ports.findIndex(p => p.id === portId);
+            if (idx === -1)
+                return { x: node.x, y: node.y };
+            const headerHeight = 28;
+            const portAreaHeight = h - headerHeight;
+            const portSpacing = ports.length > 1 ? portAreaHeight / (ports.length + 1) : portAreaHeight / 2;
+            const yOffset = headerHeight + portSpacing * (idx + 1);
+            return {
+                x: isOutput ? node.x + w : node.x,
+                y: node.y + yOffset,
+            };
+        }
+        findNearestPort(x, y, needOutput) {
+            let best = null;
+            let bestDist = 20; // max distance threshold
+            for (const node of this.nodes) {
+                const ports = needOutput ? (node.outputs || []) : (node.inputs || []);
+                for (const port of ports) {
+                    const pos = this.getPortPosition(node.id, port.id, needOutput);
+                    const dx = pos.x - x;
+                    const dy = pos.y - y;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist < bestDist) {
+                        bestDist = dist;
+                        best = { nodeId: node.id, portId: port.id };
+                    }
+                }
+            }
+            return best;
+        }
+        // --- Mouse handling ---
+        handleSvgMouseDown(e) {
+            if (e.button !== 0)
+                return;
+            // Background pan
+            if (this.panEnabled) {
+                e.preventDefault();
+                this.isPanning = true;
+                this.panStartX = e.clientX;
+                this.panStartY = e.clientY;
+                this.panStartPanX = this.panX;
+                this.panStartPanY = this.panY;
+                document.addEventListener('mousemove', this.boundMouseMove);
+                document.addEventListener('mouseup', this.boundMouseUp);
+            }
+        }
+        handleNodeMouseDown(e, nodeId) {
+            e.preventDefault();
+            e.stopPropagation();
+            const node = this.nodes.find(n => n.id === nodeId);
+            if (!node)
+                return;
+            // Select node
+            this.selectedNodeId = nodeId;
+            this.selectedEdgeId = '';
+            this.emitNodeSelect(node);
+            // Start drag
+            this.dragNode = node;
+            const pos = this.screenToCanvas(e.clientX, e.clientY);
+            this.dragOffsetX = pos.x - node.x;
+            this.dragOffsetY = pos.y - node.y;
+            document.addEventListener('mousemove', this.boundMouseMove);
+            document.addEventListener('mouseup', this.boundMouseUp);
+            this.rebuild();
+        }
+        handlePortMouseDown(e, nodeId, portId, isOutput) {
+            if (!this.editable)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.drawingEdge = true;
+            this.drawSourceNodeId = nodeId;
+            this.drawSourcePortId = portId;
+            this.drawSourceIsOutput = isOutput;
+            const pos = this.screenToCanvas(e.clientX, e.clientY);
+            this.drawEndX = pos.x;
+            this.drawEndY = pos.y;
+            document.addEventListener('mousemove', this.boundMouseMove);
+            document.addEventListener('mouseup', this.boundMouseUp);
+        }
+        handleMouseMove(e) {
+            if (this.dragNode) {
+                const pos = this.screenToCanvas(e.clientX, e.clientY);
+                const newX = this.snap(pos.x - this.dragOffsetX);
+                const newY = this.snap(pos.y - this.dragOffsetY);
+                this.dragNode.x = newX;
+                this.dragNode.y = newY;
+                this.emitNodeDrag(this.dragNode, newX, newY);
+                this.rebuild();
+            }
+            else if (this.drawingEdge) {
+                const pos = this.screenToCanvas(e.clientX, e.clientY);
+                this.drawEndX = pos.x;
+                this.drawEndY = pos.y;
+                this.updateEdgePreview();
+            }
+            else if (this.isPanning) {
+                const dx = e.clientX - this.panStartX;
+                const dy = e.clientY - this.panStartY;
+                this.panX = this.panStartPanX + dx;
+                this.panY = this.panStartPanY + dy;
+                this.rebuild();
+            }
+        }
+        handleMouseUp(e) {
+            if (this.drawingEdge) {
+                this.finishEdgeDraw(e);
+            }
+            this.dragNode = null;
+            this.isPanning = false;
+            this.drawingEdge = false;
+            document.removeEventListener('mousemove', this.boundMouseMove);
+            document.removeEventListener('mouseup', this.boundMouseUp);
+            this.clearEdgePreview();
+            this.rebuild();
+        }
+        finishEdgeDraw(e) {
+            const pos = this.screenToCanvas(e.clientX, e.clientY);
+            // If started from output, find nearest input; vice versa
+            const needOutput = !this.drawSourceIsOutput;
+            const target = this.findNearestPort(pos.x, pos.y, needOutput);
+            if (target && target.nodeId !== this.drawSourceNodeId) {
+                const sourceNodeId = this.drawSourceIsOutput ? this.drawSourceNodeId : target.nodeId;
+                const sourcePortId = this.drawSourceIsOutput ? this.drawSourcePortId : target.portId;
+                const targetNodeId = this.drawSourceIsOutput ? target.nodeId : this.drawSourceNodeId;
+                const targetPortId = this.drawSourceIsOutput ? target.portId : this.drawSourcePortId;
+                // Check for duplicate
+                const exists = this.edges.some(e => e.source === sourceNodeId && e.target === targetNodeId &&
+                    e.sourcePort === sourcePortId && e.targetPort === targetPortId);
+                if (!exists) {
+                    const newEdge = {
+                        id: `edge-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                        source: sourceNodeId,
+                        target: targetNodeId,
+                        sourcePort: sourcePortId,
+                        targetPort: targetPortId,
+                    };
+                    this.edges = [...this.edges, newEdge];
+                    this.emitEdgeConnect(newEdge);
+                }
+            }
+        }
+        handleWheel(e) {
+            if (!this.zoomEnabled)
+                return;
+            e.preventDefault();
+            const svg = this.svgEl;
+            if (!svg)
+                return;
+            const rect = svg.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            const newScale = Math.max(0.2, Math.min(4, this.zoomScale * delta));
+            this.panX = mouseX - (mouseX - this.panX) * (newScale / this.zoomScale);
+            this.panY = mouseY - (mouseY - this.panY) * (newScale / this.zoomScale);
+            this.zoomScale = newScale;
+            this.rebuild();
+        }
+        // --- Bezier curves ---
+        bezierPath(x1, y1, x2, y2) {
+            const dx = Math.abs(x2 - x1) * 0.5;
+            const cp1x = x1 + dx;
+            const cp1y = y1;
+            const cp2x = x2 - dx;
+            const cp2y = y2;
+            return `M ${x1} ${y1} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${x2} ${y2}`;
+        }
+        // --- Edge preview ---
+        updateEdgePreview() {
+            if (!this.previewGroupEl)
+                return;
+            const sourcePos = this.getPortPosition(this.drawSourceNodeId, this.drawSourcePortId, this.drawSourceIsOutput);
+            let x1, y1, x2, y2;
+            if (this.drawSourceIsOutput) {
+                x1 = sourcePos.x;
+                y1 = sourcePos.y;
+                x2 = this.drawEndX;
+                y2 = this.drawEndY;
+            }
+            else {
+                x1 = this.drawEndX;
+                y1 = this.drawEndY;
+                x2 = sourcePos.x;
+                y2 = sourcePos.y;
+            }
+            const d = this.bezierPath(x1, y1, x2, y2);
+            this.previewGroupEl.innerHTML = `<path class="flow__edge-preview" d="${d}" />`;
+        }
+        clearEdgePreview() {
+            if (this.previewGroupEl) {
+                this.previewGroupEl.innerHTML = '';
+            }
+        }
+        // --- Grid pattern ---
+        gridPatternSvg() {
+            const g = this.gridSize;
+            return `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="flow-grid-small" width="${g}" height="${g}" patternUnits="userSpaceOnUse" patternTransform="translate(${this.panX % (g * this.zoomScale)}, ${this.panY % (g * this.zoomScale)}) scale(${this.zoomScale})"><circle cx="${g / 2}" cy="${g / 2}" r="0.5" fill="var(--snice-color-text-tertiary, rgb(115 115 115))" opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(#flow-grid-small)"/></svg>`;
+        }
+        // --- Rebuild ---
+        rebuild() {
+            this.ensureSvgSetup();
+            this.attachListeners();
+            this.rebuildTransform();
+            this.rebuildEdges();
+            this.rebuildNodes();
+            this.updateGrid();
+            this.updateMinimap();
+        }
+        rebuildTransform() {
+            if (this.transformGroupEl) {
+                this.transformGroupEl.setAttribute('transform', `translate(${this.panX}, ${this.panY}) scale(${this.zoomScale})`);
+            }
+        }
+        rebuildEdges() {
+            if (!this.edgesGroupEl)
+                return;
+            let parts = '';
+            for (const edge of this.edges) {
+                const sourcePort = edge.sourcePort || (this.nodes.find(n => n.id === edge.source)?.outputs?.[0]?.id || '');
+                const targetPort = edge.targetPort || (this.nodes.find(n => n.id === edge.target)?.inputs?.[0]?.id || '');
+                const p1 = this.getPortPosition(edge.source, sourcePort, true);
+                const p2 = this.getPortPosition(edge.target, targetPort, false);
+                const d = this.bezierPath(p1.x, p1.y, p2.x, p2.y);
+                const cls = ['flow__edge'];
+                if (edge.id === this.selectedEdgeId)
+                    cls.push('flow__edge--selected');
+                if (edge.animated)
+                    cls.push('flow__edge--animated');
+                const colorAttr = edge.color ? ` stroke="${edge.color}"` : '';
+                parts += `<path class="${cls.join(' ')}" d="${d}" data-edge-id="${edge.id}" marker-end="url(#flow-arrow)"${colorAttr} />`;
+                if (edge.label) {
+                    const mx = (p1.x + p2.x) / 2;
+                    const my = (p1.y + p2.y) / 2;
+                    parts += `<text class="flow__edge-label" x="${mx}" y="${my - 8}">${edge.label}</text>`;
+                }
+            }
+            this.edgesGroupEl.innerHTML = parts;
+        }
+        rebuildNodes() {
+            const container = this.nodesContainerEl;
+            if (!container)
+                return;
+            let nodesHtml = '';
+            for (const node of this.nodes) {
+                const w = node.width || DEFAULT_NODE_WIDTH;
+                const h = node.height || DEFAULT_NODE_HEIGHT;
+                const x = node.x * this.zoomScale + this.panX;
+                const y = node.y * this.zoomScale + this.panY;
+                const scaledW = w * this.zoomScale;
+                h * this.zoomScale;
+                const cls = ['flow__node'];
+                if (node.id === this.selectedNodeId)
+                    cls.push('flow__node--selected');
+                if (this.dragNode && this.dragNode.id === node.id)
+                    cls.push('flow__node--dragging');
+                const headerBg = node.color ? `background:${node.color};color:white;` : '';
+                nodesHtml += `<div class="${cls.join(' ')}" data-node-id="${node.id}" style="left:${x}px;top:${y}px;width:${scaledW}px;transform-origin:top left;transform:scale(1);">`;
+                nodesHtml += `<div class="flow__node-header" style="${headerBg}">`;
+                if (node.type)
+                    nodesHtml += `<span class="flow__node-type">${node.type}</span>`;
+                nodesHtml += `<span>${node.label || node.id}</span>`;
+                nodesHtml += `</div>`;
+                nodesHtml += `<div class="flow__node-body">`;
+                // Inputs
+                const inputs = node.inputs || [];
+                if (inputs.length > 0) {
+                    nodesHtml += `<div class="flow__node-inputs">`;
+                    for (const port of inputs) {
+                        const connected = this.isPortConnected(node.id, port.id, false);
+                        const pcls = ['flow__port', connected ? 'flow__port--connected' : ''].filter(Boolean).join(' ');
+                        nodesHtml += `<div class="${pcls}" data-port-id="${port.id}" data-port-type="input" data-node-id="${node.id}">`;
+                        nodesHtml += `<span class="flow__port-dot"></span>`;
+                        if (port.label)
+                            nodesHtml += `<span>${port.label}</span>`;
+                        nodesHtml += `</div>`;
+                    }
+                    nodesHtml += `</div>`;
+                }
+                // Outputs
+                const outputs = node.outputs || [];
+                if (outputs.length > 0) {
+                    nodesHtml += `<div class="flow__node-outputs">`;
+                    for (const port of outputs) {
+                        const connected = this.isPortConnected(node.id, port.id, true);
+                        const pcls = ['flow__port', 'flow__port--output', connected ? 'flow__port--connected' : ''].filter(Boolean).join(' ');
+                        nodesHtml += `<div class="${pcls}" data-port-id="${port.id}" data-port-type="output" data-node-id="${node.id}">`;
+                        if (port.label)
+                            nodesHtml += `<span>${port.label}</span>`;
+                        nodesHtml += `<span class="flow__port-dot"></span>`;
+                        nodesHtml += `</div>`;
+                    }
+                    nodesHtml += `</div>`;
+                }
+                nodesHtml += `</div></div>`;
+            }
+            container.innerHTML = nodesHtml;
+            // Attach event listeners to nodes and ports
+            const nodeEls = container.querySelectorAll('.flow__node');
+            nodeEls.forEach(el => {
+                const nodeId = el.getAttribute('data-node-id');
+                el.addEventListener('mousedown', (e) => this.handleNodeMouseDown(e, nodeId));
+            });
+            const portEls = container.querySelectorAll('.flow__port');
+            portEls.forEach(el => {
+                const portId = el.getAttribute('data-port-id');
+                const nodeId = el.getAttribute('data-node-id');
+                const isOutput = el.getAttribute('data-port-type') === 'output';
+                el.addEventListener('mousedown', (e) => this.handlePortMouseDown(e, nodeId, portId, isOutput));
+            });
+        }
+        isPortConnected(nodeId, portId, isOutput) {
+            return this.edges.some(e => {
+                if (isOutput) {
+                    return e.source === nodeId && (e.sourcePort === portId || (!e.sourcePort && portId === this.nodes.find(n => n.id === nodeId)?.outputs?.[0]?.id));
+                }
+                return e.target === nodeId && (e.targetPort === portId || (!e.targetPort && portId === this.nodes.find(n => n.id === nodeId)?.inputs?.[0]?.id));
+            });
+        }
+        updateGrid() {
+            const gridEl = this.containerEl?.querySelector('.flow__grid');
+            if (!gridEl)
+                return;
+            if (this.snapToGrid) {
+                gridEl.innerHTML = this.gridPatternSvg();
+                gridEl.style.display = '';
+            }
+            else {
+                gridEl.style.display = 'none';
+            }
+        }
+        updateMinimap() {
+            const svg = this.minimapSvgEl;
+            if (!svg || !this.minimap)
+                return;
+            if (this.nodes.length === 0) {
+                svg.innerHTML = '';
+                return;
+            }
+            // Calculate bounds
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            for (const node of this.nodes) {
+                const w = node.width || DEFAULT_NODE_WIDTH;
+                const h = node.height || DEFAULT_NODE_HEIGHT;
+                minX = Math.min(minX, node.x);
+                minY = Math.min(minY, node.y);
+                maxX = Math.max(maxX, node.x + w);
+                maxY = Math.max(maxY, node.y + h);
+            }
+            const pad = 40;
+            minX -= pad;
+            minY -= pad;
+            maxX += pad;
+            maxY += pad;
+            const vb = `${minX} ${minY} ${maxX - minX} ${maxY - minY}`;
+            svg.setAttribute('viewBox', vb);
+            let parts = '';
+            // Edges
+            for (const edge of this.edges) {
+                const sourcePort = edge.sourcePort || (this.nodes.find(n => n.id === edge.source)?.outputs?.[0]?.id || '');
+                const targetPort = edge.targetPort || (this.nodes.find(n => n.id === edge.target)?.inputs?.[0]?.id || '');
+                const p1 = this.getPortPosition(edge.source, sourcePort, true);
+                const p2 = this.getPortPosition(edge.target, targetPort, false);
+                parts += `<line class="flow__minimap-edge" x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" />`;
+            }
+            // Nodes
+            for (const node of this.nodes) {
+                const w = node.width || DEFAULT_NODE_WIDTH;
+                const h = node.height || DEFAULT_NODE_HEIGHT;
+                parts += `<rect class="flow__minimap-node" x="${node.x}" y="${node.y}" width="${w}" height="${h}" rx="2" />`;
+            }
+            // Viewport indicator
+            const vpX = -this.panX / this.zoomScale;
+            const vpY = -this.panY / this.zoomScale;
+            const vpW = this.containerWidth / this.zoomScale;
+            const vpH = this.containerHeight / this.zoomScale;
+            parts += `<rect class="flow__minimap-viewport" x="${vpX}" y="${vpY}" width="${vpW}" height="${vpH}" />`;
+            svg.innerHTML = parts;
+        }
+        renderContent() {
+            return html /*html*/ `
+      <div class="flow">
+        <div class="flow__grid"></div>
+        <svg class="flow__svg"></svg>
+        <div class="flow__nodes"></div>
+        <div class="flow__minimap" style="${this.minimap ? '' : 'display:none'}">
+          <svg class="flow__minimap-svg"></svg>
+        </div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceFlow };
+//# sourceMappingURL=snice-flow.js.map