@principal-ai/subsystems-react 0.51.2 → 0.51.4

package/src/subsystem/techIcons/react.ts

@@ -0,0 +1,18 @@
+/**
+ * React mark — the official logo, vendored verbatim.
+ *
+ * Source: https://react.dev (the React logo; mirrored at
+ * https://commons.wikimedia.org/wiki/File:React-icon.svg).
+ * React and the React logo are trademarks of Meta Platforms, Inc. Used here
+ * for identification only, with no endorsement implied.
+ *
+ * Root sized to 100% so the card's wrapper controls the box.
+ */
+export const reactSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-11.5 -10.23174 23 20.46348">
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>`;

package/src/subsystem/techIcons/techIcons.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+import { TECH_BRANDS, technologyBrand } from './index';
+
+describe('technologyBrand', () => {
+  test('matches the brand named in the technology string', () => {
+    expect(technologyBrand('React 19')?.name).toBe('React');
+    expect(technologyBrand('React + ELK')?.name).toBe('React');
+    expect(technologyBrand('Bun + Electrobun host')?.name).toBe('Bun');
+    expect(technologyBrand('Bun fs')?.name).toBe('Bun');
+  });
+
+  test('does not match a brand name inside another word', () => {
+    // "Electrobun" contains "bun" but is not Bun — no word boundary.
+    expect(technologyBrand('Electrobun host')).toBeUndefined();
+  });
+
+  test('returns nothing for technologies we hold no official mark for', () => {
+    for (const tech of ['HTTP', 'REST', 'JSON files under ~/.principal', 'Electrobun host']) {
+      expect(technologyBrand(tech)).toBeUndefined();
+    }
+    expect(technologyBrand('')).toBeUndefined();
+    expect(technologyBrand(undefined)).toBeUndefined();
+  });
+
+  test('matches Node and Node.js', () => {
+    expect(technologyBrand('Node')?.name).toBe('Node.js');
+    expect(technologyBrand('Node.js 20')?.name).toBe('Node.js');
+  });
+
+  test('every vendored brand carries a source and an SVG', () => {
+    for (const brand of TECH_BRANDS) {
+      expect(brand.source).toMatch(/^https?:\/\//);
+      expect(brand.svg.startsWith('<svg')).toBe(true);
+      // Root sized to 100%, so the card wrapper controls the box.
+      expect(brand.svg).toContain('width="100%"');
+      expect(brand.svg).toContain('height="100%"');
+    }
+  });
+});

package/src/utils/edgeLabel.ts

@@ -33,7 +33,7 @@ export const EDGE_LABEL_FONT_SIZE = 14;
  * "min edge length" here double-counts (it is applied twice), which is how the
  * gap silently ballooned before.
  */
-export const EDGE_LABEL_SIDE_PADDING = 32;
+export const EDGE_LABEL_SIDE_PADDING = 8;
 
 /** Actual end-to-end gap ELK leaves for a labelled edge (box + both clearances). */
 export const EDGE_LABEL_EDGE_GAP =

package/src/utils/elkLayout.test.ts

@@ -12,6 +12,8 @@ import {
   pointsToPath,
   pointsToSmoothPath,
   calculatePathMidpoint,
+  pointAlongPath,
+  fractionAlongPath,
   planCompoundGroups,
   type Point,
 } from './elkLayout';
@@ -129,6 +131,38 @@ describe('planCompoundGroups', () => {
 });
 
 describe('elkLayout helper functions', () => {
+  describe('pointAlongPath / fractionAlongPath', () => {
+    const bent: Point[] = [
+      { x: 0, y: 0 },
+      { x: 100, y: 0 },
+      { x: 100, y: 100 },
+    ];
+
+    test('half is the arc-length midpoint, not a corner', () => {
+      // Total length 200; half is 100 along, which is the corner (100,0).
+      const mid = pointAlongPath(bent, 0.5);
+      expect(mid).toEqual({ x: 100, y: 0 });
+    });
+
+    test('a fraction lands on the correct segment', () => {
+      // 0.75 of 200 = 150 → 50 down the second segment.
+      expect(pointAlongPath(bent, 0.75)).toEqual({ x: 100, y: 50 });
+      // 0.25 of 200 = 50 → half along the first segment.
+      expect(pointAlongPath(bent, 0.25)).toEqual({ x: 50, y: 0 });
+    });
+
+    test('clamps and handles degenerate input', () => {
+      expect(pointAlongPath(bent, -1)).toEqual({ x: 0, y: 0 });
+      expect(pointAlongPath(bent, 2)).toEqual({ x: 100, y: 100 });
+      expect(pointAlongPath([{ x: 5, y: 5 }], 0.5)).toEqual({ x: 5, y: 5 });
+    });
+
+    test('fractionAlongPath inverts pointAlongPath', () => {
+      const at = pointAlongPath(bent, 0.75);
+      expect(fractionAlongPath(bent, at)).toBeCloseTo(0.75, 5);
+    });
+  });
+
   describe('pointsToPath', () => {
     test('should return empty string for empty array', () => {
       expect(pointsToPath([])).toBe('');

package/src/utils/elkLayout.ts

@@ -10,7 +10,7 @@ import type { Node, Edge } from '@xyflow/react';
 import {
   EDGE_LABEL_WIDTH,
   EDGE_LABEL_HEIGHT,
-  EDGE_LABEL_SIDE_PADDING,
+  EDGE_LABEL_EDGE_GAP,
 } from './edgeLabel';
 
 /** ELK layout options for different routing styles */
@@ -330,6 +330,70 @@ export function calculatePathLength(points: Point[]): number {
   return total;
 }
 
+/**
+ * Point a given fraction along a polyline, by arc length.
+ *
+ * Using arc length, not the nearest-point snap, is what keeps a label chip on
+ * the visual middle of a *bent* route. Nearest-point (`closestPointOnPath`)
+ * jumps to whichever segment happens to be nearest the target, so a fanned-out
+ * orthogonal route put the chip on a corner near the source node.
+ *
+ * @public Exported for testing
+ */
+export function pointAlongPath(points: Point[], fraction: number): Point {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return points[0];
+  const total = calculatePathLength(points);
+  if (total === 0) return points[0];
+
+  let remaining = Math.max(0, Math.min(1, fraction)) * total;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const seg = Math.hypot(b.x - a.x, b.y - a.y);
+    if (seg === 0) continue;
+    if (remaining <= seg) {
+      const t = remaining / seg;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    remaining -= seg;
+  }
+  return points[points.length - 1];
+}
+
+/**
+ * How far along a polyline a point lies, as a 0…1 fraction of arc length.
+ * The point is assumed to lie on (or near) the path.
+ *
+ * @public Exported for testing
+ */
+export function fractionAlongPath(points: Point[], at: Point): number {
+  if (points.length < 2) return 0.5;
+  const total = calculatePathLength(points);
+  if (total === 0) return 0.5;
+
+  let travelled = 0;
+  let bestDist = Infinity;
+  let bestTravelled = 0;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const seg = Math.hypot(b.x - a.x, b.y - a.y);
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const t = seg === 0 ? 0 : Math.max(0, Math.min(1, ((at.x - a.x) * dx + (at.y - a.y) * dy) / (seg * seg)));
+    const px = a.x + dx * t;
+    const py = a.y + dy * t;
+    const dist = Math.hypot(at.x - px, at.y - py);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestTravelled = travelled + seg * t;
+    }
+    travelled += seg;
+  }
+  return bestTravelled / total;
+}
+
 /**
  * Get ELK layout options based on configuration
  */
@@ -707,13 +771,24 @@ export async function computeElkLayout(
     // edge by ~13px) plus a gap before the first child.
     'elk.padding': '[top=64,left=24,bottom=24,right=24]',
     'elk.spacing.nodeNode': '40',
-    // Edges inside a frame host labels too: ELK applies this on both sides of
-    // the reserved label layer, so it is the per-side clearance (same as root).
-    // Labels off falls back to a plain between-layer gap.
+    // Edges inside a frame host labels too, so the frame's own layout has to
+    // reserve the same room the root does — otherwise a nested graph (C4 puts
+    // every box in the system frame) lays its edges out with the label space
+    // ignored, and a 140px chip overflows a ~72px gap. `EDGE_LABEL_EDGE_GAP` is
+    // the full reserved width (label box + clearance at each end); labels off
+    // falls back to a plain between-layer gap.
     'elk.layered.spacing.nodeNodeBetweenLayers': String(
-      edgeLabels?.enabled === false ? 40 : EDGE_LABEL_SIDE_PADDING,
+      edgeLabels?.enabled === false ? 40 : EDGE_LABEL_EDGE_GAP,
     ),
   };
+  // Match the root's inline-label reservation, so ELK inside the frame leaves a
+  // dedicated label layer rather than routing straight through the chip.
+  if (edgeLabels?.enabled !== false) {
+    const placement = edgeLabels?.placement ?? 'CENTER';
+    compoundLayoutOptions['elk.edgeLabels.inline'] = 'true';
+    compoundLayoutOptions['elk.edgeLabels.inlinePlacement'] = placement;
+    compoundLayoutOptions['elk.layered.edgeLabels.centerLabelPlacementStrategy'] = 'CENTER_LAYER';
+  }
 
   const plan = planCompoundGroups(groupDefs, elkById.keys(), keepSingletonGroups);
   const skippedGroups = new Set(plan.skipped);
@@ -947,10 +1022,14 @@ export async function computeElkLayout(
             lx += sourceOffset.x + (targetOffset.x - sourceOffset.x) * t;
             ly += sourceOffset.y + (targetOffset.y - sourceOffset.y) * t;
           }
-          // Snap onto the polyline stroke. ELK's label box can sit slightly
-          // off the route (side selection / reserved label space); we keep
-          // its along-edge placement but center on the actual path.
-          const onPath = closestPointOnPath(allPoints, { x: lx, y: ly });
+          // Place the chip by arc length, using ELK's label position only as a
+          // hint for *how far along* the route it belongs. Snapping to the
+          // nearest point (the old behaviour) jumped to whichever segment was
+          // nearest the target, which put fanned-out orthogonal labels on a
+          // corner near the source instead of the middle of the line.
+          const hint = closestPointOnPath(allPoints, { x: lx, y: ly });
+          const hintFraction = fractionAlongPath(allPoints, hint);
+          const onPath = pointAlongPath(allPoints, hintFraction);
           edgeLabelPositions.set(edge.id, onPath);
         }