living-documentation 7.42.0 → 7.44.0

package/dist/src/frontend/diagram/node-panel.js

@@ -3,9 +3,12 @@
 
 import { st, markDirty } from './state.js';
 import { SHAPE_DEFAULTS } from './node-rendering.js';
+import { CUSTOM_SHAPE_TYPE, getCustomShapeLabelPlacement } from './custom-shapes.js';
 import { pushSnapshot }   from './history.js';
 import { t }              from './t.js';
 
+const CUSTOM_LABEL_PLACEMENTS = ['below', 'above', 'right', 'left', 'center'];
+
 // ── Last-used style persistence (per shape type) ──────────────────────────────
 // Saves colorKey/fontSize/textAlign/textValign per shapeType to localStorage so
 // the next shape of that type is created with the same style.
@@ -90,6 +93,36 @@ function syncNodeFontSizeValue() {
   el.textContent = sizes.every((size) => size === first) ? String(first) : '–';
 }
 
+function selectedCustomShapeIds() {
+  return (st.selectedNodeIds || []).filter((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType === CUSTOM_SHAPE_TYPE;
+  });
+}
+
+function effectiveCustomShapeLabelPlacement(node) {
+  return CUSTOM_LABEL_PLACEMENTS.includes(node && node.labelPlacement)
+    ? node.labelPlacement
+    : getCustomShapeLabelPlacement(node && node.customShapeId);
+}
+
+function syncCustomShapeLabelPlacementControls() {
+  const controls = document.getElementById('customShapeLabelPlacementControls');
+  if (!controls) return;
+  const customIds = selectedCustomShapeIds();
+  controls.classList.toggle('hidden', customIds.length === 0);
+  if (!customIds.length) return;
+
+  const placements = customIds
+    .map((id) => effectiveCustomShapeLabelPlacement(st.nodes.get(id)))
+    .filter(Boolean);
+  const first = placements[0];
+  const shared = placements.length && placements.every((placement) => placement === first) ? first : null;
+  controls.querySelectorAll('[data-label-placement]').forEach((btn) => {
+    btn.classList.toggle('tool-active', !!shared && btn.dataset.labelPlacement === shared);
+  });
+}
+
 function setEdgeLocked(edge, locked) {
   if (!edge) return;
   const fromN = st.nodes && st.nodes.get(edge.from);
@@ -111,6 +144,7 @@ export function showNodePanel() {
   document.getElementById('nodePanelControls').classList.remove('hidden');
   syncNodeLockButton();
   syncNodeFontSizeValue();
+  syncCustomShapeLabelPlacementControls();
   // Sync the opacity slider with the first selected node's current value so the
   // slider reflects the live state rather than whatever position it was left at.
   const slider = document.getElementById('nodeBgOpacity');
@@ -219,6 +253,19 @@ export function setTextValign(valign) {
   markDirty();
 }
 
+export function setCustomShapeLabelPlacement(placement) {
+  if (!CUSTOM_LABEL_PLACEMENTS.includes(placement)) return;
+  const ids = selectedCustomShapeIds();
+  if (!ids.length) return;
+  pushSnapshot();
+  ids.forEach((id) => {
+    st.nodes.update({ id, labelPlacement: placement });
+  });
+  syncCustomShapeLabelPlacementControls();
+  forceRedraw();
+  markDirty();
+}
+
 // ── Stamp (format painter) ────────────────────────────────────────────────────
 // Uses a transparent DOM overlay (#stampOverlay) that intercepts canvas clicks
 // during stamp mode. This bypasses vis-network's event system entirely, avoiding

package/dist/src/frontend/diagram/node-rendering.js

@@ -6,6 +6,7 @@
 
 import { NODE_COLORS } from "./constants.js";
 import { st } from "./state.js";
+import { CUSTOM_SHAPE_TYPE, getCustomShapeDefinition, CUSTOM_SHAPE_DEFAULT_SIZE } from "./custom-shapes.js";
 
 // Returns the color object for a key, checking runtime overrides first.
 function getNodeColor(colorKey) {
@@ -182,6 +183,93 @@ function nodeData(id, defaultW, defaultH, defaultColorKey) {
   };
 }
 
+function textLines(label) {
+  return label ? String(label).split("\n") : [];
+}
+
+function normalizeCustomLabelPlacement(value) {
+  return ["center", "below", "above", "right", "left"].includes(value) ? value : null;
+}
+
+function isExternalCustomLabelPlacement(placement) {
+  return ["above", "below", "right", "left"].includes(placement);
+}
+
+function measureTextWidth(line, fontSize, ctx) {
+  const font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+  if (ctx) {
+    const prevFont = ctx.font;
+    ctx.font = font;
+    const width = ctx.measureText(line).width;
+    ctx.font = prevFont;
+    return width;
+  }
+  if (typeof document === "undefined") return String(line).length * fontSize * 0.58;
+  if (!measureTextWidth._ctx) {
+    measureTextWidth._ctx = document.createElement("canvas").getContext("2d");
+  }
+  measureTextWidth._ctx.font = font;
+  return measureTextWidth._ctx.measureText(line).width;
+}
+
+export function customShapeLayout(node, label, ctx) {
+  const def = getCustomShapeDefinition(node && node.customShapeId);
+  const W =
+    (node && node.nodeWidth) || (def && def.width) || CUSTOM_SHAPE_DEFAULT_SIZE;
+  const H =
+    (node && node.nodeHeight) ||
+    (def && def.height) ||
+    CUSTOM_SHAPE_DEFAULT_SIZE;
+  const placement = normalizeCustomLabelPlacement(node && node.labelPlacement)
+    || normalizeCustomLabelPlacement(def && def.labelPlacement)
+    || "below";
+  const fontSize = (node && node.fontSize) || 13;
+  const lines = textLines(label);
+  const lineH = fontSize * 1.3;
+  if (!lines.length || !isExternalCustomLabelPlacement(placement)) {
+    return {
+      placement,
+      lines,
+      lineH,
+      imageOffsetX: 0,
+      imageOffsetY: 0,
+      labelBlockW: 0,
+      labelBlockH: 0,
+      totalW: W,
+      totalH: H,
+    };
+  }
+
+  const maxTextW = Math.max(...lines.map((line) => measureTextWidth(line, fontSize, ctx)));
+  const labelBlockW = maxTextW + 16;
+  const labelBlockH = lines.length * lineH + 8;
+  const horizontal = placement === "left" || placement === "right";
+  const totalW = horizontal ? W + labelBlockW : Math.max(W, labelBlockW);
+  const totalH = horizontal ? Math.max(H, labelBlockH) : H + labelBlockH;
+  const imageOffsetX = placement === "right" ? -labelBlockW / 2
+    : placement === "left" ? labelBlockW / 2
+      : 0;
+  const imageOffsetY = placement === "below" ? -labelBlockH / 2
+    : placement === "above" ? labelBlockH / 2
+      : 0;
+
+  return {
+    placement,
+    lines,
+    lineH,
+    imageOffsetX,
+    imageOffsetY,
+    labelBlockW,
+    labelBlockH,
+    totalW,
+    totalH,
+  };
+}
+
+export function customShapeImageOffsetY(node, label) {
+  return customShapeLayout(node, label).imageOffsetY;
+}
+
 // ── Shape renderers ───────────────────────────────────────────────────────────
 
 export function makeBoxRenderer(colorKey) {
@@ -653,6 +741,106 @@ export function makeImageRenderer(colorKey) {
   };
 }
 
+export function makeCustomShapeRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const n = st.nodes && st.nodes.get(id);
+    const def = getCustomShapeDefinition(n && n.customShapeId);
+    const defaultW = (def && def.width) || CUSTOM_SHAPE_DEFAULT_SIZE;
+    const defaultH = (def && def.height) || CUSTOM_SHAPE_DEFAULT_SIZE;
+    const {
+      W,
+      H,
+      rotation,
+      labelRotation,
+      textAlign,
+      textValign,
+      fontSize,
+      c,
+    } = nodeData(id, defaultW, defaultH, colorKey || "c-gray");
+    const img = getCachedImage(def && def.imageSrc, () => st.network && st.network.redraw());
+    const layout = customShapeLayout({ ...(n || {}), nodeWidth: W, nodeHeight: H, fontSize }, label, ctx);
+    const {
+      placement,
+      lines,
+      lineH,
+      imageOffsetX,
+      imageOffsetY,
+      totalW,
+      totalH,
+    } = layout;
+    const externalLabel = isExternalCustomLabelPlacement(placement) && lines.length;
+    return {
+      drawNode() {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(rotation);
+
+        if (img) {
+          ctx.drawImage(img, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H);
+        } else {
+          ctx.fillStyle = visState.selected ? c.hbg : c.bg;
+          ctx.strokeStyle = visState.selected ? "#f97316" : c.border;
+          ctx.lineWidth = 1.5;
+          roundRect(ctx, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H, 4);
+          ctx.fill();
+          ctx.stroke();
+        }
+
+        if (visState.selected || visState.hover) {
+          ctx.strokeStyle = visState.selected ? "#f97316" : c.border;
+          ctx.lineWidth = visState.selected ? 2 : 1;
+          ctx.setLineDash([4, 3]);
+          roundRect(ctx, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H, 4);
+          ctx.stroke();
+          ctx.setLineDash([]);
+        }
+
+        if (externalLabel) {
+          ctx.save();
+          if (labelRotation) ctx.rotate(labelRotation);
+          ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+          ctx.fillStyle = c.font;
+          if (placement === "right" || placement === "left") {
+            const textX = placement === "right"
+              ? imageOffsetX + W / 2 + 8
+              : imageOffsetX - W / 2 - 8;
+            const startY = -((lines.length - 1) * lineH) / 2;
+            ctx.textAlign = placement === "right" ? "left" : "right";
+            ctx.textBaseline = "middle";
+            lines.forEach((line, i) => ctx.fillText(line, textX, startY + i * lineH));
+          } else {
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
+            const startY = placement === "below"
+              ? imageOffsetY + H / 2 + 4
+              : -totalH / 2 + 4;
+            lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
+          }
+          ctx.restore();
+        } else {
+          drawLabel(
+            ctx,
+            label,
+            fontSize,
+            c.font,
+            textAlign,
+            textValign,
+            W,
+            H,
+            labelRotation,
+          );
+        }
+        ctx.save();
+        ctx.translate(imageOffsetX, imageOffsetY);
+        drawLinkIndicator(ctx, id, W, H);
+        ctx.restore();
+        ctx.restore();
+      },
+      nodeDimensions: { width: totalW, height: totalH },
+    };
+  };
+}
+
 // ── Public API ────────────────────────────────────────────────────────────────
 
 // Returns the rendered height from vis-network internals (used by node-panel
@@ -703,6 +891,7 @@ const RENDERER_MAP = {
   "text-free": makeTextFreeRenderer,
   actor: makeActorRenderer,
   image: makeImageRenderer,
+  [CUSTOM_SHAPE_TYPE]: makeCustomShapeRenderer,
   anchor: makeAnchorRenderer,
 };
 
@@ -716,6 +905,7 @@ export const SHAPE_DEFAULTS = {
   "post-it": [120, 100],
   "text-free": [80, 30],
   image: [160, 120],
+  [CUSTOM_SHAPE_TYPE]: [CUSTOM_SHAPE_DEFAULT_SIZE, CUSTOM_SHAPE_DEFAULT_SIZE],
   anchor: [8, 8],
 };
 

package/dist/src/frontend/diagram/persistence.js

@@ -126,6 +126,8 @@ export async function saveDiagram() {
     .map((n) => ({
       id: n.id, label: n.label,
       shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
+      customShapeId: n.customShapeId || null,
+      labelPlacement: n.labelPlacement || null,
       kind: n.kind || null, renderAs: n.renderAs || null,
       description: n.description || null,
       evidence: Array.isArray(n.evidence) ? n.evidence : null,

package/dist/src/frontend/diagram/ports.js

@@ -7,7 +7,8 @@
 // vis-network's native rendering unchanged.
 
 import { st } from './state.js';
-import { SHAPE_DEFAULTS } from './node-rendering.js';
+import { customShapeLayout, SHAPE_DEFAULTS } from './node-rendering.js';
+import { CUSTOM_SHAPE_TYPE, getCustomShapeAnchors } from './custom-shapes.js';
 
 /**
  * Splits `text` into lines that each fit within `maxWidth` canvas units.
@@ -83,20 +84,54 @@ function nodeGeometry(nodeId) {
   const W = n.nodeWidth  || defaults[0];
   // 'circle' is always square (H = W); 'ellipse' uses its own height.
   const H = shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
-  return { cx: pos.x, cy: pos.y, W, H, rotation: n.rotation || 0, shapeType };
+  const customLayout = shapeType === CUSTOM_SHAPE_TYPE ? customShapeLayout(n, n.label) : null;
+  const imageOffsetX = customLayout ? customLayout.imageOffsetX : 0;
+  const imageOffsetY = customLayout ? customLayout.imageOffsetY : 0;
+  return { cx: pos.x, cy: pos.y, W, H, rotation: n.rotation || 0, shapeType, customShapeId: n.customShapeId || null, imageOffsetX, imageOffsetY };
+}
+
+export function getPortKeys(nodeId) {
+  const n = st.nodes && st.nodes.get(nodeId);
+  if (n && n.shapeType === CUSTOM_SHAPE_TYPE) {
+    return getCustomShapeAnchors(n.customShapeId).map((anchor) => anchor.id);
+  }
+  return PORT_KEYS;
+}
+
+function customPortOffset(customShapeId, portKey) {
+  const anchor = getCustomShapeAnchors(customShapeId).find((item) => item.id === portKey);
+  if (!anchor) return null;
+  return [(anchor.x - 0.5) * 2, (anchor.y - 0.5) * 2];
+}
+
+function normalForPort(shapeType, customShapeId, portKey) {
+  if (shapeType === CUSTOM_SHAPE_TYPE) {
+    const offset = customPortOffset(customShapeId, portKey) || [0, -1];
+    const len = Math.hypot(offset[0], offset[1]) || 1;
+    return [offset[0] / len, offset[1] / len];
+  }
+  return PORT_NORMALS[portKey] || [0, -1];
+}
+
+function controlNormalForEdge(nodeId, portKey) {
+  const n = st.nodes && st.nodes.get(nodeId);
+  return normalForPort(n && n.shapeType, n && n.customShapeId, portKey);
 }
 
 /** Returns the world-space {x, y} of a port on a node. */
 export function getPortPosition(nodeId, portKey) {
   const geo = nodeGeometry(nodeId);
   if (!geo) return null;
-  const { cx, cy, W, H, rotation, shapeType } = geo;
-  const offsets = shapeType === 'database'      ? PORT_OFFSETS_DATABASE
+  const { cx, cy, W, H, rotation, shapeType, customShapeId, imageOffsetX, imageOffsetY } = geo;
+  const offsets = shapeType === CUSTOM_SHAPE_TYPE ? null
+               : shapeType === 'database'      ? PORT_OFFSETS_DATABASE
                : CIRCULAR_SHAPES.has(shapeType) ? PORT_OFFSETS_CIRC
                : PORT_OFFSETS_RECT;
-  const [ox, oy] = offsets[portKey] || [0, 0];
-  let dx = ox * W / 2;
-  let dy = oy * H / 2;
+  const [ox, oy] = shapeType === CUSTOM_SHAPE_TYPE
+    ? customPortOffset(customShapeId, portKey) || [0, 0]
+    : offsets[portKey] || [0, 0];
+  let dx = ox * W / 2 + imageOffsetX;
+  let dy = oy * H / 2 + imageOffsetY;
   if (rotation) {
     const cos = Math.cos(rotation), sin = Math.sin(rotation);
     [dx, dy] = [dx * cos - dy * sin, dx * sin + dy * cos];
@@ -107,7 +142,7 @@ export function getPortPosition(nodeId, portKey) {
 /** Returns the port key whose position is closest to `canvasPos` (world coords). */
 export function getNearestPort(nodeId, canvasPos) {
   let minD2 = Infinity, nearest = 'N';
-  for (const key of PORT_KEYS) {
+  for (const key of getPortKeys(nodeId)) {
     const p = getPortPosition(nodeId, key);
     if (!p) continue;
     const d2 = (canvasPos.x - p.x) ** 2 + (canvasPos.y - p.y) ** 2;
@@ -119,12 +154,12 @@ export function getNearestPort(nodeId, canvasPos) {
 // ── Port dot visualisation ────────────────────────────────────────────────────
 
 /**
- * Draws 8 port hint dots for `nodeId` in the vis-network afterDrawing context.
+ * Draws port hint dots for `nodeId` in the vis-network afterDrawing context.
  * `highlightedPort` (if any) is rendered larger and fully orange.
  */
 export function drawPortDots(ctx, nodeId, highlightedPort) {
   if (st.exportingPng) return;
-  for (const key of PORT_KEYS) {
+  for (const key of getPortKeys(nodeId)) {
     const p = getPortPosition(nodeId, key);
     if (!p) continue;
     const hl = key === highlightedPort;
@@ -219,8 +254,8 @@ export function drawPortEdge(ctx, edgeData) {
   if (useBezier) {
     const dist    = Math.hypot(toPos.x - fromPos.x, toPos.y - fromPos.y);
     const tension = Math.max(60, dist * 0.4);
-    const fn = PORT_NORMALS[edgeData.fromPort];
-    const tn = PORT_NORMALS[edgeData.toPort];
+    const fn = controlNormalForEdge(edgeData.from, edgeData.fromPort);
+    const tn = controlNormalForEdge(edgeData.to, edgeData.toPort);
     cp1 = { x: fromPos.x + fn[0] * tension, y: fromPos.y + fn[1] * tension };
     cp2 = { x: toPos.x   + tn[0] * tension, y: toPos.y   + tn[1] * tension };
   }
@@ -358,8 +393,8 @@ export function distanceToPortEdge(edgeData, p) {
   if (!st.edgesStraight && edgeData.fromPort && !fromIsAnch && edgeData.toPort && !toIsAnch) {
     const dist    = Math.hypot(toPos.x - fromPos.x, toPos.y - fromPos.y);
     const tension = Math.max(60, dist * 0.4);
-    const fn = PORT_NORMALS[edgeData.fromPort];
-    const tn = PORT_NORMALS[edgeData.toPort];
+    const fn = controlNormalForEdge(edgeData.from, edgeData.fromPort);
+    const tn = controlNormalForEdge(edgeData.to, edgeData.toPort);
     const cp1 = { x: fromPos.x + fn[0] * tension, y: fromPos.y + fn[1] * tension };
     const cp2 = { x: toPos.x   + tn[0] * tension, y: toPos.y   + tn[1] * tension };
     return _distToBezier(p, fromPos, cp1, cp2, toPos);

package/dist/src/frontend/diagram/selection-overlay.js

@@ -2,7 +2,8 @@
 // Dashed selection box, corner resize handles, and top-centre rotation handle.
 
 import { st, markDirty } from './state.js';
-import { visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
+import { customShapeLayout, visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
+import { CUSTOM_SHAPE_TYPE } from './custom-shapes.js';
 import { t }             from './t.js';
 import { pushSnapshot }  from './history.js';
 import { snapToGrid }    from './grid.js';
@@ -31,12 +32,71 @@ function nodeBounds(id) {
   return { minX: cx - hw, minY: cy - hh - headExtra, maxX: cx + hw, maxY: cy + hh };
 }
 
+function customShapeImageFrame(id) {
+  const n = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!n || !bodyNode || n.shapeType !== CUSTOM_SHAPE_TYPE) return null;
+  const defaults = SHAPE_DEFAULTS[CUSTOM_SHAPE_TYPE] || [96, 96];
+  const W = n.nodeWidth || defaults[0];
+  const H = n.nodeHeight || defaults[1];
+  const rotation = n.rotation || 0;
+  const layout = customShapeLayout(n, n.label);
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  const cx = bodyNode.x + layout.imageOffsetX * cos - layout.imageOffsetY * sin;
+  const cy = bodyNode.y + layout.imageOffsetX * sin + layout.imageOffsetY * cos;
+  return { cx, cy, W, H, rotation };
+}
+
+function syncOverlayHandles(width, height, pad) {
+  const rh = document.getElementById('rh-rotate');
+  rh.style.left = width / 2 + pad - 8 + 'px';
+  rh.style.top  = '-28px';
+
+  const lrh = document.getElementById('rh-label-rotate');
+  lrh.style.left = width / 2 + pad - 8 - 24 + 'px';
+  lrh.style.top  = '-28px';
+}
+
+function updateSingleCustomShapeOverlay(id) {
+  const frame = customShapeImageFrame(id);
+  if (!frame) return false;
+
+  const PAD = 10;
+  const scale = st.network.getScale();
+  const center = st.network.canvasToDOM({ x: frame.cx, y: frame.cy });
+  const width = frame.W * scale;
+  const height = frame.H * scale;
+  const ov = document.getElementById('selectionOverlay');
+  ov.style.display = 'block';
+  ov.style.left = center.x - width / 2 - PAD + 'px';
+  ov.style.top = center.y - height / 2 - PAD + 'px';
+  ov.style.width = width + PAD * 2 + 'px';
+  ov.style.height = height + PAD * 2 + 'px';
+  ov.style.transformOrigin = '50% 50%';
+  ov.style.transform = `rotate(${frame.rotation}rad)`;
+  syncOverlayHandles(width, height, PAD);
+  return true;
+}
+
 // ── Overlay position ──────────────────────────────────────────────────────────
 export function updateSelectionOverlay() {
   if (!st.network || !st.selectedNodeIds.length) { hideSelectionOverlay(); return; }
   // Anchor-only selections (free arrow drag) have no meaningful bounding box.
-  const hasNonAnchor = st.selectedNodeIds.some((id) => { const n = st.nodes && st.nodes.get(id); return !(n && n.shapeType === 'anchor'); });
-  if (!hasNonAnchor) { hideSelectionOverlay(); return; }
+  const nonAnchorIds = st.selectedNodeIds.filter((id) => { const n = st.nodes && st.nodes.get(id); return !(n && n.shapeType === 'anchor'); });
+  if (!nonAnchorIds.length) { hideSelectionOverlay(); return; }
+
+  const ov = document.getElementById('selectionOverlay');
+  ov.style.transform = '';
+  ov.style.transformOrigin = '';
+
+  if (nonAnchorIds.length === 1 && updateSingleCustomShapeOverlay(nonAnchorIds[0])) {
+    const anyLocked = st.selectedNodeIds.some((id) => { const n = st.nodes && st.nodes.get(id); return n && n.locked; });
+    ['rh-tl','rh-tr','rh-bl','rh-br','rh-rotate','rh-label-rotate'].forEach((handleId) => {
+      document.getElementById(handleId).style.display = anyLocked ? 'none' : '';
+    });
+    return;
+  }
 
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const id of st.selectedNodeIds) {
@@ -52,7 +112,6 @@ export function updateSelectionOverlay() {
   const PAD = 10;
   const tl  = st.network.canvasToDOM({ x: minX, y: minY });
   const br  = st.network.canvasToDOM({ x: maxX, y: maxY });
-  const ov  = document.getElementById('selectionOverlay');
   ov.style.display = 'block';
   ov.style.left    = tl.x - PAD + 'px';
   ov.style.top     = tl.y - PAD + 'px';
@@ -65,15 +124,7 @@ export function updateSelectionOverlay() {
     document.getElementById(id).style.display = anyLocked ? 'none' : '';
   });
 
-  // Position rotation handle: top-centre of the overlay, 28px above it.
-  const rh = document.getElementById('rh-rotate');
-  rh.style.left = (br.x - tl.x) / 2 + PAD - 8 + 'px';
-  rh.style.top  = '-28px';
-
-  // Position label rotation handle: top-centre offset left by 24px to avoid overlap.
-  const lrh = document.getElementById('rh-label-rotate');
-  lrh.style.left = (br.x - tl.x) / 2 + PAD - 8 - 24 + 'px';
-  lrh.style.top  = '-28px';
+  syncOverlayHandles(br.x - tl.x, br.y - tl.y, PAD);
 }
 
 export function hideSelectionOverlay() {

package/dist/src/frontend/diagram/state.js

@@ -28,6 +28,8 @@ export const st = {
   edgesStraight: false,  // when true, all edges use smooth: disabled (straight lines)
   resizeSymmetric: false, // when true, center is fixed during resize; when false, opposite corner is fixed
   nodeColorOverrides: {}, // colorKey → {bg, border, font, hbg, hborder} — set from config at boot
+  customShapeLibraries: [], // loaded from /api/shape-libraries
+  customShapeDefs: new Map(), // shape id → custom shape definition
   edgeLabelCanvasPos: {}, // edgeId → {x, y} canvas coords of last drawn label, used by label editor
   edgeLabelBBox: {},     // edgeId → {cx, cy, w, h, rotation} canvas world coords, used by label resize
   freeArrowFirstPoint: null, // addEdge two-click flow: {x, y} canvas coords of first click, or null