@cardenelabs/cdl 0.56.0 → 0.57.0

package/CHANGELOG.md

@@ -5,6 +5,22 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.57.0] - 2026-09-11
+
+### Changed
+
+- **箱の説明文が幅に入らない時、字を縮めずに 2 行へ折るようにした** (#843)
+
+  説明文 (`subtitle`) は幅に入らないと字を 21 から 11 まで小さくして 1 行に収めていた。 下限まで縮むと、
+  同じ図の中で同じ役割の字が 2 倍近く違って見える (実測 = 状態図で 待機 の説明文が 19、読み込み が 11)。
+
+  読みやすさの下限 (12) を割る時は 2 行に折る。 折る位置は ` / ` のような区切りを優先し、無ければ空白、
+  それも無ければ字の境目で割る。 2 行にしても入らない時と、2 行を置く余白が無い低い箱は、今までどおり
+  縮めて 1 行で描く。
+
+  箱の幅と高さは変えていない。 幅を広げると状態を横に並べる図が横長になり、器に収めた時に題名の方が
+  小さくなるため (#357 で幅を絞った経緯)。 2 行は、説明文の下の余白と題名との間に収める。
+
 ## [0.56.0] - 2026-09-11
 
 ### Changed
@@ -2509,7 +2525,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.56.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.57.0...HEAD
+[0.57.0]: https://github.com/cardene777/cdl/compare/v0.56.0...v0.57.0
 [0.56.0]: https://github.com/cardene777/cdl/compare/v0.55.0...v0.56.0
 [0.55.0]: https://github.com/cardene777/cdl/compare/v0.54.0...v0.55.0
 [0.54.0]: https://github.com/cardene777/cdl/compare/v0.53.0...v0.54.0

package/dist/index.cjs

@@ -23387,6 +23387,55 @@ function ActorNode({ node, active, value }) {
     )
   ] });
 }
+
+// src/kinds/subtitle-lines.ts
+var SUBTITLE_SIZE = 21;
+var SUBTITLE_MIN_SIZE = 12;
+var \u884C\u9001\u308A\u306E\u500D\u7387 = 1.2;
+function \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(text, maxWidth, opts) {
+  const \u76EE\u6A19 = opts.targetSize ?? SUBTITLE_SIZE;
+  const \u8AAD\u3081\u308B\u5927\u304D\u3055 = fitTextSize(text, maxWidth, \u76EE\u6A19, SUBTITLE_MIN_SIZE);
+  if (estimateTextWidth(text, \u8AAD\u3081\u308B\u5927\u304D\u3055) <= maxWidth) return { size: \u8AAD\u3081\u308B\u5927\u304D\u3055, lines: [text] };
+  if (opts.\u4E8C\u884C\u307E\u3067) {
+    for (let size = \u76EE\u6A19; size >= SUBTITLE_MIN_SIZE; size -= 1) {
+      const \u884C = \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size);
+      if (\u884C) return { size, lines: \u884C };
+    }
+  }
+  return { size: fitTextSize(text, maxWidth, \u76EE\u6A19, MIN_TEXT_SIZE), lines: [text] };
+}
+function \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size) {
+  let \u4E00\u756A\u826F\u3044;
+  let \u4E00\u756A\u72ED\u3044 = Infinity;
+  for (const [\u5DE6, \u53F3] of \u5272\u308B\u5019\u88DC(text)) {
+    const \u5E45 = Math.max(estimateTextWidth(\u5DE6, size), estimateTextWidth(\u53F3, size));
+    if (\u5E45 > maxWidth || \u5E45 >= \u4E00\u756A\u72ED\u3044) continue;
+    \u4E00\u756A\u72ED\u3044 = \u5E45;
+    \u4E00\u756A\u826F\u3044 = [\u5DE6, \u53F3];
+  }
+  return \u4E00\u756A\u826F\u3044;
+}
+function \u5272\u308B\u5019\u88DC(text) {
+  const \u533A\u5207\u308A = [];
+  for (const m of text.matchAll(/\s*\/\s*/g)) {
+    \u533A\u5207\u308A.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
+  }
+  if (\u533A\u5207\u308A.length > 0) return \u533A\u5207\u308A.filter(\u5165\u3063\u3066\u3044\u308B);
+  const \u7A7A\u767D = [];
+  for (const m of text.matchAll(/\s+/g)) {
+    \u7A7A\u767D.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
+  }
+  if (\u7A7A\u767D.length > 0) return \u7A7A\u767D.filter(\u5165\u3063\u3066\u3044\u308B);
+  const \u5B57 = [];
+  const \u4E26\u3073 = [...text];
+  for (let i = 1; i < \u4E26\u3073.length; i += 1) {
+    \u5B57.push([\u4E26\u3073.slice(0, i).join(""), \u4E26\u3073.slice(i).join("")]);
+  }
+  return \u5B57.filter(\u5165\u3063\u3066\u3044\u308B);
+}
+function \u5165\u3063\u3066\u3044\u308B([\u5DE6, \u53F3]) {
+  return \u5DE6 !== "" && \u53F3 !== "";
+}
 function CardNode({ node, active }) {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
@@ -23411,7 +23460,12 @@ function CardNode({ node, active }) {
   const initialTitleSize = compact ? 20 : 24;
   const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
   const textAnchor = compact ? "middle" : "start";
-  const subtitleSize = node.subtitle ? fitTextSize(node.subtitle, availableW, 21, 11) : 21;
+  const subtitleY = 124 - \u305A\u3089\u3057;
+  const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
+  const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT2 > titleY + titleSize * DESCENT2 && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT2 <= node.h - 4;
+  const \u8AAC\u660E = node.subtitle ? \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(node.subtitle, availableW, { \u4E8C\u884C\u307E\u3067: \u4E8C\u884C\u304C\u5165\u308B }) : void 0;
+  const subtitleSize = \u8AAC\u660E?.size ?? 21;
+  const \u884C\u9001\u308A = subtitleSize * \u884C\u9001\u308A\u306E\u500D\u7387;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -23441,7 +23495,17 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124 - \u305A\u3089\u3057, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    !compact && \u8AAC\u660E?.lines.map((\u884C, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: 26,
+        y: subtitleY + (i - (\u8AAC\u660E.lines.length - 1) / 2) * \u884C\u9001\u308A,
+        fontSize: subtitleSize,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: \u884C
+      },
+      `sub-${i}`
+    )),
     \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {