@ghchinoy/litflow 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghchinoy/litflow",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "xyflow core integrated with Lit WebComponents",
   "homepage": "https://litflow.dev",
   "license": "MIT",
@@ -51,6 +51,8 @@
     "@lit-labs/signals": "^0.2.0",
     "@xyflow/system": "^0.0.74",
     "d3-drag": "^3.0.0",
+    "d3-force": "^3.0.0",
+    "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
@@ -64,6 +66,8 @@
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",
     "@types/d3-drag": "^3.0.7",
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-zoom": "^3.0.8",

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lit-flow';
 export * from './lit-node';
+export * from './lit-node-toolbar';
 export * from './lit-edge';
 export * from './lit-handle';
 export * from './lit-controls';

package/src/lit-flow.ts

@@ -25,6 +25,8 @@ import { m3Tokens } from './theme';
 import './lit-node';
 import './lit-edge';
 import dagre from 'dagre';
+import * as d3 from 'd3-force';
+import * as d3h from 'd3-hierarchy';
 
 type Constructor<T> = new (...args: any[]) => T;
 
@@ -108,7 +110,12 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
       box-sizing: border-box;
       color: var(--lit-flow-node-text);
       font-size: var(--md-sys-typescale-body-medium-size);
-      transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, border-width 0.1s ease-in-out;
+      transition: transform 0.4s ease-out, opacity 0.4s ease-in, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, border-width 0.1s ease-in-out;
+    }
+
+    .xyflow__node:active,
+    .xyflow__node.dragging {
+      transition: none !important;
     }
 
     .xyflow__node[type="group"] {
@@ -299,6 +306,24 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
   @property({ type: Number, attribute: 'layout-padding' })
   layoutPadding = 40;
 
+  @property({ type: String, attribute: 'layout-strategy' })
+  layoutStrategy: 'hierarchical' | 'organic' | 'tree' = 'hierarchical';
+
+  @property({ type: String, attribute: 'layout-direction' })
+  layoutDirection: 'LR' | 'TB' = 'LR';
+
+  @property({ type: Boolean, attribute: 'auto-fit', reflect: true, converter: boolConverter })
+  autoFit = false;
+
+  @property({ type: String, attribute: 'focus-node' })
+  focusNode: string | null = null;
+
+  @property({ type: String, attribute: 'focus-direction' })
+  focusDirection: 'downstream' | 'upstream' | 'both' = 'downstream';
+
+  @state()
+  private _isMeasuring = false;
+
   @state()
   private _selectionRect: { x: number; y: number; width: number; height: number } | null = null;
 
@@ -312,16 +337,24 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
 
   @property({ type: Array })
   set nodes(nodes: NodeBase[]) {
-    // Check if layout is enabled and any node is missing a position
-    const needsLayout = this.layoutEnabled && nodes.some(node => !node.position || (node.position.x === undefined || node.position.y === undefined));
+    if (!Array.isArray(nodes)) return;
+
+    // Filter out any null/undefined entries and ensure all nodes have a position
+    const validNodes = nodes.filter(n => n !== null && n !== undefined);
+    const nodesWithPosition = validNodes.map(node => ({
+      ...node,
+      position: node.position || { x: 0, y: 0 }
+    }));
 
-    let nodesToSet = nodes;
-    if (needsLayout) {
-      nodesToSet = this._performLayout(nodes, this.edges);
+    // If layout is enabled and any node is missing measurement, enter measuring mode
+    const needsMeasurement = this.layoutEnabled && nodesWithPosition.some(node => !node.measured || !node.measured.width);
+    
+    if (needsMeasurement) {
+      this._isMeasuring = true;
     }
 
-    this._state.nodes.set(nodesToSet);
-    adoptUserNodes(nodesToSet, this._state.nodeLookup, this._state.parentLookup, {
+    this._state.nodes.set(nodesWithPosition);
+    adoptUserNodes(nodesWithPosition, this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent,
     });
@@ -333,7 +366,7 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
   }
 
   get nodes() {
-    return this._state.nodes.get();
+    return this._state.nodes.get() || [];
   }
 
   private _notifyChange() {
@@ -373,32 +406,151 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
   }
 
   private _performLayout(nodesToLayout: NodeBase[], edgesToLayout: any[]): LayoutNode[] {
-    const g = new dagre.graphlib.Graph();
-    g.setGraph({}); // Set graph defaults, e.g., { rankdir: 'LR' } for left-to-right
+    if (nodesToLayout.length === 0) return [];
+    console.log(`LitFlow: Performing layout using ${this.layoutStrategy}`, { 
+      nodes: nodesToLayout.length, 
+      edges: edgesToLayout.length,
+      measuring: this._isMeasuring
+    });
 
-    // Default to a left-to-right layout for dependency graphs
-    g.graph().rankdir = 'LR';
-    g.graph().nodesep = this.layoutPadding; // Horizontal spacing
-    g.graph().edgesep = this.layoutPadding; // Spacing between parallel edges
-    g.graph().ranksep = this.layoutPadding * 2; // Vertical spacing between ranks/layers
+    if (this.layoutStrategy === 'tree') {
+      try {
+        const stratifier = d3h.stratify()
+          .id((d: any) => d.id)
+          .parentId((d: any) => {
+            const edge = edgesToLayout.find(e => e.target === d.id);
+            return edge ? edge.source : undefined;
+          });
+
+        const root = stratifier(nodesToLayout);
+        
+        const isHorizontal = this.layoutDirection === 'LR';
+        const verticalSpacing = this.layoutPadding * 2;
+        const crossSpacing = 250; 
+        
+        const treeLayout = d3h.tree().nodeSize(
+          isHorizontal ? [verticalSpacing, crossSpacing] : [crossSpacing, verticalSpacing]
+        );
+        
+        treeLayout(root);
+
+        const nodeMap = new Map();
+        root.descendants().forEach(d => {
+          if (isHorizontal) {
+            nodeMap.set(d.id, { x: d.y, y: d.x });
+          } else {
+            nodeMap.set(d.id, { x: d.x, y: d.y });
+          }
+        });
+
+        return nodesToLayout.map(node => {
+          const pos = nodeMap.get(node.id) || { x: 0, y: 0 };
+          return {
+            ...node,
+            position: pos
+          } as LayoutNode;
+        });
+      } catch (e) {
+        console.warn('Tree layout failed (multiple parents or cycles detected). Falling back to hierarchical.', e);
+        // Fallback to dagre below
+      }
+    }
+
+    if (this.layoutStrategy === 'organic') {
+      // Organic Layout (D3-Force)
+      const simulationNodes = nodesToLayout.map(n => ({
+        id: n.id,
+        type: n.type,
+        x: n.position?.x ?? 0,
+        y: n.position?.y ?? 0,
+        width: n.measured?.width || 150,
+        height: n.measured?.height || 50
+      }));
+
+      // Only include links where both source and target exist in the current set
+      const nodeIds = new Set(nodesToLayout.map(n => n.id));
+      const validLinks = edgesToLayout
+        .filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+        .map(e => ({
+          source: e.source,
+          target: e.target
+        }));
+
+      const simulation = d3.forceSimulation(simulationNodes as any)
+        .force('link', d3.forceLink(validLinks).id((d: any) => d.id).distance(this.layoutPadding * 4))
+        .force('charge', d3.forceManyBody().strength(-800))
+        .force('collide', d3.forceCollide().radius((d: any) => Math.max(d.width, d.height) / 2 + this.layoutPadding))
+        .force('center', d3.forceCenter(400, 300))
+        // Add horizontal bias to prevent tangling: 
+        // pull inputs to the left, outputs to the right, and others to the center
+        .force('x', d3.forceX().x((d: any) => {
+          if (d.type === 'input') return 100;
+          if (d.type === 'output') return 700;
+          return 400;
+        }).strength(0.1))
+        .stop();
+
+      // Run simulation synchronously
+      for (let i = 0; i < 300; ++i) simulation.tick();
+
+      return nodesToLayout.map((node, i) => {
+        const simNode = simulationNodes[i];
+        return {
+          ...node,
+          position: {
+            x: simNode.x - (simNode.width / 2),
+            y: simNode.y - (simNode.height / 2)
+          }
+        } as LayoutNode;
+      });
+    }
+
+    // Hierarchical Layout (Dagre) - Default
+    const g = new dagre.graphlib.Graph({ multigraph: true });
+    g.setGraph({});
+
+    g.graph().rankdir = this.layoutDirection;
+    g.graph().nodesep = this.layoutPadding;
+    g.graph().edgesep = this.layoutPadding;
+    g.graph().ranksep = this.layoutPadding * 2;
 
-    // Add nodes to the graphlib. Each node must have a width and height for dagre to work.
     nodesToLayout.forEach((node) => {
-      // Use estimated or default dimensions if not measured yet
-      const width = node.measured?.width || 150; // Default width
-      const height = node.measured?.height || 50; // Default height
-      g.setNode(node.id, { label: node.id, width, height });
+      const width = node.measured?.width || 150;
+      const height = node.measured?.height || 50;
+      g.setNode(String(node.id), { label: node.id, width, height });
     });
 
-    // Add edges to the graphlib
-    edgesToLayout.forEach((edge) => {
-      g.setEdge(edge.source, edge.target);
-    });
+    // CRITICAL STABILITY CHECK:
+    // Only add edges if all nodes have been added to the graph.
+    const allNodesHaveDimensions = nodesToLayout.every(n => n.measured?.width && n.measured.width > 0);
+    
+    if (allNodesHaveDimensions && edgesToLayout.length > 0) {
+      edgesToLayout.forEach((edge) => {
+        const v = String(edge.source);
+        const w = String(edge.target);
+        const name = String(edge.id);
+        // Ensure BOTH nodes exist in Dagre graph before adding edge
+        if (g.hasNode(v) && g.hasNode(w)) {
+          // Providing {} as the value is required for some dagre versions to avoid 'points' error
+          g.setEdge(v, w, {}, name);
+        }
+      });
+    }
 
-    dagre.layout(g);
+    try {
+      dagre.layout(g);
+    } catch (e) {
+      console.error('LitFlow: Dagre layout engine failed', e);
+      return nodesToLayout as LayoutNode[];
+    }
 
-    const newNodes = nodesToLayout.map((node) => {
-      const graphNode = g.node(node.id);
+    return nodesToLayout.map((node) => {
+      const graphNode = g.node(String(node.id));
+      // Fallback if dagre didn't position the node
+      if (!graphNode || graphNode.x === undefined) {
+        return { ...node, position: node.position || { x: 0, y: 0 } } as LayoutNode;
+      }
+      
       return {
         ...node,
         position: {
@@ -407,8 +559,6 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
         },
       } as LayoutNode;
     });
-
-    return newNodes;
   }
 
   @property({ type: Array })
@@ -539,19 +689,20 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
   /**
    * Fits the view to the current nodes.
    * @param padding Optional padding in pixels (default: 50)
+   * @param duration Optional animation duration in ms (default: 400)
    */
-  async fitView(padding = 50) {
+  async fitView(padding = 50, duration = 400) {
     if (!this._panZoom || this.nodes.length === 0) return;
 
-    const nodes = Array.from(this._state.nodeLookup.values());
-    if (nodes.length === 0) return;
+    const visibleNodes = Array.from(this._state.nodeLookup.values()).filter(n => !n.hidden);
+    if (visibleNodes.length === 0) return;
 
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
     let maxY = -Infinity;
 
-    nodes.forEach((node) => {
+    visibleNodes.forEach((node) => {
       const { x, y } = node.internals.positionAbsolute;
       const width = node.measured.width || 0;
       const height = node.measured.height || 0;
@@ -571,12 +722,14 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
 
     const zoomX = (containerWidth - padding * 2) / graphWidth;
     const zoomY = (containerHeight - padding * 2) / graphHeight;
-    const zoom = Math.min(zoomX, zoomY, 1); // Don't zoom in past 1:1
+    
+    // Smart Zoom: Only zoom out if it doesn't fit at 1:1. Never zoom in past 1:1.
+    const zoom = Math.min(zoomX, zoomY, 1);
 
     const x = (containerWidth - graphWidth * zoom) / 2 - minX * zoom;
     const y = (containerHeight - graphHeight * zoom) / 2 - minY * zoom;
 
-    await this._panZoom.setViewport({ x, y, zoom }, { duration: 400 });
+    await this._panZoom.setViewport({ x, y, zoom }, { duration });
   }
 
   /**
@@ -704,17 +857,70 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
       this._updatePanZoom();
     }
 
-    // Trigger layout if layout is enabled and nodes/edges change or layout properties change
-    if (this.layoutEnabled && (
-      changedProperties.has('nodes') ||
-      changedProperties.has('edges') ||
+    // Handle Render-Measure-Reflow completion
+    if (this._isMeasuring) {
+      // Use double rAF to ensure browser has painted and ResizeObserver has updated
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const allMeasured = this.nodes.every(n => n.measured?.width && n.measured.width > 0);
+          if (allMeasured) {
+            this._isMeasuring = false;
+            const newNodes = this._performLayout(this.nodes, this.edges);
+            this.nodes = newNodes; 
+            
+            if (this.autoFit) {
+              setTimeout(() => this.fitView(), 50);
+            }
+            
+            this.dispatchEvent(new CustomEvent('layout-complete', {
+              detail: { strategy: this.layoutStrategy }
+            }));
+          }
+        });
+      });
+      return;
+    }
+
+    // Trigger layout if layout properties change (and we aren't already measuring)
+    if (!this._isMeasuring && this.layoutEnabled && (
       changedProperties.has('layoutEnabled') ||
-      changedProperties.has('layoutPadding')
+      changedProperties.has('layoutPadding') ||
+      changedProperties.has('layoutStrategy') ||
+      changedProperties.has('layoutDirection')
     )) {
       const newNodes = this._performLayout(this.nodes, this.edges);
-      if (JSON.stringify(newNodes.map(n => n.position)) !== JSON.stringify(this.nodes.map(n => n.position))) {
-        this._state.nodes.set(newNodes);
-        this._notifyChange();
+      this.nodes = newNodes;
+      
+      if (this.autoFit) {
+        setTimeout(() => this.fitView(), 50);
+      }
+
+      // If strategy or direction changed, handles moved. Force re-measurement of all nodes.
+      if (changedProperties.has('layoutStrategy') || changedProperties.has('layoutDirection')) {
+        this.shadowRoot?.querySelectorAll('.xyflow__node').forEach((el) => {
+          const id = (el as HTMLElement).dataset.id;
+          if (id) this._updateNodeDimensions(id, el as HTMLElement);
+        });
+      }
+
+      this.dispatchEvent(new CustomEvent('layout-complete', {
+        detail: { strategy: this.layoutStrategy, direction: this.layoutDirection }
+      }));
+    }
+
+    // Handle Auto-Fit on graph changes
+    if (this.autoFit && !this._isMeasuring && (changedProperties.has('nodes') || changedProperties.has('edges'))) {
+      // Use a small delay to ensure rendering is stable
+      setTimeout(() => this.fitView(), 100);
+    }
+
+    // Reactive Subgraph Isolation
+    if (changedProperties.has('focusNode') || changedProperties.has('focusDirection')) {
+      if (this.focusNode) {
+        this.isolateSubgraph(this.focusNode, this.focusDirection);
+      } else if (changedProperties.get('focusNode')) {
+        // Only clear if it was previously set
+        this.clearIsolation();
       }
     }
   }
@@ -774,6 +980,12 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
                     node.internals.positionAbsolute = item.internals.positionAbsolute;
                     const userNode = this.nodes.find((n) => n.id === id);
                     if (userNode) userNode.position = item.position;
+
+                    // Performance: Directly update DOM transform to eliminate lag vs edges
+                    const el = this.shadowRoot?.querySelector(`.xyflow__node[data-id="${id}"]`) as HTMLElement;
+                    if (el) {
+                      el.style.transform = `translate(${item.position.x}px, ${item.position.y}px)`;
+                    }
                   }
                 });
 
@@ -783,7 +995,7 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
                   nodeExtent: this._state.nodeExtent,
                 });
 
-                // Trigger update via signal
+                // Trigger update via signal (asynchronously)
                 this._state.nodes.set([...this.nodes]);
                 this._notifyChange();
               },
@@ -1135,6 +1347,60 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
     });
   }
 
+  private _onNodeResizeStart(e: CustomEvent) {
+    const { nodeId, event } = e.detail;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    
+    const node = this._state.nodeLookup.get(nodeId);
+    if (!node) return;
+
+    const startWidth = node.measured.width || 150;
+    const startHeight = node.measured.height || 50;
+    const zoom = this._state.transform.get()[2];
+
+    const onPointerMove = (moveEvent: PointerEvent) => {
+      const deltaX = (moveEvent.clientX - startX) / zoom;
+      const deltaY = (moveEvent.clientY - startY) / zoom;
+      
+      const newWidth = Math.max(50, startWidth + deltaX);
+      const newHeight = Math.max(30, startHeight + deltaY);
+
+      // Update node dimensions
+      node.measured = { width: newWidth, height: newHeight };
+      
+      // Sync back to user node
+      const userNode = this.nodes.find(n => n.id === nodeId) as any;
+      if (userNode) {
+        userNode.width = newWidth;
+        userNode.height = newHeight;
+        if (!userNode.style) userNode.style = {};
+        userNode.style.width = `${newWidth}px`;
+        userNode.style.height = `${newHeight}px`;
+      }
+
+      // Update absolute positions and signal
+      updateAbsolutePositions(this._state.nodeLookup, this._state.parentLookup, {
+        nodeOrigin: this._state.nodeOrigin,
+        nodeExtent: this._state.nodeExtent,
+      });
+      this._state.nodes.set([...this.nodes]);
+      this._notifyChange();
+    };
+
+    const onPointerUp = () => {
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerUp);
+      
+      this.dispatchEvent(new CustomEvent('node-resize-end', {
+        detail: { nodeId, width: node.measured.width, height: node.measured.height }
+      }));
+    };
+
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+  }
+
   private _onDragOver(e: DragEvent) {
     e.preventDefault();
     if (e.dataTransfer) {
@@ -1284,14 +1550,17 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
         }}"
       >
         <div
-          class="xyflow__viewport"
-          style="transform: translate(${transform[0]}px, ${transform[1]}px) scale(${transform[2]})"
+          class="xyflow__reveal-container"
+          style="width: 100%; height: 100%; transition: opacity 0.4s ease-in-out, transform 0.4s ease-out; opacity: ${this._isMeasuring ? '0' : '1'}; transform: ${this._isMeasuring ? 'scale(0.98)' : 'scale(1)'};"
         >
-          <div class="xyflow__nodes" @handle-pointer-down="${this._onHandlePointerDown}">
+          <div class="xyflow__viewport"
+            style="transform: translate(${transform[0]}px, ${transform[1]}px) scale(${transform[2]})"
+          >
+          <div class="xyflow__nodes" @handle-pointer-down="${this._onHandlePointerDown}" @node-resize-start="${this._onNodeResizeStart}">
             ${this.nodes.map((node) => {
               if (node.hidden) return null;
               const internalNode = this._state.nodeLookup.get(node.id);
-              const pos = internalNode?.internals.positionAbsolute || node.position;
+              const pos = internalNode?.internals.positionAbsolute || node.position || { x: 0, y: 0 };
               const tagName = this.nodeTypes[node.type || 'default'] || this.nodeTypes.default;
               const tag = unsafeStatic(tagName);
 
@@ -1306,6 +1575,9 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
               const heightStyle = height ? `height: ${typeof height === 'number' ? `${height}px` : height};` : '';
               const zIndex = (node as any).zIndex ? `z-index: ${(node as any).zIndex};` : '';
 
+              const autoOrientation = (this.layoutDirection === 'LR') ? 'horizontal' : 'vertical';
+              const orientation = (node as any).orientation || autoOrientation;
+
               return html`
                 <${tag}
                   class="xyflow__node"
@@ -1317,6 +1589,8 @@ export class LitFlow extends (SignalWatcher as <T extends Constructor<LitElement
                   .label="${(node.data as any).label}"
                   .type="${node.type || 'default'}"
                   ?selected="${node.selected}"
+                  ?resizable="${(node as any).resizable}"
+                  .orientation="${orientation}"
                 >
                 </${tag}>
               `;

package/src/lit-node-toolbar.ts

@@ -0,0 +1,38 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('lit-node-toolbar')
+export class LitNodeToolbar extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      gap: 4px;
+      padding: 4px;
+      background-color: var(--md-sys-color-surface-container-high);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: var(--md-sys-shape-corner-small);
+      box-shadow: var(--md-sys-elevation-2);
+      pointer-events: all;
+    }
+
+    ::slotted(button) {
+      background: none;
+      border: none;
+      padding: 4px 8px;
+      cursor: pointer;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--md-sys-typescale-label-medium-font);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      transition: background-color 0.2s;
+    }
+
+    ::slotted(button:hover) {
+      background-color: var(--md-sys-color-surface-container-highest);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/lit-node.ts

@@ -22,6 +22,12 @@ export class LitNode extends (SignalWatcher as <T extends Constructor<LitElement
   @property({ type: Boolean, reflect: true })
   selected = false;
 
+  @property({ type: Boolean, reflect: true })
+  resizable = false;
+
+  @property({ type: String, reflect: true })
+  orientation: 'vertical' | 'horizontal' = 'vertical';
+
   @property({ type: String, attribute: 'data-id', reflect: true })
   nodeId = '';
 
@@ -31,8 +37,24 @@ export class LitNode extends (SignalWatcher as <T extends Constructor<LitElement
   @property({ type: Number, attribute: 'position-y' })
   positionY = 0;
 
+  willUpdate(changedProperties: Map<string, any>) {
+    if (changedProperties.has('selected')) {
+      console.log(`LitNode ${this.nodeId} selected changed:`, this.selected);
+    }
+    // In Light DOM, sometimes boolean attributes need manual sync from the element attribute
+    if (this.hasAttribute('selected') !== this.selected) {
+      this.selected = this.hasAttribute('selected');
+    }
+  }
+
   render() {
     return html`
+      <div 
+        class="node-toolbar-container" 
+        style="position: absolute; top: -45px; left: 50%; transform: translateX(-50%); z-index: 100; pointer-events: all; display: ${this.selected ? 'block' : 'none'};"
+      >
+        <slot name="toolbar"></slot>
+      </div>
       <div class="content-wrapper" style="padding: 12px; display: flex; flex-direction: column; gap: 4px; pointer-events: none;">
         <div class="headline" style="font-size: var(--md-sys-typescale-title-small-size); font-weight: var(--md-sys-typescale-title-small-weight); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-title-small-font);">
           <slot name="headline">${this.label}</slot>
@@ -42,12 +64,28 @@ export class LitNode extends (SignalWatcher as <T extends Constructor<LitElement
         </div>
         <slot></slot>
       </div>
+      ${this.resizable && this.selected
+        ? html`<div 
+            class="resize-handle" 
+            style="position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid var(--md-sys-color-primary); border-bottom: 2px solid var(--md-sys-color-primary); cursor: nwse-resize; pointer-events: all; z-index: 100;"
+            @pointerdown="${this._onResizeStart}"
+          ></div>` 
+        : ''}
       ${this.type === 'input' || this.type === 'default'
-        ? html`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>`
+        ? html`<lit-handle type="source" .position="${this.orientation === 'horizontal' ? 'right' : 'bottom'}" data-handlepos="${this.orientation === 'horizontal' ? 'right' : 'bottom'}" data-nodeid="${this.nodeId}"></lit-handle>`
         : ''}
       ${this.type === 'output' || this.type === 'default'
-        ? html`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>`
+        ? html`<lit-handle type="target" .position="${this.orientation === 'horizontal' ? 'left' : 'top'}" data-handlepos="${this.orientation === 'horizontal' ? 'left' : 'top'}" data-nodeid="${this.nodeId}"></lit-handle>`
         : ''}
     `;
   }
+
+  private _onResizeStart(e: PointerEvent) {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('node-resize-start', {
+      detail: { nodeId: this.nodeId, event: e },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }