@ogabrielluiz/patchflow 0.1.3 → 0.1.5

package/dist/{chunk-4VUBNFI4.js → chunk-YONEHQMI.js}

@@ -39,4 +39,4 @@ export {
   __toESM,
   SIGNAL_OPERATORS
 };
-//# sourceMappingURL=chunk-4VUBNFI4.js.map
+//# sourceMappingURL=chunk-YONEHQMI.js.map

package/dist/chunk-YONEHQMI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["// ── Signal Types ──\n\nexport type SignalType = 'audio' | 'cv' | 'pitch' | 'gate' | 'trigger' | 'clock';\n\nexport const SIGNAL_OPERATORS: Record<string, SignalType> = {\n  '->': 'audio',\n  '>>': 'cv',\n  'p>': 'pitch',\n  'g>': 'gate',\n  't>': 'trigger',\n  'c>': 'clock',\n};\n\n// ── Graph Primitives ──\n\nexport interface Port {\n  id: string;          // normalized key (lowercase, trimmed)\n  display: string;     // original form for rendering\n  direction: 'in' | 'out';\n}\n\nexport interface Param {\n  key: string;\n  value: string;\n}\n\nexport interface Block {\n  id: string;\n  label: string;\n  subLabel: string | null;\n  params: Param[];\n  ports: Port[];\n  parentModule: string | null;  // null for top-level modules, module name for sections\n  voice: string | null;\n}\n\nexport interface ConnectionEndpoint {\n  blockId: string;\n  portId: string;       // normalized key\n  portDisplay: string;  // original form\n}\n\nexport interface Connection {\n  id: string;\n  source: ConnectionEndpoint;\n  target: ConnectionEndpoint;\n  signalType: SignalType;\n  annotation: string | null;\n  graphvizExtras: Record<string, string> | null;\n}\n\n// ── Patch Graph (Parser Output) ──\n\nexport interface PatchGraph {\n  declaredBlocks: Block[];\n  stubBlocks: Block[];\n  connections: Connection[];\n  feedbackEdges: Connection[];\n  signalTypeStats: Partial<Record<SignalType, number>>;\n  voices: string[];\n}\n\n// ── Layout Types ──\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface LayoutPort extends Port {\n  position: Point;\n  signalType: SignalType | null;\n}\n\nexport interface LayoutBlock {\n  id: string;\n  label: string;\n  subLabel: string | null;\n  params: Param[];\n  ports: LayoutPort[];\n  parentModule: string | null;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface LayoutConnection {\n  id: string;\n  source: ConnectionEndpoint;\n  target: ConnectionEndpoint;\n  signalType: SignalType;\n  annotation: string | null;\n  path: string;            // SVG path d attribute\n  isFeedback: boolean;\n  sourcePoint: Point;\n  targetPoint: Point;\n}\n\nexport interface LayoutResult {\n  blocks: LayoutBlock[];\n  connections: LayoutConnection[];\n  width: number;\n  height: number;\n  signalTypeStats: Partial<Record<SignalType, number>>;\n  /**\n   * Non-fatal diagnostics produced during layout. Currently used to surface\n   * internal consistency issues (e.g. computed height doesn't cover the\n   * actual block content) so future regressions are visible.\n   */\n  warnings?: string[];\n}\n\n// ── Theme Types ──\n\nexport interface CableColor {\n  stroke: string;\n  plugTip: string;\n}\n\nexport interface SocketColors {\n  bezel: string;\n  bezelStroke: string;\n  ring: string;\n  hole: string;\n  pin: string;\n}\n\nexport interface Theme {\n  background: string;\n  panel: {\n    fill: string;\n    stroke: string;\n    highlight: string;\n    shadow: string;\n    cornerRadius: number;\n    shadowBlur: number;\n    shadowOpacity: number;\n    bevelWidth: number;\n  };\n  label: {\n    fontFamily: string;\n    color: string;\n    subColor: string;\n    plateFill: string;\n    plateStroke: string;\n  };\n  param: {\n    plateFill: string;\n    plateStroke: string;\n    textColor: string;\n  };\n  port: {\n    fontFamily: string;\n    fontSize: number;\n    colors: SocketColors;\n    hideSocket: boolean;\n    labelColor: string;\n    pill: {\n      show: boolean;\n      fontSize: number;\n      textColor: string;\n      cornerRadius: number;\n    };\n  };\n  cable: {\n    width: number;\n    colors: Record<SignalType, CableColor>;\n    plugTipRadius: number;\n  };\n  annotation: {\n    fontFamily: string;\n    fontSize: number;\n    color: string;\n    haloColor: string;\n  };\n  grid: {\n    dotColor: string;\n    dotRadius: number;\n    spacing: number;\n    opacity: number;\n  } | null;\n}\n\n// ── Options ──\n\nexport interface RenderOptions {\n  theme?: DeepPartial<Theme>;\n  maxWidth?: number;\n  padding?: number;\n  legend?: boolean | 'auto';\n}\n\nexport interface LayoutOptions {\n  direction?: 'LR' | 'TB';\n  nodeSep?: number;\n  rankSep?: number;\n  feedbackSide?: 'top' | 'bottom';\n}\n\n// ── Parse Result ──\n\nexport type ErrorCode =\n  | 'SYNTAX_ERROR'\n  | 'UNKNOWN_OPERATOR'\n  | 'MISSING_PORT'\n  | 'UNCLOSED_PAREN'\n  | 'DUPLICATE_MODULE'\n  | 'UNKNOWN_MODULE'\n  | 'INVALID_PORT'\n  | 'AMBIGUOUS_PORT_DIRECTION';\n\nexport type ErrorSeverity = 'error' | 'warning';\n\nexport interface ParseDiagnostic {\n  code: ErrorCode;\n  message: string;\n  line: number;\n  column: number;\n  length: number;\n  severity: ErrorSeverity;\n}\n\nexport interface ParseResult {\n  graph: PatchGraph;\n  errors: ParseDiagnostic[];\n  warnings: ParseDiagnostic[];\n}\n\n// ── Utility Types ──\n\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAM,mBAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}

package/dist/index.cjs

@@ -4091,7 +4091,7 @@ function selfLoopArcPath(source, target, blockBottom, arcOffset) {
 var MIN_WIDTH = 140;
 var MIN_HEIGHT = 90;
 function getBlockDimensions(block, portCount) {
-  const labelWidth = block.label.length * 8;
+  const labelWidth = block.label.length * 11;
   const subLabelWidth = block.subLabel ? block.subLabel.length * 7 : 0;
   const paramWidths = block.params.map((p) => `${p.key}: ${p.value}`.length * 7);
   const longestParam = paramWidths.length > 0 ? Math.max(...paramWidths) : 0;
@@ -4333,19 +4333,46 @@ 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() {
   return "pf-" + Math.random().toString(16).slice(2, 8);
 }
+function fitLabel(label, maxWidth, charWidth) {
+  if (maxWidth <= 0 || charWidth <= 0) return label;
+  const maxChars = Math.floor(maxWidth / charWidth);
+  if (maxChars <= 0) return label;
+  if (label.length <= maxChars) return label;
+  if (maxChars === 1) return "\u2026";
+  return label.slice(0, maxChars - 1) + "\u2026";
+}
 function buildDesc(layoutResult) {
   const blockCount = layoutResult.blocks.length;
   const connCount = layoutResult.connections.length;
@@ -4391,11 +4418,11 @@ function buildPanels(theme, idPrefix, blocks) {
   const parts = [];
   for (const block of blocks) {
     const moduleName = sanitizeForSvg(block.parentModule || block.label);
-    const label = sanitizeForSvg(block.label);
     const fontFamily = sanitizeForSvg(theme.label.fontFamily);
     const insetX = block.x + 12;
     const insetY = block.y + 8;
     const insetW = block.width - 24;
+    const label = sanitizeForSvg(fitLabel(block.label, insetW, 11));
     let group = `<g data-module="${moduleName}" filter="url(#${idPrefix}-panel-shadow)">`;
     group += `<rect x="${block.x}" y="${block.y}" width="${block.width}" height="${block.height}" fill="${theme.panel.fill}" stroke="${theme.panel.stroke}" stroke-width="0.75" rx="${theme.panel.cornerRadius}"/>`;
     group += `<line x1="${block.x}" y1="${block.y + 0.5}" x2="${block.x + block.width}" y2="${block.y + 0.5}" stroke="${theme.panel.highlight}" stroke-width="${theme.panel.bevelWidth}"/>`;
@@ -4403,7 +4430,7 @@ function buildPanels(theme, idPrefix, blocks) {
     group += `<rect x="${insetX}" y="${insetY}" width="${insetW}" height="28" fill="${theme.label.plateFill}" stroke="${theme.label.plateStroke}" stroke-width="0.5"/>`;
     group += `<text x="${block.x + block.width / 2}" y="${block.y + 22}" text-anchor="middle" font-family="${fontFamily}" font-size="14" font-weight="700" fill="${theme.label.color}" letter-spacing="3">${label}</text>`;
     if (block.subLabel) {
-      const subLabel = sanitizeForSvg(block.subLabel);
+      const subLabel = sanitizeForSvg(fitLabel(block.subLabel, insetW - 8, 7));
       const barX = insetX;
       const barY = insetY + 28;
       const barW = insetW;
@@ -4429,7 +4456,8 @@ function buildParams(blocks, theme) {
         `<rect x="${px}" y="${py}" width="${pw}" height="20" fill="${theme.param.plateFill}" stroke="${theme.param.plateStroke}" stroke-width="0.5"/>`
       );
       const keyNorm = param.key.trim().toLowerCase();
-      const text = keyNorm === blockLabelNorm ? sanitizeForSvg(param.value) : `${sanitizeForSvg(param.key)}: ${sanitizeForSvg(param.value)}`;
+      const rawText = keyNorm === blockLabelNorm ? param.value : `${param.key}: ${param.value}`;
+      const text = sanitizeForSvg(fitLabel(rawText, pw - 8, 7));
       parts.push(
         `<text x="${px + pw / 2}" y="${py + 14}" text-anchor="middle" font-family="${monoFont}" font-size="10" fill="${theme.param.textColor}">${text}</text>`
       );
@@ -4580,7 +4608,7 @@ function buildAnnotations(theme, connections, layoutHeight) {
   });
   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 "";
@@ -4589,7 +4617,7 @@ function buildLegend(theme, layoutResult) {
   const itemWidth = 70;
   const totalWidth = used.length * itemWidth;
   const legendStartX = layoutResult.width - totalWidth;
-  const y = layoutResult.height - 20;
+  const y = diagramBottom - 20;
   for (let i = 0; i < used.length; i++) {
     const sig = used[i];
     const color = theme.cable.colors[sig].stroke;
@@ -4621,6 +4649,14 @@ 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>`,
@@ -4628,17 +4664,10 @@ function renderSvg(layoutResult, theme) {
     `<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, layoutResult.connections)}</g>`,
-    `<g class="pf-layer-annotations">${buildAnnotations(theme, layoutResult.connections, height)}</g>`,
-    `<g class="pf-layer-legend">${buildLegend(theme, layoutResult)}</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 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 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;
 }