@cardenelabs/cdl 0.52.0 → 0.54.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C0PJ2weJ.cjs';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C0PJ2weJ.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Cp41meYv.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-Cp41meYv.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -2932,7 +2932,7 @@ declare function flow(preset: FlowPreset): FlowBuilder;
  * | `return` | 破線 | 開いた矢 | 呼ばれた側から戻る。 新しい仕事ではないので線を切る |
  * | `fire` | 実線 | 開いた矢 | 返事を待たない。 実線だが矢を閉じないことで待たないと示す |
  *
- * 印の形はクラス図の「継ぐ」 と「結ぶ」 で使った形そのもの。 **意味は違う** (あちらは親を
+ * 印の形はクラス図の「継承」 と「関連」 で使った形そのもの。 **意味は違う** (あちらは親を
  * 指す / こちらは返事を待つか) が、形の並びは共有できる。
  */
 type SequenceMessageKind = "call" | "return" | "fire";
@@ -3369,12 +3369,12 @@ type ClassRelationType = "extends" | "implements" | "uses" | "aggregates" | "com
  *
  * | 種類 | 線 | 形 | 塗り | 側 | 意味 |
  * |---|---|---|---|---|---|
- * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継ぐ |
- * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 満たす |
- * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 持つ |
- * | `composes` | 実線 | 菱 | 塗る | 出どころ | 抱える |
- * | `associates` | 実線 | 開いた矢 | — | 行き先 | 結ぶ |
- * | `uses` | 破線 | 開いた矢 | — | 行き先 | 使う |
+ * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継承 |
+ * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 実装 |
+ * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 集約 |
+ * | `composes` | 実線 | 菱 | 塗る | 出どころ | コンポジション |
+ * | `associates` | 実線 | 開いた矢 | — | 行き先 | 関連 |
+ * | `uses` | 破線 | 開いた矢 | — | 行き先 | 依存 |
  *
  * **側が種で割れるのが要点**。 三角は「この先が親」 を指すので行き先に立ち、菱は
  * 「この箱が持っている」 を指すので出どころに立つ。 1 つの決まりで書こうとするとどちらかが
@@ -3895,7 +3895,7 @@ declare function stateMachine2(preset: StateMachine2Preset): StateMachine2Builde
  * 問いにその場で答えられる。
  *
  * 集合は 3 つで作る = 触れた箱 / その箱に繋がる線 / 線の相手の箱。
- * **線の向きは問わない** = クラス図の「継ぐ」 は子から親へ、 ER の「持つ」 は親から子へ向くが、
+ * **線の向きは問わない** = クラス図の「継承」 は子から親へ、 ER の「注文する」 は利用者から注文へ向くが、
  * 読み手にとってはどちらも「この箱の関係」 で、向きで見え方が変わる理由が無い。
  */
 /** 集合を作るのに要る線の情報だけを取る */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C0PJ2weJ.js';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C0PJ2weJ.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Cp41meYv.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-Cp41meYv.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -2932,7 +2932,7 @@ declare function flow(preset: FlowPreset): FlowBuilder;
  * | `return` | 破線 | 開いた矢 | 呼ばれた側から戻る。 新しい仕事ではないので線を切る |
  * | `fire` | 実線 | 開いた矢 | 返事を待たない。 実線だが矢を閉じないことで待たないと示す |
  *
- * 印の形はクラス図の「継ぐ」 と「結ぶ」 で使った形そのもの。 **意味は違う** (あちらは親を
+ * 印の形はクラス図の「継承」 と「関連」 で使った形そのもの。 **意味は違う** (あちらは親を
  * 指す / こちらは返事を待つか) が、形の並びは共有できる。
  */
 type SequenceMessageKind = "call" | "return" | "fire";
@@ -3369,12 +3369,12 @@ type ClassRelationType = "extends" | "implements" | "uses" | "aggregates" | "com
  *
  * | 種類 | 線 | 形 | 塗り | 側 | 意味 |
  * |---|---|---|---|---|---|
- * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継ぐ |
- * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 満たす |
- * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 持つ |
- * | `composes` | 実線 | 菱 | 塗る | 出どころ | 抱える |
- * | `associates` | 実線 | 開いた矢 | — | 行き先 | 結ぶ |
- * | `uses` | 破線 | 開いた矢 | — | 行き先 | 使う |
+ * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継承 |
+ * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 実装 |
+ * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 集約 |
+ * | `composes` | 実線 | 菱 | 塗る | 出どころ | コンポジション |
+ * | `associates` | 実線 | 開いた矢 | — | 行き先 | 関連 |
+ * | `uses` | 破線 | 開いた矢 | — | 行き先 | 依存 |
  *
  * **側が種で割れるのが要点**。 三角は「この先が親」 を指すので行き先に立ち、菱は
  * 「この箱が持っている」 を指すので出どころに立つ。 1 つの決まりで書こうとするとどちらかが
@@ -3895,7 +3895,7 @@ declare function stateMachine2(preset: StateMachine2Preset): StateMachine2Builde
  * 問いにその場で答えられる。
  *
  * 集合は 3 つで作る = 触れた箱 / その箱に繋がる線 / 線の相手の箱。
- * **線の向きは問わない** = クラス図の「継ぐ」 は子から親へ、 ER の「持つ」 は親から子へ向くが、
+ * **線の向きは問わない** = クラス図の「継承」 は子から親へ、 ER の「注文する」 は利用者から注文へ向くが、
  * 読み手にとってはどちらも「この箱の関係」 で、向きで見え方が変わる理由が無い。
  */
 /** 集合を作るのに要る線の情報だけを取る */

package/dist/index.js

@@ -20530,6 +20530,87 @@ function requiredRowsWidth(rows, kind) {
   return Math.ceil(kind === "storage" ? storage : generic);
 }
 
+// src/layout/head-label.ts
+var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
+var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
+var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
+var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
+var BASELINE_RATIO = 0.8;
+var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
+function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
+  const \u4E00\u3064\u5206 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 + \u7BB1\u306E\u9AD8\u3055;
+  const \u6570 = [edge.headLabel, edge.tailLabel].filter((t) => t?.trim()).length;
+  if (\u6570 === 0) return 0;
+  if (\u6570 === 1) return \u4E00\u3064\u5206;
+  return \u4E00\u3064\u5206 * 2 + \u4E21\u7AEF\u306E\u5B57\u306E\u9593;
+}
+function \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC) {
+  for (const p of \u5019\u88DC) {
+    if (!p) continue;
+    const dx = end.x - p.x;
+    const dy = end.y - p.y;
+    const len = Math.hypot(dx, dy);
+    if (len > 1e-6) return { end, ux: dx / len, uy: dy / len };
+  }
+  return null;
+}
+function \u7AEF\u3067\u306E\u5411\u304D(d, \u7AEF) {
+  const segs = extractPathSegments(d);
+  if (segs.length === 0) return null;
+  if (\u7AEF === "head") {
+    const last = segs[segs.length - 1];
+    const end2 = { x: last.x2, y: last.y2 };
+    const \u5019\u88DC2 = segs.slice().reverse().flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : void 0, { x: s.x1, y: s.y1 }]);
+    return \u5411\u304D\u3092\u53D6\u308B(end2, \u5019\u88DC2);
+  }
+  const first = segs[0];
+  const end = { x: first.x1, y: first.y1 };
+  const \u5019\u88DC = segs.flatMap((s) => [...s.ctrl ?? [], { x: s.x2, y: s.y2 }]);
+  return \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC);
+}
+function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
+  const text = (\u7AEF === "head" ? edge.headLabel : edge.tailLabel)?.trim();
+  if (!text) return null;
+  const \u5411\u304D = \u7AEF\u3067\u306E\u5411\u304D(edge.d, \u7AEF);
+  if (!\u5411\u304D) return null;
+  const { end, ux, uy } = \u5411\u304D;
+  const bx = end.x - ux * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
+  const by = end.y - uy * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
+  const w = measureTextWidth(text, {
+    fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
+    fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
+    fontFamily: "mono"
+  });
+  const h = \u7BB1\u306E\u9AD8\u3055;
+  const \u672D = hasRenderedLabel(edge) && edge.labelX !== void 0 && edge.labelY !== void 0 ? { x: edge.labelX, y: edge.labelY } : null;
+  let anchor;
+  let box;
+  if (Math.abs(ux) >= Math.abs(uy)) {
+    const \u53F3\u3078\u9032\u3080 = ux > 0;
+    const \u4E0A\u306B\u7F6E\u304F = \u672D !== null && \u672D.y > by;
+    anchor = \u53F3\u3078\u9032\u3080 ? "end" : "start";
+    box = {
+      x: \u53F3\u3078\u9032\u3080 ? bx - w : bx,
+      y: \u4E0A\u306B\u7F6E\u304F ? by - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - h : by + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593,
+      w,
+      h
+    };
+  } else {
+    const \u4E0B\u3078\u9032\u3080 = uy > 0;
+    const \u53F3\u306B\u7F6E\u304F = \u672D !== null && \u672D.x < bx;
+    anchor = \u53F3\u306B\u7F6E\u304F ? "start" : "end";
+    box = {
+      x: \u53F3\u306B\u7F6E\u304F ? bx + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 : bx - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - w,
+      y: \u4E0B\u3078\u9032\u3080 ? by - h : by,
+      w,
+      h
+    };
+  }
+  const x = anchor === "start" ? box.x : box.x + box.w;
+  const y = box.y + (h - \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055) / 2 + \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * BASELINE_RATIO;
+  return { x, y, anchor, box };
+}
+
 // src/layout/nodes.ts
 function autoStorageHeight(n, defaultH) {
   if (n.kind !== "storage") return n.h ?? defaultH;
@@ -20551,7 +20632,7 @@ function autoRowsWidth(n, defaultW) {
   const required = requiredRowsWidth(n.rows, n.kind);
   return Math.max(defaultW, required);
 }
-function \u7BB1\u306E\u9AD8\u3055(n, \u65E2\u5B9Ah) {
+function \u7BB1\u306E\u9AD8\u30552(n, \u65E2\u5B9Ah) {
   if (n.h != null) return n.h;
   if (n.kind === "storage") return autoStorageHeight(n, \u65E2\u5B9Ah);
   return \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(n.kind, \u65E2\u5B9Ah, {
@@ -20565,8 +20646,8 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
   const byId = new Map(diag.nodes.map((n) => [n.id, n]));
   const rankOf = new Map(allStacks.map((stack, i) => [stack, i]));
   const pillHsByGap = /* @__PURE__ */ new Map();
+  let \u7AEF\u306E\u5B57\u306E\u8981\u6C42 = 0;
   for (const e of diag.edges) {
-    if (!hasRenderedLabel(e)) continue;
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) continue;
@@ -20575,10 +20656,12 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
     const toRank = rankOf.get(to.stack);
     if (fromRank === void 0 || toRank === void 0) continue;
     if (Math.abs(fromRank - toRank) !== 1) continue;
+    \u7AEF\u306E\u5B57\u306E\u8981\u6C42 = Math.max(\u7AEF\u306E\u5B57\u306E\u8981\u6C42, \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(e));
+    if (!hasRenderedLabel(e)) continue;
     const key = `${from.lane}::${Math.min(fromRank, toRank)}`;
     pillHsByGap.set(key, [...pillHsByGap.get(key) ?? [], labelPillH(e.sub)]);
   }
-  let required = 0;
+  let required = \u7AEF\u306E\u5B57\u306E\u8981\u6C42;
   for (const pillHs of pillHsByGap.values()) {
     required = Math.max(required, requiredVerticalLabelGap(pillHs));
   }
@@ -20590,7 +20673,7 @@ function layoutNodes(diag, lanes) {
   const rowH = /* @__PURE__ */ new Map();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u3055(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u30552(n, NODE_SIZE[n.kind].h)));
     rowH.set(stack, h);
   }
   const rowCy = /* @__PURE__ */ new Map();
@@ -20644,7 +20727,7 @@ function layoutNodes(diag, lanes) {
     const \u6BB5\u306E\u82AF = rowCy.get(n.stack);
     const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
     const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
-    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u3055(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u30552(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
     const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
@@ -22933,79 +23016,6 @@ function \u7B49\u5E45\u306E\u5B57(text, fontSize) {
   });
   return out;
 }
-
-// src/layout/head-label.ts
-var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
-var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
-var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
-var \u7BB1\u306E\u9AD8\u30552 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
-var BASELINE_RATIO = 0.8;
-function \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC) {
-  for (const p of \u5019\u88DC) {
-    if (!p) continue;
-    const dx = end.x - p.x;
-    const dy = end.y - p.y;
-    const len = Math.hypot(dx, dy);
-    if (len > 1e-6) return { end, ux: dx / len, uy: dy / len };
-  }
-  return null;
-}
-function \u7AEF\u3067\u306E\u5411\u304D(d, \u7AEF) {
-  const segs = extractPathSegments(d);
-  if (segs.length === 0) return null;
-  if (\u7AEF === "head") {
-    const last = segs[segs.length - 1];
-    const end2 = { x: last.x2, y: last.y2 };
-    const \u5019\u88DC2 = segs.slice().reverse().flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : void 0, { x: s.x1, y: s.y1 }]);
-    return \u5411\u304D\u3092\u53D6\u308B(end2, \u5019\u88DC2);
-  }
-  const first = segs[0];
-  const end = { x: first.x1, y: first.y1 };
-  const \u5019\u88DC = segs.flatMap((s) => [...s.ctrl ?? [], { x: s.x2, y: s.y2 }]);
-  return \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC);
-}
-function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
-  const text = (\u7AEF === "head" ? edge.headLabel : edge.tailLabel)?.trim();
-  if (!text) return null;
-  const \u5411\u304D = \u7AEF\u3067\u306E\u5411\u304D(edge.d, \u7AEF);
-  if (!\u5411\u304D) return null;
-  const { end, ux, uy } = \u5411\u304D;
-  const bx = end.x - ux * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
-  const by = end.y - uy * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
-  const w = measureTextWidth(text, {
-    fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
-    fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
-    fontFamily: "mono"
-  });
-  const h = \u7BB1\u306E\u9AD8\u30552;
-  const \u672D = hasRenderedLabel(edge) && edge.labelX !== void 0 && edge.labelY !== void 0 ? { x: edge.labelX, y: edge.labelY } : null;
-  let anchor;
-  let box;
-  if (Math.abs(ux) >= Math.abs(uy)) {
-    const \u53F3\u3078\u9032\u3080 = ux > 0;
-    const \u4E0A\u306B\u7F6E\u304F = \u672D !== null && \u672D.y > by;
-    anchor = \u53F3\u3078\u9032\u3080 ? "end" : "start";
-    box = {
-      x: \u53F3\u3078\u9032\u3080 ? bx - w : bx,
-      y: \u4E0A\u306B\u7F6E\u304F ? by - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - h : by + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593,
-      w,
-      h
-    };
-  } else {
-    const \u4E0B\u3078\u9032\u3080 = uy > 0;
-    const \u53F3\u306B\u7F6E\u304F = \u672D !== null && \u672D.x < bx;
-    anchor = \u53F3\u306B\u7F6E\u304F ? "start" : "end";
-    box = {
-      x: \u53F3\u306B\u7F6E\u304F ? bx + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 : bx - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - w,
-      y: \u4E0B\u3078\u9032\u3080 ? by - h : by,
-      w,
-      h
-    };
-  }
-  const x = anchor === "start" ? box.x : box.x + box.w;
-  const y = box.y + (h - \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055) / 2 + \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * BASELINE_RATIO;
-  return { x, y, anchor, box };
-}
 function defaultEdgeWidth(active) {
   return active ? 2.5 : 1.25;
 }
@@ -32157,7 +32167,7 @@ function flow(preset) {
     build() {
       b.phase(
         "flow",
-        { duration: 2400, title: preset.topic, body: "\u5168 step \u9806\u6B21\u5B9F\u884C\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u3092\u4E0A\u304B\u3089\u9806\u306B\u901A\u3063\u305F\u6D41\u308C\u3002" },
         (p) => p.activate(...phaseActivate).badge("flow")
       );
       return b.build();
@@ -32215,7 +32225,7 @@ function sequence(preset) {
       });
       b.phase(
         "sequence",
-        { duration: 2400, title: preset.topic, body: "sequence \u306E\u5168 message \u3092\u6642\u7CFB\u5217\u5C55\u958B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u3084\u308A\u53D6\u308A\u3092\u6642\u9593\u306E\u9806\u306B\u4E26\u3079\u305F\u59FF\u3002" },
         (p) => p.activate(preset.id).badge("sequence")
       );
       return b.build();
@@ -32276,7 +32286,7 @@ function topology(preset) {
     build() {
       b.phase(
         "topo",
-        { duration: 2400, title: preset.topic, body: "topology \u306E\u5168 container + connection \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u69CB\u6210\u8981\u7D20\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("topology")
       );
       return b.build();
@@ -32364,7 +32374,7 @@ function er(preset) {
     build() {
       b.phase(
         "er",
-        { duration: 2400, title: preset.topic, body: "ER \u56F3\u306E\u5168 entity + relation \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u8868\u3068\u95A2\u4FC2\u3092\u4E26\u3079\u305F\u69CB\u9020\u3002" },
         (p) => p.activate(...phaseActivate).badge("er")
       );
       return b.build();
@@ -32482,7 +32492,7 @@ function stateMachine(preset) {
       });
       b.phase(
         "fsm",
-        { duration: 2400, title: preset.topic, body: "FSM \u306E\u5168 state + transition \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3092\u4E26\u3079\u305F\u59FF\u3002" },
         (p) => p.activate(...phaseActivate).badge("fsm")
       );
       return b.build();
@@ -32537,7 +32547,7 @@ function infrastructure(preset) {
     build() {
       b.phase(
         "infra",
-        { duration: 2400, title: preset.topic, body: "infrastructure \u5168 node + connection \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u69CB\u6210\u8981\u7D20\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("infrastructure")
       );
       return b.build();
@@ -32654,7 +32664,7 @@ function classDiagram(preset) {
       });
       b.phase(
         "class",
-        { duration: 2400, title: preset.topic, body: "UML class \u5168 class + relation \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u30AF\u30E9\u30B9\u3068\u95A2\u4FC2\u3092\u4E26\u3079\u305F\u69CB\u9020\u3002" },
         (p) => p.activate(...phaseActivate).badge("class")
       );
       return b.build();
@@ -32692,7 +32702,7 @@ function tree(preset) {
       });
       b.phase(
         "tree",
-        { duration: 2400, title: preset.topic, body: "tree \u306E\u5168 node + parent-child edge \u3092 hierarchical layout \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u9805\u76EE\u3092\u89AA\u5B50\u306E\u968E\u5C64\u3067\u4E26\u3079\u305F\u6728\u3002" },
         (p) => p.activate(nodeId).badge("tree")
       );
       return b.build();
@@ -32731,7 +32741,7 @@ function userJourney(preset) {
       });
       b.phase(
         "journey",
-        { duration: 2400, title: preset.topic, body: "userJourney \u5168 step \u3092\u611F\u60C5\u66F2\u7DDA + touchpoint \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u968E\u3092\u3001\u6C17\u6301\u3061\u306E\u66F2\u7DDA\u3068\u63A5\u70B9\u3067\u4E26\u3079\u305F\u4F53\u9A13\u3002" },
         (p) => p.activate(nodeId).badge("journey")
       );
       return b.build();
@@ -32775,7 +32785,7 @@ function mindMap(preset) {
       });
       b.phase(
         "mindmap",
-        { duration: 2400, title: preset.topic, body: "mindMap \u5168 branch \u3092 visible \u5316\u3001 \u4E2D\u5FC3 + \u653E\u5C04\u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u4E2D\u5FC3\u306E\u4E3B\u984C\u304B\u3089\u3001\u3059\u3079\u3066\u306E\u679D\u3092\u653E\u5C04\u72B6\u306B\u5E83\u3052\u305F\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("mindmap")
       );
       return b.build();
@@ -32813,7 +32823,7 @@ function funnel(preset) {
       });
       b.phase(
         "funnel",
-        { duration: 2400, title: preset.topic, body: "funnel \u5168 stage \u3092\u9006\u4E09\u89D2\u5F62 + count \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u968E\u3092\u3001\u4EBA\u6570\u3068\u3068\u3082\u306B\u4E0A\u304B\u3089\u7D5E\u308A\u8FBC\u3093\u3060\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("funnel")
       );
       return b.build();
@@ -32862,7 +32872,7 @@ function quadrant(preset) {
       });
       b.phase(
         "quadrant",
-        { duration: 2400, title: preset.topic, body: "quadrant \u5341\u5B57\u8EF8 + 4 \u8C61\u9650 + item \u3092\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "2 \u672C\u306E\u8EF8\u3067\u5206\u3051\u305F 4 \u3064\u306E\u67A0\u306B\u3001\u3059\u3079\u3066\u306E\u9805\u76EE\u3092\u7F6E\u3044\u305F\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("quadrant")
       );
       return b.build();
@@ -32913,7 +32923,7 @@ function chart(preset) {
       });
       b.phase(
         "chart",
-        { duration: 2400, title: preset.topic, body: `${preset.type} chart \u306E\u5168 datum \u3092 visible \u5316\u3002` },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u5024\u3092\u63CF\u3044\u305F\u30B0\u30E9\u30D5\u3002" },
         (p) => p.activate(nodeId).badge(preset.type)
       );
       return b.build();
@@ -32966,7 +32976,7 @@ function gantt(preset) {
       });
       b.phase(
         "gantt",
-        { duration: 2400, title: preset.topic, body: "gantt \u5168 task \u3092 visible \u5316\u3001 \u5E2F\u72B6 timeline + \u4F9D\u5B58 arrow \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u4F5C\u696D\u3092\u3001\u671F\u9593\u306E\u5E2F\u3068\u524D\u5F8C\u95A2\u4FC2\u306E\u77E2\u5370\u3067\u4E26\u3079\u305F\u5DE5\u7A0B\u3002" },
         (p) => p.activate(nodeId).badge("gantt")
       );
       return b.build();
@@ -32982,11 +32992,11 @@ var SHAPE_KIND = {
   loop: "card"
 };
 var SHAPE_EYEBROW = {
-  process: "process",
-  decision: "decision",
-  start: "start",
-  end: "end",
-  loop: "loop"
+  process: "\u51E6\u7406",
+  decision: "\u5224\u65AD",
+  start: "\u958B\u59CB",
+  end: "\u7D42\u4E86",
+  loop: "\u7E70\u308A\u8FD4\u3057"
 };
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
@@ -33034,7 +33044,7 @@ function flowchart(preset) {
     build() {
       b.phase(
         "flowchart",
-        { duration: 2400, title: preset.topic, body: "flowchart \u5168 node + edge \u3092 visible \u5316\u3001 swimlane + decision \u3092\u8868\u73FE\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u51E6\u7406\u3068\u5206\u5C90\u3092\u3001\u62C5\u5F53\u3054\u3068\u306E\u30EC\u30FC\u30F3\u306B\u4E26\u3079\u305F\u6D41\u308C\u3002" },
         (p) => p.activate(...phaseActivate).badge("flowchart")
       );
       return b.build();
@@ -33049,6 +33059,13 @@ var NET_KIND_MAP = {
   server: "backend",
   client: "actor"
 };
+var NET_KIND_LABEL = {
+  router: "\u30EB\u30FC\u30BF\u30FC",
+  switch: "\u30B9\u30A4\u30C3\u30C1",
+  firewall: "\u30D5\u30A1\u30A4\u30A2\u30A6\u30A9\u30FC\u30EB",
+  server: "\u30B5\u30FC\u30D0\u30FC",
+  client: "\u7AEF\u672B"
+};
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
@@ -33064,7 +33081,7 @@ function network(preset) {
         b.lane(laneId, { width: laneW });
         colLaneIds.set(d.col, laneId);
       }
-      const eyebrowParts = [d.kind];
+      const eyebrowParts = [NET_KIND_LABEL[d.kind]];
       if (d.segment) eyebrowParts.push(d.segment);
       b.node(d.id, {
         lane: laneId,
@@ -33090,7 +33107,7 @@ function network(preset) {
     build() {
       b.phase(
         "network",
-        { duration: 2400, title: preset.topic, body: "network \u5168 device + link \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6A5F\u5668\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("network")
       );
       return b.build();
@@ -33106,18 +33123,21 @@ function stateMachine2(preset) {
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;
+  const \u984C = /* @__PURE__ */ new Map();
+  const \u89AA = /* @__PURE__ */ new Map();
   const api = {
     state(s) {
       const laneId = `lane-${s.id}`;
       b.lane(laneId, { width: laneW });
+      \u984C.set(s.id, s.title);
+      if (s.parent) \u89AA.set(s.id, s.parent);
       const eyebrowParts = [];
       if (s.initial) eyebrowParts.push("\u521D\u671F");
       else if (s.final) eyebrowParts.push("\u6700\u7D42");
       else eyebrowParts.push("\u72B6\u614B");
-      if (s.parent) eyebrowParts.push(`nested in ${s.parent}`);
       const subtitleParts = [];
-      if (s.entry) subtitleParts.push(`entry: ${s.entry}`);
-      if (s.exit) subtitleParts.push(`exit: ${s.exit}`);
+      if (s.entry) subtitleParts.push(`\u5165\u308B\u6642: ${s.entry}`);
+      if (s.exit) subtitleParts.push(`\u51FA\u308B\u6642: ${s.exit}`);
       b.node(s.id, {
         lane: laneId,
         stack: 0,
@@ -33150,10 +33170,23 @@ function stateMachine2(preset) {
     build() {
       b.phase(
         "sm2",
-        { duration: 2400, title: preset.topic, body: "\u62E1\u5F35 FSM (nested + action) \u3092 visible \u5316\u3002" },
+        {
+          duration: 2400,
+          title: preset.topic,
+          body: "\u5165\u308C\u5B50\u306E\u72B6\u614B\u3068\u3001\u5165\u308B\u6642\u30FB\u51FA\u308B\u6642\u306E\u51E6\u7406\u3092\u542B\u3081\u305F\u3001\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3002"
+        },
         (p) => p.activate(...phaseActivate).badge("statemachine2")
       );
-      return b.build();
+      const d = b.build();
+      return {
+        ...d,
+        nodes: d.nodes.map((n) => {
+          const \u89AA\u306E\u8B58\u5225\u5B50 = \u89AA.get(n.id);
+          if (\u89AA\u306E\u8B58\u5225\u5B50 === void 0) return n;
+          const \u89AA\u306E\u984C = \u984C.get(\u89AA\u306E\u8B58\u5225\u5B50) ?? \u89AA\u306E\u8B58\u5225\u5B50;
+          return { ...n, eyebrow: `${n.eyebrow ?? "\u72B6\u614B"} / ${\u89AA\u306E\u984C}\u306E\u4E2D` };
+        })
+      };
     }
   };
   return api;