@cardenelabs/cdl 0.76.0 → 0.77.0

package/CHANGELOG.md

@@ -5,6 +5,39 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.77.0] - 2026-09-26
+
+### Fixed
+
+- **自分で中身を縮める種別の字が読める大きさを保つようになった** (#891 / #893)
+
+  箱の大きさから自分で倍率を出して中身へ掛ける種別があり、その倍率を字にもそのまま
+  掛けていた。 120x110 の箱では輪の中央の字が 3.00 world、code の行番号が 4.33 world まで
+  落ちていた。
+
+  **どちらの契約にも属さない隙間だった**。 包みを持たないので 0.74.0 から 0.76.0 で入れた
+  打ち消しに掛からず、縮まない箱では下限を満たすので 0.76.0 の検査にも掛からない。
+
+  対象は実物から導いた。 包みを持たないのに字が縮む種別を 2 つの基準の箱で数えると
+  5 種別あり、直し方は何が倍率を決めていたかで分かれる。
+
+  | 種別 | 倍率を決めていたもの | 直した所 | 変更前 | 変更後 |
+  |---|---|---|---|---|
+  | `shape-code-block` | 飾りの帯の長さ | 幅を倍率から外し、本体の右端で帯を切る | 4.33 | 9.56 |
+  | `shape-kanban-card` | 上段の `ID` と状態の札 | 上段の自然幅を下限から逆算 | 6.73 | 8.11 |
+  | `shape-terminal` | いちばん長い出力の行 | 行を短くし、名札の指定を中の行へ揃える | 7.07 | 8.03 |
+  | `chart-pie` | 半径に比例した指定 | 下限まで戻し、穴に入らない時だけ割る | 3.00 | 8.00 |
+  | `chart-gauge` | 同上 | 変更なし (下限を満たす) | 9.00 | 9.00 |
+
+  **見え方が変わる所**。 `shape-code-block` は狭い箱で行の帯が右端で切れる (実際の editor と
+  同じ形)。 `shape-kanban-card` は札の余白が 14 から 12、状態の札が 70 から 62 になる。
+  `shape-terminal` の出力の行が短くなり (`→ 12 chunks in 1.8s` から `→ 12 chunks`)、
+  帯の名札が中の行と同じ大きさになる。
+
+  行番号 (10.5) と担当者の頭文字 (10) の指定を 11 に上げた。 半径 9 の丸の内側は一辺 12.7 で、
+  指定 11 の字 (9.46 x 10.7) が入る。 0.76.0 で「上げると丸から出る」 と据え置いたのは
+  実測していなかった。
+
 ## [0.76.0] - 2026-09-26
 
 ### Changed
@@ -3171,7 +3204,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.76.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.77.0...HEAD
+[0.77.0]: https://github.com/cardene777/cdl/compare/v0.76.0...v0.77.0
 [0.76.0]: https://github.com/cardene777/cdl/compare/v0.75.0...v0.76.0
 [0.75.0]: https://github.com/cardene777/cdl/compare/v0.74.0...v0.75.0
 [0.74.0]: https://github.com/cardene777/cdl/compare/v0.73.0...v0.74.0

package/dist/index.cjs

@@ -359,7 +359,14 @@ function resolveLang(value) {
 }
 var en = {
   /** `shape-terminal` の 2 行目 (命令の出力) */
-  "terminal.output": "\u2192 12 chunks in 1.8s",
+  /*
+   * `shape-terminal` の出力の行。
+   *
+   * **いちばん長い行が絵の倍率を決める** (#891)。 端末の中身は自分の座標で組んでから箱へ
+   * 収めるので、この行が長いほど全部の字が小さくなる。 120x110 の箱では 20 字の版で
+   * 7.71 world まで落ちていた。
+   */
+  "terminal.output": "\u2192 12 chunks",
   /** `shape-code-block` の札の file 名 */
   "codeBlock.fileName": "utils.ts",
   /** `shape-kanban-card` の課題の番号 */
@@ -586,7 +593,7 @@ var en = {
   "readout.trafficLight.green": "green"
 };
 var ja = {
-  "terminal.output": "\u2192 1.8 \u79D2\u3067\u5B8C\u4E86",
+  "terminal.output": "\u2192 12 \u500B\u3092\u7D50\u5408",
   "codeBlock.fileName": "\u5171\u901A.ts",
   "kanbanCard.id": "#1111",
   "kanbanCard.status": "\u9032\u884C\u4E2D",
@@ -1661,6 +1668,7 @@ function textWidth(s, size, \u5B57\u9001\u308A = 0) {
   }
   return \u5E45 * size + \u5B57\u9001\u308A * \u5B57\u6570;
 }
+var \u7E2E\u3093\u3060\u7D75\u306E\u5B57\u306E\u4E0B\u9650 = 8;
 
 // src/kinds/row-align.ts
 var GENERIC_ROW_LEFT_SIZE_PX = 18;
@@ -25260,6 +25268,11 @@ function \u5272\u5408\u8868\u8A18(frac) {
   const v = Math.round(frac * 1e3) / 10;
   return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
 }
+var \u7A74\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
+function \u4E2D\u592E\u306E\u5B57(\u6BD4\u4F8B\u3057\u305F\u5927\u304D\u3055, \u7A74\u306E\u534A\u5F84, \u6587) {
+  const \u5165\u308B\u5927\u304D\u3055 = \u7A74\u306E\u534A\u5F84 * 2 * \u7A74\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / Math.max(textWidth(\u6587, 1), 1e-6);
+  return Math.min(Math.max(\u6BD4\u4F8B\u3057\u305F\u5927\u304D\u3055, \u7E2E\u3093\u3060\u7D75\u306E\u5B57\u306E\u4E0B\u9650), \u5165\u308B\u5927\u304D\u3055);
+}
 function ChartPieNode({
   node,
   active,
@@ -25317,6 +25330,11 @@ function ChartPieNode({
   const cx = node.w / 2;
   const cy = PAD_TOP2 + chartAreaH / 2;
   const \u524D\u306Eslices = \u524D\u3042\u308A ? \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u524D\u306E\u5916\u534A\u5F84, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5272\u5408) : [];
+  const \u7A74 = \u524D\u3042\u308A ? \u524D\u306E\u5185\u534A\u5F84 : \u5916\u306E\u5185\u534A\u5F84;
+  const \u5408\u8A08\u306E\u6587 = \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total));
+  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.26), \u7A74, \u5408\u8A08\u306E\u6587);
+  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.12), \u7A74, "\u5408\u8A08");
+  const \u5408\u8A08\u306E\u4E0B = Math.max(Math.round(radius * 0.2), \u5408\u8A08\u306E\u5B57 * 0.25 + \u898B\u51FA\u3057\u306E\u5B572 * 0.8);
   const slices = \u8F2A\u3092\u7D44\u3080(data, cx, cy, radius, \u5916\u306E\u5185\u534A\u5F84, \u4ECA\u306E\u5272\u5408);
   const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
@@ -25395,19 +25413,19 @@ function ChartPieNode({
         x: cx,
         y: cy - 2,
         textAnchor: "middle",
-        fontSize: Math.round(radius * 0.26),
+        fontSize: \u5408\u8A08\u306E\u5B57,
         fontWeight: 600,
         fill: "var(--cdl-text, #1a1f2a)",
-        children: \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total))
+        children: \u5408\u8A08\u306E\u6587
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
         x: cx,
-        y: cy + Math.round(radius * 0.2),
+        y: cy + \u5408\u8A08\u306E\u4E0B,
         textAnchor: "middle",
-        fontSize: Math.round(radius * 0.12),
+        fontSize: \u898B\u51FA\u3057\u306E\u5B572,
         fill: "var(--cdl-text-dim, #5a6270)",
         children: "\u5408\u8A08"
       }
@@ -25610,6 +25628,10 @@ function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing,
   const \u5185\u534A\u5F84 = R * 0.58;
   const cx = PAD + R;
   const cy = node.h / 2;
+  const \u5408\u8A08\u306E\u6587 = \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
+  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.26), \u5185\u534A\u5F84, \u5408\u8A08\u306E\u6587);
+  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.12), \u5185\u534A\u5F84, "\u5408\u8A08");
+  const \u5408\u8A08\u306E\u4E0B = Math.max(Math.round(R * 0.2), \u5408\u8A08\u306E\u5B57 * 0.25 + \u898B\u51FA\u3057\u306E\u5B572 * 0.8);
   const \u8868\u5DE6 = node.w - PAD - \u8868\u5E45;
   const \u53F3\u7AEF = node.w - PAD;
   const \u5272\u5408\u53F3 = \u53F3\u7AEF - \u5B9F\u6570\u5E45 - 24;
@@ -25651,19 +25673,19 @@ function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing,
         x: cx,
         y: cy - 2,
         textAnchor: "middle",
-        fontSize: Math.round(R * 0.26),
+        fontSize: \u5408\u8A08\u306E\u5B57,
         fontWeight: 600,
         fill: "var(--cdl-text, #1a1f2a)",
-        children: \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)))
+        children: \u5408\u8A08\u306E\u6587
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
         x: cx,
-        y: cy + Math.round(R * 0.2),
+        y: cy + \u5408\u8A08\u306E\u4E0B,
         textAnchor: "middle",
-        fontSize: Math.round(R * 0.12),
+        fontSize: \u898B\u51FA\u3057\u306E\u5B572,
         fill: "var(--cdl-text-dim, #5a6270)",
         children: "\u5408\u8A08"
       }
@@ -28440,6 +28462,7 @@ function ShapeTerminalNode({ node, active, lang }) {
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
   const \u4F59\u767D = 16;
   const \u5E2F = 28;
+  const \u5E2F\u306E\u5B57 = 12.5;
   const \u89D2 = 10;
   const \u5148\u982D = 26;
   const \u884C\u9593 = 22;
@@ -28449,7 +28472,7 @@ function ShapeTerminalNode({ node, active, lang }) {
       { \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" },
       { \u5DE6: 30, \u5B57: 12.5, \u8272: "#e6edf3", \u6587: "pnpm build" }
     ],
-    [{ \u5DE6: 16, \u5B57: 12, \u8272: "#8b95a5", \u6587: \u5B57\u5F15("terminal.output") }],
+    [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#8b95a5", \u6587: \u5B57\u5F15("terminal.output") }],
     [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" }]
   ];
   const \u81EA\u7136\u5E45 = Math.max(...\u884C.flat().map((c) => c.\u5DE6 + \u7B49\u5E45\u306E\u6841(c.\u6587) * MONO_ADVANCE * c.\u5B57)) + \u4F59\u767D;
@@ -28491,7 +28514,7 @@ function ShapeTerminalNode({ node, active, lang }) {
         {
           x: x + w / 2,
           y: y + barH / 2 + 4 * \u500D,
-          fontSize: 11 * \u500D,
+          fontSize: \u5E2F\u306E\u5B57 * \u500D,
           fontFamily: lineFont,
           textAnchor: "middle",
           fill: "#7a8290",
@@ -28582,6 +28605,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
   const \u592A\u3055 = 9;
   const \u9699\u9593 = 6;
   const \u6301\u3061\u4E0A\u3052 = 8;
+  const \u884C\u756A\u53F7\u306E\u5B57 = 11;
   const lines = [
     [
       { c: "#c678dd", w: 40 },
@@ -28604,14 +28628,13 @@ function ShapeCodeBlockNode({ node, active, lang }) {
       { c: "#e6edf3", w: 40 }
     ]
   ];
-  const \u6700\u9577 = Math.max(
-    ...lines.map(
-      (tokens) => tokens.reduce((sum, token) => sum + token.w, 0) + \u9699\u9593 * (tokens.length - 1)
-    )
-  );
-  const \u81EA\u7136\u5E45 = \u6E9D + \u5B57\u4E0B\u3052 + \u6700\u9577 + \u4F59\u767D;
-  const \u81EA\u7136\u9AD8 = \u30BF\u30D6\u9AD8 + \u884C\u982D + \u884C\u9593 * (lines.length - 1) + Math.max(\u592A\u3055 - \u6301\u3061\u4E0A\u3052, 10.5 * DESCENT3);
-  const \u500D = Math.min(1, w / \u81EA\u7136\u5E45, bodyH / \u81EA\u7136\u9AD8);
+  const \u81EA\u7136\u9AD8 = \u30BF\u30D6\u9AD8 + \u884C\u982D + \u884C\u9593 * (lines.length - 1) + Math.max(\u592A\u3055 - \u6301\u3061\u4E0A\u3052, \u884C\u756A\u53F7\u306E\u5B57 * DESCENT3);
+  const \u500D = Math.min(1, bodyH / \u81EA\u7136\u9AD8);
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: \u5B57\u5F15("codeBlock.fileName"), size: 11, \u5E2F: { \u5E45: \u30BF\u30D6\u5E45, \u9AD8\u3055: \u30BF\u30D6\u9AD8 } },
+    { text: "1", size: \u884C\u756A\u53F7\u306E\u5B57, \u5E2F: { \u5E45: \u6E9D - \u6301\u3061\u4E0A\u3052, \u9AD8\u3055: \u884C\u9593 } }
+  ];
+  const \u500D\u8FD4\u3057 = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D, \u6253\u3061\u6D88\u3059\u5B57\u3089);
   const tabW = \u30BF\u30D6\u5E45 * \u500D;
   const tabH = \u30BF\u30D6\u9AD8 * \u500D;
   const \u4E38 = \u89D2 * \u500D;
@@ -28647,9 +28670,10 @@ function ShapeCodeBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
+          "data-cdl-counter-scaled": "1",
           x: x + tabW / 2,
           y: y + tabH / 2 + 4 * \u500D,
-          fontSize: 11 * \u500D,
+          fontSize: 11 * \u500D * \u500D\u8FD4\u3057,
           fontFamily: lineFont,
           textAnchor: "middle",
           fill: "#e6edf3",
@@ -28671,9 +28695,10 @@ function ShapeCodeBlockNode({ node, active, lang }) {
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
+              "data-cdl-counter-scaled": "1",
               x: x + gutterW - \u6301\u3061\u4E0A\u3052 * \u500D,
               y: codeY0 + i * lineH,
-              fontSize: 10.5 * \u500D,
+              fontSize: \u884C\u756A\u53F7\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057,
               fontFamily: lineFont,
               textAnchor: "end",
               fill: "#4a5266",
@@ -28681,12 +28706,13 @@ function ShapeCodeBlockNode({ node, active, lang }) {
             }
           ),
           toks.map((t, j) => {
-            const rect = /* @__PURE__ */ jsxRuntime.jsx(
+            const \u63CF\u304F\u5E45 = Math.min(t.w * \u500D, x + w - \u4F59\u767D * \u500D - cursor);
+            const rect = \u63CF\u304F\u5E45 > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               "rect",
               {
                 x: cursor,
                 y: codeY0 + i * lineH - \u6301\u3061\u4E0A\u3052 * \u500D,
-                width: t.w * \u500D,
+                width: \u63CF\u304F\u5E45,
                 height: \u592A\u3055 * \u500D,
                 rx: 2 * \u500D,
                 fill: t.c,
@@ -28694,7 +28720,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
                 stroke: "none"
               },
               j
-            );
+            ) : null;
             cursor += (t.w + \u9699\u9593) * \u500D;
             return rect;
           })
@@ -28739,21 +28765,23 @@ function ShapeKanbanCardNode({ node, active, lang }) {
   const w = Math.max(0, node.w - \u7DDA * 2 - \u5F71);
   const h = Math.max(0, node.h - \u7DDA * 2 - \u5F71);
   const \u5E2F\u9593\u4F59\u767D = 4;
-  const \u5DE6\u53F3\u4F59\u767D = 14;
-  const \u4E0A\u6BB5\u9699\u9593 = 8;
+  const \u5DE6\u53F3\u4F59\u767D = 12;
+  const \u4E0A\u6BB5\u9699\u9593 = 6;
   const \u512A\u5148\u5E2F\u9AD8 = 10;
   const ID\u6587 = \u5B57\u5F15("kanbanCard.id");
   const ID\u57FA\u6E96 = 30;
   const ID\u5B57 = 11;
   const ID\u5B57\u9593 = 1;
   const PILL\u4E0A = 20;
-  const PILL\u5E45 = 70;
+  const PILL\u5E45 = 62;
   const PILL\u9AD8 = 16;
   const PILL\u5B57 = 11;
+  const PILL\u5B57\u9593 = 0;
   const FOOTER\u4E0B = 22;
   const AVATAR\u4E2D\u5FC3Y = 4;
   const AVATAR\u534A\u5F84 = 9;
   const AVATAR\u67A0 = 1.5;
+  const AVATAR\u5B57 = 11;
   const \u540D\u524D\u5B57 = 17;
   const \u8AAC\u660E\u57FA\u6E96\u6BD4 = 20 / 17;
   const \u8AAC\u660E\u5B57\u6BD4 = 12 / 17;
@@ -28836,7 +28864,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
           y: pillY + 12 * \u500D,
           fontSize: PILL\u5B57 * \u500D,
           fontWeight: 700,
-          letterSpacing: 1 * \u500D,
+          letterSpacing: PILL\u5B57\u9593 * \u500D,
           textAnchor: "middle",
           fill: "#5a4a1a",
           fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -28884,7 +28912,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
           {
             x: 9 * \u500D,
             y: 8 * \u500D,
-            fontSize: 10 * \u500D,
+            fontSize: AVATAR\u5B57 * \u500D,
             fontWeight: 700,
             textAnchor: "middle",
             fill: "#ffffff",
@@ -28908,7 +28936,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
           {
             x: 23 * \u500D,
             y: 8 * \u500D,
-            fontSize: 10 * \u500D,
+            fontSize: AVATAR\u5B57 * \u500D,
             fontWeight: 700,
             textAnchor: "middle",
             fill: "#ffffff",