@cardenelabs/cdl 0.72.0 → 0.74.0

package/dist/react.cjs

@@ -2872,6 +2872,66 @@ function textWidth(s, size, \u5B57\u9001\u308A = 0) {
   }
   return \u5E45 * size + \u5B57\u9001\u308A * \u5B57\u6570;
 }
+
+// src/kinds/row-align.ts
+var GENERIC_ROW_LEFT_SIZE_PX = 18;
+var GENERIC_ROW_RIGHT_SIZE_PX = 21;
+var MONO_ADVANCE_RATIO = 0.6;
+var STORAGE_CHAR_ADVANCE_PX = 26 * MONO_ADVANCE_RATIO;
+var ROW_PAD_X_PX = 26;
+var ROW_COL_GAP_PX = 16;
+var STORAGE_COL_GAP_PX = 32;
+var ROW_RIGHT_PAD_PX = 26;
+var DELIMITERS = [" -> ", " \u2192 ", " = ", ": ", ":"];
+function splitRow(row) {
+  for (const d of DELIMITERS) {
+    const idx = row.indexOf(d);
+    if (idx > 0) {
+      return {
+        left: row.slice(0, idx).trim(),
+        right: row.slice(idx + d.length).trim(),
+        split: true
+      };
+    }
+  }
+  return { left: row.trim(), right: "", split: false };
+}
+function rowColumnWidth(text, size, mono) {
+  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size);
+}
+function displayWidth(text) {
+  let w = 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0) ?? 0;
+    w += code >= 32 && code <= 126 ? 1 : 2;
+  }
+  return w;
+}
+function \u6841\u3067\u5272\u308B(text, \u6841) {
+  let w = 0;
+  let \u53D6\u3063\u305F = "";
+  for (const ch of text) {
+    const code = ch.codePointAt(0) ?? 0;
+    const \u5B57\u306E\u6841 = code >= 32 && code <= 126 ? 1 : 2;
+    if (w + \u5B57\u306E\u6841 > \u6841) break;
+    w += \u5B57\u306E\u6841;
+    \u53D6\u3063\u305F += ch;
+  }
+  return [\u53D6\u3063\u305F, text.slice(\u53D6\u3063\u305F.length)];
+}
+function \u6841\u3067\u7701\u304F(text, \u4E0A\u9650) {
+  if (displayWidth(text) <= \u4E0A\u9650) return text;
+  return `${\u6841\u3067\u5272\u308B(text, \u4E0A\u9650 - 1)[0]}\u2026`;
+}
+function requiredRowsWidth(rows, kind) {
+  if (!rows || rows.length === 0) return 0;
+  const splits = rows.map(splitRow);
+  const \u4E00\u756A\u5E83\u3044 = (\u53D6\u308B) => splits.reduce((m, s) => Math.max(m, \u53D6\u308B(s)), 0);
+  const storage = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, 26, true)) + STORAGE_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, 26, true)) + ROW_RIGHT_PAD_PX;
+  const generic = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)) + ROW_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true)) + ROW_RIGHT_PAD_PX;
+  if (kind === void 0) return Math.ceil(Math.max(storage, generic));
+  return Math.ceil(kind === "storage" ? storage : generic);
+}
 var TITLE_MAX = 18;
 var TITLE_MIN = 9;
 var TITLE_RATIO = 0.17;
@@ -3038,20 +3098,52 @@ function fitLabel(band, block, pos) {
   };
 }
 function fitArt(region, extent, art) {
+  const \u7D44\u3080 = (k) => typeof art === "function" ? art(k) : art;
   const \u7E26 = extent.\u4E0A + extent.\u4E0B;
   const \u6A2A = extent.\u5DE6 + extent.\u53F3;
-  if (!Number.isFinite(\u7E26) || !Number.isFinite(\u6A2A) || \u7E26 <= 0 || \u6A2A <= 0) return art;
+  if (!Number.isFinite(\u7E26) || !Number.isFinite(\u6A2A) || \u7E26 <= 0 || \u6A2A <= 0) return \u7D44\u3080(1);
   if (!Number.isFinite(region.availH) || !Number.isFinite(region.availW) || region.availH <= 0 || region.availW <= 0) {
-    return art;
+    return \u7D44\u3080(1);
   }
   const s = Math.min(1, region.availH / \u7E26, region.availW / \u6A2A);
-  if (!Number.isFinite(s) || s <= 0) return art;
+  if (!Number.isFinite(s) || s <= 0) return \u7D44\u3080(1);
   const \u7D75cx = region.cx + (extent.\u53F3 - extent.\u5DE6) / 2;
   const \u7D75cy = region.cy + (extent.\u4E0B - extent.\u4E0A) / 2;
   const dx = region.cx - s * \u7D75cx;
   const dy = region.cy - s * \u7D75cy;
-  if (s >= 1 && dx === 0 && dy === 0) return art;
-  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${dx} ${dy}) scale(${s})`, children: art });
+  if (s >= 1 && dx === 0 && dy === 0) return \u7D44\u3080(1);
+  return (
+    /*
+     * 包みに印を付ける (#886)。 **`scale(` を持つ変換は他にもある** = `event` は目立たせる
+     * ための脈動を `scale(0.78)` から `scale(1)` で描き、絵を箱に収める縮小ではない。
+     * 祖先の変換を正規表現で見る形だと、その脈動まで「絵の縮小」 として数える。
+     */
+    /* @__PURE__ */ jsxRuntime.jsx("g", { "data-cdl-art-fit": "1", transform: `translate(${dx} ${dy}) scale(${s})`, children: \u7D44\u3080(s) })
+  );
+}
+var \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
+function \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, letterSpacing = 0) {
+  return Math.max(
+    displayWidth(text) * size * MONO_ADVANCE_RATIO,
+    textWidth(text, size, letterSpacing)
+  );
+}
+function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089) {
+  const \u623B\u3057 = Number.isFinite(\u500D\u7387) && \u500D\u7387 > 0 ? 1 / \u500D\u7387 : 1;
+  let \u4E0A\u9650 = Number.POSITIVE_INFINITY;
+  for (const \u5B572 of \u5B57\u3089) {
+    if (!(Number.isFinite(\u5B572.size) && \u5B572.size > 0)) continue;
+    const { \u5E45, \u9AD8\u3055 } = \u5B572.\u5E2F;
+    if (Number.isFinite(\u9AD8\u3055) && \u9AD8\u3055 > 0) {
+      \u4E0A\u9650 = Math.min(\u4E0A\u9650, \u9AD8\u3055 * \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / \u5B572.size);
+    }
+    const \u5B9F\u5E45 = \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(\u5B572.text, \u5B572.size, \u5B572.letterSpacing ?? 0);
+    if (Number.isFinite(\u5E45) && \u5E45 > 0 && \u5B9F\u5E45 > 0) {
+      \u4E0A\u9650 = Math.min(\u4E0A\u9650, \u5E45 / \u5B9F\u5E45);
+    }
+  }
+  if (!Number.isFinite(\u4E0A\u9650)) return 1;
+  return Math.max(1, Math.min(\u623B\u3057, \u4E0A\u9650));
 }
 
 // src/kinds/compact-title.ts
@@ -9606,66 +9698,6 @@ function recomputeContainedLanes(lanes, nodes) {
   });
 }
 
-// src/kinds/row-align.ts
-var GENERIC_ROW_LEFT_SIZE_PX = 18;
-var GENERIC_ROW_RIGHT_SIZE_PX = 21;
-var MONO_ADVANCE_RATIO = 0.6;
-var STORAGE_CHAR_ADVANCE_PX = 26 * MONO_ADVANCE_RATIO;
-var ROW_PAD_X_PX = 26;
-var ROW_COL_GAP_PX = 16;
-var STORAGE_COL_GAP_PX = 32;
-var ROW_RIGHT_PAD_PX = 26;
-var DELIMITERS = [" -> ", " \u2192 ", " = ", ": ", ":"];
-function splitRow(row) {
-  for (const d of DELIMITERS) {
-    const idx = row.indexOf(d);
-    if (idx > 0) {
-      return {
-        left: row.slice(0, idx).trim(),
-        right: row.slice(idx + d.length).trim(),
-        split: true
-      };
-    }
-  }
-  return { left: row.trim(), right: "", split: false };
-}
-function rowColumnWidth(text, size, mono) {
-  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size);
-}
-function displayWidth(text) {
-  let w = 0;
-  for (const ch of text) {
-    const code = ch.codePointAt(0) ?? 0;
-    w += code >= 32 && code <= 126 ? 1 : 2;
-  }
-  return w;
-}
-function \u6841\u3067\u5272\u308B(text, \u6841) {
-  let w = 0;
-  let \u53D6\u3063\u305F = "";
-  for (const ch of text) {
-    const code = ch.codePointAt(0) ?? 0;
-    const \u5B57\u306E\u6841 = code >= 32 && code <= 126 ? 1 : 2;
-    if (w + \u5B57\u306E\u6841 > \u6841) break;
-    w += \u5B57\u306E\u6841;
-    \u53D6\u3063\u305F += ch;
-  }
-  return [\u53D6\u3063\u305F, text.slice(\u53D6\u3063\u305F.length)];
-}
-function \u6841\u3067\u7701\u304F(text, \u4E0A\u9650) {
-  if (displayWidth(text) <= \u4E0A\u9650) return text;
-  return `${\u6841\u3067\u5272\u308B(text, \u4E0A\u9650 - 1)[0]}\u2026`;
-}
-function requiredRowsWidth(rows, kind) {
-  if (!rows || rows.length === 0) return 0;
-  const splits = rows.map(splitRow);
-  const \u4E00\u756A\u5E83\u3044 = (\u53D6\u308B) => splits.reduce((m, s) => Math.max(m, \u53D6\u308B(s)), 0);
-  const storage = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, 26, true)) + STORAGE_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, 26, true)) + ROW_RIGHT_PAD_PX;
-  const generic = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)) + ROW_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true)) + ROW_RIGHT_PAD_PX;
-  if (kind === void 0) return Math.ceil(Math.max(storage, generic));
-  return Math.ceil(kind === "storage" ? storage : generic);
-}
-
 // src/layout/head-label.ts
 var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
 var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
@@ -17305,6 +17337,11 @@ var SMART_CONTRACT_W = 220;
 var SMART_CONTRACT_H = 220;
 var BLOCK_W = 240;
 var BLOCK_H = 220;
+var \u898B\u51FA\u3057\u306E\u5B57 = 13;
+var \u540D\u306E\u5B57 = 10.5;
+var \u5024\u306E\u5B57 = 11;
+var \u884C\u306E\u9593\u9694 = 22;
+var \u898B\u51FA\u3057\u306E\u5E2F = 32;
 var BLOCK_SHADOW = 6;
 var NFT_W = 220;
 var NFT_H = 240;
@@ -17451,7 +17488,7 @@ function ShapeSmartContractNode({ node, active, lang }) {
     bottomLabel2(node, r.cx, r.label)
   ] });
 }
-var \u5B57\u306E\u5E45 = (text, size) => Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
+var \u5B57\u306E\u5E45 = (text, size) => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size);
 var BLOCK_DEFAULT_FIELDS = [
   { key: "hash", label: "blockchainBlock.hash", value: { text: "0xaf31c9d2..." } },
   { key: "prev", label: "blockchainBlock.prev", value: { text: "0x7b3f92c1..." } },
@@ -17480,23 +17517,40 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
     };
   });
   const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
-  const art = /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "blockchain-block-title", x: x + 14, y: y + 22, fontSize: 13, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, 13, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
-    fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 14, y: y + 54 + i * 22, fontSize: 10.5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, x: x + bw - 14, y: y + 54 + i * 22, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, 11, bw - 28 - \u5B57\u306E\u5E45(f.label, 10.5) - 8, \u5B57\u306E\u5E45) }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + 14, y1: y + 60 + i * 22, x2: x + bw - 14, y2: y + 60 + i * 22, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
-    ] }, i)),
-    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 22, height: 18, rx: 3, fill: "none", stroke: frame.stroke, strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 22, y1: 9, x2: 42, y2: 9, stroke: frame.stroke, strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 42, y: 0, width: 22, height: 18, rx: 3, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.5, stroke: frame.stroke, strokeWidth: 1.5 })
-    ] })
-  ] });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: \u898B\u51FA\u3057, size: \u898B\u51FA\u3057\u306E\u5B57, \u5E2F: { \u5E45: \u898B\u51FA\u3057\u306E\u5E45, \u9AD8\u3055: \u898B\u51FA\u3057\u306E\u5E2F } },
+    ...fields.flatMap((f) => [
+      { text: f.label, size: \u540D\u306E\u5B57, \u5E2F: { \u5E45: bw - 28, \u9AD8\u3055: \u884C\u306E\u9593\u9694 } },
+      {
+        text: f.value,
+        size: \u5024\u306E\u5B57,
+        \u5E2F: { \u5E45: bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5B57) - 8, \u9AD8\u3055: \u884C\u306E\u9593\u9694 }
+      }
+    ])
+  ];
+  const art = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u984C\u306E\u5927\u304D\u3055 = \u898B\u51FA\u3057\u306E\u5B57 * \u500D;
+    const \u540D\u306E\u5927\u304D\u3055 = \u540D\u306E\u5B57 * \u500D;
+    const \u5024\u306E\u5927\u304D\u3055 = \u5024\u306E\u5B57 * \u500D;
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
+      fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-counter-scaled": "1", x: x + 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u540D\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, \u5024\u306E\u5927\u304D\u3055, bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5927\u304D\u3055) - 8, \u5B57\u306E\u5E45) }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + 14, y1: y + 60 + i * \u884C\u306E\u9593\u9694, x2: x + bw - 14, y2: y + 60 + i * \u884C\u306E\u9593\u9694, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
+      ] }, i)),
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 22, height: 18, rx: 3, fill: "none", stroke: frame.stroke, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 22, y1: 9, x2: 42, y2: 9, stroke: frame.stroke, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 42, y: 0, width: 22, height: 18, rx: 3, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.5, stroke: frame.stroke, strokeWidth: 1.5 })
+      ] })
+    ] });
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("g", { children: fitArt(r, blockchainBlockExtent(frame.strokeWidth), art) });
 }
 function ShapeBlockchainNode({ node, active }) {