@cardenelabs/cdl 0.76.0 → 0.77.0

package/dist/react.js

@@ -362,7 +362,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` の課題の番号 */
@@ -589,7 +596,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",
@@ -2876,6 +2883,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;
@@ -12720,6 +12728,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,
@@ -12777,6 +12790,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}`;
@@ -12855,19 +12873,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__ */ 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"
       }
@@ -13070,6 +13088,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;
@@ -13111,19 +13133,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__ */ 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"
       }
@@ -15900,6 +15922,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;
@@ -15909,7 +15932,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;
@@ -15951,7 +15974,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",
@@ -16042,6 +16065,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 },
@@ -16064,14 +16088,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;
@@ -16107,9 +16130,10 @@ function ShapeCodeBlockNode({ node, active, lang }) {
       /* @__PURE__ */ 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",
@@ -16131,9 +16155,10 @@ function ShapeCodeBlockNode({ node, active, lang }) {
           /* @__PURE__ */ 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",
@@ -16141,12 +16166,13 @@ function ShapeCodeBlockNode({ node, active, lang }) {
             }
           ),
           toks.map((t, j) => {
-            const rect = /* @__PURE__ */ jsx(
+            const \u63CF\u304F\u5E45 = Math.min(t.w * \u500D, x + w - \u4F59\u767D * \u500D - cursor);
+            const rect = \u63CF\u304F\u5E45 > 0 ? /* @__PURE__ */ 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,
@@ -16154,7 +16180,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
                 stroke: "none"
               },
               j
-            );
+            ) : null;
             cursor += (t.w + \u9699\u9593) * \u500D;
             return rect;
           })
@@ -16199,21 +16225,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;
@@ -16296,7 +16324,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",
@@ -16344,7 +16372,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",
@@ -16368,7 +16396,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",