@ogabrielluiz/patchflow 0.1.1 → 0.1.4

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   SIGNAL_OPERATORS,
   __commonJS,
   __toESM
-} from "./chunk-B7DUSPQH.js";
+} from "./chunk-YONEHQMI.js";
 
 // node_modules/@dagrejs/graphlib/lib/graph.js
 var require_graph = __commonJS({
@@ -3542,7 +3542,8 @@ var errorMessages = {
   duplicateModule: (name) => `Module "${name}" declared more than once.`,
   didYouMean: (got, suggestion) => `Module "${got}" is not declared. Did you mean "${suggestion}"?`,
   syntaxError: (detail) => `Syntax error: ${detail}`,
-  emptyDiagram: () => `Diagram is empty \u2014 no connections found.`
+  emptyDiagram: () => `Diagram is empty \u2014 no connections found.`,
+  ambiguousPortDirection: (port, module) => `Port "${port}" on module "${module}" is used as both input and output. Use distinct names like "In ${port}"/"Out ${port}" to disambiguate.`
 };
 function editDistance(a, b) {
   const la = a.length;
@@ -3852,6 +3853,39 @@ function parse(input) {
       }
     }
   }
+  const portUsageMap = /* @__PURE__ */ new Map();
+  const allConns = [...forward, ...feedback];
+  for (const conn of allConns) {
+    const srcBlock = conn.source.blockId;
+    if (!portUsageMap.has(srcBlock)) portUsageMap.set(srcBlock, /* @__PURE__ */ new Map());
+    const srcPorts = portUsageMap.get(srcBlock);
+    if (!srcPorts.has(conn.source.portId)) srcPorts.set(conn.source.portId, { asSource: [], asTarget: [] });
+    srcPorts.get(conn.source.portId).asSource.push(0);
+    const tgtBlock = conn.target.blockId;
+    if (!portUsageMap.has(tgtBlock)) portUsageMap.set(tgtBlock, /* @__PURE__ */ new Map());
+    const tgtPorts = portUsageMap.get(tgtBlock);
+    if (!tgtPorts.has(conn.target.portId)) tgtPorts.set(conn.target.portId, { asSource: [], asTarget: [] });
+    tgtPorts.get(conn.target.portId).asTarget.push(0);
+  }
+  for (const [blockId, portMap] of portUsageMap) {
+    for (const [portId, usage] of portMap) {
+      if (usage.asSource.length > 0 && usage.asTarget.length > 0) {
+        const block = allBlocks.get(blockId);
+        const blockLabel = block ? block.label : blockId;
+        const srcConn = allConns.find((c) => c.source.blockId === blockId && c.source.portId === portId);
+        const tgtConn = allConns.find((c) => c.target.blockId === blockId && c.target.portId === portId);
+        const portDisplay = srcConn ? srcConn.source.portDisplay : tgtConn ? tgtConn.target.portDisplay : portId;
+        warnings.push({
+          code: "AMBIGUOUS_PORT_DIRECTION",
+          message: errorMessages.ambiguousPortDirection(portDisplay, blockLabel),
+          line: 0,
+          column: 1,
+          length: 1,
+          severity: "warning"
+        });
+      }
+    }
+  }
   const graph = {
     declaredBlocks: declaredBlocksList,
     stubBlocks,
@@ -4068,23 +4102,33 @@ function collectPorts(blocks, connections) {
   }
   return result;
 }
+function startYForFace(blockY, blockHeight, portCount) {
+  const topMargin = 40;
+  const bottomMargin = 30;
+  const topY = blockY + topMargin;
+  const bottomY = blockY + blockHeight - bottomMargin;
+  const availableHeight = bottomY - topY;
+  const clusterHeight = Math.max(0, (portCount - 1) * 24);
+  return topY + (availableHeight - clusterHeight) / 2;
+}
 function placePorts(block, ports) {
   const inPorts = ports.filter((p) => p.direction === "in");
   const outPorts = ports.filter((p) => p.direction === "out");
   const layoutPorts = [];
-  const startY = block.y + 40 + (block.subLabel ? 18 : 0);
   const spacing = 24;
+  const inStartY = startYForFace(block.y, block.height, inPorts.length);
   inPorts.forEach((p, i) => {
     layoutPorts.push({
       ...p,
-      position: { x: block.x, y: startY + i * spacing },
+      position: { x: block.x, y: inStartY + i * spacing },
       signalType: null
     });
   });
+  const outStartY = startYForFace(block.y, block.height, outPorts.length);
   outPorts.forEach((p, i) => {
     layoutPorts.push({
       ...p,
-      position: { x: block.x + block.width, y: startY + i * spacing },
+      position: { x: block.x + block.width, y: outStartY + i * spacing },
       signalType: null
     });
   });
@@ -4127,7 +4171,7 @@ function findPortPosition(block, portId, direction) {
 }
 function layout(graph, options = {}) {
   const direction = options.direction ?? "LR";
-  const rankSep = options.rankSep ?? 200;
+  const rankSep = options.rankSep ?? 120;
   const nodeSep = options.nodeSep ?? 40;
   const allBlocks = [...graph.declaredBlocks, ...graph.stubBlocks];
   const allConnections = [...graph.connections, ...graph.feedbackEdges];
@@ -4240,14 +4284,33 @@ function layout(graph, options = {}) {
   const feedbackSpace = hasFeedback ? diagramBottom - maxY + feedbackArcOffset + 30 + 16 : 0;
   const width = maxX + margin;
   const height = maxY + margin + feedbackSpace;
+  const warnings = checkHeightInvariant({
+    blocks: layoutBlocks,
+    height,
+    hasFeedback,
+    feedbackBottom: diagramBottom + feedbackArcOffset
+  });
   return {
     blocks: layoutBlocks,
     connections: layoutConnections,
     width,
     height,
-    signalTypeStats: graph.signalTypeStats
+    signalTypeStats: graph.signalTypeStats,
+    warnings
   };
 }
+function checkHeightInvariant(args) {
+  const { blocks, height, hasFeedback, feedbackBottom } = args;
+  const warnings = [];
+  const blockBottomMax = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y + b.height)) : 0;
+  const contentBottom = hasFeedback ? Math.max(blockBottomMax, feedbackBottom) : blockBottomMax;
+  if (height < contentBottom) {
+    warnings.push(
+      `layout: computed height (${height.toFixed(1)}) is below content bottom (${contentBottom.toFixed(1)}); legend/notes may overlap block content`
+    );
+  }
+  return warnings;
+}
 
 // src/renderer.ts
 function genId() {
@@ -4372,7 +4435,28 @@ var SIGNAL_PILL_LABEL = {
   trigger: "trig",
   clock: "clk"
 };
-function buildLabels(theme, blocks) {
+var UPWARD_CABLE_THRESHOLD = 20;
+function computeLabelBelowMap(connections) {
+  const map = /* @__PURE__ */ new Map();
+  for (const conn of connections) {
+    const srcKey = `${conn.source.blockId}:${conn.source.portId}:out`;
+    const srcDy = conn.targetPoint.y - conn.sourcePoint.y;
+    if (srcDy < -UPWARD_CABLE_THRESHOLD) {
+      map.set(srcKey, true);
+    } else if (!map.has(srcKey)) {
+      map.set(srcKey, false);
+    }
+    const tgtKey = `${conn.target.blockId}:${conn.target.portId}:in`;
+    const tgtDy = conn.sourcePoint.y - conn.targetPoint.y;
+    if (conn.isFeedback || tgtDy > UPWARD_CABLE_THRESHOLD) {
+      map.set(tgtKey, true);
+    } else if (!map.has(tgtKey)) {
+      map.set(tgtKey, false);
+    }
+  }
+  return map;
+}
+function buildLabels(theme, blocks, connections) {
   const parts = [];
   const fontFamily = sanitizeForSvg(theme.port.fontFamily);
   const pillShow = theme.port.pill.show;
@@ -4381,50 +4465,51 @@ function buildLabels(theme, blocks) {
   const pillRadius = theme.port.pill.cornerRadius;
   const pillPadX = 3;
   const pillHeight = 11;
-  const pillGap = 6;
   const charWidth = 6.5;
+  const pillOffsetAbove = 20;
+  const nameOffsetAbove = 32;
+  const pillOffsetBelow = 20;
+  const nameOffsetBelow = 32;
+  const belowMap = computeLabelBelowMap(connections);
+  const labelOffsetX = 6;
   for (const block of blocks) {
     for (const port of block.ports) {
       const { x, y } = port.position;
-      const isOut = port.direction === "out";
-      const labelX = isOut ? x + 14 : x - 14;
-      const labelY = y + 3;
-      const anchor = isOut ? "start" : "end";
+      const key = `${block.id}:${port.id}:${port.direction}`;
+      const below = belowMap.get(key) === true;
       const display = sanitizeForSvg(port.display);
-      const labelWidth = port.display.length * charWidth;
+      const isOutput = port.direction === "out";
+      const textY = below ? y + nameOffsetBelow : y - nameOffsetAbove;
+      const textX = isOutput ? x + labelOffsetX : x - labelOffsetX;
+      const textAnchor = isOutput ? "start" : "end";
       parts.push(
-        `<text x="${labelX}" y="${labelY}" font-family="${fontFamily}" font-size="${theme.port.fontSize}" fill="${theme.port.labelColor}" font-weight="600" text-anchor="${anchor}">${display}</text>`
+        `<text x="${textX}" y="${textY}" font-family="${fontFamily}" font-size="${theme.port.fontSize}" fill="${theme.port.labelColor}" font-weight="600" text-anchor="${textAnchor}" dominant-baseline="central">${display}</text>`
       );
       if (pillShow && port.signalType) {
         const pillText = SIGNAL_PILL_LABEL[port.signalType];
         const pillWidth = pillText.length * charWidth + pillPadX * 2;
         const pillColor = theme.cable.colors[port.signalType].stroke;
-        let pillX;
-        if (isOut) {
-          pillX = labelX + labelWidth + pillGap;
-        } else {
-          pillX = labelX - labelWidth - pillGap - pillWidth;
-        }
-        const pillY = y - pillHeight / 2;
-        const textX = pillX + pillWidth / 2;
-        const textY = pillY + pillHeight / 2 + pillFontSize / 2 - 1;
+        const pillCenterY = below ? y + pillOffsetBelow : y - pillOffsetAbove;
+        const pillX = isOutput ? x + labelOffsetX : x - labelOffsetX - pillWidth;
+        const pillY = pillCenterY - pillHeight / 2;
+        const pillTextX = pillX + pillWidth / 2;
         parts.push(
           `<rect class="pf-port-pill" x="${pillX}" y="${pillY}" width="${pillWidth}" height="${pillHeight}" rx="${pillRadius}" fill="${pillColor}" data-signal="${port.signalType}"/>`
         );
         parts.push(
-          `<text class="pf-port-pill-text" x="${textX}" y="${textY}" text-anchor="middle" font-family="${fontFamily}" font-size="${pillFontSize}" fill="${pillTextColor}" font-weight="600">${sanitizeForSvg(pillText)}</text>`
+          `<text class="pf-port-pill-text" x="${pillTextX}" y="${pillCenterY}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamily}" font-size="${pillFontSize}" fill="${pillTextColor}" font-weight="600">${sanitizeForSvg(pillText)}</text>`
         );
       }
     }
   }
   return parts.join("");
 }
-function buildAnnotations(theme, connections) {
+function buildAnnotations(theme, connections, layoutHeight) {
   const annotated = connections.filter((c) => c.annotation);
   if (annotated.length === 0) return "";
   const parts = [];
   const fontFamily = sanitizeForSvg(theme.annotation.fontFamily);
-  const noteFontSize = theme.annotation.fontSize + 1;
+  const noteFontSize = theme.annotation.fontSize + 2;
   const markerFontFamily = fontFamily;
   annotated.forEach((conn, i) => {
     const num = i + 1;
@@ -4442,44 +4527,48 @@ function buildAnnotations(theme, connections) {
       mx = (sx + tx) / 2;
       my = (sy + ty) / 2;
     }
-    const markerStroke = conn.isFeedback ? theme.cable.colors[conn.signalType].stroke : theme.label.color;
+    const markerStroke = conn.isFeedback ? theme.cable.colors[conn.signalType].stroke : theme.annotation.color;
     parts.push(
       `<circle cx="${mx}" cy="${my}" r="8" fill="${theme.panel.highlight}" stroke="${markerStroke}" stroke-width="0.5" data-annotation-marker="${num}"/>`
     );
     parts.push(
-      `<text x="${mx}" y="${my + 3}" text-anchor="middle" font-family="${markerFontFamily}" font-size="9" fill="${theme.label.color}">${num}</text>`
+      `<text x="${mx}" y="${my + 3}" text-anchor="middle" font-family="${markerFontFamily}" font-size="9" fill="${theme.annotation.color}">${num}</text>`
     );
   });
   const panelX = -120;
-  let panelY = 20;
-  const lineGap = 14;
+  const lineGap = 16;
+  const noteCount = annotated.length;
+  const bottomY = layoutHeight - 10;
+  const firstNoteY = bottomY - (noteCount - 1) * lineGap;
   annotated.forEach((conn, i) => {
     const num = i + 1;
     const noteText = `${num}. ${sanitizeForSvg(conn.annotation)}`;
+    const noteY = firstNoteY + i * lineGap;
     parts.push(
-      `<text x="${panelX}" y="${panelY}" font-family="${fontFamily}" font-size="${noteFontSize}" fill="${theme.annotation.color}">${noteText}</text>`
+      `<text x="${panelX}" y="${noteY}" font-family="${fontFamily}" font-size="${noteFontSize}" font-weight="600" fill="${theme.annotation.color}">${noteText}</text>`
     );
-    panelY += lineGap;
   });
   return parts.join("");
 }
-function buildLegend(theme, layoutResult) {
+function buildLegend(theme, layoutResult, diagramBottom) {
   const order = ["audio", "cv", "pitch", "gate", "trigger", "clock"];
   const used = order.filter((t) => (layoutResult.signalTypeStats[t] ?? 0) > 0);
   if (used.length === 0) return "";
   const parts = [];
   const fontFamily = sanitizeForSvg(theme.annotation.fontFamily);
   const itemWidth = 70;
-  const y = layoutResult.height - 20;
-  let x = 20;
-  for (const sig of used) {
+  const totalWidth = used.length * itemWidth;
+  const legendStartX = layoutResult.width - totalWidth;
+  const y = diagramBottom - 20;
+  for (let i = 0; i < used.length; i++) {
+    const sig = used[i];
     const color = theme.cable.colors[sig].stroke;
+    const x = legendStartX + i * itemWidth;
     let g = `<g transform="translate(${x}, ${y})">`;
     g += `<line x1="0" y1="0" x2="20" y2="0" stroke="${color}" stroke-width="3" stroke-linecap="round"/>`;
     g += `<text x="26" y="3" font-family="${fontFamily}" font-size="9" fill="${theme.annotation.color}">${sig}</text>`;
     g += `</g>`;
     parts.push(g);
-    x += itemWidth;
   }
   return parts.join("");
 }
@@ -4502,20 +4591,26 @@ function renderSvg(layoutResult, theme) {
       `<pattern id="${idPrefix}-dots" width="${spacing}" height="${spacing}" patternUnits="userSpaceOnUse"><circle cx="${spacing / 2}" cy="${spacing / 2}" r="${theme.grid.dotRadius}" fill="${theme.grid.dotColor}" opacity="${theme.grid.opacity}"/></pattern>`
     );
   }
+  const labelPadX = 130;
+  const vbWidth = width + labelPadX * 2;
+  const topPad = 40;
+  const noteCount = layoutResult.connections.filter((c) => c.annotation).length;
+  const notesHeight = noteCount > 0 ? noteCount * 16 + 10 : 0;
+  const bottomPad = Math.max(40, notesHeight + 10);
+  const vbHeight = height + topPad + bottomPad;
+  const diagramBottom = height + bottomPad;
   const layers = [
     `<g class="pf-layer-bg">${buildBackground(theme, idPrefix, width, height)}</g>`,
     `<g class="pf-layer-cables">${buildCables(theme, layoutResult.connections)}</g>`,
     `<g class="pf-layer-panels" >${buildPanels(theme, idPrefix, layoutResult.blocks)}</g>`,
     `<g class="pf-layer-params">${buildParams(layoutResult.blocks, theme)}</g>`,
     `<g class="pf-layer-jacks">${buildJacks(theme, idPrefix, layoutResult.blocks)}</g>`,
-    `<g class="pf-layer-labels">${buildLabels(theme, layoutResult.blocks)}</g>`,
-    `<g class="pf-layer-annotations">${buildAnnotations(theme, layoutResult.connections)}</g>`,
-    `<g class="pf-layer-legend">${buildLegend(theme, layoutResult)}</g>`
+    `<g class="pf-layer-labels">${buildLabels(theme, layoutResult.blocks, layoutResult.connections)}</g>`,
+    `<g class="pf-layer-annotations">${buildAnnotations(theme, layoutResult.connections, diagramBottom)}</g>`,
+    `<g class="pf-layer-legend">${buildLegend(theme, layoutResult, diagramBottom)}</g>`
   ].join("");
   const style = `<style>@media print { .pf-panel, .pf-jack { filter: none; } }</style>`;
-  const labelPadX = 130;
-  const vbWidth = width + labelPadX * 2;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-labelPadX} 0 ${vbWidth} ${height}" width="100%" data-pf-min-width="${minWidth + labelPadX * 2}" role="img" aria-labelledby="${idPrefix}-title ${idPrefix}-desc"><title id="${idPrefix}-title">Patch diagram</title><desc id="${idPrefix}-desc">${desc}</desc>` + style + `<defs>${defsParts.join("")}</defs>` + layers + `</svg>`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-labelPadX} ${-topPad} ${vbWidth} ${vbHeight}" width="100%" data-pf-min-width="${minWidth + labelPadX * 2}" role="img" aria-labelledby="${idPrefix}-title ${idPrefix}-desc"><title id="${idPrefix}-title">Patch diagram</title><desc id="${idPrefix}-desc">${desc}</desc>` + style + `<defs>${defsParts.join("")}</defs>` + layers + `</svg>`;
   return svg;
 }
 
@@ -4578,7 +4673,7 @@ var defaultTheme = {
   annotation: {
     fontFamily: "'SF Mono', 'Fira Code', Consolas, 'Courier New', monospace",
     fontSize: 9,
-    color: "#888888",
+    color: "#4a4a4a",
     haloColor: "#f7f5f0"
   },
   grid: {