@cardenelabs/cdl 0.5.0

package/src/kinds/storage.tsx

@@ -0,0 +1,180 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+import { titlePlacement } from "./compact-title";
+import {
+  ROW_PITCH_STORAGE,
+  ROW_TOP_STORAGE,
+  STORAGE_ROW_DIVIDER_Y,
+  STORAGE_TITLE_BASELINE,
+  rowBaselineY,
+  rowGlyphDepth,
+} from "../layout/spec";
+import {
+  ROW_PAD_X_PX,
+  STORAGE_CHAR_ADVANCE_PX,
+  STORAGE_COL_GAP_PX,
+  displayWidth,
+  splitRow,
+} from "./row-align";
+
+export function StorageNode({
+  node,
+  active,
+  rows,
+  highlightRows,
+}: {
+  node: LaidNode;
+  active: boolean;
+  rows: string[];
+  highlightRows: boolean;
+}): JSX.Element {
+  const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
+  const 名前 = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: 22 }, { hasEyebrow: Boolean(node.eyebrow) });
+  // 全 row を delimiter (`:` / ` = ` / ` → ` / ` -> `) で left / right に分割し、
+  // left 列 max 文字数を算出 → 右列の固定 x 位置を決める (DB table / UML class box 風)。
+  // 結果として全 row の右列開始 x が揃い、 区切り線がガタつかなくなる。
+  const splits = rows.map((r) => splitRow(r));
+  const leftMaxWidth = splits.reduce((m, s) => Math.max(m, displayWidth(s.left)), 0);
+  // 列の X は実測の送り幅で決める。 近似 (`ROW_CHAR_WIDTH_PX`) は実測に届かず、 その差が
+  // 列の間の余白を食う = 縦線と文字が触れる
+  const rightColX = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX + STORAGE_COL_GAP_PX;
+  // 列に分かれているかは delimiter の有無で見る。 右列の中身で見ると、 値が空になった行しか
+  // 無い図で列が消える (`status: {signal}` が空を返す等)
+  const hasRightColumn = splits.some((s) => s.split);
+  // 列を左右に分ける縦線の X = 左列の右端と右列の左端の中間。
+  // どちらも実測の送り幅で出すので、 線の左右に `STORAGE_COL_GAP_PX / 2` (= 16) ずつ残る
+  const leftEndDrawn = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX;
+  const columnDividerX = (leftEndDrawn + rightColX) / 2;
+  // 箱の幅は行の長さから決まるとは限らない。 著者が `w` を書いた図、 絶対座標で置いた図、
+  // 実行時に幅を変える図では、 行に必要な幅より狭い箱になる。 その時は線が箱の外に出るので
+  // 引かない (中の文字が既に溢れており、 線を引いても読みやすくならない)
+  const columnDividerFits = columnDividerX <= node.w - ROW_PAD_X_PX;
+  // 縦線の下端 = 最終行の字形の下端。 箱の下端まで伸ばすと、 行が終わった後の余白に線だけが残る。
+  // 同時に箱より下へも出さない = 行数と箱の高さは独立に決まるため、 行が多い図や高さを明示した
+  // 図では最終行が箱の外に来る
+  const lastRowBottom = Math.min(
+    ROW_TOP_STORAGE + (rows.length - 1) * ROW_PITCH_STORAGE + (rowGlyphDepth("storage") ?? 0),
+    node.h - ROW_PAD_X_PX,
+  );
+  return (
+    <g transform={`translate(${x} ${y})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? accent : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {node.eyebrow && (
+        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={名前.x}
+        y={名前.y}
+        fontSize={名前.size}
+        fontWeight={700}
+        fill="var(--cdl-text, #1a1f2a)"
+        textAnchor={名前.anchor}
+        style={{ fontFamily: "'JetBrains Mono', monospace" }}
+      >
+        {node.title}
+      </text>
+      {/*
+        表の区切り線 2 本 (`#419`)。
+
+        横線 = 名前と列の間。 縦線 = 左列 (名前) と右列 (値) の間。 名前の下だけに線を引いても
+        値がどこから始まるかは読み取れないため、 2 本で 1 組にする。
+
+        位置 = 横線は名前と 1 行目の中間 (`STORAGE_ROW_DIVIDER_Y`)、 縦線は左列の右端と
+        右列の左端の中間。 どちらも隣り合う 2 つの中間に置く。
+
+        引かない場合 = 列が 0 件なら横線を引かない (下に何も無いのに線だけが残る)。
+        右列を持つ行が 1 つも無いなら縦線を引かない (分ける相手が居ない)。
+
+        色は `--cdl-row-divider` を独立して持つ。 枠線と同じ `--cdl-divider` を借りていたが、
+        consumer はあれを **枠線の色** として上書きする (`transparent` にして枠を消す等)
+        ため、 区切り線まで一緒に消える。 役割が違うので変数を分ける。
+
+        既定値は consumer が何も指定しない時に、 既定の箱の塗り (`--cdl-node-fill` の
+        `#ffffff`) に対して 4:1 前後の対比になる灰色。 変更前は `#d4d4d8` を 0.35 の
+        不透明度で描いており、 実測の対比は 1.08:1 で見えなかった。
+
+        `data-cdl-role` を付けるのは、 consumer が theme ごとに色を当てられるようにするため。
+        役割が無い要素には CSS が届かず、 変数を上書きする経路しか残らない。
+      */}
+      {rows.length > 0 && (
+        <line
+          data-cdl-role="node-row-divider"
+          x1={26}
+          y1={STORAGE_ROW_DIVIDER_Y}
+          x2={node.w - 26}
+          y2={STORAGE_ROW_DIVIDER_Y}
+          stroke="var(--cdl-row-divider, #7e848e)"
+          strokeWidth={1.25}
+        />
+      )}
+      {rows.length > 0 && hasRightColumn && columnDividerFits && (
+        <line
+          data-cdl-role="node-column-divider"
+          x1={columnDividerX}
+          y1={STORAGE_ROW_DIVIDER_Y}
+          x2={columnDividerX}
+          y2={lastRowBottom}
+          stroke="var(--cdl-row-divider, #7e848e)"
+          strokeWidth={1.25}
+        />
+      )}
+      {splits.map((s, idx) => {
+        // key (label) と value (valueRaw) の font-size を揃える (typography 均衡)。
+        // 旧実装は 17 / 30 と約 1.8 倍差があり ER demo や storage row で不均衡が目立った。
+        // 左列は固定 x=26、 右列は全 row 共通の rightColX (= 左列 max 幅 + gap) で揃える。
+        // 右列を「左 anchor」 で配置する点が重要 (旧実装は node.w-26 への右 anchor で、 row 毎の
+        // 値長差により視覚的に区切り線が不揃いに見える問題があった)。
+        return (
+          <g key={idx} transform={`translate(0 ${rowBaselineY("storage", idx)})`}>
+            {/*
+              左列も等幅で描く。 列の X は「文字数 × 1 文字の送り幅」 で決めており
+              (`STORAGE_CHAR_ADVANCE_PX`)、 その計算は等幅を前提にしている。 左列だけ字幅の違う
+              書体で描くと計算と実寸がずれ、 縦線が左列の字形を横切る (`name` で計算 56 /
+              実寸 69.6、 実測)。
+            */}
+            <text
+              data-cdl-role="node-row"
+              data-cdl-row-index={idx}
+              x={ROW_PAD_X_PX}
+              fontSize={26}
+              fontWeight={600}
+              fill="var(--cdl-text, #1a1f2a)"
+              style={{ fontFamily: "'JetBrains Mono', monospace" }}
+            >
+              {s.left}
+            </text>
+            <text
+              data-cdl-role="node-row"
+              data-cdl-row-index={idx}
+              x={rightColX}
+              fontSize={26}
+              fontWeight={highlightRows ? 700 : 600}
+              textAnchor="start"
+              fill={highlightRows ? accent : "var(--cdl-text, #1a1f2a)"}
+              style={{ fontFamily: "'JetBrains Mono', monospace" }}
+            >
+              {s.right}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}

package/src/kinds/text-width.ts

@@ -0,0 +1,73 @@
+/**
+ * 字の塊の横幅の見積り。
+ *
+ * **JSX を持たない module に置く**。 絵を描く側 (`shape-region.tsx`) と行を並べる側
+ * (`row-align.ts`) の両方が使うが、 前者から取ると React まで引き込まれる。 測定の検査で
+ * 読込みの時間が計測に乗り、 図の走査時間の予算 (100ms) を超えた (実測 = 226ms)。
+ */
+
+/**
+ * 字 1 つが字の大きさに対して占める横幅。
+ *
+ * **一律の係数では最悪幅を抑えられない**。 平均で置くと `W` の並びで 3 分の 2 しか見ないため、
+ * `W` を 20 個並べた名前が、 帯に入れたつもりで 86 はみ出した。 字を階級に分ける。
+ *
+ * 値は呼び出し側 (dragon) のブラウザで `canvas` の `measureText` を 100px で当てて測った実測。
+ * 書体は `"Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif` (dragon の
+ * `cdl-theme.css` が `--d-body` を `!important` で当てるため、 cdl 側の指定に関わらずこうなる)。
+ *
+ * | 階級 | 字 | 係数 | その階級の実測最大 |
+ * |---|---|---|---|
+ * | 細い | `i` `j` `l` `I` `.` `,` `:` `;` `'` `!` と空白 | 0.37 | 0.343 (`;`) |
+ * | 広い | `W` `@` `%` `M` `m` | 1.04 | 1.038 (`W`) |
+ * | その他の ASCII | | 0.86 | 0.850 (`w`) |
+ * | ASCII の外 | **分類しない** | 1.04 | 1.000 (和文) |
+ *
+ * **各階級の実測最大を丸め上げる**。 見積りが実物より狭いと、 収めたつもりの名前が箱から出る =
+ * 狭い側に外すと直っていないのと同じ。 太字 (700) の値で取れば並 (400) も覆う (並の英数の最大は
+ * 0.985)。
+ *
+ * ## ASCII の外を分類しない理由
+ *
+ * 「どの字が全角か」 を持つと、 **抜けが過小見積りの向きに出る**。 符号位置の閾値で切れば
+ * Latin-1 と結合文字と私用領域が混ざり、 範囲で書けば端点に別の字が紛れ、 script や区画で書けば
+ * カタカナ拡張や CJK 互換が落ちる。 3 通り試して 3 通りとも別の抜け方をした。
+ *
+ * 分類をやめて **ASCII の外は一律で最大の係数 (1.04)** にすると、 抜けようがなくなる。 和文の
+ * 実測は 1.000 なので 4% 広く見積もるだけで済み、 半角カナ (約 0.5) や外字も安全側に倒れる。
+ * 代償は和文の名前が 4% 余分に縮むことだけ。
+ *
+ * ASCII の内側は分類を残す。 ここは `W` 1.038 と `;` 0.343 で 3 倍開いており、 最大に寄せると
+ * 普通の名前が 1.5 倍の見積りになって過剰に縮む。
+ *
+ * 等幅の書体なら全字 0.62 で足りるが、 `shape-` はどれも `font-family` を指定せず継承した
+ * 比例書体で描くため、 等幅の値は使わない。
+ */
+const WIDE_RATIO = 1.04;
+const NARROW_RATIO = 0.37;
+const ASCII_RATIO = 0.86;
+
+/** 広い字と細い字。 どちらも ASCII なので、 ASCII の外がここに一致することはない。 */
+const WIDE_CHARS = "W@%Mm";
+const NARROW_CHARS = "ijlI.,:;'! ";
+
+
+/**
+ * 字の塊の横幅の見積り。 jsdom も SVG も描く前に実寸を返さないので、 字数から出す。
+ *
+ * `字送り` (`letter-spacing`) は字ごとに加わるため字数を掛ける。 最後の 1 字ぶんは実装に
+ * よって付かないが、 広い側に外す方を採る。
+ */
+export function textWidth(s: string, size: number, 字送り = 0): number {
+  let 幅 = 0;
+  let 字数 = 0;
+  for (const c of s) {
+    if (NARROW_CHARS.includes(c)) 幅 += NARROW_RATIO;
+    else if (WIDE_CHARS.includes(c)) 幅 += WIDE_RATIO;
+    else if ((c.codePointAt(0) ?? 0) < 128) 幅 += ASCII_RATIO;
+    // ASCII の外は分類しない。 最大の係数で見積もれば必ず実物以上になる
+    else 幅 += WIDE_RATIO;
+    字数 += 1;
+  }
+  return 幅 * size + 字送り * 字数;
+}

package/src/kinds/tree.tsx

@@ -0,0 +1,275 @@
+import type { JSX } from "react";
+import type { LaidNode, TreeNodePayload } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
+ * 縦階層 hierarchical layout で SVG 描画する。
+ *
+ * デザイン方針 (batch3):
+ *   - depth 0 (root) は accent gradient rounded rect + top border pill
+ *   - depth 1+ は tone 別 accent の left-border + 白 fill card
+ *   - parent-child edge は elbow line + 中間 join dot で「分岐点」 を強調
+ */
+export function TreeNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const treeNodes = node.treeData ?? [];
+  const gradientId = `tree-root-grad-${node.id}`;
+
+  const PAD_TOP = 40;
+  const PAD_RIGHT = 24;
+  const PAD_BOTTOM = 40;
+  const PAD_LEFT = 24;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const layout = computeTreeLayout(treeNodes, canvasW, canvasH);
+  const depthColors = [TONE.accent, TONE.teal, TONE.success, TONE.warning, TONE.info];
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor={TONE.accent} />
+          <stop offset="100%" stopColor="var(--cdl-tone-accent-deep, #1f4d6e)" />
+        </linearGradient>
+      </defs>
+
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+
+      {/*
+        edge は node と同じ座標系で描く。 node 側は `translate(PAD_LEFT + …, PAD_TOP + …)` を
+        個別に掛けているため、 edge にも同じ padding を足さないと線が node から (-24, -40) ずれる。
+      */}
+      {layout.edges.map((e, i) => {
+        const x1 = PAD_LEFT + e.x1;
+        const y1 = PAD_TOP + e.y1;
+        const x2 = PAD_LEFT + e.x2;
+        const y2 = PAD_TOP + e.y2;
+        const midY = (y1 + y2) / 2;
+        const path = `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+        return (
+          <g key={`edge-${i}`}>
+            <path
+              data-cdl-role="tree-edge"
+              d={path}
+              fill="none"
+              stroke={TONE.accent}
+              strokeOpacity={0.55}
+              strokeWidth={1.5}
+              strokeLinejoin="round"
+            />
+            <circle cx={x1} cy={midY} r={2.5} fill={TONE.accent} fillOpacity={0.75} />
+          </g>
+        );
+      })}
+
+      {layout.nodes.map((n) => {
+        const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0]!;
+        const isRoot = n.depth === 0;
+        return (
+          <g key={`n-${n.id}`} transform={`translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`}>
+            {isRoot ? (
+              <>
+                <rect
+                  data-cdl-role="tree-node"
+                  x={0}
+                  y={0}
+                  width={n.w}
+                  height={n.h}
+                  rx={12}
+                  fill={`url(#${gradientId})`}
+                />
+                <text
+                  x={n.w / 2}
+                  y={n.h / 2 + 5}
+                  fontSize={13}
+                  fontWeight={700}
+                  textAnchor="middle"
+                  fill="var(--cdl-text-on-tone, #ffffff)"
+                >
+                  {n.title}
+                </text>
+              </>
+            ) : (
+              <>
+                <rect
+                  data-cdl-role="tree-node"
+                  x={0}
+                  y={0}
+                  width={n.w}
+                  height={n.h}
+                  rx={9}
+                  fill="var(--cdl-chip-fill, #f4f6fb)"
+                  stroke={accent}
+                  strokeWidth={1.5}
+                />
+                <rect x={0} y={0} width={4} height={n.h} rx={2} fill={accent} />
+                <text
+                  x={n.w / 2 + 2}
+                  y={n.h / 2 + 4}
+                  fontSize={12}
+                  fontWeight={600}
+                  textAnchor="middle"
+                  fill="var(--cdl-chip-text, #1a1f2a)"
+                >
+                  {n.title}
+                </text>
+              </>
+            )}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+type LayoutNode = {
+  id: string;
+  title: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  depth: number;
+};
+
+export function computeTreeLayout(
+  treeNodes: TreeNodePayload[],
+  canvasW: number,
+  canvasH: number,
+): {
+  nodes: LayoutNode[];
+  edges: Array<{ x1: number; y1: number; x2: number; y2: number }>;
+} {
+  // parent が実在しない node は root 扱いにする。 そうしないと root からの再帰で辿れず、
+  // node が silent に消える (旧実装は全 node を列挙していたので消えなかった)。
+  const ids = new Set(treeNodes.map((n) => n.id));
+  const childrenOf = new Map<string, TreeNodePayload[]>();
+  for (const n of treeNodes) {
+    const p = n.parent && ids.has(n.parent) ? n.parent : "__root__";
+    if (!childrenOf.has(p)) childrenOf.set(p, []);
+    childrenOf.get(p)!.push(n);
+  }
+
+  // root から辿れる node を集める (循環参照でも無限ループしないよう visited で打ち切る)。
+  const reachable = new Set<string>();
+  const walk = (id: string): void => {
+    if (reachable.has(id)) return;
+    reachable.add(id);
+    for (const c of childrenOf.get(id) ?? []) walk(c.id);
+  };
+  for (const r of childrenOf.get("__root__") ?? []) walk(r.id);
+
+  // 循環参照で root から辿れない node は、 宣言順で最初に現れたものを root 扱いにして拾う。
+  // これで循環に含まれる node も silent に消えない。
+  const roots = [...(childrenOf.get("__root__") ?? [])];
+  for (const n of treeNodes) {
+    if (!reachable.has(n.id)) {
+      roots.push(n);
+      walk(n.id);
+    }
+  }
+
+  // 以下 3 つの再帰は childrenOf を辿るため、 循環参照があると無限ループする。
+  // seen で既訪 node を打ち切り、 循環辺の先を子として展開しない (leaf 扱い)。
+  const depthBelow = (id: string, seen: Set<string>): number => {
+    if (seen.has(id)) return 0;
+    seen.add(id);
+    const kids = childrenOf.get(id) ?? [];
+    if (kids.length === 0) return 0;
+    return 1 + Math.max(...kids.map((k) => depthBelow(k.id, seen)));
+  };
+  const maxDepth = roots.length === 0 ? 0 : Math.max(...roots.map((r) => depthBelow(r.id, new Set())));
+
+  // 葉の数で横幅を配分する。 親は自分の子の中央に置く。
+  // 深さごとに canvas 全幅へ均等配置すると、 親と無関係な位置に子が並んで系統が読めない。
+  const leafCount = (id: string, seen: Set<string>): number => {
+    if (seen.has(id)) return 1;
+    seen.add(id);
+    const kids = childrenOf.get(id) ?? [];
+    if (kids.length === 0) return 1;
+    return kids.reduce((sum, k) => sum + leafCount(k.id, seen), 0);
+  };
+  const totalLeaves = Math.max(roots.reduce((sum, r) => sum + leafCount(r.id, new Set()), 0), 1);
+
+  const depthGap = canvasH / Math.max(maxDepth + 1, 1);
+  const slotW = canvasW / totalLeaves;
+  // box は必ず slot の一定割合に収める。 加算的な floor (min 12 / min 8 等) を置くと、 深い / 多い
+  // 入力で floor が slot を超えて隣と重なる。 slot の割合にすれば規模によらず必ず gap が残る。
+  // 深い / 多い入力では box が小さくなるが、 位置のはみ出しは末尾の最終スケールが捌く。
+  const nodeH = Math.min(38, depthGap * 0.7);
+  const nodeW = Math.min(140, slotW * 0.85);
+
+  const posOf = new Map<string, { x: number; y: number }>();
+  const nodes: LayoutNode[] = [];
+  const placed = new Set<string>();
+  let leafCursor = 0;
+
+  const place = (n: TreeNodePayload, depth: number): number => {
+    placed.add(n.id);
+    // 循環辺で既配置の node に戻る子は展開しない (無限ループ防止 + 二重描画防止)。
+    const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
+    let x: number;
+    if (kids.length === 0) {
+      x = leafCursor * slotW + slotW / 2;
+      leafCursor += 1;
+    } else {
+      const xs = kids.map((k) => place(k, depth + 1));
+      x = (xs[0]! + xs[xs.length - 1]!) / 2;
+    }
+    const y = depth * depthGap + depthGap / 2;
+    posOf.set(n.id, { x, y });
+    nodes.push({ id: n.id, title: n.title, x, y, w: nodeW, h: nodeH, depth });
+    return x;
+  };
+  for (const r of roots) if (!placed.has(r.id)) place(r, 0);
+
+  // 全 node を canvas rect [0, canvasW] × [0, canvasH] に収める最終スケール (Issue #219)。
+  // box に最小サイズ floor があるため、 深い / 多い入力で位置の累積が canvas を数 px 超える。
+  // floor を下げ続けても次の規模で再発するので、 最後に中心へ向けて uniform scale して必ず収める。
+  // uniform scale は相対 gap を保つので非重なりは崩れない。 通常入力は収まりスケール 1。
+  const boxCx = canvasW / 2;
+  const boxCy = canvasH / 2;
+  let extentX = 0;
+  let extentY = 0;
+  for (const n of nodes) {
+    extentX = Math.max(extentX, Math.abs(n.x - boxCx) + n.w / 2);
+    extentY = Math.max(extentY, Math.abs(n.y - boxCy) + n.h / 2);
+  }
+  const scale = Math.min(1, extentX > 0 ? boxCx / extentX : 1, extentY > 0 ? boxCy / extentY : 1);
+  if (scale < 1) {
+    for (const n of nodes) {
+      n.x = boxCx + (n.x - boxCx) * scale;
+      n.y = boxCy + (n.y - boxCy) * scale;
+      n.w *= scale;
+      n.h *= scale;
+      posOf.set(n.id, { x: n.x, y: n.y });
+    }
+  }
+  const hById = new Map(nodes.map((n) => [n.id, n.h]));
+
+  const edges: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
+  for (const n of treeNodes) {
+    if (!n.parent) continue;
+    const parent = posOf.get(n.parent);
+    const child = posOf.get(n.id);
+    if (!parent || !child) continue;
+    const parentH = hById.get(n.parent) ?? nodeH;
+    const childH = hById.get(n.id) ?? nodeH;
+    edges.push({ x1: parent.x, y1: parent.y + parentH / 2, x2: child.x, y2: child.y - childH / 2 });
+  }
+
+  return { nodes, edges };
+}