@cardenelabs/cdl 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -5,6 +5,48 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.20.0] - 2026-08-29
+
+### Changed
+
+- **箱の高さを書いた段の数から決めるようにした** (#589)
+
+  高さが中身に依らず種別ごとの固定値で、小見出し + 名前 + 説明の 3 段が入る前提だった。
+  名前 1 語だけの箱も 3 段ぶんの高さになり、実測で `function` は 151 に対し字が 29 しか
+  無かった。
+
+  空きは上下の両方に出ていた。 小見出しを書かないと、そのために空けた帯が上に残る。
+  説明を書かないと、説明の段が下に残る。
+
+  2 つを組み合わせて直した。 小見出しが無い時は字の塊を上へ繰り上げ、高さは最後の段の
+  下端から出す。 繰り上げ量は `layout/spec.ts` が持ち、描き手と layout が同じ値を引く。
+
+  **3 段を書いた箱の高さは変わらない**。 書かなかった段のぶんだけ引く形なので、既存の図で
+  3 段そろっているものは 1 も動かない。
+
+  実測 (名前だけの箱)。 `actor` 165 → 73、`function` 151 → 67、`event` 156 → 72、
+  `card` 150 → 68、`storage` 115 → 79、`service` 等 21 種別 116 → 54。
+
+  4 つの書き方 (名前だけ / 小見出し + 名前 / 名前 + 説明 / 3 段) × 9 種別の 36 通りで、
+  上と下の余白の差は最大 5 に収まる。
+
+  行を持つ箱と、値を持つ箱と、字を中央へ寄せる 2 種別 (`cloud` / `decision`) は対象外。
+  行は上端から数えて置かれ、値は下端から置かれるので、繰り上げると重なる。
+
+### Fixed
+
+- **形の違う線が混ざる扇でも、同じ形どうしは説明を離すようにした** (#589)
+
+  扇状に広がる線の説明を横へ逃がす処理が、線の形 (迂回するかどうか) が混ざる群では
+  **丸ごと止まって** いた。 その結果、同じ形どうしの重なりまで残っていた。
+
+  形ごとに分けてから逃がす。 実測 = 4 段の網の図で、迂回する 2 本の説明が 25 しか離れず
+  `clearance` が error を出していた (要る間隔は 36)。
+
+  逃がす時の間隔も、検査が要求する値 (`CLEARANCE_LABEL_LABEL` = 36) そのものにした。
+  20 を独自に持っていた間、逃がした結果が要求に届かず 32 で止まっていた = 掃く側と見る側で
+  別の値を持つと、掃いても落ちる。
+
 ## [0.19.0] - 2026-08-29
 
 ### Changed
@@ -984,7 +1026,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.19.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.20.0...HEAD
+[0.20.0]: https://github.com/cardene777/cdl/compare/v0.19.0...v0.20.0
 [0.19.0]: https://github.com/cardene777/cdl/compare/v0.18.1...v0.19.0
 [0.18.1]: https://github.com/cardene777/cdl/compare/v0.18.0...v0.18.1
 [0.18.0]: https://github.com/cardene777/cdl/compare/v0.17.1...v0.18.0

package/dist/index.cjs

@@ -11978,6 +11978,54 @@ function buildDiagramAltText(topic, phase) {
   else if (body) parts.push(body);
   return parts.join(" ");
 }
+var \u6BB5\u306E\u4F4D\u7F6E = {
+  actor: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 32 }, \u8AAC\u660E: { y: 140, size: 20 } },
+  function: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 24 }, \u8AAC\u660E: { y: 126, size: 20 } },
+  event: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 88, size: 26 }, \u8AAC\u660E: { y: 128, size: 21 } },
+  card: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 24 }, \u8AAC\u660E: { y: 124, size: 21 } },
+  storage: {
+    \u76EE\u5370: { y: 38, size: 18 },
+    \u540D\u524D: { y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT },
+    \u8AAC\u660E: { y: 118, size: 20 }
+  }
+};
+var \u6C4E\u7528\u306E\u6BB5 = {
+  \u76EE\u5370: { y: 32, size: 17 },
+  \u540D\u524D: { y: GENERIC_TITLE_TOP, size: GENERIC_TITLE_FONT },
+  \u8AAC\u660E: { y: 96, size: 17 }
+};
+function \u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows) {
+  if (hasRows) return false;
+  if (kind === void 0) return false;
+  if (genericTextCentered(kind, false)) return false;
+  return kind in \u6BB5\u306E\u4F4D\u7F6E || rendersRows(kind);
+}
+function \u6BB5\u3092\u5F15\u304F(kind) {
+  const \u56FA\u6709 = \u6BB5\u306E\u4F4D\u7F6E[kind];
+  if (\u56FA\u6709) return \u56FA\u6709;
+  if (rendersRows(kind)) return \u6C4E\u7528\u306E\u6BB5;
+  return null;
+}
+function \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(kind, hasRows = false) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows)) return 0;
+  const \u6BB5 = \u6BB5\u3092\u5F15\u304F(kind);
+  if (!\u6BB5) return 0;
+  const \u4E0A\u3052\u308B = \u6BB5.\u540D\u524D.y - \u6BB5.\u76EE\u5370.y + (\u6BB5.\u76EE\u5370.size - \u6BB5.\u540D\u524D.size) * GLYPH_CAP_RATIO;
+  return Math.max(0, Math.round(\u4E0A\u3052\u308B));
+}
+function \u8AAC\u660E\u306A\u3057\u3067\u7E2E\u3080\u91CF(kind, hasRows = false) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows)) return 0;
+  const \u6BB5 = \u6BB5\u3092\u5F15\u304F(kind);
+  if (!\u6BB5) return 0;
+  return Math.max(0, \u6BB5.\u8AAC\u660E.y - \u6BB5.\u540D\u524D.y);
+}
+function \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(kind, \u6E80\u8F09h, \u4E2D\u8EAB) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, \u4E2D\u8EAB.hasRows)) return \u6E80\u8F09h;
+  if (\u4E2D\u8EAB.hasValue) return \u6E80\u8F09h;
+  const \u5F15\u304F = (\u4E2D\u8EAB.hasEyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(kind)) + (\u4E2D\u8EAB.hasSubtitle ? 0 : \u8AAC\u660E\u306A\u3057\u3067\u7E2E\u3080\u91CF(kind));
+  return Math.max(MIN_BOX_H, \u6E80\u8F09h - \u5F15\u304F);
+}
+var MIN_BOX_H = 44;
 
 // src/layout/footer-shape.ts
 var SHAPE_DRAW_UP_EXTENT = {
@@ -13605,7 +13653,7 @@ function layoutEdges(diag, nodes, lanes = []) {
     for (const p of list) parallelGroupedIds.add(p.e.id);
   }
   const distributedInParallel = /* @__PURE__ */ new Set();
-  const FAN_LABEL_GAP = 20;
+  const FAN_LABEL_GAP = CLEARANCE_LABEL_LABEL;
   const computeEffectiveSides = (p) => {
     if (p.e.routing === "back-detour") {
       return { effFromSide: "top", effToSide: "top" };
@@ -13995,7 +14043,17 @@ function layoutEdges(diag, nodes, lanes = []) {
   const applyFanDispersion = (list, tracked) => {
     if (list.length < 2) return;
     const obstaclePatterns = new Set(list.map((r) => detectsBlockingObstacle(r.p)));
-    if (obstaclePatterns.size > 1) return;
+    if (obstaclePatterns.size > 1) {
+      const \u5F62\u3054\u3068 = /* @__PURE__ */ new Map();
+      for (const r of list) {
+        const \u5F62 = detectsBlockingObstacle(r.p);
+        \u5F62\u3054\u3068.set(\u5F62, [...\u5F62\u3054\u3068.get(\u5F62) ?? [], r]);
+      }
+      for (const \u540C\u3058\u5F62 of \u5F62\u3054\u3068.values()) {
+        if (\u540C\u3058\u5F62.length < list.length) applyFanDispersion(\u540C\u3058\u5F62, tracked);
+      }
+      return;
+    }
     if (list.some((r) => r.e.overlay)) return;
     const items = list.map((r) => ({
       r,
@@ -15088,7 +15146,8 @@ function autoStorageHeight(n, defaultH) {
   if (n.h != null) return n.h;
   const \u5370\u3042\u308A = n.rowMarks !== void 0;
   const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
-  if (!n.rows || n.rows.length === 0) return 115 + \u547C\u3073\u540D\u306E\u5206;
+  const \u7E70\u308A\u4E0A\u3052 = n.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("storage");
+  if (!n.rows || n.rows.length === 0) return 115 + \u547C\u3073\u540D\u306E\u5206 - \u7E70\u308A\u4E0A\u3052;
   const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
   if (\u5370\u3042\u308A) return \u5FC5\u8981 + \u547C\u3073\u540D\u306E\u5206;
   return Math.max(defaultH, \u5FC5\u8981);
@@ -15099,6 +15158,16 @@ function autoRowsWidth(n, defaultW) {
   const required = requiredRowsWidth(n.rows, n.kind);
   return Math.max(defaultW, required);
 }
+function \u7BB1\u306E\u9AD8\u3055(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, {
+    hasEyebrow: Boolean(n.eyebrow),
+    hasSubtitle: Boolean(n.subtitle),
+    hasValue: Boolean(n.value),
+    hasRows: (n.rows?.length ?? 0) > 0
+  });
+}
 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]));
@@ -15128,7 +15197,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) => autoStorageHeight(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u3055(n, NODE_SIZE[n.kind].h)));
     rowH.set(stack, h);
   }
   const rowCy = /* @__PURE__ */ new Map();
@@ -15181,8 +15250,8 @@ function layoutNodes(diag, lanes) {
     const cx = lane.x + lane.width / 2;
     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 ? autoStorageHeight(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0 || \u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(n.kind, (n.rows?.length ?? 0) > 0);
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u3055(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
     const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
@@ -16623,10 +16692,10 @@ function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
   if (typeof \u533A\u5207\u308A !== "function") return [...text];
   return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
 }
-function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u3055) {
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30552) {
   const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
   if (\u5019\u88DC.length === 0) return [];
-  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u3055 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30552 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
   const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
   const \u6B8B\u3059 = [...\u5019\u88DC];
   while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
@@ -16845,7 +16914,7 @@ function \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(\u70B9, \u5236\u5FA1\u
 function \u7BB1\u306E\u6587\u5B57({
   \u884C,
   x,
-  \u7BB1\u306E\u9AD8\u3055,
+  \u7BB1\u306E\u9AD8\u3055: \u7BB1\u306E\u9AD8\u30552,
   fill,
   \u540D\u524D\u306E\u592A\u3055
 }) {
@@ -16854,7 +16923,7 @@ function \u7BB1\u306E\u6587\u5B57({
     {
       "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "tree-node-subtitle" : void 0,
       x,
-      y: \u7BB1\u306E\u9AD8\u3055 / 2 + r.dy,
+      y: \u7BB1\u306E\u9AD8\u30552 / 2 + r.dy,
       fontSize: r.fontSize,
       fontWeight: r.\u5F79\u5272 === "title" ? \u540D\u524D\u306E\u592A\u3055 : 500,
       textAnchor: "middle",
@@ -21533,7 +21602,8 @@ function ActorNode({ node, active, value }) {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("actor");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -21568,13 +21638,13 @@ function ActorNode({ node, active, value }) {
       {
         "data-cdl-role": "node-row-divider",
         x1: 26,
-        y1: 110,
+        y1: 110 - \u7E70\u308A\u4E0A\u3052,
         x2: node.w - 26,
-        y2: 110,
+        y2: 110 - \u7E70\u308A\u4E0A\u3052,
         stroke: "var(--cdl-row-divider, #7e848e)"
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 140, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 140 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     value && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -21599,7 +21669,8 @@ function CardNode({ node, active }) {
   }
   const compact = isCompactBox(node.h);
   const \u5C0F\u578B\u306B\u547C\u3073\u540D = compact && Boolean(node.subtitle);
-  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86;
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("card");
+  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86 - \u7E70\u308A\u4E0A\u3052;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -21636,7 +21707,7 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124 - \u7E70\u308A\u4E0A\u3052, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -21900,7 +21971,8 @@ function EventNode({
   const accent = nodeAccent(node, "var(--cdl-tone-success, #4ea36a)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("event");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88 - \u7E70\u308A\u4E0A\u3052, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
   const scale = active ? 0.78 + 0.22 * progress : 0.92;
   const opacity = active ? 0.5 + 0.5 * progress : 0.65;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -21942,7 +22014,7 @@ function EventNode({
           "text",
           {
             x: 26,
-            y: 128,
+            y: 128 - \u7E70\u308A\u4E0A\u3052,
             fontSize: 21,
             fill: "var(--cdl-text-dim, #5a6270)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
@@ -21958,7 +22030,8 @@ function FunctionNode({ node, active }) {
   const stroke = nodeAccent(node, active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-tone-teal, #2f8770)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("function");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -21990,7 +22063,7 @@ function FunctionNode({ node, active }) {
         children: node.title
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 126, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 126 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
   ] });
 }
 var ROW_GLYPH_HALF = 7;
@@ -22025,7 +22098,8 @@ function StorageNode({
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow || rows.length > 0 ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("storage");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE - \u7E70\u308A\u4E0A\u3052, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
   const splits = rows.map((r) => splitRow(r));
   const leftMaxWidth = splits.reduce((m, s) => Math.max(m, displayWidth(s.left)), 0);
   const rightColX = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX + STORAGE_COL_GAP_PX;
@@ -22062,7 +22136,7 @@ function StorageNode({
       {
         "data-cdl-role": "node-subtitle",
         x: ROW_PAD_X_PX,
-        y: SUBTITLE_BASELINE,
+        y: SUBTITLE_BASELINE - \u7E70\u308A\u4E0A\u3052,
         fontSize: SUBTITLE_FONT,
         fill: "var(--cdl-text-dim, #5a6270)",
         children: node.subtitle
@@ -22380,9 +22454,10 @@ function GenericNode({
   const textAnchor = centered ? "middle" : "start";
   const textX = centered ? w / 2 : 20;
   const cylinderShift = genericTextShift(node.kind);
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow || centered ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(node.kind, hasRows);
   const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows);
-  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - \u7E70\u308A\u4E0A\u3052;
+  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift - \u7E70\u308A\u4E0A\u3052;
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
   const dominantBaseline = centered ? "middle" : void 0;