@ngroznykh/papirus 0.3.22 → 0.5.0

package/dist/papirus.js

@@ -457,7 +457,6 @@ const MARKER_SIZES = {
   diamond: 14,
   circle: 6
 };
-const EDGE_LABEL_BACKGROUND_PADDING = 4;
 const EDGE_LABEL_BACKGROUND_RADIUS = 2;
 const RESIZE_HANDLE_SIZE = 8;
 const RESIZE_HANDLE_OFFSET = 6;
@@ -571,6 +570,14 @@ class SelectionManager extends EventEmitter {
       }
       return;
     }
+    const node = element;
+    if (typeof node.getBadgeAtPoint === "function") {
+      const badge = node.getBadgeAtPoint(point);
+      if (badge !== null) {
+        this.renderer.emit("nodeBadgeClick", element.id, badge.id);
+        return;
+      }
+    }
     if (event.ctrlKey || event.metaKey) {
       this.toggleSelection(element.id);
     } else {
@@ -2600,6 +2607,23 @@ function applyStyleManagerToElements(styleManager, groups, edges, nodes) {
     node.applyStyleManager(styleManager);
   }
 }
+const DEFAULT_INSET = 8;
+function normalizeTextInset(value, fallback) {
+  const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : fallback;
+  if (value === void 0) {
+    return { top: fallback, right: fallback, bottom: fallback, left: fallback };
+  }
+  if (typeof value === "number") {
+    const v = n(value);
+    return { top: v, right: v, bottom: v, left: v };
+  }
+  return {
+    top: n(value.top),
+    right: n(value.right),
+    bottom: n(value.bottom),
+    left: n(value.left)
+  };
+}
 const DEFAULT_STYLE = {
   font: "14px sans-serif",
   fontSize: 14,
@@ -2608,7 +2632,8 @@ const DEFAULT_STYLE = {
   color: "#000000",
   opacity: 1,
   align: "center",
-  baseline: "middle"
+  baseline: "middle",
+  verticalAlign: "middle"
 };
 class TextLabel {
   constructor(options) {
@@ -2621,8 +2646,10 @@ class TextLabel {
     this._localStyle = { ...options.style };
     this._style = { ...DEFAULT_STYLE, ...options.style };
     this._maxWidth = options.maxWidth;
-    this._padding = options.padding ?? 8;
-    this._margin = Number.isFinite(options.margin) ? Math.max(0, options.margin ?? 0) : 0;
+    this._inset = normalizeTextInset(
+      options.inset ?? options.margin ?? options.padding,
+      DEFAULT_INSET
+    );
     this._styleClass = options.styleClass;
     this._onChange = options.onChange;
   }
@@ -2667,6 +2694,12 @@ class TextLabel {
     this._measureDirty = true;
     this._onChange?.();
   }
+  /**
+   * Raw text style overrides (without StyleManager merge)
+   */
+  get styleOverrides() {
+    return { ...this._localStyle };
+  }
   /**
    * Style class name for StyleManager
    */
@@ -2708,30 +2741,15 @@ class TextLabel {
     this._measureDirty = true;
   }
   /**
-   * Label padding
+   * Inset from bounds edge to text (per side: top, right, bottom, left)
    */
-  get padding() {
-    return this._padding;
+  get inset() {
+    return { ...this._inset };
   }
-  set padding(value) {
-    const next = Number.isFinite(value) ? Math.max(0, value) : this._padding;
-    if (this._padding !== next) {
-      this._padding = next;
-      this._lines = [];
-      this._measureDirty = true;
-      this._onChange?.();
-    }
-  }
-  /**
-   * Label margin
-   */
-  get margin() {
-    return this._margin;
-  }
-  set margin(value) {
-    const next = Number.isFinite(value) ? Math.max(0, value) : this._margin;
-    if (this._margin !== next) {
-      this._margin = next;
+  set inset(value) {
+    const next = normalizeTextInset(value, DEFAULT_INSET);
+    if (this._inset.top !== next.top || this._inset.right !== next.right || this._inset.bottom !== next.bottom || this._inset.left !== next.left) {
+      this._inset = next;
       this._lines = [];
       this._measureDirty = true;
       this._onChange?.();
@@ -2764,7 +2782,7 @@ class TextLabel {
   }
   /**
    * Get wrapped lines for export. Uses ctx to measure and wrap by words.
-   * Call with maxWidth = inner bounds width (e.g. bounds.width - margin*2).
+   * Call with maxWidth = inner bounds width (e.g. bounds.width - inset*2).
    */
   getWrappedLines(ctx, maxWidth) {
     this.setAutoMaxWidth(maxWidth);
@@ -2786,8 +2804,11 @@ class TextLabel {
     const effectiveMaxWidth = this._maxWidth ?? this._autoMaxWidth;
     const text = this._text ?? "";
     if (effectiveMaxWidth !== void 0) {
-      const maxWidth = Math.max(0, effectiveMaxWidth - this._margin * 2);
-      this._lines = this.wrapText(ctx, text, Math.max(0, maxWidth - this._padding * 2));
+      const maxWidth = Math.max(
+        0,
+        effectiveMaxWidth - this._inset.left - this._inset.right
+      );
+      this._lines = this.wrapText(ctx, text, maxWidth);
     } else {
       this._lines = text.split("\n");
     }
@@ -2796,8 +2817,8 @@ class TextLabel {
       const metrics = ctx.measureText(line);
       maxLineWidth = Math.max(maxLineWidth, metrics.width);
     }
-    this._measuredWidth = maxLineWidth + this._padding * 2 + this._margin * 2;
-    this._measuredHeight = this._lines.length * lineHeight + this._padding * 2 + this._margin * 2;
+    this._measuredWidth = maxLineWidth + this._inset.left + this._inset.right;
+    this._measuredHeight = this._lines.length * lineHeight + this._inset.top + this._inset.bottom;
     this._measureDirty = false;
     return {
       width: this._measuredWidth,
@@ -2818,25 +2839,41 @@ class TextLabel {
     }
     const lineHeight = (this._style.fontSize ?? 14) * 1.2;
     const totalHeight = this._lines.length * lineHeight;
-    const margin = this._margin;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + this._inset.left,
+      y: bounds.y + this._inset.top,
+      width: Math.max(
+        0,
+        bounds.width - this._inset.left - this._inset.right
+      ),
+      height: Math.max(
+        0,
+        bounds.height - this._inset.top - this._inset.bottom
+      )
     };
     let x;
     switch (align) {
       case "left":
-        x = innerBounds.x + this._padding;
+        x = innerBounds.x;
         break;
       case "right":
-        x = innerBounds.x + innerBounds.width - this._padding;
+        x = innerBounds.x + innerBounds.width;
         break;
       default:
         x = innerBounds.x + innerBounds.width / 2;
     }
-    const startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
+    const verticalAlign = this._style.verticalAlign ?? "middle";
+    let startY;
+    switch (verticalAlign) {
+      case "top":
+        startY = innerBounds.y + lineHeight / 2;
+        break;
+      case "bottom":
+        startY = innerBounds.y + innerBounds.height - totalHeight + lineHeight / 2;
+        break;
+      default:
+        startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
+    }
     ctx.fillStyle = this._style.color ?? "#000000";
     for (let i = 0; i < this._lines.length; i++) {
       const line = this._lines[i];
@@ -2851,16 +2888,13 @@ class TextLabel {
     if (this._lines.length === 0) {
       this.measure(ctx);
     }
-    this.applyStyle(ctx);
-    const lineHeight = (this._style.fontSize ?? 14) * 1.2;
-    const totalHeight = this._lines.length * lineHeight;
-    const startY = point.y - totalHeight / 2 + lineHeight / 2;
-    ctx.fillStyle = this._style.color ?? "#000000";
-    for (let i = 0; i < this._lines.length; i++) {
-      const line = this._lines[i];
-      const y = startY + i * lineHeight;
-      ctx.fillText(line, point.x, y);
-    }
+    const bounds = {
+      x: point.x - this._measuredWidth / 2,
+      y: point.y - this._measuredHeight / 2,
+      width: this._measuredWidth,
+      height: this._measuredHeight
+    };
+    this.render(ctx, bounds);
   }
   applyStyle(ctx) {
     const fontSize = this._style.fontSize ?? 14;
@@ -2906,7 +2940,9 @@ const snapshotLabel = (label) => {
   return {
     text: label.text,
     editableText: label.editableText,
-    style: cloneValue(label.style),
+    // Keep only local text overrides; computed style contains theme/class values
+    // and would overwrite class text color on debounced history replay.
+    style: cloneValue(label.styleOverrides),
     styleClass: label.styleClass,
     maxWidth: label.maxWidth
   };
@@ -4732,14 +4768,13 @@ class Edge extends Element {
     this._label.measure(ctx);
     const labelWidth = this._label.measuredWidth;
     const labelHeight = this._label.measuredHeight;
-    const bgPadding = this._labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
     const bgColor = this._labelBackground?.color ?? "#ffffff";
     const bgOpacity = this._labelBackground?.opacity ?? 1;
     const bgRadius = this._labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
-    const bgX = labelPosition.x - labelWidth / 2 - bgPadding;
-    const bgY = labelPosition.y - labelHeight / 2 - bgPadding;
-    const bgWidth = labelWidth + bgPadding * 2;
-    const bgHeight = labelHeight + bgPadding * 2;
+    const bgX = labelPosition.x - labelWidth / 2;
+    const bgY = labelPosition.y - labelHeight / 2;
+    const bgWidth = labelWidth;
+    const bgHeight = labelHeight;
     ctx.fillStyle = bgColor;
     ctx.globalAlpha = bgOpacity;
     if (bgRadius > 0) {
@@ -4975,6 +5010,7 @@ class InteractionManager {
     this.overlayDragSession = null;
     this.handledOverlayMouseDown = false;
     this.renderer = options.renderer;
+    this.navigationOnly = options.navigationOnly ?? false;
     this.inputHandler = new InputHandler({
       canvas: this.renderer.getCanvas(),
       screenToWorld: (x, y) => this.renderer.screenToWorld(x, y)
@@ -5044,6 +5080,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("node", nodeId, before, after);
   }
   changeEdgeProperties(edgeId, apply) {
@@ -5057,6 +5094,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("edge", edgeId, before, after);
   }
   changeGroupProperties(groupId, apply) {
@@ -5070,6 +5108,7 @@ class InteractionManager {
     if (shallowEqual(before, after)) {
       return;
     }
+    this.renderer.markStyleDirty();
     this.queuePropertyChange("group", groupId, before, after);
   }
   removeNodeFromGroups(nodeId, groupIds) {
@@ -5123,13 +5162,15 @@ class InteractionManager {
   setupEvents(options) {
     this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => {
       this.selectionManager.renderSelectionRect(ctx);
-      this.dragManager.renderAlignmentGuides(ctx);
-      this.connectionManager.renderPreview(ctx);
-      this.connectionManager.renderHoverAnchors(ctx);
-      for (const id of this.selectionManager.selectedIds) {
-        const node = this.renderer.getNode(id);
-        if (node) {
-          node.renderResizeHandles(ctx);
+      if (!this.navigationOnly) {
+        this.dragManager.renderAlignmentGuides(ctx);
+        this.connectionManager.renderPreview(ctx);
+        this.connectionManager.renderHoverAnchors(ctx);
+        for (const id of this.selectionManager.selectedIds) {
+          const node = this.renderer.getNode(id);
+          if (node) {
+            node.renderResizeHandles(ctx);
+          }
         }
       }
     });
@@ -5143,68 +5184,70 @@ class InteractionManager {
     this.inputHandler.on("pinch", (event) => this.handlePinch(event));
     this.inputHandler.on("keydown", (event) => this.handleKeyDown(event, options));
     this.inputHandler.on("keyup", (event) => this.handleKeyUp(event));
-    this.dragManager.on("dragstart", (nodeIds) => {
-      this.connectionManager.disableHover();
-      this.dragStartPositions.clear();
-      for (const id of nodeIds) {
-        const node = this.renderer.getNode(id);
-        if (node) {
-          this.dragStartPositions.set(id, { x: node.x, y: node.y });
-        }
-      }
-    });
-    this.dragManager.on("dragend", (nodeIds) => {
-      this.connectionManager.enableHover();
-      const nodePositions = /* @__PURE__ */ new Map();
-      for (const id of nodeIds) {
-        const node = this.renderer.getNode(id);
-        const before = this.dragStartPositions.get(id);
-        if (!node || !before) continue;
-        const after = { x: node.x, y: node.y };
-        if (before.x !== after.x || before.y !== after.y) {
-          nodePositions.set(id, { before, after });
-        }
-      }
-      if (nodePositions.size > 0) {
-        this.historyManager.execute(
-          new MoveNodesCommand((id) => this.renderer.getNode(id), nodePositions)
-        );
-      }
-    });
-    this.connectionManager.on("edgeReconnectStart", (edge, endpoint, original) => {
-      this.reconnectOrigins.set(edge.id, { endpoint, original: { ...original } });
-    });
-    this.connectionManager.on("edgeReconnect", (edge, endpoint) => {
-      const origin = this.reconnectOrigins.get(edge.id);
-      if (!origin || origin.endpoint !== endpoint) {
-        return;
-      }
-      const before = origin.original;
-      const after = endpoint === "start" ? edge.from : edge.to;
-      if (this.endpointsEqual(before, after)) {
-        this.reconnectOrigins.delete(edge.id);
-        return;
-      }
-      this.historyManager.execute({
-        execute: () => {
-          if (endpoint === "start") {
-            edge.from = { ...after };
-          } else {
-            edge.to = { ...after };
+    if (!this.navigationOnly) {
+      this.dragManager.on("dragstart", (nodeIds) => {
+        this.connectionManager.disableHover();
+        this.dragStartPositions.clear();
+        for (const id of nodeIds) {
+          const node = this.renderer.getNode(id);
+          if (node) {
+            this.dragStartPositions.set(id, { x: node.x, y: node.y });
           }
-          this.renderer.markDirty();
-        },
-        undo: () => {
-          if (endpoint === "start") {
-            edge.from = { ...before };
-          } else {
-            edge.to = { ...before };
+        }
+      });
+      this.dragManager.on("dragend", (nodeIds) => {
+        this.connectionManager.enableHover();
+        const nodePositions = /* @__PURE__ */ new Map();
+        for (const id of nodeIds) {
+          const node = this.renderer.getNode(id);
+          const before = this.dragStartPositions.get(id);
+          if (!node || !before) continue;
+          const after = { x: node.x, y: node.y };
+          if (before.x !== after.x || before.y !== after.y) {
+            nodePositions.set(id, { before, after });
           }
-          this.renderer.markDirty();
+        }
+        if (nodePositions.size > 0) {
+          this.historyManager.execute(
+            new MoveNodesCommand((id) => this.renderer.getNode(id), nodePositions)
+          );
         }
       });
-      this.reconnectOrigins.delete(edge.id);
-    });
+      this.connectionManager.on("edgeReconnectStart", (edge, endpoint, original) => {
+        this.reconnectOrigins.set(edge.id, { endpoint, original: { ...original } });
+      });
+      this.connectionManager.on("edgeReconnect", (edge, endpoint) => {
+        const origin = this.reconnectOrigins.get(edge.id);
+        if (!origin || origin.endpoint !== endpoint) {
+          return;
+        }
+        const before = origin.original;
+        const after = endpoint === "start" ? edge.from : edge.to;
+        if (this.endpointsEqual(before, after)) {
+          this.reconnectOrigins.delete(edge.id);
+          return;
+        }
+        this.historyManager.execute({
+          execute: () => {
+            if (endpoint === "start") {
+              edge.from = { ...after };
+            } else {
+              edge.to = { ...after };
+            }
+            this.renderer.markDirty();
+          },
+          undo: () => {
+            if (endpoint === "start") {
+              edge.from = { ...before };
+            } else {
+              edge.to = { ...before };
+            }
+            this.renderer.markDirty();
+          }
+        });
+        this.reconnectOrigins.delete(edge.id);
+      });
+    }
     this.historyManager.on("change", () => {
       this.renderer.markDirty();
     });
@@ -5212,14 +5255,16 @@ class InteractionManager {
   handleMouseDown(event) {
     this.handledScrollbarMouseDown = false;
     this.handledOverlayMouseDown = false;
-    if (this.resizeManager.handleMouseDown(event)) {
-      return;
-    }
-    if (this.connectionManager.tryStartReconnection(event)) {
-      return;
-    }
-    if (this.connectionManager.tryStartConnectionAtPoint(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseDown(event)) {
+        return;
+      }
+      if (this.connectionManager.tryStartReconnection(event)) {
+        return;
+      }
+      if (this.connectionManager.tryStartConnectionAtPoint(event)) {
+        return;
+      }
     }
     const overlayDrag = this.renderer.beginOverlayDrag(event.screenX, event.screenY);
     if (overlayDrag) {
@@ -5253,6 +5298,9 @@ class InteractionManager {
     if (this.navigationManager.handleMouseDown(event)) {
       return;
     }
+    if (this.navigationOnly) {
+      return;
+    }
     if (this.dragManager.handleMouseDown(event)) {
       return;
     }
@@ -5272,6 +5320,9 @@ class InteractionManager {
       }
     }
     const overScrollbar = this.renderer.updateScrollbarHover(event.screenX, event.screenY);
+    this.renderer.updateBadgeHover(
+      overScrollbar ? { x: -1e9, y: -1e9 } : { x: event.worldX, y: event.worldY }
+    );
     if (this.overlayDragSession) {
       const moved = this.renderer.updateOverlayDrag(
         this.overlayDragSession,
@@ -5300,14 +5351,16 @@ class InteractionManager {
     if (overScrollbar) {
       return;
     }
-    if (this.resizeManager.handleMouseMove(event)) {
-      return;
-    }
-    if (this.connectionManager.handleMouseMove(event)) {
-      return;
-    }
-    if (this.dragManager.handleMouseMove(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseMove(event)) {
+        return;
+      }
+      if (this.connectionManager.handleMouseMove(event)) {
+        return;
+      }
+      if (this.dragManager.handleMouseMove(event)) {
+        return;
+      }
     }
     if (this.selectionManager.selectionRectangle !== null) {
       this.selectionManager.updateSelectionRect({ x: event.worldX, y: event.worldY });
@@ -5326,14 +5379,16 @@ class InteractionManager {
       this.renderer.setScrollbarActiveAxis(null);
       return;
     }
-    if (this.resizeManager.handleMouseUp()) {
-      return;
-    }
-    if (this.connectionManager.handleMouseUp(event)) {
-      return;
-    }
-    if (this.dragManager.handleMouseUp(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseUp()) {
+        return;
+      }
+      if (this.connectionManager.handleMouseUp(event)) {
+        return;
+      }
+      if (this.dragManager.handleMouseUp(event)) {
+        return;
+      }
     }
     if (this.selectionManager.selectionRectangle !== null) {
       this.selectionManager.endSelectionRect();
@@ -5359,6 +5414,9 @@ class InteractionManager {
     if (this.dragManager.handledMouseDown || this.resizeManager.handledMouseDown || this.connectionManager.connecting) {
       return;
     }
+    if (this.navigationOnly) {
+      return;
+    }
     if (this.connectionManager.handleDoubleClick(event)) {
       return;
     }
@@ -5421,16 +5479,19 @@ class InteractionManager {
   handleKeyDown(event, options) {
     const isCtrlOrMeta = event.ctrlKey || event.metaKey;
     const key = event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
+    this.navigationManager.handleKeyDown(event);
+    if (this.handleViewportNavigationKey(event)) {
+      return;
+    }
+    if (this.navigationOnly) {
+      return;
+    }
     if (isCtrlOrMeta && (key === "z" || key === "y")) {
       this.flushPendingPropertyChanges();
     }
     if (this.historyManager.handleKeyDown(event)) {
       return;
     }
-    this.navigationManager.handleKeyDown(event);
-    if (this.handleViewportNavigationKey(event)) {
-      return;
-    }
     if (this.keymap.deleteKeys.includes(event.key)) {
       event.preventDefault();
       this.deleteSelection();
@@ -5560,6 +5621,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
       case "edge":
         this.historyManager.execute(
@@ -5570,6 +5632,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
       case "group":
         this.historyManager.execute(
@@ -5580,6 +5643,7 @@ class InteractionManager {
             pending.after
           )
         );
+        this.renderer.markStyleDirty();
         break;
     }
   }
@@ -6680,6 +6744,30 @@ class DiagramRenderer extends EventEmitter {
     }
     return void 0;
   }
+  /**
+   * Update badge hover state and canvas cursor based on pointer position.
+   * Call from mousemove to show hover highlight and pointer cursor over badges.
+   */
+  updateBadgeHover(worldPoint) {
+    const element = this.getElementAtPoint(worldPoint);
+    let hoveredNodeId = null;
+    let hoveredIndex = -1;
+    const node = element;
+    if (element && typeof node.getBadgeAtPoint === "function") {
+      const badge = node.getBadgeAtPoint(worldPoint);
+      if (badge !== null) {
+        hoveredNodeId = node.id;
+        hoveredIndex = badge.index;
+      }
+    }
+    const cursor = hoveredNodeId !== null ? "pointer" : "";
+    if (this.canvas.style.cursor !== cursor) {
+      this.canvas.style.cursor = cursor;
+    }
+    for (const n of this._nodes.values()) {
+      n.setBadgeHover(n.id === hoveredNodeId ? hoveredIndex : -1);
+    }
+  }
   /**
    * Mark the diagram as needing re-render
    */
@@ -7992,11 +8080,11 @@ function tintSvg(svgText, strokeColor, fillColor) {
   const all = [root, ...Array.from(root.querySelectorAll("*"))];
   for (const el of all) {
     const stroke = el.getAttribute("stroke");
-    if (strokeColor && stroke !== null && stroke.toLowerCase() !== "none") {
+    const fill = el.getAttribute("fill");
+    if (strokeColor && (stroke === null || stroke.toLowerCase() !== "none")) {
       el.setAttribute("stroke", strokeColor);
     }
-    const fill = el.getAttribute("fill");
-    if (fillColor && fill !== null && fill.toLowerCase() !== "none") {
+    if (fillColor && (fill === null || fill.toLowerCase() !== "none")) {
       el.setAttribute("fill", fillColor);
     }
     const style = el.getAttribute("style");
@@ -8045,8 +8133,10 @@ class NodeImage {
   get placement() {
     return this._options.placement ?? "center";
   }
-  get gap() {
-    return this._options.gap ?? 6;
+  /** Inset from edge of icon zone to image (single value for all sides) */
+  get inset() {
+    const v = this._options.inset ?? this._options.margin ?? this._options.padding;
+    return v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : 6;
   }
   setSource(source) {
     this._loaded = false;
@@ -8061,23 +8151,18 @@ class NodeImage {
     if (!this._loaded) {
       return;
     }
-    const padding = this._options.padding ?? 8;
-    const margin = Math.max(0, this._options.margin ?? 0);
+    const ins = this.inset;
     const fit = this._options.fit ?? "none";
     const scaleWithBounds = this._options.scaleWithBounds ?? false;
     const opacity = this._options.opacity ?? 1;
-    const align = this._options.align ?? "center";
-    const verticalAlign = this._options.verticalAlign ?? "center";
-    const offsetX = this._options.offsetX ?? 0;
-    const offsetY = this._options.offsetY ?? 0;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + ins,
+      y: bounds.y + ins,
+      width: Math.max(0, bounds.width - ins * 2),
+      height: Math.max(0, bounds.height - ins * 2)
     };
-    const availableWidth = Math.max(0, innerBounds.width - padding * 2);
-    const availableHeight = Math.max(0, innerBounds.height - padding * 2);
+    const availableWidth = Math.max(0, innerBounds.width);
+    const availableHeight = Math.max(0, innerBounds.height);
     let drawWidth = this._options.width ?? this._naturalWidth;
     let drawHeight = this._options.height ?? this._naturalHeight;
     if (scaleWithBounds) {
@@ -8096,21 +8181,13 @@ class NodeImage {
     const maxHeight = Math.max(0, availableHeight);
     drawWidth = Math.min(drawWidth, maxWidth);
     drawHeight = Math.min(drawHeight, maxHeight);
-    let x = innerBounds.x + padding;
-    let y = innerBounds.y + padding;
-    if (align === "center") {
-      x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
-    } else if (align === "right") {
-      x = innerBounds.x + innerBounds.width - drawWidth - padding;
-    }
-    if (verticalAlign === "center") {
-      y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
-    } else if (verticalAlign === "bottom") {
-      y = innerBounds.y + innerBounds.height - drawHeight - padding;
-    }
+    let x = innerBounds.x;
+    let y = innerBounds.y;
+    x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
+    y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
     ctx.save();
     ctx.globalAlpha = opacity;
-    ctx.drawImage(this._image, x + offsetX, y + offsetY, drawWidth, drawHeight);
+    ctx.drawImage(this._image, x, y, drawWidth, drawHeight);
     ctx.restore();
   }
   getSize() {
@@ -8174,6 +8251,9 @@ class NodeImage {
     };
   }
 }
+const BADGE_SIZE = 15;
+const BADGE_OFFSET = 4;
+const BADGE_GAP = 4;
 function isValidAnchorId(id) {
   return /^(top|right|bottom|left):\d+$/.test(id);
 }
@@ -8195,13 +8275,16 @@ class Node extends Element {
       styleClass: options.styleClass
     });
     this._ports = [];
+    this._badges = [];
     this._anchorCache = null;
+    this._badgeImageCache = /* @__PURE__ */ new Map();
+    this._hoveredBadgeIndex = -1;
     this._defaultSize = { width: options.width, height: options.height };
     this._nodeStyle = { ...DEFAULT_NODE_STYLE, ...options.style };
     this._showPortsAlways = options.showPortsAlways ?? false;
     this._anchorPoints = this.normalizeAnchorPoints(options.anchorPoints);
-    this._labelPlacement = options.labelPlacement ?? "auto";
     this._resizeHandlesEnabled = options.resizeHandlesEnabled ?? true;
+    this._contentInset = this.normalizeContentInset(options.contentInset);
     if (options.label !== void 0) {
       if (typeof options.label === "string") {
         this._label = new TextLabel({
@@ -8220,6 +8303,10 @@ class Node extends Element {
         this.addPort(portOptions);
       }
     }
+    if (options.badges !== void 0 && options.badges.length > 0) {
+      this._badges = options.badges.map((b) => ({ id: b.id, iconUrl: b.iconUrl }));
+      this.ensureBadgeImagesLoaded();
+    }
   }
   /**
    * Node style
@@ -8285,6 +8372,46 @@ class Node extends Element {
     }
     this.markDirty();
   }
+  /**
+   * Badges shown in top-left corner of node (e.g. interactive property icons)
+   */
+  get badges() {
+    return this._badges;
+  }
+  set badges(value) {
+    this._badges = Array.isArray(value) ? value.map((b) => ({ id: b.id, iconUrl: b.iconUrl })) : [];
+    this.ensureBadgeImagesLoaded();
+    this.markDirty();
+  }
+  /**
+   * Set which badge index is under the pointer (-1 for none). Used for hover highlight and cursor.
+   */
+  setBadgeHover(index) {
+    if (this._hoveredBadgeIndex === index) return;
+    this._hoveredBadgeIndex = index;
+    this.markDirty();
+  }
+  /**
+   * Return badge at world point, or null if point is not over a badge.
+   */
+  getBadgeAtPoint(worldPoint) {
+    if (this._badges.length === 0) {
+      return null;
+    }
+    const bounds = this.getBounds();
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    const localX = worldPoint.x - (contentBounds.x + BADGE_OFFSET);
+    const localY = worldPoint.y - (contentBounds.y + BADGE_OFFSET);
+    for (let i = 0; i < this._badges.length; i++) {
+      const badge = this._badges[i];
+      if (badge === void 0) continue;
+      const x = i * (BADGE_SIZE + BADGE_GAP);
+      if (localX >= x && localX <= x + BADGE_SIZE && localY >= 0 && localY <= BADGE_SIZE) {
+        return { id: badge.id, index: i };
+      }
+    }
+    return null;
+  }
   /**
    * Add a port to this node
    */
@@ -8398,24 +8525,22 @@ class Node extends Element {
     this._anchorPoints = this.normalizeAnchorPoints(value);
     this.markDirty();
   }
-  /**
-   * Label placement inside the node
-   */
-  get labelPlacement() {
-    return this._labelPlacement;
-  }
-  set labelPlacement(value) {
-    if (this._labelPlacement !== value) {
-      this._labelPlacement = value;
-      this.markDirty();
-    }
-  }
   /**
    * Default size (initial width/height)
    */
   get defaultSize() {
     return { ...this._defaultSize };
   }
+  /**
+   * Content area insets (per side). When all zero, content area = node bounds.
+   */
+  get contentInset() {
+    return { ...this._contentInset };
+  }
+  set contentInset(value) {
+    this._contentInset = this.normalizeContentInset(value);
+    this.markDirty();
+  }
   /**
    * Set getter for attachToOutline (called by DiagramRenderer when node is added)
    */
@@ -8438,87 +8563,20 @@ class Node extends Element {
     }
   }
   /**
-   * Calculate layout for icon and label
-   * Returns computed bounds for both elements
+   * Calculate layout for icon and label.
+   * Label always gets full content area; icon is placed within the same content area.
    */
-  calculateContentLayout(bounds, iconBoxSize, labelSize) {
-    let iconBounds = bounds;
-    let labelBounds = this.getLabelContainerBounds(bounds);
+  calculateContentLayout(bounds, iconBoxSize, _labelSize) {
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    let iconBounds = contentBounds;
     if (this._icon && iconBoxSize) {
-      iconBounds = this.getIconBounds(bounds, iconBoxSize, this._icon.placement);
-    }
-    if (this._icon && this._label && iconBoxSize && labelSize && this._labelPlacement === "auto" && this._icon.placement !== "center") {
-      const gap = this._icon.gap;
-      const placement = this._icon.placement;
-      if (isCornerPlacement(placement)) {
-        iconBounds = this.getIconBounds(bounds, iconBoxSize, placement);
-        labelBounds = this.getLabelContainerBounds(bounds);
-      } else {
-        const contentBounds = this.getLabelContainerBounds(bounds);
-        switch (placement) {
-          case "top":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: bounds.width,
-              height: iconBoxSize.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y + iconBoxSize.height + gap,
-              width: contentBounds.width,
-              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-            };
-            break;
-          case "bottom":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y + bounds.height - iconBoxSize.height,
-              width: bounds.width,
-              height: iconBoxSize.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y,
-              width: contentBounds.width,
-              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-            };
-            break;
-          case "left":
-            iconBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: iconBoxSize.width,
-              height: bounds.height
-            };
-            labelBounds = {
-              x: contentBounds.x + iconBoxSize.width + gap,
-              y: contentBounds.y,
-              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-              height: contentBounds.height
-            };
-            break;
-          case "right":
-            iconBounds = {
-              x: bounds.x + bounds.width - iconBoxSize.width,
-              y: bounds.y,
-              width: iconBoxSize.width,
-              height: bounds.height
-            };
-            labelBounds = {
-              x: contentBounds.x,
-              y: contentBounds.y,
-              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-              height: contentBounds.height
-            };
-            break;
-        }
-      }
-    } else if (this._label && labelSize) {
-      const autoBounds = this.getAutoLabelBounds(bounds, iconBoxSize);
-      labelBounds = this.getLabelBounds(autoBounds, labelSize, this._labelPlacement);
+      iconBounds = this.getIconBounds(
+        contentBounds,
+        iconBoxSize,
+        this._icon.placement
+      );
     }
-    return { iconBounds, labelBounds };
+    return { iconBounds, labelBounds: contentBounds };
   }
   /**
    * Get label bounds and wrapped lines for SVG export. Replicates renderContents layout logic.
@@ -8529,12 +8587,19 @@ class Node extends Element {
       return null;
     }
     const bounds = this.getBounds();
+    const contentBounds = this.getLabelContainerBounds(bounds);
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
-    const autoBounds = this.getAutoLabelBounds(bounds, iconBoxSize);
-    this._label.setAutoMaxWidth(autoBounds.width);
+    this._label.setAutoMaxWidth(contentBounds.width);
     const labelSize = this._label.measure(ctx);
-    const { labelBounds } = this.calculateContentLayout(bounds, iconBoxSize, labelSize);
-    const lines = this._label.getWrappedLines(ctx, Math.max(0, autoBounds.width));
+    const { labelBounds } = this.calculateContentLayout(
+      bounds,
+      iconBoxSize,
+      labelSize
+    );
+    const lines = this._label.getWrappedLines(
+      ctx,
+      Math.max(0, contentBounds.width)
+    );
     return { bounds: labelBounds, lines };
   }
   /**
@@ -8550,23 +8615,14 @@ class Node extends Element {
     ctx.globalAlpha = 1;
   }
   /**
-   * Get world position of label center.
+   * Get world position of label center (center of content area).
    */
   getLabelPosition() {
-    const bounds = this.getBounds();
-    const placement = this._labelPlacement === "auto" ? "center" : this._labelPlacement;
-    switch (placement) {
-      case "top":
-        return { x: bounds.x + bounds.width / 2, y: bounds.y };
-      case "bottom":
-        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height };
-      case "left":
-        return { x: bounds.x, y: bounds.y + bounds.height / 2 };
-      case "right":
-        return { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 };
-      default:
-        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
-    }
+    const bounds = this.getLabelContainerBounds(this.getBounds());
+    return {
+      x: bounds.x + bounds.width / 2,
+      y: bounds.y + bounds.height / 2
+    };
   }
   /**
    * Render icon, label, and ports
@@ -8575,16 +8631,17 @@ class Node extends Element {
     ctx.setLineDash([]);
     ctx.lineDashOffset = 0;
     let bounds = this.getBounds();
+    this.renderBadges(ctx, bounds);
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
     if (this._label) {
-      this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+      this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
     }
     const labelSize = this._label ? this._label.measure(ctx) : void 0;
     if (labelSize || iconBoxSize) {
       this.ensureContentsFit(labelSize, iconBoxSize);
       if (this._label && iconBoxSize) {
         bounds = this.getBounds();
-        this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+        this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
       }
     }
     const { iconBounds, labelBounds } = this.calculateContentLayout(
@@ -8598,6 +8655,67 @@ class Node extends Element {
     this.renderLabel(ctx, labelBounds);
     this.renderPorts(ctx);
   }
+  ensureBadgeImagesLoaded() {
+    for (const badge of this._badges) {
+      const url = badge.iconUrl;
+      if (!url || this._badgeImageCache.has(url)) {
+        continue;
+      }
+      const img = new Image();
+      img.decoding = "async";
+      this._badgeImageCache.set(url, { img, loaded: false });
+      img.onload = () => {
+        const entry = this._badgeImageCache.get(url);
+        if (entry) {
+          entry.loaded = true;
+          this.markDirty();
+        }
+      };
+      img.onerror = () => {
+        this.markDirty();
+      };
+      img.src = url;
+    }
+  }
+  renderBadges(ctx, bounds) {
+    if (this._badges.length === 0) {
+      return;
+    }
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    const x0 = contentBounds.x + BADGE_OFFSET;
+    const y0 = contentBounds.y + BADGE_OFFSET;
+    const radius = 2;
+    for (let i = 0; i < this._badges.length; i++) {
+      const badge = this._badges[i];
+      if (badge === void 0) continue;
+      const x = x0 + i * (BADGE_SIZE + BADGE_GAP);
+      const isHovered = this._hoveredBadgeIndex === i;
+      if (isHovered) {
+        ctx.save();
+        ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
+        ctx.beginPath();
+        ctx.roundRect(x, y0, BADGE_SIZE, BADGE_SIZE, radius);
+        ctx.fill();
+        ctx.restore();
+      }
+      const entry = this._badgeImageCache.get(badge.iconUrl);
+      if (entry?.loaded && entry.img.naturalWidth > 0) {
+        ctx.save();
+        const img = entry.img;
+        const sw = img.naturalWidth;
+        const sh = img.naturalHeight;
+        const scale = Math.min(BADGE_SIZE / sw, BADGE_SIZE / sh, 1);
+        const dw = sw * scale;
+        const dh = sh * scale;
+        const dx = x + (BADGE_SIZE - dw) / 2;
+        const dy = y0 + (BADGE_SIZE - dh) / 2;
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+        ctx.drawImage(img, 0, 0, sw, sh, dx, dy, dw, dh);
+        ctx.restore();
+      }
+    }
+  }
   /**
    * Minimal size required to fit current contents
    */
@@ -8869,124 +8987,45 @@ class Node extends Element {
     }
   }
   calculateContentMinSize(labelSize, iconBoxSize, bounds) {
-    let minWidth = 0;
-    let minHeight = 0;
     const labelContainer = this.getLabelContainerBounds(bounds);
     const widthFactor = labelContainer.width > 0 ? bounds.width / labelContainer.width : 1;
     const heightFactor = labelContainer.height > 0 ? bounds.height / labelContainer.height : 1;
-    if (labelSize) {
-      minWidth = Math.max(minWidth, labelSize.width * widthFactor);
-      minHeight = Math.max(minHeight, labelSize.height * heightFactor);
-    }
-    if (iconBoxSize) {
-      minWidth = Math.max(minWidth, iconBoxSize.width);
-      minHeight = Math.max(minHeight, iconBoxSize.height);
-    }
-    if (labelSize && iconBoxSize && this._icon) {
-      const gap = this._icon.gap;
-      const labelPlacement = this._labelPlacement === "auto" ? "center" : this._labelPlacement;
-      const iconPlacement = this._icon.placement;
-      if (this._labelPlacement === "auto" && iconPlacement !== "center") {
-        if (isCornerPlacement(iconPlacement)) {
-          minWidth = Math.max(minWidth, iconBoxSize.width, labelSize.width);
-          minHeight = Math.max(minHeight, iconBoxSize.height, labelSize.height);
-        } else if (iconPlacement === "top" || iconPlacement === "bottom") {
-          minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-          minWidth = Math.max(minWidth, iconBoxSize.width, labelSize.width);
-        } else if (iconPlacement === "left" || iconPlacement === "right") {
-          minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-          minHeight = Math.max(minHeight, iconBoxSize.height, labelSize.height);
-        }
-      } else {
-        const labelHorizontal = labelPlacement === "left" || labelPlacement === "right";
-        const labelVertical = labelPlacement === "top" || labelPlacement === "bottom";
-        const iconHorizontal = iconPlacement === "left" || iconPlacement === "right";
-        const iconVertical = iconPlacement === "top" || iconPlacement === "bottom";
-        const labelSharesIconAxis = iconHorizontal && (labelPlacement === "center" || labelPlacement === iconPlacement) || iconVertical && (labelPlacement === "center" || labelPlacement === iconPlacement);
-        if (labelHorizontal && iconHorizontal && labelPlacement !== iconPlacement) {
-          minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-        }
-        if (labelVertical && iconVertical && labelPlacement !== iconPlacement) {
-          minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-        }
-        if (labelSharesIconAxis) {
-          if (iconHorizontal) {
-            minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
-          }
-          if (iconVertical) {
-            minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
-          }
-        }
-      }
-    }
-    return { width: minWidth, height: minHeight };
+    const minContentWidth = Math.max(
+      labelSize?.width ?? 0,
+      iconBoxSize?.width ?? 0
+    );
+    const minContentHeight = Math.max(
+      labelSize?.height ?? 0,
+      iconBoxSize?.height ?? 0
+    );
+    return {
+      width: minContentWidth * widthFactor,
+      height: minContentHeight * heightFactor
+    };
   }
   getLabelContainerBounds(bounds) {
-    return bounds;
+    const { top, right, bottom, left } = this._contentInset;
+    const x = bounds.x + left;
+    const y = bounds.y + top;
+    const width = Math.max(0, bounds.width - left - right);
+    const height = Math.max(0, bounds.height - top - bottom);
+    return { x, y, width, height };
   }
-  getAutoLabelBounds(bounds, iconBoxSize) {
-    const contentBounds = this.getLabelContainerBounds(bounds);
-    if (!this._icon || !iconBoxSize || this._icon.placement === "center") {
-      return contentBounds;
-    }
-    const gap = this._icon.gap;
-    if (isCornerPlacement(this._icon.placement)) {
-      return contentBounds;
-    }
-    switch (this._icon.placement) {
-      case "left":
-        return {
-          x: contentBounds.x + iconBoxSize.width + gap,
-          y: contentBounds.y,
-          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-          height: contentBounds.height
-        };
-      case "right":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y,
-          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
-          height: contentBounds.height
-        };
-      case "top":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y + iconBoxSize.height + gap,
-          width: contentBounds.width,
-          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-        };
-      case "bottom":
-        return {
-          x: contentBounds.x,
-          y: contentBounds.y,
-          width: contentBounds.width,
-          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
-        };
-      default:
-        return contentBounds;
+  normalizeContentInset(value) {
+    const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : 0;
+    if (value === void 0) {
+      return { top: 0, right: 0, bottom: 0, left: 0 };
     }
-  }
-  getLabelBounds(bounds, labelSize, placement) {
-    const normalizedPlacement = placement === "auto" ? "center" : placement;
-    const width = Math.min(labelSize.width, bounds.width);
-    const height = Math.min(labelSize.height, bounds.height);
-    let x = bounds.x + (bounds.width - width) / 2;
-    let y = bounds.y + (bounds.height - height) / 2;
-    switch (normalizedPlacement) {
-      case "top":
-        y = bounds.y;
-        break;
-      case "bottom":
-        y = bounds.y + bounds.height - height;
-        break;
-      case "left":
-        x = bounds.x;
-        break;
-      case "right":
-        x = bounds.x + bounds.width - width;
-        break;
+    if (typeof value === "number") {
+      const v = n(value);
+      return { top: v, right: v, bottom: v, left: v };
     }
-    return { x, y, width, height };
+    return {
+      top: n(value.top),
+      right: n(value.right),
+      bottom: n(value.bottom),
+      left: n(value.left)
+    };
   }
   getIconBoxSize() {
     if (!this._icon) {
@@ -8996,14 +9035,14 @@ class Node extends Element {
     if (width <= 0 || height <= 0) {
       return void 0;
     }
-    const padding = this._icon.options.padding ?? 8;
-    const margin = Math.max(0, this._icon.options.margin ?? 0);
+    const ins = this._icon.inset;
     return {
-      width: width + padding * 2 + margin * 2,
-      height: height + padding * 2 + margin * 2
+      width: width + ins * 2,
+      height: height + ins * 2
     };
   }
   getIconBounds(bounds, iconBoxSize, placement) {
+    const ins = this._icon?.inset ?? 0;
     switch (placement) {
       case "top":
         return {
@@ -9035,29 +9074,29 @@ class Node extends Element {
         };
       case "top-left":
         return {
-          x: bounds.x,
-          y: bounds.y,
+          x: bounds.x + ins,
+          y: bounds.y + ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "top-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y,
+          x: bounds.x + bounds.width - iconBoxSize.width - ins,
+          y: bounds.y + ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-left":
         return {
-          x: bounds.x,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + ins,
+          y: bounds.y + bounds.height - iconBoxSize.height - ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + bounds.width - iconBoxSize.width - ins,
+          y: bounds.y + bounds.height - iconBoxSize.height - ins,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
@@ -9956,18 +9995,14 @@ const DEFAULT_THEME = {
       cornerRadius: 4
     },
     selected: {
-      fillColor: "#ffffff",
-      strokeColor: "#333333",
+      strokeColor: "#3b82f6",
       strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
+      opacity: 1
     },
     dragging: {
-      fillColor: "#f0f0f0",
       strokeColor: "#333333",
       strokeWidth: 2,
-      opacity: 0.8,
-      cornerRadius: 4
+      opacity: 0.8
     }
   },
   edge: {
@@ -10228,15 +10263,16 @@ class StyleManager {
     return baseStyle;
   }
   getBaseNodeStyle(state) {
+    const d = this._theme.node.default;
     switch (state) {
       case "hover":
-        return this._theme.node.hover;
+        return { ...d, ...this._theme.node.hover };
       case "selected":
-        return this._theme.node.selected;
+        return { ...d, ...this._theme.node.selected };
       case "dragging":
-        return this._theme.node.dragging;
+        return { ...d, ...this._theme.node.dragging };
       default:
-        return this._theme.node.default;
+        return d;
     }
   }
   getBaseEdgeStyle(state) {
@@ -10434,13 +10470,16 @@ class Serializer {
     }));
     let label;
     if (node.label) {
-      const labelDefaults = { padding: 8, margin: 0, style: {}, maxWidth: void 0, styleClass: void 0 };
+      const ins = node.label.inset;
+      const defaultInset = 8;
+      const insetAllDefault = ins.top === defaultInset && ins.right === defaultInset && ins.bottom === defaultInset && ins.left === defaultInset;
+      const serializedInset = insetAllDefault ? void 0 : ins.top === ins.right && ins.top === ins.bottom && ins.top === ins.left ? ins.top : { top: ins.top, right: ins.right, bottom: ins.bottom, left: ins.left };
+      const labelDefaults = { inset: void 0, style: {}, maxWidth: void 0, styleClass: void 0 };
       const labelData = {
         text: node.label.text,
         style: node.label.style,
         maxWidth: node.label.maxWidth,
-        padding: node.label.padding,
-        margin: node.label.margin,
+        inset: serializedInset ?? void 0,
         styleClass: node.label.styleClass
       };
       const hasExtendedOptions = hasNonDefaultValues(labelData, labelDefaults);
@@ -10449,8 +10488,7 @@ class Serializer {
           text: node.label.text,
           style: Object.keys(node.label.style).length > 0 ? node.label.style : void 0,
           maxWidth: node.label.maxWidth,
-          padding: node.label.padding !== 8 ? node.label.padding : void 0,
-          margin: node.label.margin !== 0 ? node.label.margin : void 0,
+          inset: serializedInset,
           styleClass: node.label.styleClass
         });
       } else {
@@ -10462,22 +10500,16 @@ class Serializer {
       const opts = node.icon.options;
       const source = typeof opts.source === "string" ? opts.source : void 0;
       if (source) {
-        icon = {
+        icon = omitEmptyValues({
           source,
           width: opts.width,
           height: opts.height,
           fit: opts.fit,
           placement: opts.placement,
           scaleWithBounds: opts.scaleWithBounds,
-          padding: opts.padding,
-          margin: opts.margin,
-          gap: opts.gap,
-          opacity: opts.opacity,
-          align: opts.align,
-          verticalAlign: opts.verticalAlign,
-          offsetX: opts.offsetX,
-          offsetY: opts.offsetY
-        };
+          inset: node.icon.inset !== 6 ? node.icon.inset : void 0,
+          opacity: opts.opacity
+        });
       }
     }
     let anchorPoints;
@@ -10487,7 +10519,9 @@ class Serializer {
     if (hasNonDefaultValues(anchorData, anchorDefaults)) {
       anchorPoints = omitDefaultValues(anchorData, anchorDefaults);
     }
-    return {
+    const contentInset = node.contentInset;
+    const hasContentInset = contentInset.top !== 0 || contentInset.right !== 0 || contentInset.bottom !== 0 || contentInset.left !== 0;
+    return omitEmptyValues({
       id: node.id,
       type: node.typeName,
       x: node.x,
@@ -10498,12 +10532,12 @@ class Serializer {
       styleClass: node.styleClass,
       label,
       labelStyleClass: typeof label === "string" ? node.label?.styleClass : void 0,
-      labelPlacement: node.labelPlacement !== "auto" ? node.labelPlacement : void 0,
       icon,
+      contentInset: hasContentInset ? contentInset : void 0,
       anchorPoints,
       ports: ports.length > 0 ? ports : void 0,
       data: Object.keys(node.data).length > 0 ? node.data : void 0
-    };
+    });
   }
   serializeEdge(edge) {
     return {
@@ -10814,7 +10848,7 @@ class SvgExporter {
     const parts = [];
     const renderedEdges = [];
     parts.push(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
     );
     for (const edge of this.renderer.edges.values()) {
       if (edge.visible) {
@@ -10955,22 +10989,37 @@ class SvgExporter {
     if (!edge.label) {
       return "";
     }
-    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.padding, edge.label.margin);
-    const bgPadding = edge.labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
+    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.inset);
     const bgColor = edge.labelBackground?.color ?? "#ffffff";
     const bgOpacity = edge.labelBackground?.opacity ?? 1;
     const bgRadius = edge.labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
-    const x = point.x - metrics.width / 2 - bgPadding;
-    const y = point.y - metrics.height / 2 - bgPadding;
-    const width = metrics.width + bgPadding * 2;
-    const height = metrics.height + bgPadding * 2;
+    const x = point.x - metrics.width / 2;
+    const y = point.y - metrics.height / 2;
+    const width = metrics.width;
+    const height = metrics.height;
     const radius = Math.max(0, Math.min(bgRadius, width / 2, height / 2));
     if (radius <= 0) {
       return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
     }
     return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
   }
-  measureTextLabel(text, style = {}, padding = 8, margin = 0) {
+  normalizeLabelInset(value, defaultVal) {
+    const n = (v) => v !== void 0 && Number.isFinite(v) ? Math.max(0, v) : defaultVal;
+    if (value === void 0) {
+      return { top: defaultVal, right: defaultVal, bottom: defaultVal, left: defaultVal };
+    }
+    if (typeof value === "number") {
+      const v = n(value);
+      return { top: v, right: v, bottom: v, left: v };
+    }
+    return {
+      top: n(value.top),
+      right: n(value.right),
+      bottom: n(value.bottom),
+      left: n(value.left)
+    };
+  }
+  measureTextLabel(text, style = {}, inset = 8) {
     const fontSize = style.fontSize ?? 14;
     const fontFamily = style.fontFamily ?? "sans-serif";
     const fontWeight = style.fontWeight ?? "normal";
@@ -10991,11 +11040,10 @@ class SvgExporter {
       const longestLine = lines.reduce((max, line) => line.length > max.length ? line : max, "");
       maxWidth = longestLine.length * fontSize * 0.6;
     }
-    const resolvedPadding = Math.max(0, padding);
-    const resolvedMargin = Math.max(0, margin);
+    const ins = this.normalizeLabelInset(inset, 8);
     return {
-      width: maxWidth + resolvedPadding * 2 + resolvedMargin * 2,
-      height: lines.length * lineHeight + resolvedPadding * 2 + resolvedMargin * 2
+      width: maxWidth + ins.left + ins.right,
+      height: lines.length * lineHeight + ins.top + ins.bottom
     };
   }
   resolveMarkerConfig(edge, side) {
@@ -11120,9 +11168,9 @@ class SvgExporter {
       return "";
     }
     const style = label.style;
-    const padding = Math.max(0, label.padding);
-    const margin = Math.max(0, label.margin);
+    const ins = this.normalizeLabelInset(label.inset, 8);
     const align = style.align ?? "center";
+    const verticalAlign = style.verticalAlign ?? "middle";
     const ctx = this.getMeasurementContext();
     let bounds;
     let lines;
@@ -11140,18 +11188,27 @@ class SvgExporter {
       lines = label.text.split("\n");
     }
     const inner = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + ins.left,
+      y: bounds.y + ins.top,
+      width: Math.max(0, bounds.width - ins.left - ins.right),
+      height: Math.max(0, bounds.height - ins.top - ins.bottom)
     };
     let x = inner.x + inner.width / 2;
     if (align === "left") {
-      x = inner.x + padding;
+      x = inner.x;
     } else if (align === "right") {
-      x = inner.x + inner.width - padding;
+      x = inner.x + inner.width;
+    }
+    const lineHeight = (style.fontSize ?? 14) * 1.2;
+    const totalHeight = lines.length * lineHeight;
+    let y;
+    if (verticalAlign === "top") {
+      y = inner.y + totalHeight / 2;
+    } else if (verticalAlign === "bottom") {
+      y = inner.y + inner.height - totalHeight / 2;
+    } else {
+      y = inner.y + inner.height / 2;
     }
-    const y = inner.y + inner.height / 2;
     return this.renderTextLabel(lines.join("\n"), { x, y }, style);
   }
   getNodeCornerRadius(node, bounds) {
@@ -11168,9 +11225,15 @@ class SvgExporter {
     if (iconSize.width <= 0 || iconSize.height <= 0) {
       return "";
     }
-    const iconBoxSize = this.getIconBoxSize(opts, iconSize);
-    const iconBounds = this.getIconBounds(nodeBounds, iconBoxSize, opts.placement ?? "center");
-    const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize);
+    const iconInset = icon.inset;
+    const iconBoxSize = this.getIconBoxSize(iconSize, iconInset);
+    const iconBounds = this.getIconBounds(
+      nodeBounds,
+      iconBoxSize,
+      opts.placement ?? "center",
+      iconInset
+    );
+    const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize, iconInset);
     if (drawRect.width <= 0 || drawRect.height <= 0) {
       return "";
     }
@@ -11179,17 +11242,16 @@ class SvgExporter {
       return "";
     }
     const opacity = opts.opacity ?? 1;
-    return `<image href="${this.escapeAttribute(href)}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
+    const escapedHref = this.escapeAttribute(href);
+    return `<image href="${escapedHref}" xlink:href="${escapedHref}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
   }
-  getIconBoxSize(opts, imageSize) {
-    const padding = opts.padding ?? 8;
-    const margin = Math.max(0, opts.margin ?? 0);
+  getIconBoxSize(imageSize, inset) {
     return {
-      width: imageSize.width + padding * 2 + margin * 2,
-      height: imageSize.height + padding * 2 + margin * 2
+      width: imageSize.width + inset * 2,
+      height: imageSize.height + inset * 2
     };
   }
-  getIconBounds(bounds, iconBoxSize, placement) {
+  getIconBounds(bounds, iconBoxSize, placement, inset) {
     switch (placement) {
       case "top":
         return { x: bounds.x, y: bounds.y, width: bounds.width, height: iconBoxSize.height };
@@ -11210,25 +11272,30 @@ class SvgExporter {
           height: bounds.height
         };
       case "top-left":
-        return { x: bounds.x, y: bounds.y, width: iconBoxSize.width, height: iconBoxSize.height };
+        return {
+          x: bounds.x + inset,
+          y: bounds.y + inset,
+          width: iconBoxSize.width,
+          height: iconBoxSize.height
+        };
       case "top-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y,
+          x: bounds.x + bounds.width - iconBoxSize.width - inset,
+          y: bounds.y + inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-left":
         return {
-          x: bounds.x,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + inset,
+          y: bounds.y + bounds.height - iconBoxSize.height - inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
       case "bottom-right":
         return {
-          x: bounds.x + bounds.width - iconBoxSize.width,
-          y: bounds.y + bounds.height - iconBoxSize.height,
+          x: bounds.x + bounds.width - iconBoxSize.width - inset,
+          y: bounds.y + bounds.height - iconBoxSize.height - inset,
           width: iconBoxSize.width,
           height: iconBoxSize.height
         };
@@ -11237,23 +11304,17 @@ class SvgExporter {
         return bounds;
     }
   }
-  getIconDrawRect(bounds, opts, imageSize) {
-    const padding = opts.padding ?? 8;
-    const margin = Math.max(0, opts.margin ?? 0);
+  getIconDrawRect(bounds, opts, imageSize, inset) {
     const fit = opts.fit ?? "none";
     const scaleWithBounds = opts.scaleWithBounds ?? false;
-    const align = opts.align ?? "center";
-    const verticalAlign = opts.verticalAlign ?? "center";
-    const offsetX = opts.offsetX ?? 0;
-    const offsetY = opts.offsetY ?? 0;
     const innerBounds = {
-      x: bounds.x + margin,
-      y: bounds.y + margin,
-      width: Math.max(0, bounds.width - margin * 2),
-      height: Math.max(0, bounds.height - margin * 2)
+      x: bounds.x + inset,
+      y: bounds.y + inset,
+      width: Math.max(0, bounds.width - inset * 2),
+      height: Math.max(0, bounds.height - inset * 2)
     };
-    const availableWidth = Math.max(0, innerBounds.width - padding * 2);
-    const availableHeight = Math.max(0, innerBounds.height - padding * 2);
+    const availableWidth = Math.max(0, innerBounds.width);
+    const availableHeight = Math.max(0, innerBounds.height);
     let drawWidth = opts.width ?? imageSize.width;
     let drawHeight = opts.height ?? imageSize.height;
     if (scaleWithBounds) {
@@ -11270,21 +11331,13 @@ class SvgExporter {
     }
     drawWidth = Math.min(Math.max(0, drawWidth), Math.max(0, availableWidth));
     drawHeight = Math.min(Math.max(0, drawHeight), Math.max(0, availableHeight));
-    let x = innerBounds.x + padding;
-    let y = innerBounds.y + padding;
-    if (align === "center") {
-      x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
-    } else if (align === "right") {
-      x = innerBounds.x + innerBounds.width - drawWidth - padding;
-    }
-    if (verticalAlign === "center") {
-      y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
-    } else if (verticalAlign === "bottom") {
-      y = innerBounds.y + innerBounds.height - drawHeight - padding;
-    }
+    let x = innerBounds.x;
+    let y = innerBounds.y;
+    x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
+    y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
     return {
-      x: x + offsetX,
-      y: y + offsetY,
+      x,
+      y,
       width: drawWidth,
       height: drawHeight
     };
@@ -11379,7 +11432,7 @@ class SvgExporter {
   }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
       includeBackground ? `<rect width="100%" height="100%" fill="${backgroundColor}"/>` : "",
       "</svg>"
     ].join("");