snice 4.9.0 → 4.10.0

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

@@ -0,0 +1,822 @@
+/*!
+ * snice v4.9.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-flow.min.js");}
+var SniceFlow = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property({ type: Array, attribute: false })];
+              _edges_decorators = [snice.property({ type: Array, attribute: false })];
+              _snapToGrid_decorators = [snice.property({ type: Boolean, attribute: 'snap-to-grid' })];
+              _gridSize_decorators = [snice.property({ type: Number, attribute: 'grid-size' })];
+              _zoomEnabled_decorators = [snice.property({ type: Boolean, attribute: 'zoom-enabled' })];
+              _panEnabled_decorators = [snice.property({ type: Boolean, attribute: 'pan-enabled' })];
+              _minimap_decorators = [snice.property({ type: Boolean })];
+              _editable_decorators = [snice.property({ type: Boolean })];
+              _containerEl_decorators = [snice.query('.flow')];
+              _svgEl_decorators = [snice.query('.flow__svg')];
+              _nodesContainerEl_decorators = [snice.query('.flow__nodes')];
+              _minimapSvgEl_decorators = [snice.query('.flow__minimap-svg')];
+              _emitNodeDrag_decorators = [snice.dispatch('node-drag', { bubbles: true, composed: true })];
+              _emitNodeSelect_decorators = [snice.dispatch('node-select', { bubbles: true, composed: true })];
+              _emitEdgeConnect_decorators = [snice.dispatch('edge-connect', { bubbles: true, composed: true })];
+              _emitEdgeDisconnect_decorators = [snice.dispatch('edge-disconnect', { bubbles: true, composed: true })];
+              _emitCanvasClick_decorators = [snice.dispatch('canvas-click', { bubbles: true, composed: true })];
+              _init_decorators = [snice.ready()];
+              _onNodesChange_decorators = [snice.watch('nodes')];
+              _onEdgesChange_decorators = [snice.watch('edges')];
+              _onMinimapChange_decorators = [snice.watch('minimap')];
+              _cleanup_decorators = [snice.dispose()];
+              _renderContent_decorators = [snice.render({ once: true })];
+              _componentStyles_decorators = [snice.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 snice.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 snice.css /*css*/ `${cssContent}`;
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceFlow = SniceFlow;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-flow.js.map