@cardenelabs/cdl 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -7,6 +7,26 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 予定 ... feedback を反映した patch / minor。
 
+## [0.13.1] - 2026-08-22
+
+### Fixed
+
+- **入りきらない名前を、切る前に字を小さくして収めるようにした** (#534)
+
+  `#526` で放射と木の箱に幅を見る処理を入れたが、入れたのは **切る方だけ** だった。 中心の
+  箱は幅 120 の固定で、使える幅 104 に全角 6 文字しか入らない。 全角 7 文字の名前
+  (`新プロジェクト`) が `新プロジェ…` になり、何の箱か読めなかった。
+
+  同じ描画側の `compact-title.ts` は入りきらない時に字を 1 ずつ小さくして収めている
+  (`fitTextSize`)。 放射と木の箱だけが縮めずに切っており、扱いが揃っていなかった。
+
+  幅に入るまで 1px ずつ小さくし、下限 (11px、 `compact-title.ts` の `MIN_SIZE` と同じ値) まで
+  縮めても入らない時だけ切る。 縮めるのは入るところまでで、一律に下限へは落とさない。
+
+  元の大きさで入る名前は字も文字も変わらない = 収まっていた図の見え方は動かない。
+
+  **箱の大きさは変えない**。 配置の計算が箱幅から出ているため。
+
 ## [0.13.0] - 2026-08-22
 
 ### Added
@@ -531,7 +551,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.13.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.13.1...HEAD
+[0.13.1]: https://github.com/cardene777/cdl/compare/v0.13.0...v0.13.1
 [0.13.0]: https://github.com/cardene777/cdl/compare/v0.12.1...v0.13.0
 [0.12.1]: https://github.com/cardene777/cdl/compare/v0.12.0...v0.12.1
 [0.12.0]: https://github.com/cardene777/cdl/compare/v0.11.0...v0.12.0

package/dist/index.cjs

@@ -20268,10 +20268,10 @@ function fitTextSize(text, maxWidth, targetSize, minSize) {
 }
 var COMPACT_MAX_H = 100;
 var COMPACT_PADDING_X = 16;
-var MIN_SIZE = 11;
+var MIN_TEXT_SIZE = 11;
 var ASCENT2 = 0.72;
 var DESCENT2 = 0.25;
-var MIN_BAND_H = MIN_SIZE * (ASCENT2 + DESCENT2);
+var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT2 + DESCENT2);
 var EYEBROW_BASELINE = 38;
 var EYEBROW_SIZE = 18;
 var EYEBROW_GAP = 8;
@@ -20293,10 +20293,10 @@ function titlePlacement(node, \u901A\u5E38, opts = {}) {
     node.title,
     Math.max(0, node.w - COMPACT_PADDING_X),
     \u901A\u5E38.size,
-    MIN_SIZE
+    MIN_TEXT_SIZE
   );
   const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT2 + DESCENT2));
-  const size = Math.max(MIN_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
+  const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
   const \u5B57\u9AD8 = size * (ASCENT2 + DESCENT2);
   const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT2 - DESCENT2) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT2 : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT2;
   return { x: node.w / 2, y, size, anchor: "middle" };
@@ -22026,6 +22026,12 @@ function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6
   }
   return `${\u51FA}${\u7701\u7565}`;
 }
+var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
+function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+  let size = fontSize;
+  while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
+  return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
+}
 function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
   const \u533A\u5207\u308A = Intl.Segmenter;
   if (typeof \u533A\u5207\u308A !== "function") return [...text];
@@ -22039,12 +22045,13 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
   const \u6B8B\u3059 = [...\u5019\u88DC];
   while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
   const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
-  const \u7DCF\u9AD8 = \u9AD8\u3055(\u6B8B\u3059);
+  const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
+  const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
   let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
-  return \u6B8B\u3059.map((r) => {
+  return \u53CE\u3081\u305F.map((r) => {
     const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
     \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
-    return { ...r, text: \u5E45\u3067\u5207\u308B(r.text, r.fontSize, \u5E45), dy };
+    return { ...r, dy };
   });
 }
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
@@ -22112,6 +22119,7 @@ function MindMapNode({
         n.h
       );
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, n.isRoot ? 15 : 13, \u4F7F\u3048\u308B\u5E45(n.w));
       const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -22127,7 +22135,7 @@ function MindMapNode({
             strokeWidth: n.isRoot ? 2 : 1.75
           }
         ),
-        \u88DC\u8DB3\u3042\u308A ? \u884C.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
+        \u53CE\u3081\u305F\u540D\u524D === void 0 ? \u884C.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "mind-node-subtitle" : void 0,
@@ -22144,17 +22152,18 @@ function MindMapNode({
         )) : (
           // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
           // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
-          // (実測 = 中心の箱で文字 163px に対し箱 120px)
+          // (実測 = 中心の箱で文字 163px に対し箱 120px)。
+          // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
               x: n.x,
               y: n.y + 5,
-              fontSize: n.isRoot ? 15 : 13,
+              fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
               fontWeight: n.isRoot ? 700 : 600,
               textAnchor: "middle",
               fill: \u6587\u5B57\u306E\u8272,
-              children: \u5E45\u3067\u5207\u308B(n.title, n.isRoot ? 15 : 13, \u4F7F\u3048\u308B\u5E45(n.w))
+              children: \u53CE\u3081\u305F\u540D\u524D.text
             }
           )
         )
@@ -22750,6 +22759,7 @@ function TreeNode({
         n.h
       );
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, isRoot ? 13 : 12, \u4F7F\u3048\u308B\u5E45(n.w));
       return /* @__PURE__ */ jsxRuntime.jsx(
         "g",
         {
@@ -22768,7 +22778,7 @@ function TreeNode({
                 fill: `url(#${gradientId})`
               }
             ),
-            \u88DC\u8DB3\u3042\u308A ? \u7BB1\u306E\u6587\u5B57({
+            \u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
               \u884C,
               x: n.w / 2,
               \u7BB1\u306E\u9AD8\u3055: n.h,
@@ -22782,11 +22792,11 @@ function TreeNode({
                 {
                   x: n.w / 2,
                   y: n.h / 2 + 5,
-                  fontSize: 13,
+                  fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
                   fontWeight: 700,
                   textAnchor: "middle",
                   fill: "var(--cdl-text-on-tone, #ffffff)",
-                  children: \u5E45\u3067\u5207\u308B(n.title, 13, \u4F7F\u3048\u308B\u5E45(n.w))
+                  children: \u53CE\u3081\u305F\u540D\u524D.text
                 }
               )
             )
@@ -22806,7 +22816,7 @@ function TreeNode({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
-            \u88DC\u8DB3\u3042\u308A ? \u7BB1\u306E\u6587\u5B57({
+            \u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
               \u884C,
               x: n.w / 2 + 2,
               \u7BB1\u306E\u9AD8\u3055: n.h,
@@ -22817,11 +22827,11 @@ function TreeNode({
               {
                 x: n.w / 2 + 2,
                 y: n.h / 2 + 4,
-                fontSize: 12,
+                fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
                 fontWeight: 600,
                 textAnchor: "middle",
                 fill: "var(--cdl-chip-text, #1a1f2a)",
-                children: \u5E45\u3067\u5207\u308B(n.title, 12, \u4F7F\u3048\u308B\u5E45(n.w))
+                children: \u53CE\u3081\u305F\u540D\u524D.text
               }
             )
           ] })
@@ -24526,15 +24536,15 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRu
   )
 ] });
 var LABEL_EYEBROW_SPACING = 2;
-function \u5E45\u306B\u53CE\u3081\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
+function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
   return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
 }
 function bottomLabel(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
@@ -25851,15 +25861,15 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
+function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
   return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
 }
 function bottomLabel3(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
@@ -26300,15 +26310,15 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
+function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
   return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
 }
 function bottomLabel4(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),